[Backport 1.x] Add display type and color to OuiSwitch

src/components/form/switch/__snapshots__/switch.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`OuiSwitch assigns automatically generated ID to label 1`] = `
 <div
- class="ouiSwitch"
+ class="ouiSwitch ouiSwitch--primary"
 >
  <button
  aria-checked="false"
@@ -43,7 +43,7 @@ exports[`OuiSwitch assigns automatically generated ID to label 1`] = `
 
 exports[`OuiSwitch is rendered 1`] = `
 <div
- class="ouiSwitch testClass1 testClass2"
+ class="ouiSwitch ouiSwitch--primary testClass1 testClass2"
 >
  <button
  aria-checked="false"
@@ -86,7 +86,7 @@ exports[`OuiSwitch is rendered 1`] = `
 
 exports[`OuiSwitch labelProps is rendered 1`] = `
 <div
- class="ouiSwitch"
+ class="ouiSwitch ouiSwitch--primary"
 >
  <button
  aria-checked="false"

src/components/form/switch/_switch.scss

@@ -81,7 +81,6 @@
  pointer-events: none;
  width: $ouiSwitchWidth;
  height: $ouiSwitchHeight;
- background-color: $ouiColorPrimary;
  display: inline-block;
  position: relative;
  border-radius: $ouiSwitchHeight;
@@ -214,4 +213,101 @@
  }
  }
  }
+
+ &.ouiSwitch--base {
+ border: solid 1px transparent;
+ cursor: pointer;
+ height: $ouiButtonHeight;
+ line-height: $ouiButtonHeight;
+ vertical-align: middle;
+ align-items: stretch;
+ border-radius: $ouiBorderRadius;
+ padding: 0 $ouiSize - $ouiSizeXS;
+
+ .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--compressed,
+ &.ouiSwitch--mini {
+ .ouiSwitch__button[aria-checked='true'] {
+ .ouiSwitch__thumb {
+ border-color: $color;
+ }
+ }
+ }
+ }
 }

src/components/form/switch/index.ts

@@ -31,6 +31,8 @@
 export {
  OuiSwitch,
  OuiSwitchProps,
+ OuiSwitchColor,
+ OuiSwitchDisplay,
  OuiSwitchEvent,
  OuiCompressedSwitch,
  OuiCompressedSwitchProps,

src/components/form/switch/switch.tsx

@@ -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,
@@ -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;
  /**
@@ -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> = ({
@@ -85,6 +120,8 @@ export const OuiSwitch: FunctionComponent<OuiSwitchProps> = ({
  showLabel = true,
  type = 'button',
  labelProps,
+ color = 'primary',
+ display = 'empty',
  ...rest
 }) => {
  const [switchId] = useState(id || htmlIdGenerator()());
@@ -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
  );

src/global_styling/variables/_form.scss

@@ -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;
@@ -97,6 +110,7 @@ $euiSwitchThumbSizeCompressed: $ouiSwitchThumbSizeCompressed;
 $euiSwitchHeightMini: $ouiSwitchHeightMini;
 $euiSwitchWidthMini: $ouiSwitchWidthMini;
 $euiSwitchThumbSizeMini: $ouiSwitchThumbSizeMini;
+$euiSwitchColors: $ouiSwitchColors;
 $euiFormBackgroundColor: $ouiFormBackgroundColor;
 $euiFormBackgroundDisabledColor: $ouiFormBackgroundDisabledColor;
 $euiFormBackgroundReadOnlyColor: $ouiFormBackgroundReadOnlyColor;

src/themes/oui-next/global_styling/variables/_form.scss

@@ -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;
@@ -98,6 +111,7 @@ $euiSwitchThumbSizeCompressed: $ouiSwitchThumbSizeCompressed;
 $euiSwitchHeightMini: $ouiSwitchHeightMini;
 $euiSwitchWidthMini: $ouiSwitchWidthMini;
 $euiSwitchThumbSizeMini: $ouiSwitchThumbSizeMini;
+$euiSwitchColors: $ouiSwitchColors;
 $euiFormBackgroundColor: $ouiFormBackgroundColor;
 $euiFormBackgroundDisabledColor: $ouiFormBackgroundDisabledColor;
 $euiFormBackgroundReadOnlyColor: $ouiFormBackgroundReadOnlyColor;