Skip to content

fix(accordion): update arrow spacing for start variant#9777

Merged
kodiakhq[bot] merged 3 commits into
carbon-design-system:mainfrom
janhassel:accordion-spacing-fix
Oct 4, 2021
Merged

fix(accordion): update arrow spacing for start variant#9777
kodiakhq[bot] merged 3 commits into
carbon-design-system:mainfrom
janhassel:accordion-spacing-fix

Conversation

@janhassel

Copy link
Copy Markdown
Member

Currently, the chevrons in the "start"-variant of the Accordion (with the chevrons on the left) have 8px of left spacing whereas the chevrons in the "end"-variant (with the chevrons on the right) have a right spacing of 16px.

After checking with @aagonzales, the left spacing on the "start"-variant should also be 16px / spacing-05.

Before
image

After
image

Changelog

Changed

  • Updated left spacing of chevron in "start"-variant to use $spacing-05/16px.
  • Added a $spacing-05/16px spacing to the right of the accordion title based on spec from @aagonzales:
    • image

Testing / Reviewing

  1. Run react storybook / open netlify preview
  2. Ensure that the chevrons always have 16px to their left and right regardless of variant
  3. Ensure the title has a right spacing of 16px in the "start"-variant

@janhassel janhassel requested a review from a team as a code owner September 30, 2021 11:32
@netlify

netlify Bot commented Sep 30, 2021

Copy link
Copy Markdown

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

🔨 Explore the source changes: 6ea0730

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

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

@netlify

netlify Bot commented Sep 30, 2021

Copy link
Copy Markdown

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 6ea0730

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

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

@netlify

netlify Bot commented Sep 30, 2021

Copy link
Copy Markdown

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

🔨 Explore the source changes: 6ea0730

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

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

@tay1orjones tay1orjones left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks for adding it to the styles package as well!

@jnm2377 jnm2377 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Thanks for the fix!

@jnm2377 jnm2377 requested a review from aagonzales October 4, 2021 15:36
@jnm2377

jnm2377 commented Oct 4, 2021

Copy link
Copy Markdown
Contributor

@aagonzales aagonzales left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it looks correct, if the padding area includes the 16px icon then it would be 32px/spacing-07 there instead.

image

@kodiakhq kodiakhq Bot merged commit ec433dc into carbon-design-system:main Oct 4, 2021
@janhassel janhassel deleted the accordion-spacing-fix branch October 4, 2021 17:55
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