@strapi/plugin-color-picker 4.7.1 → 4.7.2-exp.24dd7d95972fa822bf43e9b095b51027402c229e

package/admin/src/components/ColorPicker/ColorPickerInput/index.js

@@ -2,7 +2,6 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import {
-  Stack,
   Typography,
   Flex,
   Box,
@@ -109,7 +108,7 @@ const ColorPickerInput = ({
       hint={description && formatMessage(description)}
       required={required}
     >
-      <Stack spacing={1}>
+      <Flex direction="column" alignItems="stretch" gap={1}>
         <FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
         <ColorPickerToggle
           ref={colorPickerButtonRef}
@@ -176,7 +175,7 @@ const ColorPickerInput = ({
         )}
         <FieldHint />
         <FieldError />
-      </Stack>
+      </Flex>
     </Field>
   );
 };

package/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
-.c2 {
+.c1 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
   color: #32324d;
 }
 
-.c7 {
+.c6 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #666687;
@@ -26,9 +26,10 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: 4px;
 }
 
-.c3 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -42,16 +43,7 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -65,21 +57,21 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c4 svg {
+.c3 svg {
   height: 12px;
   width: 12px;
 }
 
-.c4 svg > g,
-.c4 svg path {
+.c3 svg > g,
+.c3 svg path {
   fill: #ffffff;
 }
 
-.c4[aria-disabled='true'] {
+.c3[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c4:after {
+.c3:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -94,11 +86,11 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c4:focus-visible {
+.c3:focus-visible {
   outline: none;
 }
 
-.c4:focus-visible:after {
+.c3:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -109,7 +101,7 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c8 {
+.c7 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -121,7 +113,7 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c6 {
+.c5 {
   border-radius: 50%;
   width: 20px;
   height: 20px;
@@ -130,7 +122,7 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   border: 1px solid rgba(0,0,0,0.1);
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -145,12 +137,12 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c5 svg {
+.c4 svg {
   width: 8px;
   height: 8px;
 }
 
-.c5 svg > path {
+.c4 svg > path {
   fill: #8e8ea9;
   justify-self: flex-end;
 }
@@ -158,14 +150,14 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
 <div>
   <div>
     <div
-      class="c0 c1"
+      class="c0"
     >
       <label
-        class="c2"
+        class="c1"
         for="color"
       >
         <div
-          class="c3"
+          class="c2"
         >
           color-picker
         </div>
@@ -176,18 +168,18 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
         aria-expanded="false"
         aria-haspopup="dialog"
         aria-label="Color picker toggle"
-        class="c4 c5"
+        class="c3 c4"
         type="button"
       >
         <div
-          class="c3"
+          class="c2"
         >
           <div
-            class="c6"
+            class="c5"
             color="#000000"
           />
           <span
-            class="c7"
+            class="c6"
             style="text-transform: uppercase;"
           >
             #000000
@@ -212,7 +204,7 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c8"
+    class="c7"
   >
     <p
       aria-live="polite"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-color-picker",
-  "version": "4.7.1",
+  "version": "4.7.2-exp.24dd7d95972fa822bf43e9b095b51027402c229e",
   "description": "Strapi maintained Custom Fields",
   "strapi": {
     "name": "color-picker",
@@ -9,12 +9,26 @@
     "displayName": "Color Picker"
   },
   "dependencies": {
-    "react": "^17.0.2",
+    "@strapi/design-system": "1.6.3",
+    "@strapi/helper-plugin": "4.7.2-exp.24dd7d95972fa822bf43e9b095b51027402c229e",
+    "@strapi/icons": "1.6.3",
+    "prop-types": "^15.7.2",
     "react-colorful": "5.6.1",
-    "react-dom": "^17.0.2"
+    "react-intl": "6.2.8"
+  },
+  "devDependencies": {
+    "@testing-library/react": "12.1.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "5.3.4",
+    "styled-components": "5.3.3"
   },
   "peerDependencies": {
-    "@strapi/strapi": "^4.4.0"
+    "@strapi/strapi": "^4.4.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "5.3.4",
+    "styled-components": "5.3.3"
   },
   "repository": {
     "type": "git",
@@ -38,5 +52,5 @@
     "node": ">=14.19.1 <=18.x.x",
     "npm": ">=6.0.0"
   },
-  "gitHead": "0307fb4bf7b006c4cd902412967d3987d7810ed8"
+  "gitHead": "24dd7d95972fa822bf43e9b095b51027402c229e"
 }