From 38ec3f9f7d8e9d192843de1c13e76452de1d6d66 Mon Sep 17 00:00:00 2001 From: pbearne Date: Tue, 19 Oct 2021 14:31:28 -0400 Subject: [PATCH 1/3] Fixes #34855 RangeControl style issue in RTL --- .../components/src/range-control/styles/range-control-styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js index 4507107b9f7bb..cb9bd945aaf9f 100644 --- a/packages/components/src/range-control/styles/range-control-styles.js +++ b/packages/components/src/range-control/styles/range-control-styles.js @@ -192,7 +192,7 @@ export const ThumbWrapper = styled.span` transform: translateX( 4.5px ); ${ thumbColor }; - ${ rtl( { marginLeft: -10 } ) }; + ${ rtl( { marginLeft: -10 }, { marginRight: 1 } ) }; `; const thumbFocus = ( { isFocused } ) => { From 251101a0ecdf6ea5b946233f94cd511434d28bbd Mon Sep 17 00:00:00 2001 From: pbearne Date: Wed, 20 Oct 2021 18:58:44 -0400 Subject: [PATCH 2/3] addjest the dot offset so it lines up with tool tip --- .../components/src/range-control/styles/range-control-styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js index cb9bd945aaf9f..49c8c602fcbad 100644 --- a/packages/components/src/range-control/styles/range-control-styles.js +++ b/packages/components/src/range-control/styles/range-control-styles.js @@ -192,7 +192,7 @@ export const ThumbWrapper = styled.span` transform: translateX( 4.5px ); ${ thumbColor }; - ${ rtl( { marginLeft: -10 }, { marginRight: 1 } ) }; + ${ rtl( { marginLeft: -10 }, { marginRight: -2 } ) }; `; const thumbFocus = ( { isFocused } ) => { From e3520fc1fdcd8c75900cae3b436412d55fe89189 Mon Sep 17 00:00:00 2001 From: pbearne Date: Thu, 21 Oct 2021 08:41:10 -0400 Subject: [PATCH 3/3] swapped to using translateX for the adjustment --- .../src/range-control/styles/range-control-styles.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js index 49c8c602fcbad..5daaeeb259be8 100644 --- a/packages/components/src/range-control/styles/range-control-styles.js +++ b/packages/components/src/range-control/styles/range-control-styles.js @@ -189,10 +189,13 @@ export const ThumbWrapper = styled.span` user-select: none; width: ${ thumbSize }px; border-radius: 50%; - transform: translateX( 4.5px ); ${ thumbColor }; - ${ rtl( { marginLeft: -10 }, { marginRight: -2 } ) }; + ${ rtl( { marginLeft: -10 } ) }; + ${ rtl( + { transform: 'translateX( 4.5px )' }, + { transform: 'translateX( -4.5px )' } + ) }; `; const thumbFocus = ( { isFocused } ) => {