Skip to content

Commit

Permalink
Add display type and color to OuiSwitch
Browse files Browse the repository at this point in the history
Signed-off-by: Miki <miki@amazon.com>
  • Loading branch information
AMoo-Miki committed Aug 5, 2024
1 parent 3924f60 commit e919ff1
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 3 deletions.
102 changes: 101 additions & 1 deletion src/components/form/switch/_switch.scss
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@
pointer-events: none;
width: $ouiSwitchWidth;
height: $ouiSwitchHeight;
background-color: $ouiColorPrimary;
display: inline-block;
position: relative;
border-radius: $ouiSwitchHeight;
Expand Down Expand Up @@ -214,4 +213,105 @@
}
}
}

&.ouiSwitch--base {
border: solid 1px transparent;
cursor: pointer;
height: $ouiButtonHeight;
line-height: $ouiButtonHeight;
vertical-align: middle;
align-items: stretch;
border-radius: $ouiBorderRadius;
padding: 0 $euiSize - $euiSizeXS;

.ouiSwitch__label {
// sass-lint:disable-block no-important
line-height: $ouiFormControlLayoutGroupInputHeight !important;
}

&.ouiSwitch--compressed,
&.ouiSwitch--mini {
height: $ouiButtonHeightSmall;
line-height: $ouiButtonHeightSmall;

.ouiSwitch__label {
// sass-lint:disable-block no-important
line-height: $ouiFormControlLayoutGroupInputCompressedHeight !important;
}
}

&.ouiSwitch-isDisabled {
border-color: $ouiButtonColorDisabled;
cursor: not-allowed;

&:hover,
&:focus,
&:focus-within {
@include ouiSlightShadow;
}
}
}
}

// sass-lint:disable-block nesting-depth
@each $name, $color in $ouiSwitchColors {
.ouiSwitch--#{$name} {
&.ouiSwitch--base {
@include ouiSlightShadow;
@include ouiButtonFocus;

border-color: $color;

@if ($name == 'ghost') {
// Ghost is unique and ALWAYS sits against a dark background.
color: $color;
} @else if ($name == 'text') {
// The default color is lighter than the normal text color, make the it the text color
color: $ouiTextColor;
} @else {
// Other colors need to check their contrast against the page background color.
color: makeHighContrastColor($color, $ouiPageBackgroundColor);
}

&:not([class*='isDisabled']) {
$shadowColor: $ouiShadowColor;
@if ($name == 'ghost') {
$shadowColor: $ouiColorInk;
} @else if (lightness($ouiTextColor) < 50) {
// Only if this is the light theme do we use the button variant color to colorize the shadow
$shadowColor: desaturate($color, 60%);
}

@include ouiSlightShadow($shadowColor);

&:hover,
&:focus,
&:focus-within {
@include ouiSlightShadowHover($shadowColor);
background-color: transparentize($color, .9);
}

&:active {
@include ouiSlightShadowActive($color);
}
}
}

.ouiSwitch__body {
background-color: $color;
}

.ouiSwitch__icon--checked {
&.ouiSwitch--compressed,
&.ouiSwitch--mini {
.ouiSwitch__button[aria-checked='true'] {
.ouiSwitch__thumb {
border-color: $color;
}
}
}
}
}
}


