Add display type and color to OuiSwitch

Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Aug 5, 2024 · e919ff1 · e919ff1
1 parent 3924f60
commit e919ff1
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 3 deletions.
diff --git a/src/components/form/switch/_switch.scss b/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,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;
+          }
+        }
+      }
+    }
+  }
 }
+
+
diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts
@@ -31,6 +31,8 @@
 export {
   OuiSwitch,
   OuiSwitchProps,
+  OuiSwitchColor,
+  OuiSwitchDisplay,
   OuiSwitchEvent,
   OuiCompressedSwitch,
   OuiCompressedSwitchProps,

diff --git a/src/components/form/switch/switch.tsx b/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
   );

diff --git a/src/global_styling/variables/_form.scss b/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;

diff --git a/src/themes/oui-next/global_styling/variables/_form.scss b/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;