@wordpress/components 21.3.0 → 22.0.0

package/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,6 +61,10 @@ 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);
@@ -68,14 +72,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   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,123 +162,174 @@ 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
-  class="components-base-control emotion-0 emotion-1"
->
+<div>
   <div
-    class="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control emotion-0 emotion-1"
   >
     <div
-      class="emotion-4 emotion-5"
+      class="components-base-control__field emotion-2 emotion-3"
     >
-      <span
-        class="components-base-control__label emotion-6 emotion-7"
-      >
-        Test Toggle Group Control
-      </span>
-    </div>
-    <div
-      aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-8 emotion-9"
-      data-wp-c16t="true"
-      data-wp-component="ToggleGroupControl"
-      id="toggle-group-control-1"
-      role="radiogroup"
-    >
-      <div
-        aria-hidden="true"
-        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-      />
       <div
-        class="emotion-10 emotion-11"
-        role="presentation"
-        style="transform: translateX(0px); transition: none; width: 0px;"
-      />
-      <div
-        class="emotion-12 emotion-13"
-        data-active="true"
+        class="emotion-4 emotion-5"
       >
-        <button
-          aria-checked="true"
-          aria-label="Uppercase"
-          class="emotion-14 emotion-15 components-toggle-group-control-option-base emotion-16"
-          data-value="uppercase"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-1-2"
-          role="radio"
-          tabindex="0"
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
         >
-          <div
-            class="emotion-17 emotion-18"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
-              />
-            </svg>
-          </div>
-        </button>
+          Test Toggle Group Control
+        </span>
       </div>
       <div
-        class="emotion-12 emotion-13"
-        data-active="false"
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-1"
+        role="radiogroup"
       >
-        <button
-          aria-checked="false"
-          aria-label="Lowercase"
-          class="emotion-14 emotion-15 components-toggle-group-control-option-base"
-          data-value="lowercase"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-1-3"
-          role="radio"
-          tabindex="-1"
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
+        <div
+          class="emotion-10 emotion-11"
+          role="presentation"
+          style="transform: translateX(0px); transition: none; width: 0px;"
+        />
+        <div
+          class="emotion-12 emotion-13"
         >
-          <div
-            class="emotion-17 emotion-18"
+          <button
+            aria-checked="true"
+            aria-label="Uppercase"
+            class="emotion-14 components-toggle-group-control-option-base"
+            data-value="uppercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-1-2"
+            role="radio"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="emotion-15 emotion-16"
             >
-              <path
-                d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
-              />
-            </svg>
-          </div>
-        </button>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-12 emotion-13"
+        >
+          <button
+            aria-checked="false"
+            aria-label="Lowercase"
+            class="emotion-19 components-toggle-group-control-option-base"
+            data-value="lowercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-1-3"
+            role="radio"
+            tabindex="-1"
+          >
+            <div
+              class="emotion-15 emotion-16"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -322,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;
@@ -334,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 ) {
@@ -342,6 +397,10 @@ 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);
@@ -349,10 +408,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   z-index: 1;
 }
 
-.emotion-8:hover {
-  border-color: #757575;
-}
-
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -421,80 +476,84 @@ 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;
 }
 
-<div
-  class="components-base-control emotion-0 emotion-1"
->
+<div>
   <div
-    class="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control emotion-0 emotion-1"
   >
     <div
-      class="emotion-4 emotion-5"
-    >
-      <span
-        class="components-base-control__label emotion-6 emotion-7"
-      >
-        Test Toggle Group Control
-      </span>
-    </div>
-    <div
-      aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-8 emotion-9"
-      data-wp-c16t="true"
-      data-wp-component="ToggleGroupControl"
-      id="toggle-group-control-0"
-      role="radiogroup"
+      class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        aria-hidden="true"
-        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-      />
-      <div
-        class="emotion-10 emotion-11"
-        data-active="false"
+        class="emotion-4 emotion-5"
       >
-        <button
-          aria-checked="false"
-          aria-label="R"
-          class="emotion-12 components-toggle-group-control-option-base"
-          data-value="rigas"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-0-0"
-          role="radio"
-          tabindex="0"
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
         >
