diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js index 44635602c947a..05f92a8b8e0f6 100644 --- a/packages/block-editor/src/components/text-decoration-control/index.js +++ b/packages/block-editor/src/components/text-decoration-control/index.js @@ -49,7 +49,7 @@ export default function TextDecorationControl( { 'block-editor-text-decoration-control', className ) } - __experimentalIsIconGroup + __experimentalIsBorderless label={ __( 'Decoration' ) } value={ value } onChange={ onChange } diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js index c71c85993f5ac..f9411f4717d46 100644 --- a/packages/block-editor/src/components/text-transform-control/index.js +++ b/packages/block-editor/src/components/text-transform-control/index.js @@ -47,7 +47,7 @@ export default function TextTransformControl( { value, onChange, ...props } ) { = Template.bind( {} ); WithIcons.args = { ...Default.args, - __experimentalIsIconGroup: true, children: [ { value: 'uppercase', label: 'Uppercase', icon: formatUppercase }, { value: 'lowercase', label: 'Lowercase', icon: formatLowercase }, ].map( mapPropsToOptionIconComponent ), }; + +/** + * A borderless style may be preferred in some contexts. + */ +export const Borderless: ComponentStory< typeof ToggleGroupControl > = + Template.bind( {} ); +Borderless.args = { + ...WithIcons.args, + __experimentalIsBorderless: true, +}; diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md index 484dfa0b24b31..ad25c21a8ae03 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md @@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons'; function Example() { return ( - + + * * cx( styles.ToggleGroupControl( { size } ), - ! __experimentalIsIconGroup && styles.border, + ! __experimentalIsBorderless && styles.border, isBlock && styles.block, className ), - [ className, cx, isBlock, __experimentalIsIconGroup, size ] + [ className, cx, isBlock, __experimentalIsBorderless, size ] ); return (