@wix/editor-react-components 1.2342.0 → 1.2344.0

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.
@@ -63,7 +63,10 @@ const manifest = {
63
63
  font: { defaultValue: "14px sans-serif" },
64
64
  color: { defaultValue: "rgba(0, 0, 0, 1)" },
65
65
  letterSpacing: { defaultValue: "normal" },
66
- textDecorationLine: { defaultValue: "none" },
66
+ textDecorationLine: {
67
+ defaultValue: "none",
68
+ statesDefaultValues: { hover: "underline" }
69
+ },
67
70
  textAlign: { defaultValue: "center" },
68
71
  textTransform: { defaultValue: "none" },
69
72
  backgroundColor: { defaultValue: "transparent" }
@@ -265,7 +268,9 @@ const manifest = {
265
268
  color: {},
266
269
  letterSpacing: {},
267
270
  lineHeight: {},
268
- textDecorationLine: {},
271
+ textDecorationLine: {
272
+ statesDefaultValues: { hover: "underline" }
273
+ },
269
274
  textAlign: {},
270
275
  textTransform: {},
271
276
  backgroundColor: {}
@@ -19,15 +19,14 @@ export declare const DisplayNames: {
19
19
  indicator: {
20
20
  elementDisplayName: string;
21
21
  cssCustomProperties: {
22
- backgroundColor: string;
23
- borderColor: string;
22
+ uncheckedBackgroundColor: string;
23
+ uncheckedBorderColor: string;
24
+ checkedBackgroundColor: string;
25
+ checkedBorderColor: string;
24
26
  borderWidth: string;
25
27
  checkmarkColor: string;
26
28
  size: string;
27
29
  };
28
- displayGroups: {
29
- borderGroup: string;
30
- };
31
30
  };
32
31
  label: {
33
32
  elementDisplayName: string;
@@ -56,24 +56,36 @@
56
56
  border-width: var(--borderWidth, 1px);
57
57
  background-color: var(--indicator-bg);
58
58
  transition: background-color 0.2s linear, border-color 0.2s linear;
59
- --indicator-bg: var(--backgroundColor, #fff);
59
+ --indicator-bg: var(--uncheckedBackgroundColor, #fff);
60
60
  --indicator-border: var(
61
- --borderColor,
61
+ --uncheckedBorderColor,
62
62
  color-mix(in srgb, #000 60%, transparent)
63
63
  );
64
64
  }
65
65
 
66
- .control__7-RJh:hover .indicator__dzBy2,
67
- .control__7-RJh:focus-within .indicator__dzBy2,
68
- .indicator__dzBy2.checkbox__indicator--hover {
69
- --indicator-border: var(--borderColor, #000);
66
+ .control__7-RJh:not([data-checked]):not([data-indeterminate]):hover .indicator__dzBy2,
67
+ .control__7-RJh:not([data-checked]):not([data-indeterminate]):focus-within .indicator__dzBy2,
68
+ .control__7-RJh:not([data-checked]):not([data-indeterminate]) .indicator__dzBy2.checkbox__indicator--hover {
69
+ --indicator-border: var(--uncheckedBorderColor, #000);
70
+ }
71
+
72
+ .control__7-RJh[data-checked]:hover .indicator__dzBy2,
73
+ .control__7-RJh[data-checked]:focus-within .indicator__dzBy2,
74
+ .control__7-RJh[data-checked] .indicator__dzBy2.checkbox__indicator--hover,
75
+ .control__7-RJh[data-indeterminate]:hover .indicator__dzBy2,
76
+ .control__7-RJh[data-indeterminate]:focus-within .indicator__dzBy2,
77
+ .control__7-RJh[data-indeterminate] .indicator__dzBy2.checkbox__indicator--hover {
78
+ --indicator-border: var(--checkedBorderColor, #000);
70
79
  }
71
80
 
72
81
  .control__7-RJh[data-checked] .indicator__dzBy2,
73
82
  .control__7-RJh[data-indeterminate] .indicator__dzBy2,
74
83
  .indicator__dzBy2.checkbox__indicator--indeterminate {
75
- --indicator-bg: var(--backgroundColor, #116dff);
76
- --indicator-border: var(--borderColor, var(--backgroundColor, #116dff));
84
+ --indicator-bg: var(--checkedBackgroundColor, #116dff);
85
+ --indicator-border: var(
86
+ --checkedBorderColor,
87
+ var(--checkedBackgroundColor, #116dff)
88
+ );
77
89
  }
78
90
 
79
91
  .control__7-RJh[data-disabled] .indicator__dzBy2,
@@ -81,9 +93,16 @@
81
93
  opacity: 0.55;
82
94
  }
83
95
 
84
- .control__7-RJh[data-invalid] .indicator__dzBy2,
85
- .indicator__dzBy2.checkbox__indicator--invalid {
86
- --indicator-border: var(--borderColor, #e62214);
96
+ .control__7-RJh:not([data-checked]):not([data-indeterminate])[data-invalid] .indicator__dzBy2,
97
+ .control__7-RJh:not([data-checked]):not([data-indeterminate]) .indicator__dzBy2.checkbox__indicator--invalid {
98
+ --indicator-border: var(--uncheckedBorderColor, #e62214);
99
+ }
100
+
101
+ .control__7-RJh[data-checked][data-invalid] .indicator__dzBy2,
102
+ .control__7-RJh[data-indeterminate][data-invalid] .indicator__dzBy2,
103
+ .control__7-RJh[data-checked] .indicator__dzBy2.checkbox__indicator--invalid,
104
+ .control__7-RJh[data-indeterminate] .indicator__dzBy2.checkbox__indicator--invalid {
105
+ --indicator-border: var(--checkedBorderColor, #e62214);
87
106
  }
88
107
 
89
108
  .checkmark__SY2jU {
@@ -1,4 +1,4 @@
1
- import { E as ELEMENTS, N as NativeStateType, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
1
+ import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
2
2
  import { D as DesignStates, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants36.js";
3
3
  import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
4
4
  import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
@@ -109,13 +109,21 @@ const manifest = {
109
109
  boxShadow: {}
110
110
  },
111
111
  cssCustomProperties: {
112
- backgroundColor: {
112
+ uncheckedBackgroundColor: {
113
113
  cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
114
- displayName: DisplayNames.indicator.cssCustomProperties.backgroundColor
114
+ displayName: DisplayNames.indicator.cssCustomProperties.uncheckedBackgroundColor
115
115
  },
116
- borderColor: {
116
+ uncheckedBorderColor: {
117
117
  cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
118
- displayName: DisplayNames.indicator.cssCustomProperties.borderColor
118
+ displayName: DisplayNames.indicator.cssCustomProperties.uncheckedBorderColor
119
+ },
120
+ checkedBackgroundColor: {
121
+ cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
122
+ displayName: DisplayNames.indicator.cssCustomProperties.checkedBackgroundColor
123
+ },
124
+ checkedBorderColor: {
125
+ cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
126
+ displayName: DisplayNames.indicator.cssCustomProperties.checkedBorderColor
119
127
  },
120
128
  borderWidth: {
121
129
  cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
@@ -132,16 +140,6 @@ const manifest = {
132
140
  defaultValue: "16px"
133
141
  }
134
142
  },
135
- displayGroups: {
136
- borderGroup: {
137
- displayName: DisplayNames.indicator.displayGroups.borderGroup,
138
- groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
139
- border: {
140
- color: "borderColor",
141
- width: "borderWidth"
142
- }
143
- }
144
- },
145
143
  states: {
146
144
  hover: withSpec({
147
145
  spec: IS_SUPPORT_DESIGN_STATE_SPEC,
@@ -29,15 +29,14 @@ export declare const DisplayNames: {
29
29
  indicator: {
30
30
  elementDisplayName: string;
31
31
  cssCustomProperties: {
32
- backgroundColor: string;
33
- borderColor: string;
32
+ checkedBackgroundColor: string;
33
+ uncheckedBackgroundColor: string;
34
+ checkedBorderColor: string;
35
+ uncheckedBorderColor: string;
34
36
  borderWidth: string;
35
37
  checkMarkColor: string;
36
38
  size: string;
37
39
  };
38
- displayGroups: {
39
- borderGroup: string;
40
- };
41
40
  };
42
41
  optionLabel: {
43
42
  elementDisplayName: string;
@@ -127,23 +127,35 @@
127
127
  border-width: var(--borderWidth, 1px);
128
128
  background-color: var(--indicator-bg);
129
129
  transition: background-color 0.2s linear, border-color 0.2s linear;
130
- --indicator-bg: var(--backgroundColor, #fff);
130
+ --indicator-bg: var(--uncheckedBackgroundColor, #fff);
131
131
  --indicator-border: var(
132
- --borderColor,
132
+ --uncheckedBorderColor,
133
133
  color-mix(in srgb, #000 60%, transparent)
134
134
  );
135
135
  }
136
136
 
137
- .control__MMIkR:hover .indicator__mDg93,
138
- .control__MMIkR:focus-within .indicator__mDg93,
139
- .indicator__mDg93.checkbox-group__indicator--hover {
140
- --indicator-border: var(--borderColor, #000);
137
+ .control__MMIkR:not([data-checked]):not([data-indeterminate]):hover .indicator__mDg93,
138
+ .control__MMIkR:not([data-checked]):not([data-indeterminate]):focus-within .indicator__mDg93,
139
+ .control__MMIkR:not([data-checked]):not([data-indeterminate]) .indicator__mDg93.checkbox-group__indicator--hover {
140
+ --indicator-border: var(--uncheckedBorderColor, #000);
141
+ }
142
+
143
+ .control__MMIkR[data-checked]:hover .indicator__mDg93,
144
+ .control__MMIkR[data-checked]:focus-within .indicator__mDg93,
145
+ .control__MMIkR[data-checked] .indicator__mDg93.checkbox-group__indicator--hover,
146
+ .control__MMIkR[data-indeterminate]:hover .indicator__mDg93,
147
+ .control__MMIkR[data-indeterminate]:focus-within .indicator__mDg93,
148
+ .control__MMIkR[data-indeterminate] .indicator__mDg93.checkbox-group__indicator--hover {
149
+ --indicator-border: var(--checkedBorderColor, #000);
141
150
  }
142
151
 
143
152
  .control__MMIkR[data-checked] .indicator__mDg93,
144
153
  .control__MMIkR[data-indeterminate] .indicator__mDg93 {
145
- --indicator-bg: var(--backgroundColor, #116dff);
146
- --indicator-border: var(--borderColor, var(--backgroundColor, #116dff));
154
+ --indicator-bg: var(--checkedBackgroundColor, #116dff);
155
+ --indicator-border: var(
156
+ --checkedBorderColor,
157
+ var(--checkedBackgroundColor, #116dff)
158
+ );
147
159
  }
148
160
 
149
161
  .control__MMIkR[data-disabled] .indicator__mDg93,
@@ -151,9 +163,16 @@
151
163
  opacity: 0.55;
152
164
  }
153
165
 
154
- .control__MMIkR[data-invalid] .indicator__mDg93,
155
- .indicator__mDg93.checkbox-group__indicator--invalid {
156
- --indicator-border: var(--borderColor, #e62214);
166
+ .control__MMIkR:not([data-checked]):not([data-indeterminate])[data-invalid] .indicator__mDg93,
167
+ .control__MMIkR:not([data-checked]):not([data-indeterminate]) .indicator__mDg93.checkbox-group__indicator--invalid {
168
+ --indicator-border: var(--uncheckedBorderColor, #e62214);
169
+ }
170
+
171
+ .control__MMIkR[data-checked][data-invalid] .indicator__mDg93,
172
+ .control__MMIkR[data-indeterminate][data-invalid] .indicator__mDg93,
173
+ .control__MMIkR[data-checked] .indicator__mDg93.checkbox-group__indicator--invalid,
174
+ .control__MMIkR[data-indeterminate] .indicator__mDg93.checkbox-group__indicator--invalid {
175
+ --indicator-border: var(--checkedBorderColor, #e62214);
157
176
  }
158
177
 
159
178
  .checkmark__YItvi {
@@ -1,4 +1,4 @@
1
- import { E as ELEMENTS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, N as NativeStateType, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
1
+ import { E as ELEMENTS, C as CSS_PROPERTIES, N as NativeStateType, b as DISPLAY_GROUPS, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
2
2
  import { D as DesignStates, c as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants35.js";
3
3
  import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
4
4
  import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
@@ -209,13 +209,21 @@ const manifest = {
209
209
  boxShadow: {}
210
210
  },
211
211
  cssCustomProperties: {
212
- backgroundColor: {
212
+ checkedBackgroundColor: {
213
213
  cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
214
- displayName: DisplayNames.indicator.cssCustomProperties.backgroundColor
214
+ displayName: DisplayNames.indicator.cssCustomProperties.checkedBackgroundColor
215
215
  },
216
- borderColor: {
216
+ uncheckedBackgroundColor: {
217
+ cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
218
+ displayName: DisplayNames.indicator.cssCustomProperties.uncheckedBackgroundColor
219
+ },
220
+ checkedBorderColor: {
221
+ cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
222
+ displayName: DisplayNames.indicator.cssCustomProperties.checkedBorderColor
223
+ },
224
+ uncheckedBorderColor: {
217
225
  cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
218
- displayName: DisplayNames.indicator.cssCustomProperties.borderColor
226
+ displayName: DisplayNames.indicator.cssCustomProperties.uncheckedBorderColor
219
227
  },
220
228
  borderWidth: {
221
229
  cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
@@ -231,16 +239,6 @@ const manifest = {
231
239
  displayName: DisplayNames.indicator.cssCustomProperties.size,
232
240
  defaultValue: "16px"
233
241
  }
234
- },
235
- displayGroups: {
236
- borderGroup: {
237
- displayName: DisplayNames.indicator.displayGroups.borderGroup,
238
- groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
239
- border: {
240
- color: "borderColor",
241
- width: "borderWidth"
242
- }
243
- }
244
242
  }
245
243
  }
246
244
  },
@@ -28,14 +28,13 @@ const DisplayNames = {
28
28
  indicator: {
29
29
  elementDisplayName: "Indicator",
30
30
  cssCustomProperties: {
31
- backgroundColor: "Background color",
32
- borderColor: "Border color",
31
+ checkedBackgroundColor: "Checked background color",
32
+ uncheckedBackgroundColor: "Unchecked background color",
33
+ checkedBorderColor: "Checked border color",
34
+ uncheckedBorderColor: "Unchecked border color",
33
35
  borderWidth: "Border width",
34
36
  checkMarkColor: "Checkmark color",
35
37
  size: "Checkbox size"
36
- },
37
- displayGroups: {
38
- borderGroup: "Border"
39
38
  }
40
39
  },
41
40
  optionLabel: {
@@ -19,14 +19,13 @@ const DisplayNames = {
19
19
  indicator: {
20
20
  elementDisplayName: "Indicator",
21
21
  cssCustomProperties: {
22
- backgroundColor: "Background color",
23
- borderColor: "Border color",
22
+ uncheckedBackgroundColor: "Unchecked background color",
23
+ uncheckedBorderColor: "Unchecked border color",
24
+ checkedBackgroundColor: "Checked background color",
25
+ checkedBorderColor: "Checked border color",
24
26
  borderWidth: "Border width",
25
27
  checkmarkColor: "Checkmark color",
26
28
  size: "Checkbox size"
27
- },
28
- displayGroups: {
29
- borderGroup: "Border"
30
29
  }
31
30
  },
32
31
  label: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/editor-react-components",
3
- "version": "1.2342.0",
3
+ "version": "1.2344.0",
4
4
  "description": "React components for the Wix Editor",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -199,5 +199,5 @@
199
199
  "registry": "https://registry.npmjs.org/",
200
200
  "access": "public"
201
201
  },
202
- "falconPackageHash": "d70c02cf64c2bb85b7b8a12107a4b9d25f7dea849b1c47aa37585c55"
202
+ "falconPackageHash": "b092cc962820732fa979c2d77ab78f4ed5903e7ed6b0ced7f47bc0c6"
203
203
  }