diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 230c98893e1d07..9bdedb9fe09d17 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -121,9 +121,9 @@ $z-layers: ( // Needs to appear bellow other color circular picker related UI elements. ".components-circular-option-picker__option-wrapper::before": -1, - ".components-circular-option-picker__option.is-active": 1, - // Needs to be higher than .components-circular-option-picker__option.is-active. - ".components-circular-option-picker__option.is-active + .dashicons-saved": 2 + ".components-circular-option-picker__option.is-pressed": 1, + // Needs to be higher than .components-circular-option-picker__option.is-pressed. + ".components-circular-option-picker__option.is-pressed + .dashicons-saved": 2 ); @function z-index( $key ) { 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 a3c7de7bd7661f..e1dba581caf897 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/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index d4e98de6179b12..cb5fc3806f0301 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -272,7 +272,7 @@ export class MediaPlaceholder extends Component { + ); }; diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js index 05e3580bfacbe6..27c5a24f490e87 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 52d9245be0a157..26dd1812d6b5ea 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 ea87a514227eaa..bd5268c0ea77c2 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 1abac2f94eeabb..45e5eb1893b5b3 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -49,16 +49,14 @@ .edit-post-header .components-button { // Header toggle buttons. - &.is-toggled { + &.is-pressed { color: $white; background: $dark-gray-500; - margin: 1px; - padding: 7px; } // 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-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 79459ca118d2f6..c4c84425a8ba53 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 df197d90cc84c8..9b509415dd4cd8 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/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js index a112ea053b2df4..94754a4dc05405 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 9d724a9324cb3e..707b97a8e35f95 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -336,30 +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`] = ` `; @@ -3727,7 +3728,7 @@ exports[`Storyshots Components|ToolbarGroup Default 1`] = `