ToggleGroupControl: Add de-selectable variant

packages/block-editor/src/layouts/constrained.js

@@ -116,7 +116,6 @@ export default {
 					) }
 				</p>
 				<ToggleGroupControl
-					__experimentalIsBorderless
 					label={ __( 'Justification' ) }
 					value={ justifyContent }
 					onChange={ onJustificationChange }

packages/components/CHANGELOG.md

@@ -54,6 +54,10 @@
 -   `Navigator`: prevent partially hiding focus ring styles, by removing unnecessary overflow rules on `NavigatorScreen` ([#44973](https://github.com/WordPress/gutenberg/pull/44973)).
 -   `Navigator`: restore focus only once per location  ([#44972](https://github.com/WordPress/gutenberg/pull/44972)).
 
+### Enhancements
+
+-   `ToggleGroupControl`: Add `isDeselectable` prop to allow deselecting the selected option ([#45123](https://github.com/WordPress/gutenberg/pull/45123)).
+
 ### Documentation
 
 -   `VisuallyHidden`: Add some notes on best practices around stacking contexts when using this component ([#44867](https://github.com/WordPress/gutenberg/pull/44867)).

packages/components/src/toggle-group-control/stories/index.tsx

@@ -124,11 +124,11 @@ WithIcons.args = {
 };
 
 /**
- * A borderless style may be preferred in some contexts.
+ * When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
  */
-export const Borderless: ComponentStory< typeof ToggleGroupControl > =
+export const Deselectable: ComponentStory< typeof ToggleGroupControl > =
 	Template.bind( {} );
-Borderless.args = {
+Deselectable.args = {
 	...WithIcons.args,
-	__experimentalIsBorderless: true,
+	isDeselectable: true,
 };

packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -41,7 +41,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-8 {
   background: #fff;
   border: 1px solid transparent;
-  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -53,6 +52,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   transition: transform 100ms linear;
   min-height: 36px;
   border-color: #757575;
+  border-radius: 2px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -61,21 +61,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   }
 }
 
+.emotion-8:hover {
+  border-color: #757575;
+}
+
 .emotion-8:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
-.emotion-8:hover {
-  border-color: #757575;
-}
-
 .emotion-10 {
   background: #1e1e1e;
   border-radius: 2px;
-  box-shadow: transparent;
   left: 0;
   position: absolute;
   top: 2px;
@@ -142,6 +141,11 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   user-select: none;
   width: 100%;
   z-index: 2;
+  color: #1e1e1e;
+  width: 30px;
+  padding-left: 0;
+  padding-right: 0;
+  color: #fff;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -158,24 +162,75 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   background: #fff;
 }
 
+.emotion-14:active {
+  background: transparent;
+}
+
 .emotion-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.emotion-19 {
+  -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;
+  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;
   color: #1e1e1e;
   width: 30px;
   padding-left: 0;
   padding-right: 0;
 }
 
-.emotion-16 {
-  color: #fff;
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-19 {
+    transition-duration: 0ms;
+  }
 }
 
-.emotion-16:active {
-  background: transparent;
+.emotion-19::-moz-focus-inner {
+  border: 0;
 }
 
-.emotion-17 {
-  font-size: 13px;
-  line-height: 1;
+.emotion-19:active {
+  background: #fff;
 }
 
 <div>
@@ -199,7 +254,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-1"
+        id="toggle-group-control-as-radio-group-1"
         role="radiogroup"
       >
         <div
@@ -213,21 +268,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         />
         <div
           class="emotion-12 emotion-13"
-          data-active="true"
         >
           <button
             aria-checked="true"
             aria-label="Uppercase"
-            class="emotion-14 emotion-15 components-toggle-group-control-option-base emotion-16"
+            class="emotion-14 components-toggle-group-control-option-base"
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-1-2"
+            id="toggle-group-control-as-radio-group-1-2"
             role="radio"
             tabindex="0"
           >
             <div
-              class="emotion-17 emotion-18"
+              class="emotion-15 emotion-16"
             >
               <svg
                 aria-hidden="true"
@@ -246,21 +300,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         </div>
         <div
           class="emotion-12 emotion-13"
-          data-active="false"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-14 emotion-15 components-toggle-group-control-option-base"
+            class="emotion-19 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-1-3"
+            id="toggle-group-control-as-radio-group-1-3"
             role="radio"
             tabindex="-1"
           >
             <div
-              class="emotion-17 emotion-18"
+              class="emotion-15 emotion-16"
             >
               <svg
                 aria-hidden="true"
@@ -324,7 +377,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-8 {
   background: #fff;
   border: 1px solid transparent;
-  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -336,6 +388,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   transition: transform 100ms linear;
   min-height: 36px;
   border-color: #757575;
+  border-radius: 2px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -344,17 +397,17 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   }
 }
 
+.emotion-8:hover {
+  border-color: #757575;
+}
+
 .emotion-8:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
   outline: none;
   z-index: 1;
 }
 
-.emotion-8:hover {
-  border-color: #757575;
-}
-
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -423,6 +476,10 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 13px;
   line-height: 1;
 }
@@ -448,7 +505,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-0"
+        id="toggle-group-control-as-radio-group-0"
         role="radiogroup"
       >
         <div
@@ -457,7 +514,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
         />
         <div
           class="emotion-10 emotion-11"
-          data-active="false"
         >
           <button
             aria-checked="false"
@@ -466,7 +522,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-0-0"
+            id="toggle-group-control-as-radio-group-0-0"
             role="radio"
             tabindex="0"
           >
@@ -479,7 +535,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
         </div>
         <div
           class="emotion-10 emotion-11"
-          data-active="false"
         >
           <button
             aria-checked="false"
@@ -488,7 +543,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-0-1"
+            id="toggle-group-control-as-radio-group-0-1"
             role="radio"
             tabindex="-1"
           >