Skip to content

Commit

Permalink
fix(stepper): update min-width to match max-width (#1017)
Browse files Browse the repository at this point in the history
## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [x] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
The stepper title is variable in length, which causes the description of
each step not to be aligned vertically when the title of each step is a
different length.

Issue Number: CDE-1340

## What is the new behavior?
The stepper title minimum width has been set to match the max-width and
the space between the title and description has been reduced from 64px
total to 48px.

In CDE-1262 (v17), we'll refactor the code to condense these properties
to a simple width field and add an appropriate variable to set it.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <[email protected]>
  • Loading branch information
williamernest and web-flow authored Oct 31, 2023
1 parent 0164f85 commit 31ce598
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions projects/ui/src/shim.cds-core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -901,9 +901,12 @@
--clr-accordion-header-left-error-indicator: inset #{tokens.$cds-global-space-5} 0 0 #{tokens.$cds-alias-status-danger};
--clr-accordion-content-color: #{tokens.$cds-alias-typography-color-400};
--clr-accordion-content-font-size: #{tokens.$cds-alias-typography-secondary-font-size};
--clr-accordion-description-margin-left: calc(#{tokens.$cds-global-space-13} - var(--clr-accordion-header-gap));
--clr-accordion-description-margin-left: calc(#{tokens.$cds-global-space-12} - var(--clr-accordion-header-gap));

--clr-accordion-step-title-min-width: 0;
// TODO(CDE-1262): Refactor min/max width to just width in v17
// The stepper title min-width now matches the max-width so the description is visually
// consistent when the stepper titles contain varying length content.
--clr-accordion-step-title-min-width: 13.2rem;
--clr-accordion-step-title-font-weight: #{tokens.$cds-alias-typography-font-weight-semibold};
--clr-accordion-step-status-margin-left: #{tokens.$cds-global-space-7};
--clr-accordion-step-title-margin-left: #{tokens.$cds-global-space-9};
Expand Down
Binary file modified tests/snapshots/stepper/stepper--variants-core-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/snapshots/stepper/stepper--variants-core-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 31ce598

Please sign in to comment.