@workday/canvas-kit-preview-react 9.2.0-508-next.0 → 9.2.0-512-next.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 (6) hide show
  1. package/color-picker/lib/ColorPicker.tsx +12 -2
  2. package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map +1 -1
  3. package/dist/commonjs/color-picker/lib/ColorPicker.js +7 -2
  4. package/dist/es6/color-picker/lib/ColorPicker.d.ts.map +1 -1
  5. package/dist/es6/color-picker/lib/ColorPicker.js +7 -2
  6. package/package.json +3 -3
package/color-picker/lib/ColorPicker.tsx CHANGED
@@ -172,6 +172,7 @@ export const ColorPicker = ({
172
172
  ...elemProps
173
173
  }: ColorPickerProps) => {
174
174
  const [validHexValue, setValidHexValue] = React.useState('');
175
+ const [disabled, setDisabled] = React.useState(true);
175
176
  const [customHexValue, setCustomHexValue] = React.useState(
176
177
  isCustomColor(colorSet, value) ? value : ''
177
178
  );
@@ -179,9 +180,13 @@ export const ColorPicker = ({
179
180
  const onCustomHexChange = (event: React.ChangeEvent<HTMLInputElement>) => {
180
181
  setCustomHexValue(event.target.value);
181
182
  setValidHexValue('');
183
+ setDisabled(true);
182
184
  };
183
185
 
184
- const onValidCustomHexChange = (validHexValue: string) => setValidHexValue(validHexValue);
186
+ const onValidCustomHexChange = (validHexValue: string) => {
187
+ setValidHexValue(validHexValue);
188
+ setDisabled(false);
189
+ };
185
190
 
186
191
  const onSubmit = (event: React.FormEvent) => {
187
192
  if (onSubmitClick) {
@@ -207,7 +212,12 @@ export const ColorPicker = ({
207
212
  showCheck={value === validHexValue || value === customHexValue}
208
213
  />
209
214
  </ColorInputAndLabel>
210
- <CheckButton aria-label={submitLabel} icon={checkIcon} type="submit" />
215
+ <CheckButton
216
+ aria-label={submitLabel}
217
+ icon={checkIcon}
218
+ type="submit"
219
+ disabled={disabled}
220
+ />
211
221
  </ColorInputWrapper>
212
222
  )}
213
223
  </ColorPickerContainer>
package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CA0ClB,CAAC"}
1
+ {"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAoDlB,CAAC"}
package/dist/commonjs/color-picker/lib/ColorPicker.js CHANGED
@@ -120,12 +120,17 @@ const isCustomColor = (colors, hexCode) => {
120
120
  };
121
121
  const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
122
122
  const [validHexValue, setValidHexValue] = React.useState('');
123
+ const [disabled, setDisabled] = React.useState(true);
123
124
  const [customHexValue, setCustomHexValue] = React.useState(isCustomColor(colorSet, value) ? value : '');
124
125
  const onCustomHexChange = (event) => {
125
126
  setCustomHexValue(event.target.value);
126
127
  setValidHexValue('');
128
+ setDisabled(true);
129
+ };
130
+ const onValidCustomHexChange = (validHexValue) => {
131
+ setValidHexValue(validHexValue);
132
+ setDisabled(false);
127
133
  };
128
- const onValidCustomHexChange = (validHexValue) => setValidHexValue(validHexValue);
129
134
  const onSubmit = (event) => {
130
135
  if (onSubmitClick) {
131
136
  onSubmitClick(event);
@@ -139,7 +144,7 @@ const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom
139
144
  showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
140
145
  React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
141
146
  React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
142
- React.createElement(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon, type: "submit" })))));
147
+ React.createElement(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon, type: "submit", disabled: disabled })))));
143
148
  };
144
149
  exports.ColorPicker = ColorPicker;
145
150
  exports.ColorPicker.defaultColorSet = defaultColorSet;
package/dist/es6/color-picker/lib/ColorPicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CA0ClB,CAAC"}
1
+ {"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAoDlB,CAAC"}
package/dist/es6/color-picker/lib/ColorPicker.js CHANGED
@@ -95,12 +95,17 @@ const isCustomColor = (colors, hexCode) => {
95
95
  };
96
96
  export const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
97
97
  const [validHexValue, setValidHexValue] = React.useState('');
98
+ const [disabled, setDisabled] = React.useState(true);
98
99
  const [customHexValue, setCustomHexValue] = React.useState(isCustomColor(colorSet, value) ? value : '');
99
100
  const onCustomHexChange = (event) => {
100
101
  setCustomHexValue(event.target.value);
101
102
  setValidHexValue('');
103
+ setDisabled(true);
104
+ };
105
+ const onValidCustomHexChange = (validHexValue) => {
106
+ setValidHexValue(validHexValue);
107
+ setDisabled(false);
102
108
  };
103
- const onValidCustomHexChange = (validHexValue) => setValidHexValue(validHexValue);
104
109
  const onSubmit = (event) => {
105
110
  if (onSubmitClick) {
106
111
  onSubmitClick(event);
@@ -114,6 +119,6 @@ export const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel =
114
119
  showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
115
120
  React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
116
121
  React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
117
- React.createElement(CheckButton, { "aria-label": submitLabel, icon: checkIcon, type: "submit" })))));
122
+ React.createElement(CheckButton, { "aria-label": submitLabel, icon: checkIcon, type: "submit", disabled: disabled })))));
118
123
  };
119
124
  ColorPicker.defaultColorSet = defaultColorSet;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "9.2.0-508-next.0",
3
+ "version": "9.2.0-512-next.0",
4
4
  "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -46,7 +46,7 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-react": "^9.2.0-508-next.0",
49
+ "@workday/canvas-kit-react": "^9.2.0-512-next.0",
50
50
  "@workday/canvas-system-icons-web": "^3.0.0",
51
51
  "@workday/design-assets-types": "^0.2.8"
52
52
  },
@@ -56,5 +56,5 @@
56
56
  "react-hook-form": "7.36.1",
57
57
  "yup": "^0.32.11"
58
58
  },
59
- "gitHead": "944984a787101cfc3979e1b516602af1d269c8d1"
59
+ "gitHead": "81c6c52d78bd8fce97239929f4a37ed52a6ed851"
60
60
  }