From 454129b07628e7fead84f158a4d05580ee5a6d3f Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 15 Aug 2024 10:20:51 +1000 Subject: [PATCH] `RangeControl`: tweak mark and label absolute positioning (#64487) * This commit tweaks the position of the range control marks and labels to fit the original design. * CHANGELOG.md update Co-authored-by: ramonjd Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jameskoster --- packages/components/CHANGELOG.md | 4 ++++ .../src/range-control/styles/range-control-styles.ts | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2530b66152bdc..f7b7bdc088cee 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -28,6 +28,10 @@ - `FocalPointPicker`: Default to new 40px size ([#64456](https://github.com/WordPress/gutenberg/pull/64456)). - `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)). +### Bug Fixes + +- `RangeControl`: tweak mark and label absolute positioning ([#64487](https://github.com/WordPress/gutenberg/pull/64487)). + ### Internal - `Composite` v2: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)). diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 89f4864aee2ea..ec1572d267924 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -154,7 +154,7 @@ export const Mark = styled.span` height: ${ thumbSize }px; left: 0; position: absolute; - top: -4px; + top: 9px; width: 1px; ${ markFill }; @@ -170,7 +170,7 @@ export const MarkLabel = styled.span` color: ${ COLORS.gray[ 300 ] }; font-size: 11px; position: absolute; - top: 12px; + top: 22px; white-space: nowrap; ${ rtl( { left: 0 } ) };