@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
101 lines (100 loc) • 4.58 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useThemedRing = exports.getPaletteColorsForFocusRing = void 0;
const common_1 = require("@workday/canvas-kit-react/common");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const chroma_js_1 = __importDefault(require("chroma-js"));
const isAccessible = (foreground, background = tokens_1.colors.frenchVanilla100) => {
return chroma_js_1.default.contrast(foreground, background) >= 3;
};
const getPaletteColorsFromTheme = (palette, fallbackColors) => {
return {
outer: isAccessible(palette.main)
? palette.main
: isAccessible(palette.darkest)
? palette.darkest
: fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.outer,
inner: (fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.inner) ? fallbackColors.inner : palette.main,
};
};
function getPaletteColorsForFocusRing(type, theme) {
const palette = theme.canvas.palette[type];
switch (type) {
case 'error': {
return getPaletteColorsFromTheme(palette, { outer: tokens_1.inputColors.error.border });
}
case 'alert': {
return getPaletteColorsFromTheme(palette, { outer: tokens_1.colors.cantaloupe600 });
}
case 'success': {
return getPaletteColorsFromTheme(palette, {
outer: tokens_1.colors.greenApple600,
// 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: palette.main === tokens_1.colors.greenApple600 ? tokens_1.statusColors.success : palette.main,
});
}
default: {
return getPaletteColorsFromTheme(palette);
}
}
}
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 {TextInput} from '@workday/canvas-kit-preview-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 (
* <TextInput>
* <TextInput.Label>Email</TextInput.Label>
* <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
* <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
* </TextInput>
* );
* };
*```
*/
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 ${tokens_1.colors.frenchVanilla100},
0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder}`,
},
};
};
exports.useThemedRing = useThemedRing;