diff --git a/docs/manifest.json b/docs/manifest.json index c5881277eeca9..91bebab753a3b 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1205,6 +1205,18 @@ "markdown_source": "../packages/components/src/toggle-control/README.md", "parent": "components" }, + { + "title": "ToggleGroupControlOptionBase", + "slug": "toggle-group-control-option-base", + "markdown_source": "../packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md", + "parent": "components" + }, + { + "title": "ToggleGroupControlOptionIcon", + "slug": "toggle-group-control-option-icon", + "markdown_source": "../packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md", + "parent": "components" + }, { "title": "ToggleGroupControlOption", "slug": "toggle-group-control-option", diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 3ef364d531813..e92a7890ef6ce 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ - Add `BorderControl` component ([#37769](https://github.com/WordPress/gutenberg/pull/37769)). - Add `BorderBoxControl` component ([#38876](https://github.com/WordPress/gutenberg/pull/38876)). +- Add `ToggleGroupControlOptionIcon` component ([#39760](https://github.com/WordPress/gutenberg/pull/39760)). ### Bug Fix @@ -26,7 +27,7 @@ - `CustomSelectControl`: Add `__next36pxDefaultSize` flag for larger default size ([#39401](https://github.com/WordPress/gutenberg/pull/39401)). - `BaseControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#39325](https://github.com/WordPress/gutenberg/pull/39325)). - `Divider`: Make the divider visible by default (`display: inline`) in flow layout containers when the divider orientation is vertical ([#39316](https://github.com/WordPress/gutenberg/pull/39316)). -- Stop using deprecated `event.keyCode` in favor of `event.key` for keyboard events in `UnitControl` and `InputControl`. ([#39360](https://github.com/WordPress/gutenberg/pull/39360)) +- Stop using deprecated `event.keyCode` in favor of `event.key` for keyboard events in `UnitControl` and `InputControl`. ([#39360](https://github.com/WordPress/gutenberg/pull/39360)) - `ColorPalette`: refine custom color button's label. ([#39386](https://github.com/WordPress/gutenberg/pull/39386)) - Add `onClick` prop on `FormFileUpload`. ([#39268](https://github.com/WordPress/gutenberg/pull/39268)) - `FocalPointPicker`: stop using `UnitControl`'s deprecated `unit` prop ([#39504](https://github.com/WordPress/gutenberg/pull/39504)). diff --git a/packages/components/src/index.js b/packages/components/src/index.js index b3a820f05a38d..6b90c5a1142e3 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -146,6 +146,7 @@ export { default as ToggleControl } from './toggle-control'; export { ToggleGroupControl as __experimentalToggleGroupControl, ToggleGroupControlOption as __experimentalToggleGroupControlOption, + ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon, } from './toggle-group-control'; export { default as Toolbar } from './toolbar'; export { default as ToolbarButton } from './toolbar-button'; diff --git a/packages/components/src/toggle-group-control/index.ts b/packages/components/src/toggle-group-control/index.ts index 5b84f88a7ee0c..e5e40497d9220 100644 --- a/packages/components/src/toggle-group-control/index.ts +++ b/packages/components/src/toggle-group-control/index.ts @@ -1,2 +1,3 @@ export { ToggleGroupControl } from './toggle-group-control'; export { ToggleGroupControlOption } from './toggle-group-control-option'; +export { ToggleGroupControlOptionIcon } from './toggle-group-control-option-icon'; diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js index 99e6a391a7cef..797418b3cf80c 100644 --- a/packages/components/src/toggle-group-control/stories/index.js +++ b/packages/components/src/toggle-group-control/stories/index.js @@ -7,11 +7,16 @@ import { boolean, text } from '@storybook/addon-knobs'; * WordPress dependencies */ import { useState } from '@wordpress/element'; +import { formatLowercase, formatUppercase } from '@wordpress/icons'; /** * Internal dependencies */ -import { ToggleGroupControl, ToggleGroupControlOption } from '../index'; +import { + ToggleGroupControl, + ToggleGroupControlOption, + ToggleGroupControlOptionIcon, +} from '../index'; import { View } from '../../view'; import Button from '../../button'; @@ -57,23 +62,23 @@ const _default = ( { options } ) => { KNOBS_GROUPS.ToggleGroupControl ); - const controlOptions = options.map( ( opt, index ) => ( + const controlOptions = options.map( ( option, index ) => ( @@ -125,6 +130,31 @@ WithAriaLabel.args = { ], }; +export const WithIcons = () => { + const [ state, setState ] = useState(); + return ( + + + + + ); +}; + export const WithReset = () => { const [ alignState, setAlignState ] = useState(); const aligns = [ 'Left', 'Center', 'Right' ]; diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap index 51b4d08703550..44dd725ae3e6c 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ToggleGroupControl should render correctly 1`] = ` +exports[`ToggleGroupControl should render correctly with icons 1`] = ` .emotion-0 { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; @@ -79,6 +79,229 @@ exports[`ToggleGroupControl should render correctly 1`] = ` border: none; border-radius: 2px; color: #757575; + fill: currentColor; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-family: inherit; + height: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + line-height: 100%; + outline: none; + padding: 0 12px; + position: relative; + text-align: center; + -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear; + transition: background 160ms linear,color 160ms linear,font-weight 60ms linear; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 100%; + z-index: 2; +} + +@media ( prefers-reduced-motion: reduce ) { + .emotion-10 { + transition-duration: 0ms; + } +} + +.emotion-10::-moz-focus-inner { + border: 0; +} + +.emotion-10:active { + background: #fff; +} + +.emotion-11 { + color: #fff; + background-color: #1e1e1e; +} + +.emotion-12 { + font-size: 13px; + line-height: 1; +} + +
+
+
+ + Test Toggle Group Control + +
+
+
+ +
+
+ +
+
+
+
+`; + +exports[`ToggleGroupControl should render correctly with text options 1`] = ` +.emotion-0 { + font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-size: 13px; +} + +.emotion-2 { + margin-bottom: calc(4px * 2); +} + +.components-panel__row .emotion-2 { + margin-bottom: inherit; +} + +.emotion-4 { + display: inline-block; + margin-bottom: calc(4px * 2); +} + +.emotion-6 { + background: #fff; + border: 1px solid; + border-color: #757575; + border-radius: 2px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + min-height: 36px; + min-width: 0; + padding: 2px; + position: relative; + -webkit-transition: -webkit-transform 100ms linear; + transition: transform 100ms linear; +} + +@media ( prefers-reduced-motion: reduce ) { + .emotion-6 { + transition-duration: 0ms; + } +} + +.emotion-6:hover { + border-color: #757575; +} + +.emotion-6:focus-within { + border-color: var( --wp-admin-theme-color-darker-10, #007cba); + box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b); + outline: none; + z-index: 1; +} + +.emotion-8 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + max-width: 100%; + min-width: 0; + position: relative; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.emotion-10 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background: transparent; + border: none; + border-radius: 2px; + color: #757575; + fill: currentColor; cursor: pointer; display: -webkit-box; display: -webkit-flex; @@ -152,10 +375,10 @@ exports[`ToggleGroupControl should render correctly 1`] = `