@strapi/plugin-color-picker 4.9.0-alpha.0 → 4.9.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/admin/src/components/ColorPicker/ColorPickerIcon/index.js +2 -3
- package/admin/src/components/ColorPicker/ColorPickerInput/index.js +16 -11
- package/admin/src/components/tests/__snapshots__/color-picker-input.test.js.snap +60 -59
- package/admin/src/translations/cs.json +1 -3
- package/admin/src/translations/en.json +2 -1
- package/admin/src/translations/ru.json +2 -1
- package/admin/src/translations/sv.json +1 -3
- package/admin/src/translations/tr.json +1 -3
- package/admin/src/translations/zh.json +1 -3
- package/package.json +19 -5
- package/admin/src/translations/fr.json +0 -1
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import { Icon } from '@strapi/design-system
|
|
4
|
-
import {
|
|
5
|
-
import Paint from '@strapi/icons/Paint';
|
|
3
|
+
import { Icon, Flex } from '@strapi/design-system';
|
|
4
|
+
import { Paint } from '@strapi/icons';
|
|
6
5
|
|
|
7
6
|
const IconBox = styled(Flex)`
|
|
8
7
|
/* Hard code color values */
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import React, { useState, useRef } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
import {
|
|
5
|
+
Typography,
|
|
6
|
+
Flex,
|
|
7
|
+
Box,
|
|
8
|
+
BaseButton,
|
|
9
|
+
FocusTrap,
|
|
10
|
+
Field,
|
|
11
|
+
FieldHint,
|
|
12
|
+
FieldError,
|
|
13
|
+
FieldLabel,
|
|
14
|
+
FieldInput,
|
|
15
|
+
Popover,
|
|
16
|
+
} from '@strapi/design-system';
|
|
17
|
+
import { CarretDown } from '@strapi/icons';
|
|
13
18
|
import { useIntl } from 'react-intl';
|
|
14
19
|
import { HexColorPicker } from 'react-colorful';
|
|
15
20
|
|
|
@@ -103,7 +108,7 @@ const ColorPickerInput = ({
|
|
|
103
108
|
hint={description && formatMessage(description)}
|
|
104
109
|
required={required}
|
|
105
110
|
>
|
|
106
|
-
<
|
|
111
|
+
<Flex direction="column" alignItems="stretch" gap={1}>
|
|
107
112
|
<FieldLabel action={labelAction}>{formatMessage(intlLabel)}</FieldLabel>
|
|
108
113
|
<ColorPickerToggle
|
|
109
114
|
ref={colorPickerButtonRef}
|
|
@@ -170,7 +175,7 @@ const ColorPickerInput = ({
|
|
|
170
175
|
)}
|
|
171
176
|
<FieldHint />
|
|
172
177
|
<FieldError />
|
|
173
|
-
</
|
|
178
|
+
</Flex>
|
|
174
179
|
</Field>
|
|
175
180
|
);
|
|
176
181
|
};
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
4
|
-
.
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
padding: 0;
|
|
12
|
-
position: absolute;
|
|
13
|
-
width: 1px;
|
|
4
|
+
.c3 {
|
|
5
|
+
background: #ffffff;
|
|
6
|
+
padding: 8px;
|
|
7
|
+
border-radius: 4px;
|
|
8
|
+
border-color: #dcdce4;
|
|
9
|
+
border: 1px solid #dcdce4;
|
|
10
|
+
cursor: pointer;
|
|
14
11
|
}
|
|
15
12
|
|
|
16
13
|
.c0 {
|
|
@@ -25,9 +22,10 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
25
22
|
-webkit-flex-direction: column;
|
|
26
23
|
-ms-flex-direction: column;
|
|
27
24
|
flex-direction: column;
|
|
25
|
+
gap: 4px;
|
|
28
26
|
}
|
|
29
27
|
|
|
30
|
-
.
|
|
28
|
+
.c4 {
|
|
31
29
|
-webkit-align-items: center;
|
|
32
30
|
-webkit-box-align: center;
|
|
33
31
|
-ms-flex-align: center;
|
|
@@ -41,57 +39,39 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
41
39
|
flex-direction: row;
|
|
42
40
|
}
|
|
43
41
|
|
|
44
|
-
.c1
|
|
45
|
-
margin-top: 0;
|
|
46
|
-
margin-bottom: 0;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.c1 > * + * {
|
|
50
|
-
margin-top: 4px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.c2 {
|
|
42
|
+
.c1 {
|
|
54
43
|
font-size: 0.75rem;
|
|
55
44
|
line-height: 1.33;
|
|
56
45
|
font-weight: 600;
|
|
57
46
|
color: #32324d;
|
|
58
47
|
}
|
|
59
48
|
|
|
60
|
-
.
|
|
49
|
+
.c8 {
|
|
61
50
|
font-size: 0.875rem;
|
|
62
51
|
line-height: 1.43;
|
|
63
52
|
color: #666687;
|
|
64
53
|
}
|
|
65
54
|
|
|
66
|
-
.
|
|
67
|
-
display: -webkit-box;
|
|
68
|
-
display: -webkit-flex;
|
|
69
|
-
display: -ms-flexbox;
|
|
70
|
-
display: flex;
|
|
71
|
-
cursor: pointer;
|
|
72
|
-
padding: 8px;
|
|
73
|
-
border-radius: 4px;
|
|
74
|
-
background: #ffffff;
|
|
75
|
-
border: 1px solid #dcdce4;
|
|
55
|
+
.c5 {
|
|
76
56
|
position: relative;
|
|
77
57
|
outline: none;
|
|
78
58
|
}
|
|
79
59
|
|
|
80
|
-
.
|
|
60
|
+
.c5 svg {
|
|
81
61
|
height: 12px;
|
|
82
62
|
width: 12px;
|
|
83
63
|
}
|
|
84
64
|
|
|
85
|
-
.
|
|
86
|
-
.
|
|
65
|
+
.c5 svg > g,
|
|
66
|
+
.c5 svg path {
|
|
87
67
|
fill: #ffffff;
|
|
88
68
|
}
|
|
89
69
|
|
|
90
|
-
.
|
|
70
|
+
.c5[aria-disabled='true'] {
|
|
91
71
|
pointer-events: none;
|
|
92
72
|
}
|
|
93
73
|
|
|
94
|
-
.
|
|
74
|
+
.c5:after {
|
|
95
75
|
-webkit-transition-property: all;
|
|
96
76
|
transition-property: all;
|
|
97
77
|
-webkit-transition-duration: 0.2s;
|
|
@@ -106,11 +86,11 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
106
86
|
border: 2px solid transparent;
|
|
107
87
|
}
|
|
108
88
|
|
|
109
|
-
.
|
|
89
|
+
.c5:focus-visible {
|
|
110
90
|
outline: none;
|
|
111
91
|
}
|
|
112
92
|
|
|
113
|
-
.
|
|
93
|
+
.c5:focus-visible:after {
|
|
114
94
|
border-radius: 8px;
|
|
115
95
|
content: '';
|
|
116
96
|
position: absolute;
|
|
@@ -121,7 +101,30 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
121
101
|
border: 2px solid #4945ff;
|
|
122
102
|
}
|
|
123
103
|
|
|
124
|
-
.
|
|
104
|
+
.c9 {
|
|
105
|
+
border: 0;
|
|
106
|
+
-webkit-clip: rect(0 0 0 0);
|
|
107
|
+
clip: rect(0 0 0 0);
|
|
108
|
+
height: 1px;
|
|
109
|
+
margin: -1px;
|
|
110
|
+
overflow: hidden;
|
|
111
|
+
padding: 0;
|
|
112
|
+
position: absolute;
|
|
113
|
+
width: 1px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.c2 {
|
|
117
|
+
display: -webkit-box;
|
|
118
|
+
display: -webkit-flex;
|
|
119
|
+
display: -ms-flexbox;
|
|
120
|
+
display: flex;
|
|
121
|
+
-webkit-align-items: center;
|
|
122
|
+
-webkit-box-align: center;
|
|
123
|
+
-ms-flex-align: center;
|
|
124
|
+
align-items: center;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.c7 {
|
|
125
128
|
border-radius: 50%;
|
|
126
129
|
width: 20px;
|
|
127
130
|
height: 20px;
|
|
@@ -130,7 +133,7 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
130
133
|
border: 1px solid rgba(0,0,0,0.1);
|
|
131
134
|
}
|
|
132
135
|
|
|
133
|
-
.
|
|
136
|
+
.c6 {
|
|
134
137
|
display: -webkit-box;
|
|
135
138
|
display: -webkit-flex;
|
|
136
139
|
display: -ms-flexbox;
|
|
@@ -145,30 +148,28 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
145
148
|
align-items: center;
|
|
146
149
|
}
|
|
147
150
|
|
|
148
|
-
.
|
|
151
|
+
.c6 svg {
|
|
149
152
|
width: 8px;
|
|
150
153
|
height: 8px;
|
|
151
154
|
}
|
|
152
155
|
|
|
153
|
-
.
|
|
156
|
+
.c6 svg > path {
|
|
154
157
|
fill: #8e8ea9;
|
|
155
158
|
justify-self: flex-end;
|
|
156
159
|
}
|
|
157
160
|
|
|
158
161
|
<div>
|
|
159
|
-
<div
|
|
162
|
+
<div
|
|
163
|
+
class=""
|
|
164
|
+
>
|
|
160
165
|
<div
|
|
161
|
-
class="c0
|
|
166
|
+
class="c0"
|
|
162
167
|
>
|
|
163
168
|
<label
|
|
164
|
-
class="c2"
|
|
169
|
+
class="c1 c2"
|
|
165
170
|
for="color"
|
|
166
171
|
>
|
|
167
|
-
|
|
168
|
-
class="c3"
|
|
169
|
-
>
|
|
170
|
-
color-picker
|
|
171
|
-
</div>
|
|
172
|
+
color-picker
|
|
172
173
|
</label>
|
|
173
174
|
<button
|
|
174
175
|
aria-controls="color-picker-value"
|
|
@@ -176,18 +177,18 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
176
177
|
aria-expanded="false"
|
|
177
178
|
aria-haspopup="dialog"
|
|
178
179
|
aria-label="Color picker toggle"
|
|
179
|
-
class="c4 c5"
|
|
180
|
+
class="c3 c4 c5 c6"
|
|
180
181
|
type="button"
|
|
181
182
|
>
|
|
182
183
|
<div
|
|
183
|
-
class="
|
|
184
|
+
class="c4"
|
|
184
185
|
>
|
|
185
186
|
<div
|
|
186
|
-
class="
|
|
187
|
+
class="c7"
|
|
187
188
|
color="#000000"
|
|
188
189
|
/>
|
|
189
190
|
<span
|
|
190
|
-
class="
|
|
191
|
+
class="c8"
|
|
191
192
|
style="text-transform: uppercase;"
|
|
192
193
|
>
|
|
193
194
|
#000000
|
|
@@ -196,14 +197,14 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
196
197
|
<svg
|
|
197
198
|
aria-hidden="true"
|
|
198
199
|
fill="none"
|
|
199
|
-
height="
|
|
200
|
+
height="1rem"
|
|
200
201
|
viewBox="0 0 14 8"
|
|
201
|
-
width="
|
|
202
|
+
width="1rem"
|
|
202
203
|
xmlns="http://www.w3.org/2000/svg"
|
|
203
204
|
>
|
|
204
205
|
<path
|
|
205
206
|
clip-rule="evenodd"
|
|
206
|
-
d="M14 .889a.86.86 0
|
|
207
|
+
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"
|
|
207
208
|
fill="#32324D"
|
|
208
209
|
fill-rule="evenodd"
|
|
209
210
|
/>
|
|
@@ -212,7 +213,7 @@ exports[`<ColorPickerInput /> renders and matches the snapshot 1`] = `
|
|
|
212
213
|
</div>
|
|
213
214
|
</div>
|
|
214
215
|
<div
|
|
215
|
-
class="
|
|
216
|
+
class="c9"
|
|
216
217
|
>
|
|
217
218
|
<p
|
|
218
219
|
aria-live="polite"
|
|
@@ -8,7 +8,5 @@
|
|
|
8
8
|
"color-picker.options.advanced.requiredField": "Povinné pole",
|
|
9
9
|
"color-picker.options.advanced.requiredField.description": "Pokud je toto pole prázdné, nebudete moci vytvořit záznam",
|
|
10
10
|
"color-picker.settings": "Nastavení",
|
|
11
|
-
"color-picker.toggle.aria-label": "Přepínač výběru barvy"
|
|
12
|
-
"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.",
|
|
13
|
-
"plugin.description.short": "A Strapi-maintained color picker custom field."
|
|
11
|
+
"color-picker.toggle.aria-label": "Přepínač výběru barvy"
|
|
14
12
|
}
|
|
@@ -10,5 +10,6 @@
|
|
|
10
10
|
"color-picker.settings": "Settings",
|
|
11
11
|
"color-picker.toggle.aria-label": "Color picker toggle",
|
|
12
12
|
"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.",
|
|
13
|
-
"plugin.description.short": "A Strapi-maintained color picker custom field."
|
|
13
|
+
"plugin.description.short": "A Strapi-maintained color picker custom field.",
|
|
14
|
+
"plugin.name": "Color picker"
|
|
14
15
|
}
|
|
@@ -10,5 +10,6 @@
|
|
|
10
10
|
"color-picker.settings": "Настройки",
|
|
11
11
|
"color-picker.toggle.aria-label": "Переключатель средства выбора цвета",
|
|
12
12
|
"plugin.description.long": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi. Используйте ползунки насыщенности и оттенка, чтобы выбрать цвет и сохранить его HEX (шестнадцатеричное) значение.",
|
|
13
|
-
"plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi."
|
|
13
|
+
"plugin.description.short": "Настраиваемое поле средства выбора цвета, поддерживаемое Strapi.",
|
|
14
|
+
"plugin.name": "Выбор цвета"
|
|
14
15
|
}
|
|
@@ -8,7 +8,5 @@
|
|
|
8
8
|
"color-picker.options.advanced.requiredField": "Obligatoriskt fält",
|
|
9
9
|
"color-picker.options.advanced.requiredField.description": "Du kommer inte att kunna skapa en post om det här fältet är tomt",
|
|
10
10
|
"color-picker.settings": "Inställningar",
|
|
11
|
-
"color-picker.toggle.aria-label": "Växla färgväljare"
|
|
12
|
-
"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.",
|
|
13
|
-
"plugin.description.short": "A Strapi-maintained color picker custom field."
|
|
11
|
+
"color-picker.toggle.aria-label": "Växla färgväljare"
|
|
14
12
|
}
|
|
@@ -8,7 +8,5 @@
|
|
|
8
8
|
"color-picker.options.advanced.requiredField": "Zorunlu alan",
|
|
9
9
|
"color-picker.options.advanced.requiredField.description": "Bu alan boş olursa yeni bir girdi oluşturamazsın",
|
|
10
10
|
"color-picker.settings": "Ayarlar",
|
|
11
|
-
"color-picker.toggle.aria-label": "Renk seçici anahtarı"
|
|
12
|
-
"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.",
|
|
13
|
-
"plugin.description.short": "A Strapi-maintained color picker custom field."
|
|
11
|
+
"color-picker.toggle.aria-label": "Renk seçici anahtarı"
|
|
14
12
|
}
|
|
@@ -8,7 +8,5 @@
|
|
|
8
8
|
"color-picker.options.advanced.requiredField": "必填欄位",
|
|
9
9
|
"color-picker.options.advanced.requiredField.description": "若此欄位為空，您將無法建立項目",
|
|
10
10
|
"color-picker.settings": "設定",
|
|
11
|
-
"color-picker.toggle.aria-label": "選色器開關"
|
|
12
|
-
"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.",
|
|
13
|
-
"plugin.description.short": "A Strapi-maintained color picker custom field."
|
|
11
|
+
"color-picker.toggle.aria-label": "選色器開關"
|
|
14
12
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/plugin-color-picker",
|
|
3
|
-
"version": "4.9.0-
|
|
3
|
+
"version": "4.9.0-beta.1",
|
|
4
4
|
"description": "Strapi maintained Custom Fields",
|
|
5
5
|
"strapi": {
|
|
6
6
|
"name": "color-picker",
|
|
@@ -9,12 +9,26 @@
|
|
|
9
9
|
"displayName": "Color Picker"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"
|
|
12
|
+
"@strapi/design-system": "1.6.6",
|
|
13
|
+
"@strapi/helper-plugin": "4.9.0-beta.1",
|
|
14
|
+
"@strapi/icons": "1.6.6",
|
|
15
|
+
"prop-types": "^15.7.2",
|
|
13
16
|
"react-colorful": "5.6.1",
|
|
14
|
-
"react-
|
|
17
|
+
"react-intl": "6.2.8"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@testing-library/react": "12.1.4",
|
|
21
|
+
"react": "^17.0.2",
|
|
22
|
+
"react-dom": "^17.0.2",
|
|
23
|
+
"react-router-dom": "5.3.4",
|
|
24
|
+
"styled-components": "5.3.3"
|
|
15
25
|
},
|
|
16
26
|
"peerDependencies": {
|
|
17
|
-
"@strapi/strapi": "^4.4.0"
|
|
27
|
+
"@strapi/strapi": "^4.4.0",
|
|
28
|
+
"react": "^17.0.2",
|
|
29
|
+
"react-dom": "^17.0.2",
|
|
30
|
+
"react-router-dom": "5.3.4",
|
|
31
|
+
"styled-components": "5.3.3"
|
|
18
32
|
},
|
|
19
33
|
"repository": {
|
|
20
34
|
"type": "git",
|
|
@@ -38,5 +52,5 @@
|
|
|
38
52
|
"node": ">=14.19.1 <=18.x.x",
|
|
39
53
|
"npm": ">=6.0.0"
|
|
40
54
|
},
|
|
41
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "ff37d666d0634fc84827e3d6419d916618275572"
|
|
42
56
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|