Implementation of the DS v1

[pettinarip]

This is part of our Implementation of the DS epic.

This issue will track the progress to implement the v1 of the DS.

How to contribute

If you’d like to help with this migration, please follow these steps:

1. Leave a comment in any of the following unassigned tasks that interest you.
2. We assign you to the task.
   • IMPORTANT: read and follow our DS implementation guide for some tips & guidance.
   • If you have any questions about the implementation of the given task, keep that conversation in the assigned issue or in the created PR.
3. Once you finish it (PR merged), we mark it as done.
4. Repeat!

---

Setup the foundation styles from the DS

Preview Give feedback

1. Use extendBaseTheme instead of extendTheme #9679
   +0
   
2. Base colors - Setup colors on theme Update theme foundations for new DS #9510
3. Typography - Setup & load new fonts Update theme foundations for new DS #9510
4. Refactor: Bring Inter and IBM Plex Mono Fonts to Prod / Update Implementation #10131
   needs review 👀 +1
   

Base components - Button

Preview Give feedback

1. Button
2. Button - Add multi-line support #10020
   +0
   
3. ButtonLink
4. IconButton
5. Add/modify button variants to match the DS #10186
   +0
   

Base components - Form components

Preview Give feedback

1. feat(theme): add/update form component themes #9856
   content 🖋️ dependencies 📦 event 📅 needs review 👀 tooling 🔧 translation 🌍 +6
   

Base components - Tags

Preview Give feedback

1. Feat: Create New Tag Theme #10100
   +0
   
2. [Tag] Fix multi-line height #10265
   +0
   
3. [Tag] Update close button styles #10266
   design system help wanted +2
   

Base components - Navigation

Preview Give feedback

1. feat(Link): update component for new DS #10706
   +0
   
2. feat(Breadcrumbs): update component for new DS #10598
   +0
   
3. SideNav #10744
   Status: In Progress Status: Stale +2
   
4. TableOfContents #10745
   Status: Stale +1
   

Base components

Preview Give feedback

1. feat(Avatar): create component, theme, and stories #9868
   +0
   
2. SocialMediaLinks #10746
   Status: Stale +1
   
3. Tooltip #10747
   Status: Stale +1
   
4. Accordion #10748
   Status: Stale +1
   
5. feat(Table): add component, theme, and story #9932
   +0
   
6. feat(theme): add Alert component and theme #10380
   +0
   
7. feat: Update Text and Heading Themes for New DS #10606
   content 🖋️ needs review 👀 +2
   

Composed components

Preview Give feedback

1. refactor(Nav): use the Chakra Menu component #10075
   abandoned event 📅 needs review 👀 +3
   
2. Modal - implement DS styles and unify modals #10749
   Status: Stale +1
   
3. Header - Menu and Dropdowns #10750
   Status: Stale +1
   
4. Header mobile - Menu and Dropdowns #10751
   Status: Stale +1
   
5. Footer - update breakpoints #10752
   +0
   
6. Hero #10753
   +0
   
7. Stats #11140
   Status: Stale +1
   

Layouts

Preview Give feedback

1. Base layout
2. Markdown pages layout

Issues/refactors

Preview Give feedback

1. DS implementation - Table layout fixed #10886
   Status: Stale refactor ♻️ +2
   

[TylerAPfledderer]

@pettinarip Noting here #9510 to help cover initial stages of the foundations.

[TylerAPfledderer]

@pettinarip for the component themes, there is a certain direction I took in the CodeSandboxes.

These sandboxes are based on the latest version of Chakra where...

1. New type-safety methods are used in the component theme configs
2. The use of extendBaseTheme is applied so that the default themes for all the components in the package are NOT brought in immediately (which decreases payload bloat!)
3. A certain approach in taken to import default theming where helpful and merge them with customized styles without unexpected overrides. And a component.utils.ts file was created in a couple of the sandboxes to add a custom merge function (retains it's own type safety) and a commonProps object where the styles are consistent between component types (See the Checkbox, Switch, and Radio components)

This means that Issue #8870 and PR #9577 become relevant here 👀

My question to you is your thoughts on the above. And if you are in favor with some are all of them, how you might want to go about "enforcing" the patterns as other contributors become involved in the effort.

[TylerAPfledderer]

Create new textStyles

Now is this to be added in addition to setting theming configs for the Text and Heading components?

[pettinarip]

@TylerAPfledderer thanks for pointing this out.

1. Ok, sounds good
2. Wow! I didn't know that. That is great. Looking forward to start using that
3. Sounds fantastic and cleaner. Then, I guess that before (the current implementation), we were inheriting all the default styles for each component and that is why we needed to override a lot of other styles

I really like these patterns. I think they should have been there from the beginning but my ignorance was before.

When you say "enforcing the patterns", you are talking specifically about the style components we define for the Chakra components, right? If that is right, I support that, yes.

======

Now is this to be added in addition to setting theming configs for the Text and Heading components?

As discussed offline, we are not going to implement the textStyles and textLayers for this V1. For now, we are just going to style the Text and Heading component.

[TylerAPfledderer]

@pettinarip Missing the Accordion on this list

[pettinarip]

That is correct 😄 thanks for pointing that out, for some reason I missed also the Alerts and Tables 🤔...not sure what happened haha.

[ameeetgaikwad]

If there is any issue, I would like to contribute!

[github-actions]

This issue is stale because it has been open 30 days with no activity.