-
-
-
+
+
+
+
+
- {optionalLabel}
+ {label && (
+
+ )}
);
};
diff --git a/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx b/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx
index 41c4f4e261e..28b8a177620 100644
--- a/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx
+++ b/packages/eui/src/components/form/checkbox/checkbox_group.stories.tsx
@@ -30,9 +30,11 @@ export const Playground: Story = {
{ id: 'checkbox-1', label: 'Checkbox 1' },
{ id: 'checkbox-2', label: 'Checkbox 2' },
{ id: 'checkbox-3', label: 'Checkbox 3', disabled: true },
+ { id: 'checkbox-4', label: 'Checkbox 4', disabled: true },
],
idToSelectedMap: {
'checkbox-2': true,
+ 'checkbox-4': true,
},
// set up for easier testing/QA
legend: {
diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx
index d6a9f011ecc..4fd5cddcb96 100644
--- a/packages/eui/src/components/form/form.styles.test.tsx
+++ b/packages/eui/src/components/form/form.styles.test.tsx
@@ -14,7 +14,7 @@ import { EuiProvider } from '../provider';
import {
euiFormVariables,
euiFormControlStyles,
- euiCustomControl,
+ euiFormCustomControlStyles,
} from './form.styles';
const darkModeWrapper: FunctionComponent
= ({
@@ -51,8 +51,6 @@ describe('euiFormVariables', () => {
"controlLayoutGroupInputHeight": "38px",
"controlPadding": "12px",
"controlPlaceholderText": "#646a77",
- "customControlBorderColor": "#f5f7fc",
- "customControlDisabledIconColor": "#cacfd8",
"iconAffordance": "24px",
"iconCompressedAffordance": "18px",
"maxWidth": "400px",
@@ -68,8 +66,6 @@ describe('euiFormVariables', () => {
// Check custom dark-mode logic
expect(result.current.backgroundColor).toEqual('#16171c');
expect(result.current.controlPlaceholderText).toEqual('#878b95');
- expect(result.current.customControlDisabledIconColor).toEqual('#33373f');
- expect(result.current.customControlBorderColor).toEqual('#16171c');
});
});
@@ -218,97 +214,99 @@ describe('euiFormControlStyles', () => {
});
});
-describe('euiCustomControl', () => {
- it('returns CSS styles for padding, borders, backgrounds', () => {
- const { result } = renderHook(() => euiCustomControl(useEuiTheme()));
- expect(result.current).toMatchInlineSnapshot(`
- "
- padding: 7px;
-
- border: 1px solid #f5f7fc;
- background: #FFF no-repeat center;
-
- @media screen and (prefers-reduced-motion: no-preference) {
- transition: background-color 150ms ease-in,
- border-color 150ms ease-in;
- }
- "
- `);
- });
-
- it('allows passing custom padding size', () => {
+describe('euiFormCustomControlStyles', () => {
+ it('outputs an object of styles and child element styles', () => {
const { result } = renderHook(() =>
- euiCustomControl(useEuiTheme(), { size: '32px' })
+ euiFormCustomControlStyles(useEuiTheme())
);
expect(result.current).toMatchInlineSnapshot(`
- "
- padding: 15px;
-
- border: 1px solid #f5f7fc;
- background: #FFF no-repeat center;
+ {
+ "input": {
+ "disabled": {
+ "selected": "
+ label: disabled;
+ color: #69707D;
+ background-color: #D3DAE6;
+ ",
+ "unselected": "
+ label: disabled;
+ color: #D3DAE6;
+ background-color: #D3DAE6;
+ cursor: not-allowed;
+ ",
+ },
+ "enabled": {
+ "selected": "
+ color: #FFF;
+ background-color: #07C;
+ ",
+ "unselected": "
+ color: transparent;
+ background-color: #FFF;
+ border: 1px solid #919296;
- @media screen and (prefers-reduced-motion: no-preference) {
- transition: background-color 150ms ease-in,
- border-color 150ms ease-in;
- }
- "
- `);
- });
+ &:has(input:focus) {
+ border-color: #07C;
+ }
+ ",
+ },
+ "fauxInput": "
+ position: relative;
+ block-size: 16px;
+ inline-size: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
- test('type.round', () => {
- const { result } = renderHook(() =>
- euiCustomControl(useEuiTheme(), { type: 'round' })
- );
- expect(result.current).toMatchInlineSnapshot(`
- "
- padding: 7px;
- border-radius: 16px;
- border: 1px solid #f5f7fc;
- background: #FFF no-repeat center;
+ &:has(+ label) {
+ margin-block-start: 4px;
+ }
- @media screen and (prefers-reduced-motion: no-preference) {
- transition: background-color 150ms ease-in,
- border-color 150ms ease-in;
- }
- "
- `);
- });
-
- test('size and type.round changes both padding and border-radius', () => {
- const { result } = renderHook(() =>
- euiCustomControl(useEuiTheme(), { size: '6px', type: 'round' })
- );
- expect(result.current).toMatchInlineSnapshot(`
- "
- padding: 2px;
- border-radius: 6px;
- border: 1px solid #f5f7fc;
- background: #FFF no-repeat center;
+ &:has(input:focus-visible) {
+ outline: 2px solid #07C;
+ outline-offset: 2px;
+ }
- @media screen and (prefers-reduced-motion: no-preference) {
- transition: background-color 150ms ease-in,
- border-color 150ms ease-in;
- }
- "
- `);
- });
+ @media screen and (prefers-reduced-motion: no-preference) {
+ transition-property: background-color, color;
+ transition-duration: 150ms;
+ transition-timing-function: ease-in;
+ }
+ ",
+ "hiddenInput": "
+ position: absolute;
+ inset: 0;
+ opacity: 0 !important;
+ cursor: pointer;
- test('type.square', () => {
- const { result } = renderHook(() =>
- euiCustomControl(useEuiTheme(), { type: 'square' })
- );
- expect(result.current).toMatchInlineSnapshot(`
- "
- padding: 7px;
- border-radius: 4px;
- border: 1px solid #f5f7fc;
- background: #FFF no-repeat center;
-
- @media screen and (prefers-reduced-motion: no-preference) {
- transition: background-color 150ms ease-in,
- border-color 150ms ease-in;
- }
- "
+ &:disabled {
+ cursor: not-allowed;
+ }
+ ",
+ "icon": "
+ transform: scale(0.75);
+ ",
+ },
+ "label": {
+ "disabled": "
+ cursor: not-allowed;
+ color: #a2abba;
+ ",
+ "enabled": "
+ cursor: pointer;
+ ",
+ "label": "
+ /* Needs to use padding and not flex gap for extra mouse click area */
+ padding-inline-start: 8px;
+ line-height: 24px;
+ font-size: 1.0000rem;
+ ",
+ },
+ "wrapper": "
+ display: flex;
+ align-items: flex-start;
+ ",
+ }
`);
});
});
diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts
index 677a90b70c5..3fb08bd23ce 100644
--- a/packages/eui/src/components/form/form.styles.ts
+++ b/packages/eui/src/components/form/form.styles.ts
@@ -71,16 +71,6 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
: tint(euiTheme.colors.lightShade, 0.5),
};
- // Colors - specific to checkboxes, radios, switches, and range thumbs
- const customControlColors = {
- customControlDisabledIconColor: isColorDark
- ? shade(euiTheme.colors.mediumShade, 0.38)
- : tint(euiTheme.colors.mediumShade, 0.485),
- customControlBorderColor: isColorDark
- ? shade(euiTheme.colors.lightestShade, 0.4)
- : tint(euiTheme.colors.lightestShade, 0.31),
- };
-
const controlLayout = {
controlLayoutGroupInputHeight: mathWithUnits(controlHeight, (x) => x - 2),
controlLayoutGroupInputCompressedHeight: mathWithUnits(
@@ -103,7 +93,6 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
return {
...sizes,
...colors,
- ...customControlColors,
...iconSizes,
...controlLayout,
animationTiming: `${euiTheme.animation.fast} ease-in`,
@@ -173,45 +162,6 @@ export const euiFormControlStyles = (euiThemeContext: UseEuiTheme) => {
};
};
-export const euiCustomControl = (
- euiThemeContext: UseEuiTheme,
- options: {
- type?: 'round' | 'square';
- size?: string;
- } = {}
-) => {
- const euiTheme = euiThemeContext.euiTheme;
- const form = euiFormVariables(euiThemeContext);
- const { type, size = euiTheme.size.base } = options;
-
- let padddingStyle = '';
- let borderRadiusStyle = '';
-
- if (size) {
- const borderSize = parseFloat(String(euiTheme.border.width.thin));
- const paddingSize = mathWithUnits(size, (x) => (x - borderSize * 2) / 2);
- padddingStyle = `padding: ${paddingSize};`;
- }
-
- if (type === 'round') {
- borderRadiusStyle = `border-radius: ${size};`;
- } else if (type === 'square') {
- borderRadiusStyle = `border-radius: ${form.controlCompressedBorderRadius};`;
- }
-
- return `
- ${padddingStyle}
- ${borderRadiusStyle}
- border: ${euiTheme.border.width.thin} solid ${form.customControlBorderColor};
- background: ${euiTheme.colors.emptyShade} no-repeat center;
-
- ${euiCanAnimate} {
- transition: background-color ${form.animationTiming},
- border-color ${form.animationTiming};
- }
- `;
-};
-
export const euiFormControlText = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const { fontSize } = euiFontSize(euiThemeContext, 's');
@@ -376,3 +326,143 @@ const euiPlaceholderPerBrowser = (content: string) => `
&:-moz-placeholder { ${content} }
&::placeholder { ${content} }
`;
+
+/**
+ * Selection custom controls - checkboxes, radios, and switches
+ */
+
+export const euiFormCustomControlVariables = (euiThemeContext: UseEuiTheme) => {
+ const { euiTheme, colorMode } = euiThemeContext;
+
+ const sizes = {
+ control: euiTheme.size.base,
+ lineHeight: euiTheme.size.l,
+ labelGap: euiTheme.size.s,
+ };
+
+ const colors = {
+ unselected: euiTheme.colors.emptyShade,
+ unselectedBorder:
+ colorMode === 'DARK'
+ ? tint(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
+ : shade(euiTheme.colors.lightestShade, 0.4),
+ selected: euiTheme.colors.primary,
+ selectedIcon: euiTheme.colors.emptyShade,
+ disabled: euiTheme.colors.lightShade,
+ disabledIcon: euiTheme.colors.darkShade,
+ disabledLabel: euiTheme.colors.disabledText, // Lighter than formVars.disabledColor because it typically doesn't have as dark a background
+ };
+
+ const animation = {
+ speed: euiTheme.animation.fast,
+ easing: 'ease-in',
+ };
+
+ return {
+ sizes,
+ colors,
+ animation,
+ };
+};
+
+export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => {
+ const { euiTheme } = euiThemeContext;
+ const controlVars = euiFormCustomControlVariables(euiThemeContext);
+
+ const centerWithLabel = mathWithUnits(
+ [controlVars.sizes.lineHeight, controlVars.sizes.control],
+ (x, y) => (x - y) / 2
+ );
+
+ return {
+ wrapper: `
+ display: flex;
+ align-items: flex-start;
+ `,
+ input: {
+ fauxInput: `
+ position: relative;
+ ${logicalCSS('height', controlVars.sizes.control)}
+ ${logicalCSS('width', controlVars.sizes.control)}
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:has(+ label) {
+ ${logicalCSS('margin-top', centerWithLabel)}
+ }
+
+ &:has(input:focus-visible) {
+ outline: ${euiTheme.focus.width} solid ${controlVars.colors.selected};
+ outline-offset: ${euiTheme.focus.width};
+ }
+
+ ${euiCanAnimate} {
+ transition-property: background-color, color;
+ transition-duration: ${controlVars.animation.speed};
+ transition-timing-function: ${controlVars.animation.easing};
+ }
+ `,
+ enabled: {
+ selected: `
+ color: ${controlVars.colors.selectedIcon};
+ background-color: ${controlVars.colors.selected};
+ `,
+ unselected: `
+ color: transparent;
+ background-color: ${controlVars.colors.unselected};
+ border: ${euiTheme.border.width.thin} solid ${controlVars.colors.unselectedBorder};
+
+ &:has(input:focus) {
+ border-color: ${controlVars.colors.selected};
+ }
+ `,
+ },
+ disabled: {
+ selected: `
+ label: disabled;
+ color: ${controlVars.colors.disabledIcon};
+ background-color: ${controlVars.colors.disabled};
+ `,
+ unselected: `
+ label: disabled;
+ color: ${controlVars.colors.disabled};
+ background-color: ${controlVars.colors.disabled};
+ cursor: not-allowed;
+ `,
+ },
+
+ // Looks better centered at different zoom levels than just
+ icon: `
+ transform: scale(0.75);
+ `,
+
+ // Hidden input sits on top of the visible element
+ hiddenInput: `
+ position: absolute;
+ inset: 0;
+ opacity: 0 !important;
+ cursor: pointer;
+
+ &:disabled {
+ cursor: not-allowed;
+ }
+ `,
+ },
+ label: {
+ label: `
+ /* Needs to use padding and not flex gap for extra mouse click area */
+ ${logicalCSS('padding-left', controlVars.sizes.labelGap)}
+ line-height: ${controlVars.sizes.lineHeight};
+ font-size: ${euiFontSize(euiThemeContext, 's').fontSize};
+ `,
+ enabled: `
+ cursor: pointer;
+ `,
+ disabled: `
+ cursor: not-allowed;
+ color: ${controlVars.colors.disabledLabel};
+ `,
+ },
+ };
+};
diff --git a/packages/eui/src/components/form/radio/__snapshots__/radio.test.tsx.snap b/packages/eui/src/components/form/radio/__snapshots__/radio.test.tsx.snap
index 818a48f4fab..c9700ec7d5b 100644
--- a/packages/eui/src/components/form/radio/__snapshots__/radio.test.tsx.snap
+++ b/packages/eui/src/components/form/radio/__snapshots__/radio.test.tsx.snap
@@ -3,70 +3,90 @@
exports[`EuiRadio is rendered 1`] = `