@uxf/ui 11.36.0 → 11.37.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.
Files changed (4) hide show
  1. package/css/button.css +15 -0
  2. package/dropzone/README.md +2 -2
  3. package/package.json +1 -1
  4. package/tabs/components/tabs-button.js +1 -1
package/css/button.css CHANGED
@@ -45,6 +45,7 @@
45
45
 
46
46
  &:hover {
47
47
  background-color: var(--uxf-button-background-color-hover);
48
+ color: var(--uxf-button-text-color-hover);
48
49
  }
49
50
 
50
51
  &__text {
@@ -129,6 +130,7 @@
129
130
 
130
131
  &--variant-default {
131
132
  --uxf-button-text-color: theme("colors.base_text_inverted_high_emphasis");
133
+ --uxf-button-text-color-hover: theme("colors.base_text_inverted_high_emphasis");
132
134
 
133
135
  &.uxf-button--color-default {
134
136
  --uxf-button-background-color: theme("colors.primary_surface_default");
@@ -159,6 +161,7 @@
159
161
  --uxf-button-background-color: theme("colors.base_surface_main");
160
162
  --uxf-button-background-color-hover: theme("colors.base_surface_main_hover");
161
163
  --uxf-button-text-color: theme("colors.base_text_high_emphasis");
164
+ --uxf-button-text-color-hover: theme("colors.base_text_high_emphasis");
162
165
 
163
166
  &.is-disabled {
164
167
  --uxf-button-background-color: theme("colors.base_surface_input_disabled");
@@ -182,31 +185,37 @@
182
185
  &.uxf-button--color-default {
183
186
  --uxf-button-border-color: theme("colors.base_border_input");
184
187
  --uxf-button-text-color: theme("colors.base_text_high_emphasis");
188
+ --uxf-button-text-color-hover: theme("colors.base_text_high_emphasis");
185
189
  }
186
190
 
187
191
  &.uxf-button--color-positive {
188
192
  --uxf-button-border-color: theme("colors.positive_border");
189
193
  --uxf-button-text-color: theme("colors.positive_text");
194
+ --uxf-button-text-color-hover: theme("colors.positive_text");
190
195
  }
191
196
 
192
197
  &.uxf-button--color-negative {
193
198
  --uxf-button-border-color: theme("colors.negative_border");
194
199
  --uxf-button-text-color: theme("colors.negative_text");
200
+ --uxf-button-text-color-hover: theme("colors.negative_text");
195
201
  }
196
202
 
197
203
  &.uxf-button--color-warning {
198
204
  --uxf-button-border-color: theme("colors.warning_border");
199
205
  --uxf-button-text-color: theme("colors.warning_text");
206
+ --uxf-button-text-color-hover: theme("colors.warning_text");
200
207
  }
201
208
 
202
209
  &.uxf-button--color-info {
203
210
  --uxf-button-border-color: theme("colors.info_border");
204
211
  --uxf-button-text-color: theme("colors.info_text");
212
+ --uxf-button-text-color-hover: theme("colors.info_text");
205
213
  }
206
214
 
207
215
  &.uxf-button--color-inverted {
208
216
  --uxf-button-border-color: theme("colors.base_border_inverted_border");
209
217
  --uxf-button-text-color: theme("colors.base_text_inverted_high_emphasis");
218
+ --uxf-button-text-color-hover: theme("colors.base_text_inverted_high_emphasis");
210
219
  --uxf-button-background-color: theme("colors.base_surface_inverted_main");
211
220
  --uxf-button-background-color-hover: theme("colors.base_surface_inverted_main_hover");
212
221
 
@@ -230,26 +239,32 @@
230
239
 
231
240
  &.uxf-button--color-default {
232
241
  --uxf-button-text-color: theme("colors.base_text_high_emphasis");
242
+ --uxf-button-text-color-hover: theme("colors.base_text_high_emphasis");
233
243
  }
234
244
 
235
245
  &.uxf-button--color-positive {
236
246
  --uxf-button-text-color: theme("colors.positive_text");
247
+ --uxf-button-text-color-hover: theme("colors.positive_text");
237
248
  }
238
249
 
239
250
  &.uxf-button--color-negative {
240
251
  --uxf-button-text-color: theme("colors.negative_text");
252
+ --uxf-button-text-color-hover: theme("colors.negative_text");
241
253
  }
242
254
 
243
255
  &.uxf-button--color-warning {
244
256
  --uxf-button-text-color: theme("colors.warning_text");
257
+ --uxf-button-text-color-hover: theme("colors.warning_text");
245
258
  }
246
259
 
247
260
  &.uxf-button--color-info {
248
261
  --uxf-button-text-color: theme("colors.info_text");
262
+ --uxf-button-text-color-hover: theme("colors.info_text");
249
263
  }
250
264
 
251
265
  &.uxf-button--color-inverted {
252
266
  --uxf-button-text-color: theme("colors.base_text_inverted_high_emphasis");
267
+ --uxf-button-text-color-hover: theme("colors.base_text_inverted_high_emphasis");
253
268
  --uxf-button-background-color-hover: theme("colors.base_surface_inverted_main_hover");
254
269
 
255
270
  &.uxf-button--is-disabled {
package/dropzone/README.md CHANGED
@@ -72,7 +72,7 @@ function BasicExample() {
72
72
  const { status } = getDropzoneState(files);
73
73
 
74
74
  // Confirm file removal
75
- const onRemoveConfirm = (): Promise<boolean> => Promise.resolve(confirm("Do you want to delete the file?"));
75
+ const removeConfirmHandler = (): Promise<boolean> => Promise.resolve(confirm("Do you want to delete the file?"));
76
76
 
77
77
  // Handle upload errors
78
78
  const onUploadError = (error: unknown) => {
@@ -93,7 +93,7 @@ function BasicExample() {
93
93
  {/* List of uploaded files */}
94
94
  <Dropzone.List
95
95
  onChange={setFiles}
96
- onRemoveConfirm={onRemoveConfirm}
96
+ removeConfirmHandler={removeConfirmHandler}
97
97
  value={files}
98
98
  />
99
99
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "11.36.0",
3
+ "version": "11.37.0",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/tabs/components/tabs-button.js CHANGED
@@ -34,6 +34,6 @@ function Component(props, ref) {
34
34
  return null;
35
35
  }
36
36
  const className = (0, cx_1.cx)("uxf-tabs__button", `uxf-tabs__button--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.isVertical ? "uxf-tabs__button--vertical" : "uxf-tabs__button--horizontal", props.isActive && `uxf-tabs__button--${classes_1.CLASSES.IS_ACTIVE} ${classes_1.CLASSES.IS_ACTIVE}`, props.isDisabled && `uxf-tabs__button--${classes_1.CLASSES.IS_DISABLED} ${classes_1.CLASSES.IS_DISABLED}`, props.className);
37
- return (react_1.default.createElement("button", { "aria-selected": props.isActive, className: className, id: props.id, onClick: props.isDisabled ? undefined : props.onClick, ref: ref, role: "tab", tabIndex: props.isActive ? undefined : -1 }, props.children));
37
+ return (react_1.default.createElement("button", { "aria-selected": props.isActive, className: className, id: props.id, onClick: props.isDisabled ? undefined : props.onClick, ref: ref, role: "tab", tabIndex: props.isActive ? undefined : -1, type: "button" }, props.children));
38
38
  }
39
39
  exports.TabsButton = (0, react_1.forwardRef)(Component);