Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(progress-bar): add "small" size variant #10708

Merged
merged 4 commits into from
Feb 18, 2022

Conversation

janhassel
Copy link
Member

Ref #10670

Adds a new prop (size) to the ProgressBar component and adds the styling necessary to render at small size (4px height).

Changelog

New

  • Add props.size to ProgressBar
  • Add respective styles

Testing / Reviewing

Verify in storybook that "big" variant is 8px high and "small" 4px.


Question regarding the prop values: As I understand components that don't fit the classic t-shirt size names like Tag, Toggle and ProgressBar should be referred to as "big" and "small". So far, the two other components still use sm and md as their prop values. With v11, will this be changed or should I change the prop values for ProgressBar also to sm and md for now?

@janhassel janhassel requested a review from a team as a code owner February 11, 2022 13:32
@netlify
Copy link

netlify bot commented Feb 11, 2022

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 5f0264c

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/620ffa23a9b8870007074f4f

😎 Browse the preview: https://deploy-preview-10708--carbon-react-next.netlify.app

@netlify
Copy link

netlify bot commented Feb 11, 2022

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 5f0264c

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/620ffa2347456d000766659c

😎 Browse the preview: https://deploy-preview-10708--carbon-elements.netlify.app

@janhassel janhassel requested a review from a team as a code owner February 11, 2022 14:00
@netlify
Copy link

netlify bot commented Feb 11, 2022

❌ Deploy Preview for carbon-components-react failed.
Built without sensitive environment variables

🔨 Explore the source changes: 9d2d38f

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/6206657dfb710a0008b743d7

@netlify
Copy link

netlify bot commented Feb 11, 2022

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 5f0264c

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/620ffa236b6e9000076c8ae9

😎 Browse the preview: https://deploy-preview-10708--carbon-components-react.netlify.app

@tay1orjones
Copy link
Member

@aagonzales what do you think about big and small vs sm and md here?

@aagonzales
Copy link
Member

components that don't fit the classic t-shirt size names like Tag, Toggle and ProgressBar should be referred to as "big" and "small"

I believe this is still true in v11. It should be using big and small

@aagonzales
Copy link
Member

It says the sizes but there no button to actually change the size. How do you turn the small size on? (i noticed this happening in a lot of stories)
image

@tay1orjones
Copy link
Member

@aagonzales Ah yeah, sorry about that. In the new storybook we need to add in controls. Storybook deprecated the knobs addon we use in the v10 storybook, so many stories in the v11 storybook don't have controls. It's going to be addressed this sprint in #10751

The v10 storybook has a knob though to view these changes https://deploy-preview-10708--carbon-components-react.netlify.app/?path=/story/experimental-unstable-progressbar--playground

@kodiakhq kodiakhq bot merged commit f41b038 into carbon-design-system:main Feb 18, 2022
@janhassel janhassel deleted the 10670-sizes branch February 19, 2022 05:47
@jnm2377 jnm2377 mentioned this pull request Feb 22, 2022
22 tasks
kennylam pushed a commit to kennylam/carbon that referenced this pull request Jul 30, 2024
…tem#10708)

* fix(ghost-button): icon alignment for larger sizes

* fix(button): format

---------

Co-authored-by: Anna Wen <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants