From 442afdd81355a20ecff2ebee6d319a71e5eccf35 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 3 Oct 2019 14:13:46 +0200 Subject: [PATCH 1/5] Components: Try fixing the active state of toolbar SVG icons on native mobile --- .../test/__snapshots__/index.js.snap | 2 +- .../test/__snapshots__/index.js.snap | 2 +- .../src/heading/heading-level-icon.js | 4 +- .../src/heading/heading-toolbar.js | 2 +- packages/block-library/src/image/edit.js | 46 ++++++++++++++++++- packages/components/src/button/index.js | 4 +- .../components/src/button/index.native.js | 10 ++-- .../date-time/test/__snapshots__/time.js.snap | 4 -- packages/components/src/date-time/time.js | 2 - .../components/src/primitives/svg/index.js | 7 +-- .../src/primitives/svg/index.native.js | 12 ++--- .../components/src/toolbar-button/index.js | 2 +- .../__snapshots__/plugins-api.test.js.snap | 4 +- .../test/__snapshots__/index.js.snap | 2 +- .../test/__snapshots__/index.js.snap | 2 +- storybook/test/__snapshots__/index.js.snap | 5 +- 16 files changed, 76 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap index a3c7de7bd7661..e1dba581caf89 100644 --- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should display with required props 1`] = `"
"`; +exports[`Basic rendering should display with required props 1`] = `"
"`; diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap index d05674f87f31d..27b9533f39730 100644 --- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render with required props 1`] = `"
Padding

Toggle between using the same value for all screen sizes or using a unique value per screen size.

All is used here for testing purposes to ensure we have access to details about the device.

"`; +exports[`Basic rendering should render with required props 1`] = `"
Padding

Toggle between using the same value for all screen sizes or using a unique value per screen size.

All is used here for testing purposes to ensure we have access to details about the device.

"`; diff --git a/packages/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js index aa1e964f3ec41..6c4580bd81ddf 100644 --- a/packages/block-library/src/heading/heading-level-icon.js +++ b/packages/block-library/src/heading/heading-level-icon.js @@ -3,7 +3,7 @@ */ import { Path, SVG } from '@wordpress/components'; -export default function HeadingLevelIcon( { level, __unstableActive } ) { +export default function HeadingLevelIcon( { level, isToggled = false } ) { const levelToPath = { 1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z', 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 } ) { } return ( - + ); diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js index 330712435e640..81717a1c105e2 100644 --- a/packages/block-library/src/heading/heading-toolbar.js +++ b/packages/block-library/src/heading/heading-toolbar.js @@ -19,7 +19,7 @@ class HeadingToolbar extends Component { createLevelControl( targetLevel, selectedLevel, onChange ) { const isActive = targetLevel === selectedLevel; return { - icon: , + icon: , // translators: %s: heading level e.g: "1", "2", "3" title: sprintf( __( 'Heading %d' ), targetLevel ), isActive, diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 0214273dd1f2e..38646119401c2 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -596,6 +596,7 @@ export class ImageEdit extends Component { onError={ this.onUploadError } /> } { url && ( +<<<<<<< HEAD +======= + <> + + + + + + + + + + } + /> + + +>>>>>>> Components: Try fixing the active state of toolbar SVG icons on native mobile ) } ); @@ -737,7 +781,7 @@ export class ImageEdit extends Component { key={ scale } isSmall isPrimary={ isCurrent } - aria-pressed={ isCurrent } + isToggled={ isCurrent } onClick={ this.updateDimensions( scaledWidth, scaledHeight ) } > { scale }% diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index da3441e7f2982..75383b36a5dfb 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -40,7 +40,9 @@ export function Button( props, ref ) { } ); const tag = href !== undefined && ! disabled ? 'a' : 'button'; - const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled }; + const tagProps = tag === 'a' ? + { href, target } : + { type: 'button', disabled, 'aria-pressed': isToggled }; return createElement( tag, { ...tagProps, diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index e57cad3ec34d8..e593e37ddd2f6 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -67,9 +67,9 @@ export function Button( props ) { hint, fixedRatio = true, getStylesFromColorScheme, + isToggled, 'aria-disabled': ariaDisabled, 'aria-label': ariaLabel, - 'aria-pressed': ariaPressed, 'data-subscript': subscript, } = props; @@ -78,11 +78,11 @@ export function Button( props ) { const buttonViewStyle = { opacity: isDisabled ? 0.3 : 1, ...( fixedRatio && styles.fixedRatio ), - ...( ariaPressed ? styles.buttonActive : styles.buttonInactive ), + ...( isToggled ? styles.buttonActive : styles.buttonInactive ), }; const states = []; - if ( ariaPressed ) { + if ( isToggled ) { states.push( 'selected' ); } @@ -93,7 +93,7 @@ export function Button( props ) { const subscriptInactive = getStylesFromColorScheme( styles.subscriptInactive, styles.subscriptInactiveDark ); const newChildren = Children.map( children, ( child ) => { - return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, __unstableActive: ariaPressed } ) : child; + return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, isToggled } ) : child; } ); return ( @@ -111,7 +111,7 @@ export function Button( props ) { { newChildren } - { subscript && ( { subscript } ) } + { subscript && ( { subscript } ) } diff --git a/packages/components/src/date-time/test/__snapshots__/time.js.snap b/packages/components/src/date-time/test/__snapshots__/time.js.snap index d67e11da54846..77c480312d4a8 100644 --- a/packages/components/src/date-time/test/__snapshots__/time.js.snap +++ b/packages/components/src/date-time/test/__snapshots__/time.js.snap @@ -321,7 +321,6 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`] className="components-datetime__time-field components-datetime__time-field-am-pm" >
(no title)
Sidebar title plugin
"`; +exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; -exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; +exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap index 79459ca118d2f..c4c84425a8ba5 100644 --- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginPostPublishPanel renders fill properly 1`] = `"

My panel content
"`; +exports[`PluginPostPublishPanel renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap index df197d90cc84c..9b509415dd4cd 100644 --- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; +exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 9d724a9324cb3..730d082087454 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -356,6 +356,7 @@ exports[`Storyshots Components|Button Small 1`] = ` exports[`Storyshots Components|Button Toggled 1`] = ` + ); }; diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js index 05e3580bfacbe..27c5a24f490e8 100644 --- a/packages/components/src/button/test/index.js +++ b/packages/components/src/button/test/index.js @@ -21,7 +21,7 @@ describe( 'Button', () => { expect( button.hasClass( 'components-button' ) ).toBe( true ); expect( button.hasClass( 'is-large' ) ).toBe( false ); expect( button.hasClass( 'is-primary' ) ).toBe( false ); - expect( button.hasClass( 'is-toggled' ) ).toBe( false ); + expect( button.hasClass( 'is-pressed' ) ).toBe( false ); expect( button.prop( 'disabled' ) ).toBeUndefined(); expect( button.prop( 'type' ) ).toBe( 'button' ); expect( button.type() ).toBe( 'button' ); @@ -56,10 +56,10 @@ describe( 'Button', () => { expect( button.hasClass( 'is-primary' ) ).toBe( false ); } ); - it( 'should render a button element with is-toggled without button class', () => { - const button = shallow(
Sidebar title plugin
"`; +exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; -exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; +exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 52d9245be0a15..26dd1812d6b5e 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -60,7 +60,7 @@ function Header( { icon="admin-generic" label={ __( 'Settings' ) } onClick={ toggleGeneralSidebar } - isToggled={ isEditorSidebarOpened } + isPressed={ isEditorSidebarOpened } aria-expanded={ isEditorSidebarOpened } shortcut={ shortcuts.toggleSidebar } /> diff --git a/packages/edit-post/src/components/header/pinned-plugins/style.scss b/packages/edit-post/src/components/header/pinned-plugins/style.scss index ea87a514227ea..bd5268c0ea77c 100644 --- a/packages/edit-post/src/components/header/pinned-plugins/style.scss +++ b/packages/edit-post/src/components/header/pinned-plugins/style.scss @@ -8,7 +8,7 @@ .components-icon-button { margin-left: 4px; - &.is-toggled { + &.is-pressed { margin-left: 5px; } @@ -19,18 +19,18 @@ } // Colorize plugin icons to ensure contrast and cohesion, but allow plugin developers to override. - .components-icon-button:not(.is-toggled) svg, - .components-icon-button:not(.is-toggled) svg * { + .components-icon-button:not(.is-pressed) svg, + .components-icon-button:not(.is-pressed) svg * { stroke: $dark-gray-500; fill: $dark-gray-500; stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily. } // Forcefully colorize hover and toggled plugin icon states to ensure legibility and consistency. - .components-icon-button.is-toggled svg, - .components-icon-button.is-toggled svg *, - .components-icon-button.is-toggled:hover svg, - .components-icon-button.is-toggled:hover svg * { + .components-icon-button.is-pressed svg, + .components-icon-button.is-pressed svg *, + .components-icon-button.is-pressed:hover svg, + .components-icon-button.is-pressed:hover svg * { stroke: $white !important; fill: $white !important; stroke-width: 0; // !important is omitted here, so stroke-only icons can override easily. diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index b5eaa5049e058..45e5eb1893b5b 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -49,14 +49,14 @@ .edit-post-header .components-button { // Header toggle buttons. - &.is-toggled { + &.is-pressed { color: $white; background: $dark-gray-500; } // The !important in this ruleset need to override the pile of :not() selectors used in the icon-button. - &.is-toggled:hover, - &.is-toggled:focus { + &.is-pressed:hover, + &.is-pressed:focus { box-shadow: 0 0 0 $border-width $dark-gray-500, inset 0 0 0 $border-width $white !important; color: $white !important; background: $dark-gray-500 !important; diff --git a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js index a112ea053b2df..94754a4dc0540 100644 --- a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js @@ -36,7 +36,7 @@ function PluginSidebar( props ) { icon={ icon } label={ title } onClick={ toggleSidebar } - isToggled={ isActive } + isPressed={ isActive } aria-expanded={ isActive } /> } @@ -51,7 +51,7 @@ function PluginSidebar( props ) { icon={ isPinned ? 'star-filled' : 'star-empty' } label={ isPinned ? __( 'Unpin from toolbar' ) : __( 'Pin to toolbar' ) } onClick={ togglePin } - isToggled={ isPinned } + isPressed={ isPinned } aria-expanded={ isPinned } /> ) } diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index a6f53cc9beb2a..707b97a8e35f9 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -336,31 +336,31 @@ exports[`Storyshots Components|Button Link 1`] = ` `; -exports[`Storyshots Components|Button Primary 1`] = ` +exports[`Storyshots Components|Button Pressed 1`] = ` `; -exports[`Storyshots Components|Button Small 1`] = ` +exports[`Storyshots Components|Button Primary 1`] = ` `; -exports[`Storyshots Components|Button Toggled 1`] = ` +exports[`Storyshots Components|Button Small 1`] = ` `; @@ -3728,7 +3728,7 @@ exports[`Storyshots Components|ToolbarGroup Default 1`] = `