@strapi/plugin-color-picker 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Icon } from '@strapi/design-system/Icon';
-import { Flex } from '@strapi/design-system/Flex';
-import Paint from '@strapi/icons/Paint';
+import { Icon, Flex } from '@strapi/design-system';
+import { Paint } from '@strapi/icons';
 
 const IconBox = styled(Flex)`
   /* Hard code color values */

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

@@ -1,15 +1,20 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { BaseButton } from '@strapi/design-system/BaseButton';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Field, FieldHint, FieldError, FieldLabel, FieldInput } from '@strapi/design-system/Field';
-import { Popover } from '@strapi/design-system/Popover';
-import CarretDown from '@strapi/icons/CarretDown';
+import {
+  Typography,
+  Flex,
+  Box,
+  BaseButton,
+  FocusTrap,
+  Field,
+  FieldHint,
+  FieldError,
+  FieldLabel,
+  FieldInput,
+  Popover,
+} from '@strapi/design-system';
+import { CarretDown } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { HexColorPicker } from 'react-colorful';
 
@@ -103,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}
@@ -170,7 +175,7 @@ const ColorPickerInput = ({
         )}
         <FieldHint />
         <FieldError />
-      </Stack>
+      </Flex>
     </Field>
   );
 };

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

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
-.c8 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+.c3 {
+  background: #ffffff;
+  padding: 8px;
+  border-radius: 4px;
+  border-color: #dcdce4;
+  border: 1px solid #dcdce4;
+  cursor: pointer;
 }
 
 .c0 {
@@ -25,9 +22,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;
@@ -41,16 +39,7 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 4px;
-}
-
-.c2 {
+.c1 {
   font-size: 0.75rem;
   line-height: 1.33;
   font-weight: 600;
@@ -64,15 +53,6 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
 }
 
 .c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 4px;
-  background: #ffffff;
-  border: 1px solid #dcdce4;
   position: relative;
   outline: none;
 }
@@ -121,6 +101,18 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
+.c8 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
 .c6 {
   border-radius: 50%;
   width: 20px;
@@ -156,16 +148,18 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
 }
 
 <div>
-  <div>
+  <div
+    class=""
+  >
     <div
-      class="c0 c1"
+      class="c0"
     >
       <label
-        class="c2"
+        class="c1"
         for="color"
       >
         <div
-          class="c3"
+          class="c2"
         >
           color-picker
         </div>
@@ -176,11 +170,11 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
         aria-expanded="false"
         aria-haspopup="dialog"
         aria-label="Color picker toggle"
-        class="c4 c5"
+        class="c3 c2 c4 c5"
         type="button"
       >
         <div
-          class="c3"
+          class="c2"
         >
           <div
             class="c6"
@@ -196,14 +190,14 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
         <svg
           aria-hidden="true"
           fill="none"
-          height="1em"
+          height="1rem"
           viewBox="0 0 14 8"
-          width="1em"
+          width="1rem"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
             clip-rule="evenodd"
-            d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+            d="M14 .889a.86.86 0 0 1-.26.625L7.615 7.736A.834.834 0 0 1 7 8a.834.834 0 0 1-.615-.264L.26 1.514A.861.861 0 0 1 0 .889c0-.24.087-.45.26-.625A.834.834 0 0 1 .875 0h12.25c.237 0 .442.088.615.264a.86.86 0 0 1 .26.625Z"
             fill="#32324D"
             fill-rule="evenodd"
           />

package/admin/src/translations/cs.json

@@ -8,7 +8,5 @@
   "color-picker.options.advanced.requiredField": "Povinné pole",
   "color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
   "color-picker.settings": "Nastavení",
-  "color-picker.toggle.aria-label": "Přepínač výběru barvy",
-  "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
-  "plugin.description.short": "A Strapi-maintained color picker custom field."
+  "color-picker.toggle.aria-label": "Přepínač výběru barvy"
 }

package/admin/src/translations/en.json

@@ -10,5 +10,6 @@
   "color-picker.settings": "Settings",
   "color-picker.toggle.aria-label": "Color picker toggle",
   "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
-  "plugin.description.short": "A Strapi-maintained color picker custom field."
+  "plugin.description.short": "A Strapi-maintained color picker custom field.",
+  "plugin.name": "Color picker"
 }

package/admin/src/translations/ru.json

@@ -10,5 +10,6 @@
   "color-picker.settings": "Настройки",
   "color-picker.toggle.aria-label": "Переключатель средства выбора цвета",
   "plugin.description.long": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi. Используйте ползунки насыщенности и оттенка, чтобы выбрать цвет и сохранить его HEX (шестнадцатеричное) значение.",
-  "plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi."
+  "plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi.",
+  "plugin.name": "Выбор цвета"
 }

package/admin/src/translations/sv.json

@@ -8,7 +8,5 @@
   "color-picker.options.advanced.requiredField": "Obligatoriskt fält",
   "color-picker.options.advanced.requiredField.description": "Du kommer inte att kunna skapa en post om det här fältet är tomt",
   "color-picker.settings": "Inställningar",
-  "color-picker.toggle.aria-label": "Växla färgväljare",
-  "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
-  "plugin.description.short": "A Strapi-maintained color picker custom field."
+  "color-picker.toggle.aria-label": "Växla färgväljare"
 }

package/admin/src/translations/tr.json

@@ -8,7 +8,5 @@
   "color-picker.options.advanced.requiredField": "Zorunlu alan",
   "color-picker.options.advanced.requiredField.description": "Bu alan boş olursa yeni bir girdi oluşturamazsın",
   "color-picker.settings": "Ayarlar",
-  "color-picker.toggle.aria-label": "Renk seçici anahtarı",
-  "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
-  "plugin.description.short": "A Strapi-maintained color picker custom field."
+  "color-picker.toggle.aria-label": "Renk seçici anahtarı"
 }

package/admin/src/translations/zh.json

@@ -8,7 +8,5 @@
   "color-picker.options.advanced.requiredField": "必填欄位",
   "color-picker.options.advanced.requiredField.description": "若此欄位為空，您將無法建立項目",
   "color-picker.settings": "設定",
-  "color-picker.toggle.aria-label": "選色器開關",
-  "plugin.description.long": "A Strapi-maintained color picker custom field. Use saturation and hue sliders to select a color and save the value as a HEX string.",
-  "plugin.description.short": "A Strapi-maintained color picker custom field."
+  "color-picker.toggle.aria-label": "選色器開關"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-color-picker",
-  "version": "4.9.0-alpha.0",
+  "version": "4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8",
   "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.5",
+    "@strapi/helper-plugin": "4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8",
+    "@strapi/icons": "1.6.5",
+    "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": "35f783d0dc07db101e7e62cb4d682f751551f452"
+  "gitHead": "366eb8a0d0f06935914854c6d9c4b3fe859468e0"
 }

package/admin/src/translations/fr.json

@@ -1 +0,0 @@
-{}