Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FontSizePicker: Fix header order in RTL languages #44590

Merged
merged 8 commits into from
Oct 12, 2022
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
- `Popover`: refine position-to-placement conversion logic, add tests ([#44377](https://github.com/WordPress/gutenberg/pull/44377)).
- `ToggleGroupControl`: adjust icon color when inactive, from `gray-700` to `gray-900` ([#44575](https://github.com/WordPress/gutenberg/pull/44575)).
- `TokenInput`: improve logic around the `aria-activedescendant` attribute, which was causing unintended focus behavior for some screen readers ([#44526](https://github.com/WordPress/gutenberg/pull/44526)).
- `FontSizePicker`: Fix header order in RTL languages ([#44590](https://github.com/WordPress/gutenberg/pull/44590)).

### Internal

Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/font-size-picker/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import styled from '@emotion/styled';
import BaseControl from '../base-control';
import Button from '../button';
import { space } from '../ui/utils/space';
import { COLORS } from '../utils';
import { COLORS, rtl } from '../utils';
import type { FontSizePickerProps } from './types';

export const Container = styled.fieldset`
Expand All @@ -19,12 +19,14 @@ export const Container = styled.fieldset`
`;

export const HeaderLabel = styled( BaseControl.VisualLabel )`
display: inline-block;
margin-bottom: 0;
`;

export const HeaderHint = styled.span`
color: ${ COLORS.gray[ 700 ] };
margin-left: ${ space( 1 ) };
display: inline-block;
${ rtl( { marginLeft: space( 1 ) }, { marginRight: space( 1 ) } )() }
noisysocks marked this conversation as resolved.
Show resolved Hide resolved
`;

export const Controls = styled.div< {
Expand Down