@wordpress/components 17.0.0 → 19.0.2

package/src/color-picker/test/__snapshots__/index.js.snap

@@ -1,817 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorPicker should commit changes to all views on blur 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -11,38 +11,38 @@
-          onTouchMove={[Function bound handleChange]}
-          onTouchStart={[Function bound handleChange]}
-          role="application"
-          style={
-            Object {
--             "background": "hsl(210,100%, 50%)",
-+             "background": "hsl(0,100%, 50%)",
-            }
-          }
-        >
-          <div
-            className="components-color-picker__saturation-white"
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-4"
-+           aria-describedby="color-picker-saturation-3"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
--               "left": "17%",
--               "top": "20%",
-+               "left": "0%",
-+               "top": "0%",
-              }
-            }
-            type="button"
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-4"
-+           id="color-picker-saturation-3"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -73,11 +73,11 @@
-        >
-          <div
-            className="components-color-picker__active"
-            style={
-              Object {
--               "backgroundColor": "rgb(170, 187, 204)",
-+               "backgroundColor": "rgb(255, 255, 255)",
-              }
-            }
-          />
-        </div>
-        <div
-@@ -95,31 +95,31 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-4"
-+                 aria-describedby="components-color-picker__hue-description-3"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
--                 aria-valuenow={210}
-+                 aria-valuenow={0}
-                  className="components-color-picker__hue-pointer"
-                  onKeyDown={[Function preventKeyEvents]}
-                  role="slider"
-                  style={
-                    Object {
--                     "left": "58.333333333333336%",
-+                     "left": "0%",
-                    }
-                  }
-                  tabIndex="0"
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-4"
-+                 id="components-color-picker__hue-description-3"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
-            <div
-              className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
-            >
-              <label
-                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
--               htmlFor="inspector-text-control-4"
-+               htmlFor="inspector-text-control-3"
-              >
-                Color value in hexadecimal
-              </label>
-              <input
-                className="components-text-control__input"
--               id="inspector-text-control-4"
-+               id="inspector-text-control-3"
-                onBlur={[Function bound handleBlur]}
-                onChange={[Function onChangeValue]}
-                onKeyDown={[Function bound handleKeyDown]}
-                type="text"
--               value="#aabbcc"
-+               value="#ffffff"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-`;
-
-exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -11,38 +11,38 @@
-          onTouchMove={[Function bound handleChange]}
-          onTouchStart={[Function bound handleChange]}
-          role="application"
-          style={
-            Object {
--             "background": "hsl(210,100%, 50%)",
-+             "background": "hsl(0,100%, 50%)",
-            }
-          }
-        >
-          <div
-            className="components-color-picker__saturation-white"
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-8"
-+           aria-describedby="color-picker-saturation-7"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
--               "left": "17%",
--               "top": "20%",
-+               "left": "0%",
-+               "top": "0%",
-              }
-            }
-            type="button"
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-8"
-+           id="color-picker-saturation-7"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -73,11 +73,11 @@
-        >
-          <div
-            className="components-color-picker__active"
-            style={
-              Object {
--               "backgroundColor": "rgb(170, 187, 204)",
-+               "backgroundColor": "rgb(255, 255, 255)",
-              }
-            }
-          />
-        </div>
-        <div
-@@ -95,31 +95,31 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-8"
-+                 aria-describedby="components-color-picker__hue-description-7"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
--                 aria-valuenow={210}
-+                 aria-valuenow={0}
-                  className="components-color-picker__hue-pointer"
-                  onKeyDown={[Function preventKeyEvents]}
-                  role="slider"
-                  style={
-                    Object {
--                     "left": "58.333333333333336%",
-+                     "left": "0%",
-                    }
-                  }
-                  tabIndex="0"
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-8"
-+                 id="components-color-picker__hue-description-7"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
-            <div
-              className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
-            >
-              <label
-                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
--               htmlFor="inspector-text-control-8"
-+               htmlFor="inspector-text-control-7"
-              >
-                Color value in hexadecimal
-              </label>
-              <input
-                className="components-text-control__input"
--               id="inspector-text-control-8"
-+               id="inspector-text-control-7"
-                onBlur={[Function bound handleBlur]}
-                onChange={[Function onChangeValue]}
-                onKeyDown={[Function bound handleKeyDown]}
-                type="text"
--               value="#aabbcc"
-+               value="#ffffff"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-`;
-
-exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -11,38 +11,38 @@
-          onTouchMove={[Function bound handleChange]}
-          onTouchStart={[Function bound handleChange]}
-          role="application"
-          style={
-            Object {
--             "background": "hsl(210,100%, 50%)",
-+             "background": "hsl(0,100%, 50%)",
-            }
-          }
-        >
-          <div
-            className="components-color-picker__saturation-white"
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-10"
-+           aria-describedby="color-picker-saturation-9"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
--               "left": "17%",
--               "top": "20%",
-+               "left": "0%",
-+               "top": "0%",
-              }
-            }
-            type="button"
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-10"
-+           id="color-picker-saturation-9"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -73,11 +73,11 @@
-        >
-          <div
-            className="components-color-picker__active"
-            style={
-              Object {
--               "backgroundColor": "rgb(170, 187, 204)",
-+               "backgroundColor": "rgb(255, 255, 255)",
-              }
-            }
-          />
-        </div>
-        <div
-@@ -95,31 +95,31 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-10"
-+                 aria-describedby="components-color-picker__hue-description-9"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
--                 aria-valuenow={210}
-+                 aria-valuenow={0}
-                  className="components-color-picker__hue-pointer"
-                  onKeyDown={[Function preventKeyEvents]}
-                  role="slider"
-                  style={
-                    Object {
--                     "left": "58.333333333333336%",
-+                     "left": "0%",
-                    }
-                  }
-                  tabIndex="0"
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-10"
-+                 id="components-color-picker__hue-description-9"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
-            <div
-              className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
-            >
-              <label
-                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
--               htmlFor="inspector-text-control-10"
-+               htmlFor="inspector-text-control-9"
-              >
-                Color value in hexadecimal
-              </label>
-              <input
-                className="components-text-control__input"
--               id="inspector-text-control-10"
-+               id="inspector-text-control-9"
-                onBlur={[Function bound handleBlur]}
-                onChange={[Function onChangeValue]}
-                onKeyDown={[Function bound handleKeyDown]}
-                type="text"
--               value="#aabbcc"
-+               value="#ffffff"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-`;
-
-exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -11,38 +11,38 @@
-          onTouchMove={[Function bound handleChange]}
-          onTouchStart={[Function bound handleChange]}
-          role="application"
-          style={
-            Object {
--             "background": "hsl(210,100%, 50%)",
-+             "background": "hsl(0,100%, 50%)",
-            }
-          }
-        >
-          <div
-            className="components-color-picker__saturation-white"
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-6"
-+           aria-describedby="color-picker-saturation-5"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
--               "left": "17%",
--               "top": "20%",
-+               "left": "0%",
-+               "top": "0%",
-              }
-            }
-            type="button"
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-6"
-+           id="color-picker-saturation-5"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -73,11 +73,11 @@
-        >
-          <div
-            className="components-color-picker__active"
-            style={
-              Object {
--               "backgroundColor": "rgb(170, 187, 204)",
-+               "backgroundColor": "rgb(255, 255, 255)",
-              }
-            }
-          />
-        </div>
-        <div
-@@ -95,31 +95,31 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-6"
-+                 aria-describedby="components-color-picker__hue-description-5"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
--                 aria-valuenow={210}
-+                 aria-valuenow={0}
-                  className="components-color-picker__hue-pointer"
-                  onKeyDown={[Function preventKeyEvents]}
-                  role="slider"
-                  style={
-                    Object {
--                     "left": "58.333333333333336%",
-+                     "left": "0%",
-                    }
-                  }
-                  tabIndex="0"
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-6"
-+                 id="components-color-picker__hue-description-5"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
-            <div
-              className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
-            >
-              <label
-                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
--               htmlFor="inspector-text-control-6"
-+               htmlFor="inspector-text-control-5"
-              >
-                Color value in hexadecimal
-              </label>
-              <input
-                className="components-text-control__input"
--               id="inspector-text-control-6"
-+               id="inspector-text-control-5"
-                onBlur={[Function bound handleBlur]}
-                onChange={[Function onChangeValue]}
-                onKeyDown={[Function bound handleKeyDown]}
-                type="text"
--               value="#aabbcc"
-+               value="#ffffff"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-`;
-
-exports[`ColorPicker should only update input view for draft changes 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -22,11 +22,11 @@
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-2"
-+           aria-describedby="color-picker-saturation-1"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
-@@ -38,11 +38,11 @@
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-2"
-+           id="color-picker-saturation-1"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -95,11 +95,11 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-2"
-+                 aria-describedby="components-color-picker__hue-description-1"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
-                  aria-valuenow={0}
-@@ -115,11 +115,11 @@
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-2"
-+                 id="components-color-picker__hue-description-1"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
-            <div
-              className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
-            >
-              <label
-                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
--               htmlFor="inspector-text-control-2"
-+               htmlFor="inspector-text-control-1"
-              >
-                Color value in hexadecimal
-              </label>
-              <input
-                className="components-text-control__input"
--               id="inspector-text-control-2"
-+               id="inspector-text-control-1"
-                onBlur={[Function bound handleBlur]}
-                onChange={[Function onChangeValue]}
-                onKeyDown={[Function bound handleKeyDown]}
-                type="text"
--               value="#abc"
-+               value="#ffffff"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-`;
-
-exports[`ColorPicker should render color picker 1`] = `
-.emotion-4 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-}
-
-.emotion-6 {
-  margin-bottom: calc(4px * 2);
-}
-
-.components-panel__row .emotion-6 {
-  margin-bottom: inherit;
-}
-
-.emotion-8 {
-  display: inline-block;
-  margin-bottom: calc(4px * 2);
-}
-
-<div
-  className="components-color-picker is-alpha-disabled"
->
-  <div
-    className="components-color-picker__saturation"
-  >
-    <div>
-      <div
-        className="components-color-picker__saturation-color"
-        onMouseDown={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
-        role="application"
-        style={
-          Object {
-            "background": "hsl(0,100%, 50%)",
-          }
-        }
-      >
-        <div
-          className="components-color-picker__saturation-white"
-        />
-        <div
-          className="components-color-picker__saturation-black"
-        />
-        <button
-          aria-describedby="color-picker-saturation-0"
-          aria-label="Choose a shade"
-          className="components-button components-color-picker__saturation-pointer"
-          onKeyDown={[Function]}
-          style={
-            Object {
-              "left": "0%",
-              "top": "0%",
-            }
-          }
-          type="button"
-        />
-        <div
-          className="components-visually-hidden emotion-0 emotion-1"
-          data-wp-c16t={true}
-          data-wp-component="VisuallyHidden"
-          id="color-picker-saturation-0"
-          style={
-            Object {
-              "WebkitClipPath": "inset( 50% )",
-              "border": 0,
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "clipPath": "inset( 50% )",
-              "height": "1px",
-              "margin": "-1px",
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "width": "1px",
-              "wordWrap": "normal",
-            }
-          }
-        >
-          Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="components-color-picker__body"
-  >
-    <div
-      className="components-color-picker__controls"
-    >
-      <div
-        className="components-color-picker__swatch"
-      >
-        <div
-          className="components-color-picker__active"
-          style={
-            Object {
-              "backgroundColor": "rgb(255, 255, 255)",
-            }
-          }
-        />
-      </div>
-      <div
-        className="components-color-picker__toggles"
-      >
-        <div>
-          <div
-            className="components-color-picker__hue"
-          >
-            <div
-              className="components-color-picker__hue-gradient"
-            />
-            <div
-              className="components-color-picker__hue-bar"
-              onMouseDown={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-            >
-              <div
-                aria-describedby="components-color-picker__hue-description-0"
-                aria-label="Hue value in degrees, from 0 to 359."
-                aria-orientation="horizontal"
-                aria-valuemax="1"
-                aria-valuemin="359"
-                aria-valuenow={0}
-                className="components-color-picker__hue-pointer"
-                onKeyDown={[Function]}
-                role="slider"
-                style={
-                  Object {
-                    "left": "0%",
-                  }
-                }
-                tabIndex="0"
-              />
-              <p
-                className="components-visually-hidden emotion-0 emotion-1"
-                data-wp-c16t={true}
-                data-wp-component="VisuallyHidden"
-                id="components-color-picker__hue-description-0"
-                style={
-                  Object {
-                    "WebkitClipPath": "inset( 50% )",
-                    "border": 0,
-                    "clip": "rect(1px, 1px, 1px, 1px)",
-                    "clipPath": "inset( 50% )",
-                    "height": "1px",
-                    "margin": "-1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "absolute",
-                    "width": "1px",
-                    "wordWrap": "normal",
-                  }
-                }
-              >
-                Move the arrow left or right to change hue.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="components-color-picker__inputs-wrapper"
-    >
-      <div
-        className="components-color-picker__inputs-fields"
-      >
-        <div
-          className="components-base-control components-color-picker__inputs-field emotion-4 emotion-5"
-        >
-          <div
-            className="components-base-control__field emotion-6 emotion-7"
-          >
-            <label
-              className="components-base-control__label emotion-8 emotion-9"
-              htmlFor="inspector-text-control-0"
-            >
-              Color value in hexadecimal
-            </label>
-            <input
-              className="components-text-control__input"
-              id="inspector-text-control-0"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              type="text"
-              value="#ffffff"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="components-color-picker__inputs-toggle-wrapper"
-      >
-        <button
-          aria-describedby={null}
-          aria-label="Change color format"
-          className="components-button components-color-picker__inputs-toggle has-icon"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          type="button"
-        >
-          <svg
-            aria-hidden={true}
-            focusable={false}
-            height={24}
-            role="img"
-            viewBox="0 0 24 24"
-            width={24}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;