-          <div
-            class="emotion-13 emotion-14"
-          >
-            R
-          </div>
-        </button>
+          Test Toggle Group Control
+        </span>
       </div>
       <div
-        class="emotion-10 emotion-11"
-        data-active="false"
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-0"
+        role="radiogroup"
       >
-        <button
-          aria-checked="false"
-          aria-label="J"
-          class="emotion-12 components-toggle-group-control-option-base"
-          data-value="jack"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-0-1"
-          role="radio"
-          tabindex="-1"
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="R"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="rigas"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-0-0"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              R
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-10 emotion-11"
         >
-          <div
-            class="emotion-13 emotion-14"
+          <button
+            aria-checked="false"
+            aria-label="J"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="jack"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-0-1"
+            role="radio"
+            tabindex="-1"
           >
-            J
-          </div>
-        </button>
+            <div
+              class="emotion-13 emotion-14"
+            >
+              J
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   </div>

package/src/toggle-group-control/test/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -48,7 +49,7 @@ describe( 'ToggleGroupControl', () => {
 				</ToggleGroupControl>
 			);
 
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 		it( 'with icons', () => {
 			const { container } = render(
@@ -69,7 +70,7 @@ describe( 'ToggleGroupControl', () => {
 				</ToggleGroupControl>
 			);
 
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 	it( 'should call onChange with proper value', () => {
@@ -126,4 +127,130 @@ describe( 'ToggleGroupControl', () => {
 			screen.queryByText( 'Click for Sumptuous Caponata' )
 		).not.toBeInTheDocument();
 	} );
+
+	describe( 'isDeselectable', () => {
+		describe( 'isDeselectable = false', () => {
+			it( 'should not be deselectable', async () => {
+				const mockOnChange = jest.fn();
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<ToggleGroupControl
+						value="rigas"
+						label="Test"
+						onChange={ mockOnChange }
+					>
+						{ options }
+					</ToggleGroupControl>
+				);
+
+				const rigas = screen.getByRole( 'radio', {
+					name: 'R',
+					checked: true,
+				} );
+				await user.click( rigas );
+				expect( mockOnChange ).toHaveBeenCalledTimes( 0 );
+			} );
+
+			it( 'should not tab to next radio option', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<ToggleGroupControl value="rigas" label="Test">
+						{ options }
+					</ToggleGroupControl>
+				);
+
+				const rigas = screen.getByRole( 'radio', {
+					name: 'R',
+				} );
+
+				await user.tab();
+				expect( rigas ).toHaveFocus();
+
+				await user.tab();
+				expect( rigas.ownerDocument.body ).toHaveFocus();
+			} );
+		} );
+
+		describe( 'isDeselectable = true', () => {
+			it( 'should be deselectable', async () => {
+				const mockOnChange = jest.fn();
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<ToggleGroupControl
+						value="rigas"
+						label="Test"
+						onChange={ mockOnChange }
+						isDeselectable
+					>
+						{ options }
+					</ToggleGroupControl>
+				);
+
+				await user.click(
+					await screen.getByRole( 'button', {
+						name: 'R',
+						pressed: true,
+					} )
+				);
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnChange ).toHaveBeenCalledWith( undefined );
+				expect(
+					screen.getByRole( 'button', {
+						name: 'R',
+						pressed: false,
+					} )
+				).toBeInTheDocument();
+			} );
+
+			it( 'should tab to the next option button', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<ToggleGroupControl
+						isDeselectable
+						value="rigas"
+						label="Test"
+					>
+						{ options }
+					</ToggleGroupControl>
+				);
+
+				await user.tab();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'R',
+						pressed: true,
+					} )
+				).toHaveFocus();
+
+				await user.tab();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'J',
+						pressed: false,
+					} )
+				).toHaveFocus();
+
+				// Focus should not move with arrow keys
+				await user.keyboard( '{ArrowLeft}' );
+				expect(
+					screen.getByRole( 'button', {
+						name: 'J',
+						pressed: false,
+					} )
+				).toHaveFocus();
+			} );
+		} );
+	} );
 } );