Skip to content

Commit 4f4821b

Browse files
gziologziolo
committed
Components: Try fixing the active state of toolbar SVG icons on native mobile
1 parent db956c4 commit 4f4821b

File tree

16 files changed

+33
-35
lines changed

16 files changed

+33
-35
lines changed

‎packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control is-bottom is-center components-animate__appear is-from-top\\" style=\\"\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
3+
exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control is-bottom is-center components-animate__appear is-from-top\\" style=\\"\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;

‎packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg class=\\"components-form-toggle__on\\" width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
3+
exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group block-editor-responsive-block-control__group--default\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"screen-reader-text\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;

‎packages/block-library/src/heading/heading-level-icon.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44
import { Path, SVG } from '@wordpress/components';
55

6-
export default function HeadingLevelIcon( { level, __unstableActive } ) {
6+
export default function HeadingLevelIcon( { level, isToggled = false } ) {
77
const levelToPath = {
88
1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
99
2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
@@ -17,7 +17,7 @@ export default function HeadingLevelIcon( { level, __unstableActive } ) {
1717
}
1818

1919
return (
20-
<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" __unstableActive={ __unstableActive } >
20+
<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" isToggled={ isToggled } >
2121
<Path d={ levelToPath[ level ] } />
2222
</SVG>
2323
);

‎packages/block-library/src/heading/heading-toolbar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ class HeadingToolbar extends Component {
1919
createLevelControl( targetLevel, selectedLevel, onChange ) {
2020
const isActive = targetLevel === selectedLevel;
2121
return {
22-
icon: <HeadingLevelIcon level={ targetLevel } __unstableActive={ isActive } />,
22+
icon: <HeadingLevelIcon level={ targetLevel } isToggled={ isActive } />,
2323
// translators: %s: heading level e.g: "1", "2", "3"
2424
title: sprintf( __( 'Heading %d' ), targetLevel ),
2525
isActive,

‎packages/block-library/src/image/edit.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -613,7 +613,7 @@ export class ImageEdit extends Component {
613613
<IconButton
614614
className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': this.state.isEditing } ) }
615615
label={ __( 'Edit image' ) }
616-
aria-pressed={ this.state.isEditing }
616+
isToggled={ this.state.isEditing }
617617
onClick={ this.toggleIsEditing }
618618
icon={ editImageIcon }
619619
/>
@@ -762,7 +762,7 @@ export class ImageEdit extends Component {
762762
key={ scale }
763763
isSmall
764764
isPrimary={ isCurrent }
765-
aria-pressed={ isCurrent }
765+
isToggled={ isCurrent }
766766
onClick={ this.updateDimensions( scaledWidth, scaledHeight ) }
767767
>
768768
{ scale }%

‎packages/components/src/button/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ export function Button( props, ref ) {
4040
} );
4141

4242
const tag = href !== undefined && ! disabled ? 'a' : 'button';
43-
const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled };
43+
const tagProps = tag === 'a' ?
44+
{ href, target } :
45+
{ type: 'button', disabled, 'aria-pressed': isToggled };
4446

4547
return createElement( tag, {
4648
...tagProps,

‎packages/components/src/button/index.native.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@ export function Button( props ) {
6767
hint,
6868
fixedRatio = true,
6969
getStylesFromColorScheme,
70+
isToggled,
7071
'aria-disabled': ariaDisabled,
7172
'aria-label': ariaLabel,
72-
'aria-pressed': ariaPressed,
7373
'data-subscript': subscript,
7474
} = props;
7575

@@ -78,11 +78,11 @@ export function Button( props ) {
7878
const buttonViewStyle = {
7979
opacity: isDisabled ? 0.3 : 1,
8080
...( fixedRatio && styles.fixedRatio ),
81-
...( ariaPressed ? styles.buttonActive : styles.buttonInactive ),
81+
...( isToggled ? styles.buttonActive : styles.buttonInactive ),
8282
};
8383

8484
const states = [];
85-
if ( ariaPressed ) {
85+
if ( isToggled ) {
8686
states.push( 'selected' );
8787
}
8888

@@ -93,7 +93,7 @@ export function Button( props ) {
9393
const subscriptInactive = getStylesFromColorScheme( styles.subscriptInactive, styles.subscriptInactiveDark );
9494

9595
const newChildren = Children.map( children, ( child ) => {
96-
return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, __unstableActive: ariaPressed } ) : child;
96+
return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, isToggled } ) : child;
9797
} );
9898

9999
return (
@@ -111,7 +111,7 @@ export function Button( props ) {
111111
<View style={ buttonViewStyle }>
112112
<View style={ { flexDirection: 'row' } }>
113113
{ newChildren }
114-
{ subscript && ( <Text style={ ariaPressed ? styles.subscriptActive : subscriptInactive }>{ subscript }</Text> ) }
114+
{ subscript && ( <Text style={ isToggled ? styles.subscriptActive : subscriptInactive }>{ subscript }</Text> ) }
115115
</View>
116116
</View>
117117
</TouchableOpacity>

‎packages/components/src/date-time/test/__snapshots__/time.js.snap

-4
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`]
321321
className="components-datetime__time-field components-datetime__time-field-am-pm"
322322
>
323323
<ForwardRef(Button)
324-
aria-pressed={false}
325324
className="components-datetime__time-am-button"
326325
isDefault={true}
327326
isToggled={false}
@@ -330,7 +329,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`]
330329
AM
331330
</ForwardRef(Button)>
332331
<ForwardRef(Button)
333-
aria-pressed={true}
334332
className="components-datetime__time-pm-button"
335333
isDefault={true}
336334
isToggled={true}
@@ -504,7 +502,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
504502
className="components-datetime__time-field components-datetime__time-field-am-pm"
505503
>
506504
<ForwardRef(Button)
507-
aria-pressed={false}
508505
className="components-datetime__time-am-button"
509506
isDefault={true}
510507
isToggled={false}
@@ -513,7 +510,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
513510
AM
514511
</ForwardRef(Button)>
515512
<ForwardRef(Button)
516-
aria-pressed={true}
517513
className="components-datetime__time-pm-button"
518514
isDefault={true}
519515
isToggled={true}

‎packages/components/src/date-time/time.js

-2
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,6 @@ class TimePicker extends Component {
301301
{ is12Hour && (
302302
<div className="components-datetime__time-field components-datetime__time-field-am-pm">
303303
<Button
304-
aria-pressed={ am === 'AM' }
305304
isDefault
306305
className="components-datetime__time-am-button"
307306
isToggled={ am === 'AM' }
@@ -310,7 +309,6 @@ class TimePicker extends Component {
310309
{ __( 'AM' ) }
311310
</Button>
312311
<Button
313-
aria-pressed={ am === 'PM' }
314312
isDefault
315313
className="components-datetime__time-pm-button"
316314
isToggled={ am === 'PM' }

‎packages/components/src/primitives/svg/index.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* External dependencies
33
*/
4-
import { omit } from 'lodash';
4+
import classnames from 'classnames';
55

66
/**
77
* WordPress dependencies
@@ -14,15 +14,16 @@ export const Path = ( props ) => createElement( 'path', props );
1414
export const Polygon = ( props ) => createElement( 'polygon', props );
1515
export const Rect = ( props ) => createElement( 'rect', props );
1616

17-
export const SVG = ( props ) => {
17+
export const SVG = ( { className, isToggled, ...props } ) => {
1818
const appliedProps = {
1919
...props,
20+
className: classnames( className, { 'is-toggled': isToggled } ) || undefined,
2021
role: 'img',
2122
'aria-hidden': 'true',
2223
focusable: 'false',
2324
};
2425

2526
// Disable reason: We need to have a way to render HTML tag for web.
2627
// eslint-disable-next-line react/forbid-elements
27-
return <svg { ...omit( appliedProps, '__unstableActive' ) } />;
28+
return <svg { ...appliedProps } />;
2829
};

‎packages/components/src/primitives/svg/index.native.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,21 @@ export {
1616
Rect,
1717
} from 'react-native-svg';
1818

19-
export const SVG = ( props ) => {
19+
export const SVG = ( { className = '', isToggled, ...props } ) => {
2020
const colorScheme = props.colorScheme || 'light';
21-
const stylesFromClasses = ( props.className || '' ).split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean );
22-
const defaultStyle = props.__unstableActive ? styles[ 'is-active' ] : styles[ 'components-toolbar__control-' + colorScheme ];
21+
const stylesFromClasses = className.split( ' ' ).map( ( element ) => styles[ element ] ).filter( Boolean );
22+
const defaultStyle = isToggled ? styles[ 'is-active' ] : styles[ 'components-toolbar__control-' + colorScheme ];
2323
const styleValues = Object.assign( {}, props.style, defaultStyle, ...stylesFromClasses );
2424

25-
const safeProps = { ...props, style: styleValues };
25+
const appliedProps = { ...props, style: styleValues };
2626

2727
return (
2828
<Svg
2929
//We want to re-render when style color is changed
30-
key={ safeProps.style.color }
30+
key={ appliedProps.style.color }
3131
height="100%"
3232
width="100%"
33-
{ ...safeProps }
33+
{ ...appliedProps }
3434
/>
3535
);
3636
};

‎packages/components/src/toolbar-button/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function ToolbarButton( {
5050
className,
5151
{ 'is-active': isActive }
5252
) }
53-
aria-pressed={ isActive }
53+
isToggled={ isActive }
5454
disabled={ isDisabled }
5555
{ ...extraProps }
5656
/>

0 commit comments

Comments
 (0)