@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
117 lines (116 loc) • 6.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useThemedRing = exports.getPaletteColorsForFocusRing = void 0;
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const getPaletteColorsFromTheme = (palette, fallbackColors, errorType) => {
var _a, _b, _c;
if (errorType === 'error') {
return {
outer: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.errorInner),
inner: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.errorInner),
};
}
else if (errorType === 'alert') {
return {
outer: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.alertOuter),
inner: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.alertInner),
};
}
// If specific fallback colors are provided (e.g., for success), prefer those
if (fallbackColors && (fallbackColors.outer || fallbackColors.inner)) {
return {
outer: (_a = fallbackColors.outer) !== null && _a !== void 0 ? _a : (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline),
inner: (_c = (_b = fallbackColors.inner) !== null && _b !== void 0 ? _b : fallbackColors.outer) !== null && _c !== void 0 ? _c : (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline),
};
}
return {
outer: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline),
inner: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline),
};
};
/**
* @deprecated ⚠️ `getPaletteColorsForFocusRing` is deprecated and will be removed in a future major version. Please use the `brand.common.focusRing` CSS variable to theme focus rings. For more information, view our [CSS tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-brand-tokens--docs).
*/
function getPaletteColorsForFocusRing(type, theme) {
switch (type) {
case 'error': {
return getPaletteColorsFromTheme(theme.canvas, { outer: canvas_tokens_web_1.brand.common.errorInner }, 'error');
}
case 'alert': {
return getPaletteColorsFromTheme(theme.canvas, { outer: canvas_tokens_web_1.brand.common.alertInner }, 'alert');
}
case 'success': {
return getPaletteColorsFromTheme(theme.canvas, {
outer: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.success.dark),
// The theme default for success.main is set to the darkest GreenApple
// For our default ring, we need to override it so the inner ring is a bit lighter
inner: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.success.base),
});
}
default: {
return getPaletteColorsFromTheme(theme.canvas);
}
}
}
exports.getPaletteColorsForFocusRing = getPaletteColorsForFocusRing;
/**
* This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.
* It supports `error`, `alert`, and `success` states. It will try and use the corresponding
* `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
* which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
* ring when the input is focused. Note: You should not rely on these colors alone to differentiate
* alerts, but use them in combination with icons or hint text.
* ```tsx
* // Add here jsx pragma to use css
* import {jsx} from '@emotion/react';
* import React from 'react';
* import {FormField} from '@workday/canvas-kit-react/form-field';
* import {TextInput} from '@workday/canvas-kit-react/text-input';
* import {useThemedRing} from '@workday/canvas-kit-react/common';
*
* export const MyInput = ({handleChange}) => {
* const [value, setValue] = React.useState('invalid@email');
* const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
* setValue(event.target.value);
* };
*
* const alertStyles = useThemedRing('alert');
*
* return (
* <FormField>
* <FormField.Label>Email</FormField.Label>
* <FormField.Field css={alertStyles}>
* <FormField.Input as={TextInput} onChange={handleChange} value={value} />
* <FormField.Hint>Add a valid email</FormField.Hint>
* </FormField.Field>
* </FormField>
* );
* };
*```
* @deprecated `useThemedRing` is deprecated and will be removed in a future major version. Please use `brand.common.focusOutline` CSS variable instead. View our [CSS tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-brand-tokens--docs) for more information.
*/
const useThemedRing = (type) => {
const theme = (0, common_1.useTheme)();
const paletteColors = getPaletteColorsForFocusRing(type, theme);
if (!((paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.outer) || (paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.inner))) {
return {};
}
const errorBoxShadow = `inset 0 0 0 ${paletteColors.outer === paletteColors.inner ? 1 : 2}px ${paletteColors.inner}`;
return {
borderColor: paletteColors.outer,
transition: '100ms box-shadow',
boxShadow: errorBoxShadow,
'&:hover, &:disabled': {
borderColor: paletteColors.outer,
},
'&:focus:not([disabled])': {
borderColor: paletteColors.outer,
boxShadow: `${errorBoxShadow},
0 0 0 2px ${(0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.color.border.input.inverse)},
0 0 0 4px ${(0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline)}`,
},
};
};
exports.useThemedRing = useThemedRing;