From 38b4537399fac16c5e3f00124426657873321085 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 28 Jun 2022 20:49:03 +0900 Subject: [PATCH 1/7] Remove unused export --- .../toggle-group-control-option-base/styles.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts index 0ae743fa7aa9e..6c40f8861cfa6 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts @@ -69,7 +69,3 @@ export const ButtonContentView = styled.div` export const separatorActive = css` background: transparent; `; - -export const medium = css` - min-height: ${ CONFIG.controlHeight }; -`; From e4a108520980eef4d8b800bc6bdf60396b5cf971 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 28 Jun 2022 21:34:29 +0900 Subject: [PATCH 2/7] ToggleGroupControl: Add size variants --- .../toggle-group-control/component.tsx | 5 ++-- .../toggle-group-control/styles.ts | 25 +++++++++++++++++-- .../src/toggle-group-control/types.ts | 6 +++++ 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx index a7727ccaf0667..10caebfc1d49f 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx @@ -47,6 +47,7 @@ function ToggleGroupControl( hideLabelFromVision = false, help, onChange = noop, + size = 'default', value, children, ...otherProps @@ -83,12 +84,12 @@ function ToggleGroupControl( const classes = useMemo( () => cx( - styles.ToggleGroupControl, + styles.ToggleGroupControl( { size } ), isBlock && styles.block, 'medium', className ), - [ className, cx, isBlock ] + [ className, cx, isBlock, size ] ); return ( diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts index 0bc2039d50772..854236008e8c3 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts +++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts @@ -8,19 +8,26 @@ import styled from '@emotion/styled'; * Internal dependencies */ import { CONFIG, COLORS, reduceMotion } from '../../utils'; +import type { ToggleGroupControlProps } from '../types'; -export const ToggleGroupControl = css` +export const ToggleGroupControl = ( { + size, +}: { + size: NonNullable< ToggleGroupControlProps[ 'size' ] >; +} ) => css` background: ${ COLORS.ui.background }; border: 1px solid; border-color: ${ COLORS.ui.border }; border-radius: ${ CONFIG.controlBorderRadius }; display: inline-flex; - min-height: ${ CONFIG.controlHeight }; min-width: 0; padding: 2px; position: relative; transition: transform ${ CONFIG.transitionDurationFastest } linear; ${ reduceMotion( 'transition' ) } + + ${ toggleGroupControlSize( size ) } + &:hover { border-color: ${ COLORS.ui.borderHover }; } @@ -33,6 +40,20 @@ export const ToggleGroupControl = css` } `; +export const toggleGroupControlSize = ( + size: NonNullable< ToggleGroupControlProps[ 'size' ] > +) => { + const heights = { + '__unstable-small': '32px', + default: '36px', + '__unstable-large': '40px', + }; + + return css` + min-height: ${ heights[ size ] }; + `; +}; + export const block = css` display: flex; width: 100%; diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts index 39f9f87af6869..508a1cf013b4b 100644 --- a/packages/components/src/toggle-group-control/types.ts +++ b/packages/components/src/toggle-group-control/types.ts @@ -104,6 +104,12 @@ export type ToggleGroupControlProps = Omit< * using help property as the content. */ help?: ReactNode; + /** + * The size variant of the control. + * + * @default 'default' + */ + size?: '__unstable-small' | 'default' | '__unstable-large'; }; export type ToggleGroupControlContextProps = RadioStateReturn & { From 39750d4ca97ab6b00a3bbca61c9e741c27a5834f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 28 Jun 2022 21:34:50 +0900 Subject: [PATCH 3/7] Add stories --- .../src/toggle-group-control/stories/index.js | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js index 797418b3cf80c..32d000f4c5262 100644 --- a/packages/components/src/toggle-group-control/stories/index.js +++ b/packages/components/src/toggle-group-control/stories/index.js @@ -23,6 +23,12 @@ import Button from '../../button'; export default { component: ToggleGroupControl, title: 'Components (Experimental)/ToggleGroupControl', + argTypes: { + size: { + control: 'select', + options: [ 'default', '__unstable-small', '__unstable-large' ], + }, + }, parameters: { knobs: { disable: false }, }, @@ -33,7 +39,7 @@ const KNOBS_GROUPS = { ToggleGroupControlOption: 'ToggleGroupControlOption', }; -const _default = ( { options } ) => { +const _default = ( { options, ...props } ) => { const [ value, setValue ] = useState( options[ 0 ].value ); const label = text( `${ KNOBS_GROUPS.ToggleGroupControl }: label`, @@ -87,6 +93,7 @@ const _default = ( { options } ) => { return ( { +export const WithIcons = ( props ) => { const [ state, setState ] = useState(); return ( { ); }; +WithIcons.args = { + ...Default.args, +}; -export const WithReset = () => { +export const WithReset = ( props ) => { const [ alignState, setAlignState ] = useState(); const aligns = [ 'Left', 'Center', 'Right' ]; const alignOptions = aligns.map( ( key, index ) => ( @@ -172,6 +184,7 @@ export const WithReset = () => { return ( { ); }; +WithReset.args = { + ...Default.args, +}; From 3129622ab2917eabdc4500575702a160e0c8cce9 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 28 Jun 2022 21:35:17 +0900 Subject: [PATCH 4/7] Remove 'medium' hardcoded class name --- .../src/toggle-group-control/toggle-group-control/component.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx index 10caebfc1d49f..8d928b0a6b5e7 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx @@ -86,7 +86,6 @@ function ToggleGroupControl( cx( styles.ToggleGroupControl( { size } ), isBlock && styles.block, - 'medium', className ), [ className, cx, isBlock, size ] From b52d7e3aa06571f67b4e452188124aad879ecc7b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 9 Jul 2022 02:49:52 +0900 Subject: [PATCH 5/7] Remove small size --- packages/components/src/toggle-group-control/stories/index.js | 2 +- .../src/toggle-group-control/toggle-group-control/styles.ts | 1 - packages/components/src/toggle-group-control/types.ts | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js index 32d000f4c5262..8299fc70f1166 100644 --- a/packages/components/src/toggle-group-control/stories/index.js +++ b/packages/components/src/toggle-group-control/stories/index.js @@ -26,7 +26,7 @@ export default { argTypes: { size: { control: 'select', - options: [ 'default', '__unstable-small', '__unstable-large' ], + options: [ 'default', '__unstable-large' ], }, }, parameters: { diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts index 854236008e8c3..f977b755b7c78 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts +++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts @@ -44,7 +44,6 @@ export const toggleGroupControlSize = ( size: NonNullable< ToggleGroupControlProps[ 'size' ] > ) => { const heights = { - '__unstable-small': '32px', default: '36px', '__unstable-large': '40px', }; diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts index 508a1cf013b4b..b77779b013804 100644 --- a/packages/components/src/toggle-group-control/types.ts +++ b/packages/components/src/toggle-group-control/types.ts @@ -109,7 +109,7 @@ export type ToggleGroupControlProps = Omit< * * @default 'default' */ - size?: '__unstable-small' | 'default' | '__unstable-large'; + size?: 'default' | '__unstable-large'; }; export type ToggleGroupControlContextProps = RadioStateReturn & { From f8ba70c630ee125a577319e29342ad71ea334818 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 9 Jul 2022 02:51:09 +0900 Subject: [PATCH 6/7] Update snapshot --- .../toggle-group-control/test/__snapshots__/index.js.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 25b38d1943442..64c1e6833c0c1 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 @@ -28,12 +28,12 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = ` 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; + min-height: 36px; } @media ( prefers-reduced-motion: reduce ) { @@ -167,7 +167,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
Date: Sat, 9 Jul 2022 02:53:06 +0900 Subject: [PATCH 7/7] Add changelog --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 628a16ac2791f..6d004e1bea083 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `BoxControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#42094](https://github.com/WordPress/gutenberg/pull/42094)). +### Enhancement + +- `ToggleGroupControl`: Add large size variant ([#42008](https://github.com/WordPress/gutenberg/pull/42008/)). + ### Internal - `Grid`: Convert to TypeScript ([#41923](https://github.com/WordPress/gutenberg/pull/41923)).