Update docs related to styles #62

magicmatatjahu · 2019-09-10T13:01:40Z

Description

Changes proposed in this pull request:

Update docs related to styles:
- remove doc described old way of styling component and create new one.
Update root Readme.md with information about supported version of spec and update with info about styling.

… Readme

aerfio · 2019-09-10T13:40:34Z

README.md

@@ -2,6 +2,8 @@

 [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)

+> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to upgrade to the latest AsyncAPI version using the [AsyncAPI converter](https://github.com/asyncapi/converter). If you need to convert documents on the fly, you may use the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.


maybe add that npm package up to some version supports v1? and after that only v2

we can make something like a v1 branch with old code before migration

@aerfio We can create tag for appropriate revision, so this will be easy.

aerfio · 2019-09-10T13:43:18Z

package.json

@@ -16,6 +16,7 @@
    "changelog": "lerna-changelog",
    "clean": "lerna clean",
    "start": "lerna exec --parallel -- npm run start",
+    "test": "cd library && npm test",


and maybe && cd .. to go back

Command concatenation has no effect on the host.

cool, didn't know that :D ignore this comment then

derberg · 2019-09-11T07:22:20Z

README.md

+
+---
+
+> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to upgrade to the latest AsyncAPI version using the [AsyncAPI converter](https://github.com/asyncapi/converter). If you need to convert documents on the fly, you may use the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.


imho this is not a big deal therefore separate warning exposed like that doesn't make much sense to me.
after overview we should just have a section called like supported versions and explain that this component supports 2.0, that people should convert and that is it,
mentioning old version of the component doesn't make much sense as we will not maintain it anyway

aerfio · 2019-09-11T07:17:20Z

docs/configuration/config-modification.md

 };

 const App = () => <AsyncApiComponent schema={schema} config={config} />;

 render(<App />, document.getElementById("root"));
 ```

-### TypeScript
+### JavaScript


I know we love TS, but pure JS example should be first, as it was before 😢

aerfio · 2019-09-11T07:18:48Z

docs/configuration/style-modification.md

+
+## Changing styles
+
+In the AsyncApi component we use pure css styling. Each component inside root component has a unique css class. Each class has form: `asyncapi__{ELEMENT}--{MODIFIER}`, where:


maybe each html tag has unique css class? from css perspective there are html tags/elements, not components

aerfio · 2019-09-11T07:22:49Z

docs/configuration/style-modification.md

+
+In the AsyncApi component we use pure css styling. Each component inside root component has a unique css class. Each class has form: `asyncapi__{ELEMENT}--{MODIFIER}`, where:
+
+- `{ELEMENT}` - is a name of specific element. Each element name is the concatenation of the names of the elements in which it is located. For example: `asyncapi__channel-header-title` is located in `header` HTML element of `channel` element. 


is located in `header` HTML element - is this always true? This may lead to situation in which someone does something like header.asyncapi__channel-header-title {}, but in reality there could be div element. Maybe instead of outlining things like that just say we follow BEM and link to it?

But here I described that title is in header, not *-title is HTML header.

aerfio · 2019-09-11T07:25:02Z

docs/configuration/style-modification.md

+
+For changing styles, you must create (or if you use [default](../../library/src/styles/fiori.css) style, modify) appropriate class.
+
+> **NOTE**: We recommend copy default styles from [here](../../library/src/styles/fiori.css) and changing them at its sole discretion.


copying

and did you really mean discretion?

aerfio · 2019-09-11T07:26:51Z

docs/development/guide.md

@@ -39,9 +39,8 @@ If you make any changes in the project structure, remember to update it.

 Use the following tools to develop the AsyncApi React component:


I've never liked this section, because it's not like we somehow use react or TS cli to develop directly, they are dependencies and are downloaded automatically, I'm not bringing them myself, it's misleading

to be discussed with @kazydek and @magicmatatjahu

I'm not insisting on keeping it if you think it is more of a hassle than help 🤷‍♀

derberg · 2019-09-11T08:01:39Z

library/src/constants.ts

 export const ONE_OF_FOLLOWING_MESSAGES_SUBSCRIBE_TEXT =
-  'You can send one of the following messages:';
+  'You can receive one of the following messages:';


I would say subscribe to instead of receive

kazydek · 2019-09-11T07:25:15Z

README.md


 [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)

 ## Overview

 A [React](https://reactjs.org/) component for AsyncAPI specification. It allows you to render the documentation of your asynchronous API provided in the AsyncAPI specification format and validate this specification. You can fully restyle the component using your own styles.

+> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to upgrade to the latest AsyncAPI version using the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.


Suggested change

> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to upgrade to the latest AsyncAPI version using the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.

>**CAUTION:** This package doesn't support AsyncAPI 1.x anymore. We recommend that you upgrade to the latest AsyncAPI version using the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.

or recommend upgrading

kazydek · 2019-09-11T07:47:41Z

README.md


-> **NOTE:** Use React version 16.0.0 or higher and styled-components version 4.0.0 or higher.
+- [`react`](https://github.com/facebook/react/): >= 16.8.0


Suggested change

- [`react`](https://github.com/facebook/react/): >= 16.8.0

- [`react`](https://github.com/facebook/react/) (version 16.8.0 or higher)

I guess this is how we write it in other docs

kazydek · 2019-09-11T08:05:29Z

docs/README.md

@@ -5,7 +5,7 @@
 This directory contains the following documents that relate to the project:

 - configuration:
-  - [Theme Modification](./configuration/theme-modification.md) describes how to edit a theme of the whole AsyncAPI component or of its specific part.
+  - [Style Modification](./configuration/style-modification.md) describes how to edit the styles of the AsyncApi component.


Suggested change

- [Style Modification](./configuration/style-modification.md) describes how to edit the styles of the AsyncApi component.

- [Style Modification](./configuration/style-modification.md) describes how to edit the styles of the AsyncAPI component.

here and everywhere I guess, I noticed now that it is written in lowercase in some places

kazydek · 2019-09-11T08:12:06Z

docs/configuration/config-modification.md

-  This field is set to `false` by default.
-
-  > **NOTE:** When you set this flag to `true`, you must provide definitions of all styles.
+  This field contains configuration responsible for initial expanding specific parts of the AsyncApi component.


Suggested change

This field contains configuration responsible for initial expanding specific parts of the AsyncApi component.

This field contains configuration responsible for expanding specific parts of the AsyncApi component automatically.

kazydek · 2019-09-11T08:15:27Z

docs/configuration/config-modification.md

-  > **NOTE:** When you set this flag to `true`, you must provide definitions of all styles.
+  This field contains configuration responsible for initial expanding specific parts of the AsyncApi component.
+  `root` means root component for specific parts of the AsyncApi component. `Elements` means elements inside `root` component.
+  By default `expand.channels.root` is set to `true`.


Suggested change

By default `expand.channels.root` is set to `true`.

By default, `expand.channels.root` is set to `true`.

kazydek · 2019-09-11T08:25:09Z

docs/configuration/style-modification.md

+
+In the AsyncApi component we use pure css styling. Each component inside root component has a unique css class. Each class has form: `asyncapi__{ELEMENT}--{MODIFIER}`, where:
+
+- `{ELEMENT}` - is a name of specific element. Each element name is the concatenation of the names of the elements in which it is located. For example: `asyncapi__channel-header-title` is located in `header` HTML element of `channel` element. 


Suggested change

- `{ELEMENT}` - is a name of specific element. Each element name is the concatenation of the names of the elements in which it is located. For example: `asyncapi__channel-header-title` is located in `header` HTML element of `channel` element.

- `{ELEMENT}` is the name of a specific element. Each element name is the concatenation of the names of the elements in which it is located. For example, `asyncapi__channel-header-title` is located in the `header` HTML element of the `channel` element.

kazydek · 2019-09-11T08:26:24Z

docs/configuration/style-modification.md

+In the AsyncApi component we use pure css styling. Each component inside root component has a unique css class. Each class has form: `asyncapi__{ELEMENT}--{MODIFIER}`, where:
+
+- `{ELEMENT}` - is a name of specific element. Each element name is the concatenation of the names of the elements in which it is located. For example: `asyncapi__channel-header-title` is located in `header` HTML element of `channel` element. 
+- `{MODIFIER}` - is a modifier for `{ELEMENT}`. Very few elements have a modifier. This is usually badge, button and similar, generic components.


Suggested change

- `{MODIFIER}` - is a modifier for `{ELEMENT}`. Very few elements have a modifier. This is usually badge, button and similar, generic components.

- `{MODIFIER}` is a modifier for `{ELEMENT}`. Very few elements have a modifier. This is usually a badge, button, or similar, generic components.

kazydek · 2019-09-11T08:27:23Z

docs/configuration/style-modification.md

+- `{ELEMENT}` - is a name of specific element. Each element name is the concatenation of the names of the elements in which it is located. For example: `asyncapi__channel-header-title` is located in `header` HTML element of `channel` element. 
+- `{MODIFIER}` - is a modifier for `{ELEMENT}`. Very few elements have a modifier. This is usually badge, button and similar, generic components.
+
+For changing styles, you must create (or if you use [default](../../library/src/styles/fiori.css) style, modify) appropriate class.


Suggested change

For changing styles, you must create (or if you use [default](../../library/src/styles/fiori.css) style, modify) appropriate class.

To change styles, create an appropriate class or modify it if you use the [default](../../library/src/styles/fiori.css) style.

kazydek · 2019-09-11T08:41:44Z

docs/configuration/style-modification.md

+
+For changing styles, you must create (or if you use [default](../../library/src/styles/fiori.css) style, modify) appropriate class.
+
+> **NOTE**: We recommend copy default styles from [here](../../library/src/styles/fiori.css) and changing them at its sole discretion.


Suggested change

> **NOTE**: We recommend copy default styles from [here](../../library/src/styles/fiori.css) and changing them at its sole discretion.

> **NOTE**: We recommend that you first [copy](../../library/src/styles/fiori.css) the default styles to a separate file and then modify them as you prefer.

kazydek · 2019-09-11T08:52:09Z

docs/development/guide.md

@@ -39,9 +39,8 @@ If you make any changes in the project structure, remember to update it.

 Use the following tools to develop the AsyncApi React component:


I'm not insisting on keeping it if you think it is more of a hassle than help 🤷‍♀

aerfio

LGTM

kazydek

with a small comment to the Missing features section:

See the list of features that are still missing in the component: 

Xxx

If you want to help us develop them, feel free to contribute.

magicmatatjahu added 2 commits September 10, 2019 14:53

Create new doc described the way of styling component and update root…

a657109

… Readme

Update tests

c45c926

magicmatatjahu added enhancement New feature or request area/documentation Related to all activities around documentation area/community Related to all activities that are done for community labels Sep 10, 2019

magicmatatjahu requested review from kazydek and mmitoraj as code owners September 10, 2019 13:01

Update doc

e52213c

aerfio suggested changes Sep 10, 2019

View reviewed changes

magicmatatjahu added 2 commits September 10, 2019 21:32

Add old version in warning info

8143cff

Add logo to Readme

ec34620

magicmatatjahu assigned kazydek Sep 11, 2019

Update Readme after discussion

34d662a

derberg reviewed Sep 11, 2019

View reviewed changes

aerfio suggested changes Sep 11, 2019

View reviewed changes

Update description of subscribe and publish operations

4d9a08e

derberg reviewed Sep 11, 2019

View reviewed changes

kazydek reviewed Sep 11, 2019

View reviewed changes

After review

a09fc53

aerfio approved these changes Sep 11, 2019

View reviewed changes

kazydek approved these changes Sep 11, 2019

View reviewed changes

Update doc

b0ca96c

magicmatatjahu merged commit 96dfcef into asyncapi:master Sep 11, 2019

magicmatatjahu deleted the 2.0.0-rc2-docs branch September 11, 2019 09:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update docs related to styles #62

Update docs related to styles #62

magicmatatjahu commented Sep 10, 2019

aerfio Sep 10, 2019

aerfio Sep 10, 2019

magicmatatjahu Sep 10, 2019

aerfio Sep 10, 2019

magicmatatjahu Sep 10, 2019

aerfio Sep 10, 2019

derberg Sep 11, 2019

aerfio Sep 11, 2019

magicmatatjahu Sep 11, 2019

aerfio Sep 11, 2019

aerfio Sep 11, 2019

magicmatatjahu Sep 11, 2019

aerfio Sep 11, 2019

aerfio Sep 11, 2019 •

edited

Loading

kazydek Sep 11, 2019

derberg Sep 11, 2019

kazydek Sep 11, 2019 •

edited

Loading

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

kazydek Sep 11, 2019

aerfio left a comment

kazydek left a comment

		@@ -2,6 +2,8 @@

		[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors)

		> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to upgrade to the latest AsyncAPI version using the [AsyncAPI converter](https://github.com/asyncapi/converter). If you need to convert documents on the fly, you may use the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.


		## Changing styles

		In the AsyncApi component we use pure css styling. Each component inside root component has a unique css class. Each class has form: `asyncapi__{ELEMENT}--{MODIFIER}`, where:


		In the AsyncApi component we use pure css styling. Each component inside root component has a unique css class. Each class has form: `asyncapi__{ELEMENT}--{MODIFIER}`, where:

		- `{ELEMENT}` - is a name of specific element. Each element name is the concatenation of the names of the elements in which it is located. For example: `asyncapi__channel-header-title` is located in `header` HTML element of `channel` element.


		For changing styles, you must create (or if you use [default](../../library/src/styles/fiori.css) style, modify) appropriate class.

		> NOTE: We recommend copy default styles from [here](../../library/src/styles/fiori.css) and changing them at its sole discretion.

		@@ -39,9 +39,8 @@ If you make any changes in the project structure, remember to update it.

		Use the following tools to develop the AsyncApi React component:

	> :warning: This package doesn't support AsyncAPI 1.x anymore. We recommend to upgrade to the latest AsyncAPI version using the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.
	>CAUTION: This package doesn't support AsyncAPI 1.x anymore. We recommend that you upgrade to the latest AsyncAPI version using the [Node.js](https://github.com/asyncapi/converter) or [Go](https://github.com/asyncapi/converter-go) converters.


		> NOTE: Use React version 16.0.0 or higher and styled-components version 4.0.0 or higher.
		- [`react`](https://github.com/facebook/react/): >= 16.8.0

	- [Style Modification](./configuration/style-modification.md) describes how to edit the styles of the AsyncApi component.
	- [Style Modification](./configuration/style-modification.md) describes how to edit the styles of the AsyncAPI component.

	This field contains configuration responsible for initial expanding specific parts of the AsyncApi component.
	This field contains configuration responsible for expanding specific parts of the AsyncApi component automatically.

	By default `expand.channels.root` is set to `true`.
	By default, `expand.channels.root` is set to `true`.

	- `{ELEMENT}` - is a name of specific element. Each element name is the concatenation of the names of the elements in which it is located. For example: `asyncapi__channel-header-title` is located in `header` HTML element of `channel` element.
	- `{ELEMENT}` is the name of a specific element. Each element name is the concatenation of the names of the elements in which it is located. For example, `asyncapi__channel-header-title` is located in the `header` HTML element of the `channel` element.

	- `{MODIFIER}` - is a modifier for `{ELEMENT}`. Very few elements have a modifier. This is usually badge, button and similar, generic components.
	- `{MODIFIER}` is a modifier for `{ELEMENT}`. Very few elements have a modifier. This is usually a badge, button, or similar, generic components.

	For changing styles, you must create (or if you use [default](../../library/src/styles/fiori.css) style, modify) appropriate class.
	To change styles, create an appropriate class or modify it if you use the [default](../../library/src/styles/fiori.css) style.

	> NOTE: We recommend copy default styles from [here](../../library/src/styles/fiori.css) and changing them at its sole discretion.
	> NOTE: We recommend that you first [copy](../../library/src/styles/fiori.css) the default styles to a separate file and then modify them as you prefer.

Update docs related to styles #62

Update docs related to styles #62

Conversation

magicmatatjahu commented Sep 10, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aerfio Sep 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kazydek Sep 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aerfio left a comment

Choose a reason for hiding this comment

kazydek left a comment

Choose a reason for hiding this comment

aerfio Sep 11, 2019 •

edited

Loading

kazydek Sep 11, 2019 •

edited

Loading