2 changes: 2 additions & 0 deletions src/components/form/switch/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
export {
OuiSwitch,
OuiSwitchProps,
OuiSwitchColor,
OuiSwitchDisplay,
OuiSwitchEvent,
OuiCompressedSwitch,
OuiCompressedSwitchProps,
Expand Down
44 changes: 42 additions & 2 deletions src/components/form/switch/switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,34 @@ import React, {
} from 'react';
import classNames from 'classnames';

import { CommonProps } from '../../common';
import { CommonProps, keysOf } from '../../common';
import { htmlIdGenerator } from '../../../services/accessibility';
import { OuiIcon } from '../../icon';

const baseClassName = 'ouiSwitch';

const colorToClassNameMap = {
primary: `${baseClassName}--primary`,
accent: `${baseClassName}--accent`,
secondary: `${baseClassName}--secondary`,
success: `${baseClassName}--success`,
warning: `${baseClassName}--warning`,
danger: `${baseClassName}--danger`,
ghost: `${baseClassName}--ghost`,
text: `${baseClassName}--text`,
};

export const COLORS = keysOf(colorToClassNameMap);
export type OuiSwitchColor = keyof typeof colorToClassNameMap;

const displayToClassNameMap = {
base: `${baseClassName}--base`,
empty: null,
};

export const DISPLAYS = keysOf(displayToClassNameMap);
export type OuiSwitchDisplay = keyof typeof displayToClassNameMap;

export type OuiSwitchEvent = React.BaseSyntheticEvent<
React.MouseEvent<HTMLButtonElement>,
HTMLButtonElement,
Expand All @@ -56,7 +80,7 @@ export type OuiSwitchProps = CommonProps &
'onChange' | 'type' | 'disabled'
> & {
/**
* Whether to render the render the text label
* Whether to render the text label
*/
showLabel?: boolean;
/**
Expand All @@ -65,13 +89,24 @@ export type OuiSwitchProps = CommonProps &
label: ReactNode | string;
checked: boolean;
onChange: (event: OuiSwitchEvent) => void;
/**
* Any of the named color palette options.
* **`subdued` set to be DEPRECATED, use `text` instead**
*/
color?: OuiSwitchColor;
disabled?: boolean;
compressed?: boolean;
type?: 'submit' | 'reset' | 'button';
/**
* Object of props passed to the label's <span/>
*/
labelProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
/**
* Sets the display style for matching other OuiButton types.
* `base` is equivalent to a typical OuiButton
* `empty` (default) is equivalent to an OuiButtonEmpty
*/
display?: OuiSwitchDisplay;
};

export const OuiSwitch: FunctionComponent<OuiSwitchProps> = ({
Expand All @@ -85,6 +120,8 @@ export const OuiSwitch: FunctionComponent<OuiSwitchProps> = ({
showLabel = true,
type = 'button',
labelProps,
color = 'primary',
display = 'empty',
...rest
}) => {
const [switchId] = useState(id || htmlIdGenerator()());
Expand All @@ -105,8 +142,11 @@ export const OuiSwitch: FunctionComponent<OuiSwitchProps> = ({

const classes = classNames(
'ouiSwitch',
color && colorToClassNameMap[color],
display && displayToClassNameMap[display],
{
'ouiSwitch--compressed': compressed,
'ouiSwitch-isDisabled': disabled,
},
className
);
Expand Down
14 changes: 14 additions & 0 deletions src/global_styling/variables/_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,19 @@ $ouiSwitchHeightMini: $ouiSwitchHeight * .5 !default;
$ouiSwitchWidthMini: $ouiSwitchWidth * .5 !default;
$ouiSwitchThumbSizeMini: $ouiSwitchHeightMini !default;

// Modifier naming and colors.
$ouiSwitchColors: (
primary: $ouiColorPrimary,
accent: $ouiColorAccent,
secondary: $ouiColorSecondary,
success: $ouiColorSuccess,
warning: $ouiColorWarning,
danger: $ouiColorDanger,
subdued: $ouiTextSubduedColor, // Should get deprecated in favor of `text`
ghost: $ouiColorGhost, // Ghost is special, and does not care about theming.
text: $ouiColorDarkShade, // Reserved for special use cases
) !default;

// Coloring
$ouiFormBackgroundColor: tintOrShade($ouiColorLightestShade, 60%, 40%) !default;
$ouiFormBackgroundDisabledColor: darken($ouiColorLightestShade, 2%) !default;
Expand Down Expand Up @@ -97,6 +110,7 @@ $euiSwitchThumbSizeCompressed: $ouiSwitchThumbSizeCompressed;
$euiSwitchHeightMini: $ouiSwitchHeightMini;
$euiSwitchWidthMini: $ouiSwitchWidthMini;
$euiSwitchThumbSizeMini: $ouiSwitchThumbSizeMini;
$euiSwitchColors: $ouiSwitchColors;
$euiFormBackgroundColor: $ouiFormBackgroundColor;
$euiFormBackgroundDisabledColor: $ouiFormBackgroundDisabledColor;
$euiFormBackgroundReadOnlyColor: $ouiFormBackgroundReadOnlyColor;
Expand Down
14 changes: 14 additions & 0 deletions src/themes/oui-next/global_styling/variables/_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,19 @@ $ouiSwitchHeightMini: $ouiSwitchHeight * .5 !default;
$ouiSwitchWidthMini: $ouiSwitchWidth * .5 !default;
$ouiSwitchThumbSizeMini: $ouiSwitchHeightMini !default;

// Modifier naming and colors.
$ouiSwitchColors: (
primary: $ouiColorPrimary,
accent: $ouiColorAccent,
secondary: $ouiColorSecondary,
success: $ouiColorSuccess,
warning: $ouiColorWarning,
danger: $ouiColorDanger,
subdued: $ouiTextSubduedColor, // Should get deprecated in favor of `text`
ghost: $ouiColorGhost, // Ghost is special, and does not care about theming.
text: $ouiColorDarkShade, // Reserved for special use cases
) !default;

// Coloring
$ouiFormBackgroundColor: tintOrShade($ouiColorLightestShade, 60%, 40%) !default;
$ouiFormBackgroundDisabledColor: darken($ouiColorLightestShade, 2%) !default;
Expand Down Expand Up @@ -98,6 +111,7 @@ $euiSwitchThumbSizeCompressed: $ouiSwitchThumbSizeCompressed;
$euiSwitchHeightMini: $ouiSwitchHeightMini;
$euiSwitchWidthMini: $ouiSwitchWidthMini;
$euiSwitchThumbSizeMini: $ouiSwitchThumbSizeMini;
$euiSwitchColors: $ouiSwitchColors;
$euiFormBackgroundColor: $ouiFormBackgroundColor;
$euiFormBackgroundDisabledColor: $ouiFormBackgroundDisabledColor;
$euiFormBackgroundReadOnlyColor: $ouiFormBackgroundReadOnlyColor;
Expand Down

0 comments on commit e919ff1

Please sign in to comment.