Skip to content

Commit

Permalink
feat(*): update Slider label horizontal margin
Browse files Browse the repository at this point in the history
  • Loading branch information
@vadim-kudr
vadim-kudr committed Jan 14, 2025
1 parent 7736746 commit 2832116
Show file tree
Hide file tree
Showing 15 changed files with 65 additions and 28 deletions.
Binary file modified ...nents/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png
View file
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 ...e, showScale, showCurrentValue, currentValueVisibility=hover, showIcon.snap.png
View file
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 ...nents/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 6 additions & 3 deletions packages/plasma-b2c/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -125,7 +126,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -175,7 +177,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
9 changes: 6 additions & 3 deletions packages/plasma-giga/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -125,7 +126,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -175,7 +177,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
1 change: 1 addition & 0 deletions packages/plasma-new-hope/src/components/Slider/Slider.tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const tokens = {
labelWrapperGap: '--plasma-slider-label-wrapper-gap',
labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
labelWrapperOnlyIconMarginRight: '--plasma-slider-label-wrapper-only-icon-margin-right',
labelWrapperVerticalMargin: '--plasma-slider-label-wrapper-vertical-margin',

labelColor: '--plasma-slider-label-color',
Expand Down
8 changes: 8 additions & 0 deletions packages/plasma-new-hope/src/components/Slider/components/Single/Single.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,14 @@ export const SingleWrapper = styled.div`
${LabelWrapper} {
margin-right: var(${tokens.labelWrapperMarginRight});
}
${LabelWrapper}:not(:has(${Label})):has(${LabelContent}) {
margin-right: var(${tokens.labelWrapperOnlyIconMarginRight});
}
${LabelWrapper}:has(${Label}) {
margin-right: var(${tokens.labelWrapperMarginRight});
}
}
&.${classes.verticalOrientation} {
Expand Down
9 changes: 6 additions & 3 deletions packages/plasma-new-hope/src/examples/plasma_b2c/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -127,7 +128,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -177,7 +179,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
9 changes: 6 additions & 3 deletions packages/plasma-new-hope/src/examples/plasma_web/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -127,7 +128,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -177,7 +179,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
9 changes: 6 additions & 3 deletions packages/plasma-web/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -125,7 +126,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -175,7 +177,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
3 changes: 2 additions & 1 deletion packages/sdds-cs/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
9 changes: 6 additions & 3 deletions packages/sdds-dfa/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -125,7 +126,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -175,7 +177,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
9 changes: 6 additions & 3 deletions packages/sdds-finportal/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -125,7 +126,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -175,7 +177,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
9 changes: 6 additions & 3 deletions packages/sdds-insol/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -125,7 +126,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -175,7 +177,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down
9 changes: 6 additions & 3 deletions packages/sdds-serv/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 1rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
Expand Down Expand Up @@ -125,7 +126,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.75rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand Down Expand Up @@ -175,7 +177,8 @@ export const config = {
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelWrapperMarginRight}: 1rem;
${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
Expand Down

0 comments on commit 2832116

Please sign in to comment.