search

bcc-code / bcc-design

Packages, assets and documentation to use the BCC Design System
https://developer.bcc.no/bcc-design
Apache License 2.0
3 stars 5 forks source link

BccAccordion additions #304

Closed StevenMalaihollo closed 1 month ago

StevenMalaihollo commented 2 months ago

Restructuring

When trying to use the BccAccordion component in an Event product we found out that none of the variants fitted our needs. This caused us to rethink the approach variants.

Currently we have a mix of variants usage:

Because the variant namings differs so much, they are hard and unexpected to use. Also, Variants that had a very specific design would often only work for 1 use case. In this PR we propose to repurpose the variant prop into the following:

"Variants should be a descriptive term for the overall appearance of the component, not a guideline for design practices (like primary, sec...) or a specific value (like dark, white, grey). It should instead be a term for a specific 'style' of the component that is reusable for different domains"

Examples of this new variants would be:

These variants can then be further customized by adding a context like warning, neutral.

The plan is to agree on this approach in this PR for the BccAccordion. And then refactor the other components in a follow-up PR once agreement is reached.

The inspiration for this approach comes from Nuxt UI

Change summary

Allong with the variant restructuring, the following was also added to the BccAccordion

  1. Add open prop to initiate the Accordion in an expanded state
  2. Add info prop to add a text to the right of the title.

Change type

github-actions[bot] commented 2 months ago

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-coast-028fe6203-304.westeurope.3.azurestaticapps.net

github-actions[bot] commented 2 months ago

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-coast-028fe6203-304.westeurope.3.azurestaticapps.net

github-actions[bot] commented 2 months ago

Azure Static Web Apps: Your stage site is ready! Visit it here: https://brave-coast-028fe6203-304.westeurope.3.azurestaticapps.net

u12206050 commented 1 month ago

We have been speaking to the design team to align on this new approach. We have also decided that any restrictions to design are to be only applied at the design level in figma, such that components we create can be more customisable/configurable and more developer focused rather than being one to one to the design system setup in figma. Visually it will still be the same, but it may be that our components support more colors than are currently allowed in BCC product designs.

The thought behind this is, too make it more useful across all products that are developed by us developers, even though not all products are BCC, eg. Work app.

Also, as most "proper" products will have a design in figma first, developers will just use that to implement what they see, even though the components themselves can do more.

laurensgroeneveld commented 1 month ago

Alright 👍 Originally we defined that the design library should not be too customizable as to prevent developers from implementing things that do not follow the design system. But it's fine to change our minds, just make sure everyone understands the implications.

The thought behind this is, too make it more useful across all products that are developed by us developers, even though not all products are BCC, eg. Work app.

That's what a "theme" would be for I feel. Currently everything is "bccForbundet" theme, with the idea being we could introduce a new theme that mostly follows the same guidelines but with different colors, fonts, etc.