From 78ac987dc64ead03c87e1275f9d22d75d7c34b62 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 19 Sep 2022 19:12:10 +1000 Subject: [PATCH 01/12] Add subheadings and reset text to tools panel menu --- packages/components/src/menu-item/README.md | 7 +++++ packages/components/src/menu-item/index.js | 2 ++ .../test/__snapshots__/index.js.snap | 3 +++ .../components/src/menu-item/test/index.js | 1 + .../src/tools-panel/stories/index.js | 27 +++++++++++++++++++ packages/components/src/tools-panel/styles.ts | 18 ++++++++++++- .../tools-panel-header/component.tsx | 17 ++++++++---- .../tools-panel/tools-panel-header/hook.ts | 5 ++++ packages/components/src/tools-panel/types.ts | 1 + 9 files changed, 75 insertions(+), 6 deletions(-) diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md index c9af4f057a2260..68affcd63b8bfd 100644 --- a/packages/components/src/menu-item/README.md +++ b/packages/components/src/menu-item/README.md @@ -79,3 +79,10 @@ If shortcut is a string, it is expecting the display text. If shortcut is an obj - Default: `'menuitem'` [Aria Spec](https://www.w3.org/TR/wai-aria-1.1/#aria-checked). If you need to have selectable menu items use menuitemradio for single select, and menuitemcheckbox for multiselect. + +### `suffix` + +- Type: `WPElement` +- Required: No + +Allows for markup other than icons or shortcuts to be added to the menu item. diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js index 7440b3b38ef351..6797f623dee5a4 100644 --- a/packages/components/src/menu-item/index.js +++ b/packages/components/src/menu-item/index.js @@ -26,6 +26,7 @@ export function MenuItem( props, ref ) { shortcut, isSelected, role = 'menuitem', + suffix, ...buttonProps } = props; @@ -68,6 +69,7 @@ export function MenuItem( props, ref ) { shortcut={ shortcut } /> { icon && iconPosition === 'right' && } + { suffix } ); } diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap index 06aaf4b620dfe0..a204c516b7f543 100644 --- a/packages/components/src/menu-item/test/__snapshots__/index.js.snap +++ b/packages/components/src/menu-item/test/__snapshots__/index.js.snap @@ -30,6 +30,9 @@ exports[`MenuItem should match snapshot when all props provided 1`] = ` d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z" /> + + Suffix + `; diff --git a/packages/components/src/menu-item/test/index.js b/packages/components/src/menu-item/test/index.js index aa815dd7e4bb7e..0259f281ae8518 100644 --- a/packages/components/src/menu-item/test/index.js +++ b/packages/components/src/menu-item/test/index.js @@ -31,6 +31,7 @@ describe( 'MenuItem', () => { role="menuitemcheckbox" onClick={ noop } shortcut="mod+shift+alt+w" + suffix={ Suffix } > My item diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js index 803a01eb341d35..b9d317a0fb71f2 100644 --- a/packages/components/src/tools-panel/stories/index.js +++ b/packages/components/src/tools-panel/stories/index.js @@ -29,11 +29,13 @@ export const _default = () => { const [ height, setHeight ] = useState(); const [ minHeight, setMinHeight ] = useState(); const [ width, setWidth ] = useState(); + const [ scale, setScale ] = useState(); const resetAll = () => { setHeight( undefined ); setWidth( undefined ); setMinHeight( undefined ); + setScale( undefined ); }; return ( @@ -79,6 +81,31 @@ export const _default = () => { onChange={ ( next ) => setMinHeight( next ) } /> + !! scale } + label="Scale" + onDeselect={ () => setScale( undefined ) } + > + setScale( next ) } + isBlock + > + + + + + diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 7fe2fc0a0a1a2c..0585a333a19de5 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -12,7 +12,7 @@ import { Wrapper as BaseControlWrapper, } from '../base-control/styles/base-control-styles'; import { LabelWrapper } from '../input-control/styles/input-control-styles'; -import { COLORS, CONFIG } from '../utils'; +import { baseLabelTypography, COLORS, CONFIG } from '../utils'; import { space } from '../ui/utils/space'; const toolsPanelGrid = { @@ -145,3 +145,19 @@ export const ToolsPanelItemPlaceholder = css` export const DropdownMenu = css` min-width: 200px; `; + +export const DefaultControlsItem = css` + span:last-child { + color: var( --wp-admin-theme-color-darker-10 ); + margin-left: ${ space( 3 ) }; + ${ baseLabelTypography } + } + + &&[aria-disabled='true'] { + opacity: 1; + + span:last-child { + opacity: 0.3; + } + } +`; diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx index 62a40a966dcb7d..f450196373d663 100644 --- a/packages/components/src/tools-panel/tools-panel-header/component.tsx +++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx @@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react'; * WordPress dependencies */ import { speak } from '@wordpress/a11y'; -import { check, reset, moreVertical, plus } from '@wordpress/icons'; +import { check, moreVertical, plus } from '@wordpress/icons'; import { __, _x, sprintf } from '@wordpress/i18n'; /** @@ -26,6 +26,7 @@ import type { } from '../types'; const DefaultControlsGroup = ( { + itemClassName, items, toggleItem, }: ToolsPanelControlsGroupProps ) => { @@ -33,15 +34,17 @@ const DefaultControlsGroup = ( { return null; } + const resetSuffix = { __( 'Reset' ) }; + return ( - + { items.map( ( [ label, hasValue ] ) => { if ( hasValue ) { return ( { label } @@ -67,10 +71,11 @@ const DefaultControlsGroup = ( { return ( { label } @@ -89,7 +94,7 @@ const OptionalControlsGroup = ( { } return ( - + { items.map( ( [ label, isSelected ] ) => { const itemLabel = isSelected ? sprintf( @@ -147,6 +152,7 @@ const ToolsPanelHeader = ( ) => { const { areAllOptionalControlsHidden, + defaultControlsItemClassName, dropdownMenuClassName, hasMenuItems, headingClassName, @@ -197,6 +203,7 @@ const ToolsPanelHeader = ( { + return cx( styles.DefaultControlsItem ); + }, [ cx ] ); + const { menuItems, hasMenuItems, areAllOptionalControlsHidden } = useToolsPanelContext(); return { ...otherProps, areAllOptionalControlsHidden, + defaultControlsItemClassName, dropdownMenuClassName, hasMenuItems, headingClassName, diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts index 3290b9fe497fc7..b95a50a4aa9cbc 100644 --- a/packages/components/src/tools-panel/types.ts +++ b/packages/components/src/tools-panel/types.ts @@ -147,6 +147,7 @@ export type ToolsPanelContext = { }; export type ToolsPanelControlsGroupProps = { + itemClassName?: string; items: [ string, boolean ][]; toggleItem: ( label: string ) => void; }; From f683d969b79d22c2404db44fd4185599b0b33db4 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 19 Sep 2022 19:34:09 +1000 Subject: [PATCH 02/12] Add changelog --- packages/components/CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2206e37b3e9534..9e9c452ff5828a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,11 @@ - The `LinkedButton` to unlink sides in `BoxControl`, `BorderBoxControl` and `BorderRadiusControl` have changed from a rectangular primary button to an icon-only button, with a sentence case tooltip, and default-size icon for better legibility. The `Button` component has been fixed so when `isSmall` and `icon` props are set, and no text is present, the button shape is square rather than rectangular. +### New Features + +- `MenuItem`: Add suffix prop for injecting non-icon and non-shortcut content to menu items ([#44260](https://github.com/WordPress/gutenberg/pull/44260)). +- `ToolsPanel`: Add subheadings to ellipsis menu and reset text to default control menu items ([#44260](https://github.com/WordPress/gutenberg/pull/44260)). + ### Internal - `NavigationMenu` updated to ignore `react/exhaustive-deps` eslint rule ([#44090](https://github.com/WordPress/gutenberg/pull/44090)). From 16aec3035edb04eca43b20e993883e68b6853ff8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 19 Sep 2022 23:07:16 +1000 Subject: [PATCH 03/12] Mute disabled default control menu item text --- packages/components/src/tools-panel/styles.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 0585a333a19de5..9cdb3f04caa3d9 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -147,6 +147,8 @@ export const DropdownMenu = css` `; export const DefaultControlsItem = css` + color: ${ COLORS.gray[ 700 ] }; + span:last-child { color: var( --wp-admin-theme-color-darker-10 ); margin-left: ${ space( 3 ) }; From 4c85fcf9b7b88b8168fd52f565c8df4a015851b6 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 19 Sep 2022 23:18:06 +1000 Subject: [PATCH 04/12] Make reset text aria-hidden --- .../components/src/tools-panel/tools-panel-header/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx index f450196373d663..6ae3b376ce585b 100644 --- a/packages/components/src/tools-panel/tools-panel-header/component.tsx +++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx @@ -34,7 +34,7 @@ const DefaultControlsGroup = ( { return null; } - const resetSuffix = { __( 'Reset' ) }; + const resetSuffix = { __( 'Reset' ) }; return ( From 606946623d69d6f5419e2a0d8a7814004aea154c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 19 Sep 2022 23:35:05 +1000 Subject: [PATCH 05/12] Further tweaks to default control item text color --- packages/components/src/tools-panel/styles.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 9cdb3f04caa3d9..c492d7b4cf8728 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -147,7 +147,7 @@ export const DropdownMenu = css` `; export const DefaultControlsItem = css` - color: ${ COLORS.gray[ 700 ] }; + color: ${ COLORS.gray[ 900 ] }; span:last-child { color: var( --wp-admin-theme-color-darker-10 ); @@ -155,9 +155,14 @@ export const DefaultControlsItem = css` ${ baseLabelTypography } } - &&[aria-disabled='true'] { + &[aria-disabled='true'] { + color: ${ COLORS.gray[ 700 ] }; opacity: 1; + &:hover { + color: ${ COLORS.gray[ 700 ] }; + } + span:last-child { opacity: 0.3; } From c8fa09dc204bdf95faa19f3581e3ab6a16f469bc Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 19 Sep 2022 23:58:31 +1000 Subject: [PATCH 06/12] Refactor reset label text styling --- packages/components/src/tools-panel/styles.ts | 15 ++++++++------- .../tools-panel/tools-panel-header/component.tsx | 3 ++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index c492d7b4cf8728..e56ab37c3556be 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -1,6 +1,7 @@ /** * External dependencies */ +import styled from '@emotion/styled'; import { css } from '@emotion/react'; /** @@ -146,15 +147,15 @@ export const DropdownMenu = css` min-width: 200px; `; +export const ResetLabel = styled.span` + color: var( --wp-admin-theme-color-darker-10 ); + margin-left: ${ space( 3 ) }; + ${ baseLabelTypography } +`; + export const DefaultControlsItem = css` color: ${ COLORS.gray[ 900 ] }; - span:last-child { - color: var( --wp-admin-theme-color-darker-10 ); - margin-left: ${ space( 3 ) }; - ${ baseLabelTypography } - } - &[aria-disabled='true'] { color: ${ COLORS.gray[ 700 ] }; opacity: 1; @@ -163,7 +164,7 @@ export const DefaultControlsItem = css` color: ${ COLORS.gray[ 700 ] }; } - span:last-child { + ${ ResetLabel } { opacity: 0.3; } } diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx index 6ae3b376ce585b..69db4d2085c142 100644 --- a/packages/components/src/tools-panel/tools-panel-header/component.tsx +++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx @@ -20,6 +20,7 @@ import { HStack } from '../../h-stack'; import { Heading } from '../../heading'; import { useToolsPanelHeader } from './hook'; import { contextConnect, WordPressComponentProps } from '../../ui/context'; +import { ResetLabel } from '../styles'; import type { ToolsPanelControlsGroupProps, ToolsPanelHeaderProps, @@ -34,7 +35,7 @@ const DefaultControlsGroup = ( { return null; } - const resetSuffix = { __( 'Reset' ) }; + const resetSuffix = { __( 'Reset' ) }; return ( From 27cae7cd8764b8e8d3825e36d5058796ea6b03ef Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 20 Sep 2022 00:00:31 +1000 Subject: [PATCH 07/12] Remove use of baseLabelTypography mixin --- packages/components/src/tools-panel/styles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index e56ab37c3556be..645e5f28d761c6 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -13,7 +13,7 @@ import { Wrapper as BaseControlWrapper, } from '../base-control/styles/base-control-styles'; import { LabelWrapper } from '../input-control/styles/input-control-styles'; -import { baseLabelTypography, COLORS, CONFIG } from '../utils'; +import { COLORS, CONFIG } from '../utils'; import { space } from '../ui/utils/space'; const toolsPanelGrid = { @@ -149,8 +149,11 @@ export const DropdownMenu = css` export const ResetLabel = styled.span` color: var( --wp-admin-theme-color-darker-10 ); + font-size: 11px; + font-weight: 500; + line-height: 1.4; margin-left: ${ space( 3 ) }; - ${ baseLabelTypography } + text-transform: uppercase; `; export const DefaultControlsItem = css` From ecffad03ca51b8f68f6592d8d972c5ef023af2c8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 20 Sep 2022 10:21:34 +1000 Subject: [PATCH 08/12] Only render menu item shortcut and right icon if no suffix --- packages/components/src/menu-item/index.js | 14 ++++--- .../test/__snapshots__/index.js.snap | 3 -- .../components/src/menu-item/test/index.js | 37 ++++++++++++++++++- 3 files changed, 45 insertions(+), 9 deletions(-) diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js index 6797f623dee5a4..907d54fb680541 100644 --- a/packages/components/src/menu-item/index.js +++ b/packages/components/src/menu-item/index.js @@ -64,11 +64,15 @@ export function MenuItem( props, ref ) { { ...buttonProps } > { children } - - { icon && iconPosition === 'right' && } + { ! suffix && ( + + ) } + { ! suffix && icon && iconPosition === 'right' && ( + + ) } { suffix } ); diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap index a204c516b7f543..06aaf4b620dfe0 100644 --- a/packages/components/src/menu-item/test/__snapshots__/index.js.snap +++ b/packages/components/src/menu-item/test/__snapshots__/index.js.snap @@ -30,9 +30,6 @@ exports[`MenuItem should match snapshot when all props provided 1`] = ` d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z" /> - - Suffix - `; diff --git a/packages/components/src/menu-item/test/index.js b/packages/components/src/menu-item/test/index.js index 0259f281ae8518..dabfa51aa173ab 100644 --- a/packages/components/src/menu-item/test/index.js +++ b/packages/components/src/menu-item/test/index.js @@ -31,7 +31,6 @@ describe( 'MenuItem', () => { role="menuitemcheckbox" onClick={ noop } shortcut="mod+shift+alt+w" - suffix={ Suffix } > My item @@ -108,4 +107,40 @@ describe( 'MenuItem', () => { expect( checkboxMenuItem ).toBeChecked(); expect( checkboxMenuItem ).toHaveAttribute( 'aria-checked', 'true' ); } ); + + it( 'should not render shortcut or right icon if suffix provided', () => { + render( + + My item + + ); + + expect( screen.getByText( 'Suffix' ) ).toBeInTheDocument(); + expect( screen.queryByText( 'Shortcut' ) ).not.toBeInTheDocument(); + expect( screen.queryByText( 'Icon' ) ).not.toBeInTheDocument(); + } ); + + it( 'should render left icon despite suffix being provided', () => { + render( + Icon } + iconPosition="left" + role="menuitemcheckbox" + shortcut="Shortcut" + suffix="Suffix" + > + My item + + ); + + expect( screen.getByText( 'Icon' ) ).toBeInTheDocument(); + expect( screen.getByText( 'Suffix' ) ).toBeInTheDocument(); + expect( screen.queryByText( 'Shortcut' ) ).not.toBeInTheDocument(); + } ); } ); From c78a22ae35fce80d15a797e12c759193ca49a21e Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 21 Sep 2022 18:21:54 +1000 Subject: [PATCH 09/12] Remove reset suffix when the menu item is disabled --- packages/components/src/tools-panel/styles.ts | 2 +- .../components/src/tools-panel/tools-panel-header/component.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 645e5f28d761c6..23efef8ac0fa86 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -159,7 +159,7 @@ export const ResetLabel = styled.span` export const DefaultControlsItem = css` color: ${ COLORS.gray[ 900 ] }; - &[aria-disabled='true'] { + &&[aria-disabled='true'] { color: ${ COLORS.gray[ 700 ] }; opacity: 1; diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx index 69db4d2085c142..57416d4d0c311d 100644 --- a/packages/components/src/tools-panel/tools-panel-header/component.tsx +++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx @@ -76,7 +76,6 @@ const DefaultControlsGroup = ( { role="menuitemcheckbox" isSelected aria-disabled - suffix={ resetSuffix } > { label } From 9869bb602931032ac19d10787168a42869b5ee04 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 21 Sep 2022 18:22:47 +1000 Subject: [PATCH 10/12] Fix allowance for icon width in unchecked menu items --- packages/components/src/menu-item/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index 18c2666025a5db..d0d11643d7c96e 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -8,6 +8,7 @@ // Ensure unchecked items have clearance for consistency // with checked items containing an icon or shortcut. padding-right: $grid-unit-60; + box-sizing: initial; } } From beba370b36be0c61949d7495bb4231d133549e61 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 21 Sep 2022 18:33:19 +1000 Subject: [PATCH 11/12] Fix up suffix test for omitting icon --- packages/components/src/menu-item/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/menu-item/test/index.js b/packages/components/src/menu-item/test/index.js index dabfa51aa173ab..fd074759ee3828 100644 --- a/packages/components/src/menu-item/test/index.js +++ b/packages/components/src/menu-item/test/index.js @@ -111,7 +111,7 @@ describe( 'MenuItem', () => { it( 'should not render shortcut or right icon if suffix provided', () => { render( Icon } iconPosition="right" role="menuitemcheckbox" shortcut="Shortcut" From 6ab67b83c3d19b940fcc0982cdb7cc355939b72d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 21 Sep 2022 18:38:31 +1000 Subject: [PATCH 12/12] Add rtl styling for reset label margin --- packages/components/src/tools-panel/styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 23efef8ac0fa86..f76bf47ec18c5b 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -13,7 +13,7 @@ import { Wrapper as BaseControlWrapper, } from '../base-control/styles/base-control-styles'; import { LabelWrapper } from '../input-control/styles/input-control-styles'; -import { COLORS, CONFIG } from '../utils'; +import { COLORS, CONFIG, rtl } from '../utils'; import { space } from '../ui/utils/space'; const toolsPanelGrid = { @@ -152,7 +152,7 @@ export const ResetLabel = styled.span` font-size: 11px; font-weight: 500; line-height: 1.4; - margin-left: ${ space( 3 ) }; + ${ rtl( { marginLeft: space( 3 ) } ) } text-transform: uppercase; `;