Correct size for progress component #261
Conversation
| <BccProgress class="w-1/4 bcc-progress-sm" :value="30"/> | ||
| <BccProgress class="w-1/4 bcc-progress-md" :value="22"/> | ||
| <BccProgress class="w-1/4 bcc-progress-xs" :value="30"/> | ||
| <BccProgress class="w-1/4 bcc-progress-sm" :value="22"/> | ||
| <BccProgress class="w-1/4" :value="75"/> | ||
| <BccProgress class="w-1/4" bcc-progress-base :value="75"/> |
There was a problem hiding this comment.
For the Vue library, these should be handled with the size prop instead of adding classes directly (then under the hood the Vue component adds the class, so people using just the CSS can also use that).
| @@ -14,17 +14,21 @@ | |||
|
|
|||
| /* Size */ | |||
| .bcc-progress-container .bcc-form-label-lg .bcc-form-label-optional { | |||
| @apply text-label; | |||
| @apply text-label-base; | |||
There was a problem hiding this comment.
This class no longer exists. The typography styles were updated, which is the main reason we'll be tagging a 2.0 release soon. See this page in the docs for the new classes: https://design-library-dev.developer.bcc.no/?path=/docs/tokens-typography--docs
You need to rebase your branch on the latest main. It might be easier to start a new branch because otherwise it will also try to rebase all your older commits that were already merged into main. Or maybe drop all the old commits when rebasing (let me know if you don't know how to proceed here, happy to help as rebasing in Git can get fairly complicated).
| @@ -14,17 +14,21 @@ | |||
|
|
|||
| /* Size */ | |||
| .bcc-progress-container .bcc-form-label-lg .bcc-form-label-optional { | |||
| @apply text-label; | |||
| @apply text-label-base; | |||
There was a problem hiding this comment.
Additional comment here: In the Figma file it's possible to see the actual typography styles, see below.
Here you can see that the actual text styles are heading xs and body sm. I think we should keep our implementation as close as possible to the design, so I suggest changing those, perhaps by no longer using the form label component but implementing it directly.
laurensgroeneveld
changed the title
Change summary
Correct sizes
Change type
Closes #ISSUE_NUMBER or Part of #ISSUE_NUMBER