gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs: consistent spelling in how to work on component library (#45512)

Browse Source 
* Updated how-to-work-on-the-component-library.md

made changes between "component" and "components" more consistent.

* Update docs/how-to-work-on-the-component-library.md

Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com>

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
This commit is contained in:
Hamza Mnyusiwalla
2022-03-24 11:07:56 +03:00
committed by GitHub
parent 3add6077ad
commit e011789096
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/how-to-work-on-the-component-library.md
View File

@ -15,7 +15,7 @@ The following steps are recommended when working on a new component:
## Researching and planning
Before building a component, you need to research and document on how the existing version behaves and looks, to ensure that the new one has matching styles and supports all the current usages. In order to meet the web accesibility requirements, you should also pay attention to the accessibility aspect of the components, see which HTML elements and ARIA attributes are used under the hood.
Before building a component, you need to research and document on how the existing version behaves and looks, to ensure that the new one has matching styles and supports all the current usages. In order to meet the web accessibility requirements, you should also pay attention to the accessibility aspect of the component, see which HTML elements and ARIA attributes are used under the hood.
Once you have gathered enough information about the component, you can start thinking about the props interface. Ideally, the interface should be as similar to the current version as possible, to ease the adoption later on. Since we are using Bootstrap components, the simplest approach is to mimic [their implementation](https://github.com/react-bootstrap/react-bootstrap/tree/master/src).
@ -43,11 +43,11 @@ The command will generate a new folder inside the `ui-components` directory, wit
| `my-component.tsx` | It is where we implement the component. |
| `types.ts` | Is is where we locate component's interface and types. |
Each component is different, but in general the components should:
Each component is different, but in general a component should:
- Support forwarding ref
- Be styled for both light and dark themes
- Be styled internally based on their props (the consumers should not need to restyle the components with the `className` prop)
- Be styled internally based on their props (the consumers should not need to restyle the component with the `className` prop)
- Utilize the built-in styling system from Tailwind instead of having custom styles
### Useful links