@planningcenter/tapestry-react 2.9.0-rc.7 → 2.9.0-rc.8

package/dist/cjs/Button/Button.js

@@ -178,12 +178,16 @@ function Button(_ref) {
   }
 
   if (disabled) {
-    var disabledStyles = buttonThemes[theme][variant || 'fill'].disabled;
+    var themeData = buttonThemes[theme];
 
-    if (disabledStyles !== undefined) {
-      buttonProps = _objectSpread(_objectSpread({}, buttonProps), disabledStyles);
-    } else {
-      buttonProps.opacity = 0.65;
+    if (themeData) {
+      var variantData = themeData[variant];
+
+      if (variantData && variantData.disabled) {
+        buttonProps = _objectSpread(_objectSpread({}, buttonProps), variantData.disabled);
+      } else {
+        buttonProps.opacity = 0.65;
+      }
     }
 
     buttonProps['aria-disabled'] = true;

package/dist/cjs/TimeField/TimeField.js

@@ -271,20 +271,20 @@ var TimeField = function TimeField(_ref) {
     ref: ref,
     inline: true
   }, restProps), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    "aria-label": "Hours",
     autoWidth: false,
     fontVariantNumeric: "tabular-nums",
-    moveFocusOnMax: true,
-    value: hoursDisplay,
-    min: 0,
-    max: twelveHourClock ? 12 : 23,
-    pad: 2,
     grow: 0,
-    width: "2ch",
-    textAlign: "center",
-    "aria-label": "Hours",
+    max: twelveHourClock ? 12 : 23,
+    min: 0,
+    moveFocusOnMax: true,
+    onBlur: handleHoursBlur,
     onChange: handleHoursChange,
     onKeyDown: handleHoursKeyDown,
-    onBlur: handleHoursBlur,
+    pad: 2,
+    textAlign: "center",
+    value: hoursDisplay,
+    width: "2ch",
     ignoredKeys: ignoredKeys
   }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     as: "span",
@@ -292,31 +292,31 @@ var TimeField = function TimeField(_ref) {
     textAlign: "center",
     userSelect: "none"
   }, ":"), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    "aria-label": "Minutes",
     autoWidth: false,
     fontVariantNumeric: "tabular-nums",
-    moveFocusOnMax: true,
-    value: minutes,
-    min: 0,
-    max: 59,
-    pad: 2,
     grow: 0,
-    width: "2ch",
-    textAlign: "center",
-    "aria-label": "Minutes",
+    max: 59,
+    min: 0,
+    moveFocusOnMax: true,
     onChange: function onChange(e) {
       return setMinutes(e);
     },
     onKeyDown: handleMinutesKeyDown,
+    pad: 2,
+    textAlign: "center",
+    value: minutes,
+    width: "2ch",
     ignoredKeys: ignoredKeys
   }), twelveHourClock && /*#__PURE__*/_react["default"].createElement(_InputField["default"], {
-    highlightOnInteraction: true,
-    value: meridiem,
-    grow: 0,
-    width: "2em",
-    textAlign: "center",
     "aria-label": "AM/PM",
+    grow: 0,
+    highlightOnInteraction: true,
     onChange: _utils.noop,
-    onKeyDown: handleAMPMKeyDown
+    onKeyDown: handleAMPMKeyDown,
+    textAlign: "center",
+    value: meridiem,
+    width: "2em"
   }));
 };
 

package/dist/cjs/ToggleSwitch/ToggleSwitch.js

@@ -27,13 +27,13 @@ var _system = require("../system");
 function ToggleSwitch(props) {
   var _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      isActive = props.isActive,
+      isChecked = props.isChecked,
       label = props.label,
       onClick = props.onClick,
       _props$size = props.size,
       size = _props$size === void 0 ? 'md' : _props$size,
       tooltip = props.tooltip,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["disabled", "isActive", "label", "onClick", "size", "tooltip"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["disabled", "isChecked", "label", "onClick", "size", "tooltip"]);
 
   var _useThemeProps = (0, _system.useThemeProps)('toggleSwitch', restProps),
       backgroundColor = _useThemeProps.backgroundColor;
@@ -73,7 +73,7 @@ function ToggleSwitch(props) {
     spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
     as: "button",
-    backgroundColor: disabled ? _colors.colors.grays.light.neutral81 : isActive ? backgroundColor : _colors.colors.grays.light.neutral62,
+    backgroundColor: disabled ? _colors.colors.grays.light.neutral81 : isChecked ? backgroundColor : _colors.colors.grays.light.neutral62,
     onClick: onClick,
     opacity: 1,
     position: "relative",
@@ -81,14 +81,14 @@ function ToggleSwitch(props) {
     theme: false,
     disabled: disabled,
     tooltip: tooltip
-  }, toggleButtonProps, restProps), /*#__PURE__*/_react["default"].createElement(_Box.Box, (0, _extends2["default"])({
+  }, toggleButtonProps), /*#__PURE__*/_react["default"].createElement(_Box.Box, (0, _extends2["default"])({
     background: "#fff",
     left: 0.25,
     pointerEvents: "none",
     position: "absolute",
     radius: "circle",
     top: 0.25,
-    transform: "translateX(" + (isActive ? 'calc(100% - 1px)' : '0%') + ")",
+    transform: "translateX(" + (isChecked ? 'calc(100% - 1px)' : '0%') + ")",
     transition: "120ms"
   }, toggleNotchProps))), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     size: size === 'xs' ? 5 : size === 'sm' ? 4 : 3

package/dist/cjs/ToggleSwitch/ToggleSwitch.test.js

@@ -10,10 +10,11 @@ require("@testing-library/jest-dom/extend-expect");
 
 var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
 
+var base = 8;
 describe('ToggleSwitch component', function () {
   it('should render with default properties', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
-      isActive: false,
+      isChecked: false,
       label: "Toggle me",
       onClick: function onClick() {}
     })),
@@ -26,7 +27,7 @@ describe('ToggleSwitch component', function () {
     var mockOnClick = jest.fn();
 
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
-      isActive: false,
+      isChecked: false,
       label: "Toggle me",
       onClick: mockOnClick
     })),
@@ -42,7 +43,7 @@ describe('ToggleSwitch component', function () {
     var label = 'Toggle me';
 
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
-      isActive: false,
+      isChecked: false,
       label: label,
       onClick: function onClick() {}
     })),
@@ -50,12 +51,12 @@ describe('ToggleSwitch component', function () {
 
     expect(getByText(label)).toBeInTheDocument();
   });
-  it('should apply active color when isActive is true', function () {
+  it('should apply active color when isChecked is true', function () {
     var activeColor = 'green';
 
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
       backgroundColor: activeColor,
-      isActive: true,
+      isChecked: true,
       label: "Toggle me",
       onClick: function onClick() {}
     })),
@@ -64,4 +65,62 @@ describe('ToggleSwitch component', function () {
     var toggleButton = getByRole('button');
     expect(toggleButton).toHaveStyle("background-color: " + activeColor);
   });
+  it('should not be clickable when disabled', function () {
+    var mockOnClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+      disabled: true,
+      isChecked: false,
+      label: "Toggle me",
+      onClick: mockOnClick
+    })),
+        getByRole = _render5.getByRole;
+
+    var toggleButton = getByRole('button');
+
+    _react2.fireEvent.click(toggleButton);
+
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
+  describe('it should apply the correct size', function () {
+    it("should apply the correct size for xs", function () {
+      var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "xs"
+      })),
+          getByRole = _render6.getByRole;
+
+      var toggleButton = getByRole('button');
+      expect(toggleButton).toHaveStyle("height: " + base * 2 + "px");
+      expect(toggleButton).toHaveStyle("width: " + base * 3.5 + "px");
+    });
+    it("should apply the correct size for sm", function () {
+      var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "sm"
+      })),
+          getByRole = _render7.getByRole;
+
+      var toggleButton = getByRole('button');
+      expect(toggleButton).toHaveStyle("height: " + base * 2.25 + "px");
+      expect(toggleButton).toHaveStyle("width: " + base * 4 + "px");
+    });
+    it("should apply the correct default size (md)", function () {
+      var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "md"
+      })),
+          getByRole = _render8.getByRole;
+
+      var toggleButton = getByRole('button');
+      expect(toggleButton).toHaveStyle("height: " + base * 2.5 + "px");
+      expect(toggleButton).toHaveStyle("width: " + base * 4.375 + "px");
+    });
+  });
 });

package/dist/esm/Button/Button.js

@@ -171,12 +171,16 @@ export function Button(_ref) {
   }
 
   if (disabled) {
-    var disabledStyles = buttonThemes[theme][variant || 'fill'].disabled;
+    var themeData = buttonThemes[theme];
 
-    if (disabledStyles !== undefined) {
-      buttonProps = _objectSpread(_objectSpread({}, buttonProps), disabledStyles);
-    } else {
-      buttonProps.opacity = 0.65;
+    if (themeData) {
+      var variantData = themeData[variant];
+
+      if (variantData && variantData.disabled) {
+        buttonProps = _objectSpread(_objectSpread({}, buttonProps), variantData.disabled);
+      } else {
+        buttonProps.opacity = 0.65;
+      }
     }
 
     buttonProps['aria-disabled'] = true;

package/dist/esm/TimeField/TimeField.js

@@ -260,47 +260,47 @@ var TimeField = function TimeField(_ref) {
     ref: ref,
     inline: true
   }, restProps), /*#__PURE__*/React.createElement(NumberField, {
+    "aria-label": "Hours",
     autoWidth: false,
     fontVariantNumeric: "tabular-nums",
-    moveFocusOnMax: true,
-    value: hoursDisplay,
-    min: 0,
-    max: twelveHourClock ? 12 : 23,
-    pad: 2,
     grow: 0,
-    width: "2ch",
-    textAlign: "center",
-    "aria-label": "Hours",
+    max: twelveHourClock ? 12 : 23,
+    min: 0,
+    moveFocusOnMax: true,
+    onBlur: handleHoursBlur,
     onChange: handleHoursChange,
     onKeyDown: handleHoursKeyDown,
-    onBlur: handleHoursBlur,
+    pad: 2,
+    textAlign: "center",
+    value: hoursDisplay,
+    width: "2ch",
     ignoredKeys: ignoredKeys
   }), _ref2, /*#__PURE__*/React.createElement(NumberField, {
+    "aria-label": "Minutes",
     autoWidth: false,
     fontVariantNumeric: "tabular-nums",
-    moveFocusOnMax: true,
-    value: minutes,
-    min: 0,
-    max: 59,
-    pad: 2,
     grow: 0,
-    width: "2ch",
-    textAlign: "center",
-    "aria-label": "Minutes",
+    max: 59,
+    min: 0,
+    moveFocusOnMax: true,
     onChange: function onChange(e) {
       return setMinutes(e);
     },
     onKeyDown: handleMinutesKeyDown,
+    pad: 2,
+    textAlign: "center",
+    value: minutes,
+    width: "2ch",
     ignoredKeys: ignoredKeys
   }), twelveHourClock && /*#__PURE__*/React.createElement(InputField, {
-    highlightOnInteraction: true,
-    value: meridiem,
-    grow: 0,
-    width: "2em",
-    textAlign: "center",
     "aria-label": "AM/PM",
+    grow: 0,
+    highlightOnInteraction: true,
     onChange: noop,
-    onKeyDown: handleAMPMKeyDown
+    onKeyDown: handleAMPMKeyDown,
+    textAlign: "center",
+    value: meridiem,
+    width: "2em"
   }));
 };
 

package/dist/esm/ToggleSwitch/ToggleSwitch.js

@@ -10,13 +10,13 @@ import { useThemeProps } from '../system';
 export function ToggleSwitch(props) {
   var _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      isActive = props.isActive,
+      isChecked = props.isChecked,
       label = props.label,
       onClick = props.onClick,
       _props$size = props.size,
       size = _props$size === void 0 ? 'md' : _props$size,
       tooltip = props.tooltip,
-      restProps = _objectWithoutPropertiesLoose(props, ["disabled", "isActive", "label", "onClick", "size", "tooltip"]);
+      restProps = _objectWithoutPropertiesLoose(props, ["disabled", "isChecked", "label", "onClick", "size", "tooltip"]);
 
   var _useThemeProps = useThemeProps('toggleSwitch', restProps),
       backgroundColor = _useThemeProps.backgroundColor;
@@ -56,7 +56,7 @@ export function ToggleSwitch(props) {
     spacing: size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1
   }, /*#__PURE__*/React.createElement(Button, _extends({
     as: "button",
-    backgroundColor: disabled ? colors.grays.light.neutral81 : isActive ? backgroundColor : colors.grays.light.neutral62,
+    backgroundColor: disabled ? colors.grays.light.neutral81 : isChecked ? backgroundColor : colors.grays.light.neutral62,
     onClick: onClick,
     opacity: 1,
     position: "relative",
@@ -64,14 +64,14 @@ export function ToggleSwitch(props) {
     theme: false,
     disabled: disabled,
     tooltip: tooltip
-  }, toggleButtonProps, restProps), /*#__PURE__*/React.createElement(Box, _extends({
+  }, toggleButtonProps), /*#__PURE__*/React.createElement(Box, _extends({
     background: "#fff",
     left: 0.25,
     pointerEvents: "none",
     position: "absolute",
     radius: "circle",
     top: 0.25,
-    transform: "translateX(" + (isActive ? 'calc(100% - 1px)' : '0%') + ")",
+    transform: "translateX(" + (isChecked ? 'calc(100% - 1px)' : '0%') + ")",
     transition: "120ms"
   }, toggleNotchProps))), label && /*#__PURE__*/React.createElement(Text, {
     size: size === 'xs' ? 5 : size === 'sm' ? 4 : 3

package/dist/esm/ToggleSwitch/ToggleSwitch.test.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import ToggleSwitch from './ToggleSwitch';
+var base = 8;
 describe('ToggleSwitch component', function () {
   it('should render with default properties', function () {
     var _render = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      isActive: false,
+      isChecked: false,
       label: "Toggle me",
       onClick: function onClick() {}
     })),
@@ -18,7 +19,7 @@ describe('ToggleSwitch component', function () {
     var mockOnClick = jest.fn();
 
     var _render2 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      isActive: false,
+      isChecked: false,
       label: "Toggle me",
       onClick: mockOnClick
     })),
@@ -32,7 +33,7 @@ describe('ToggleSwitch component', function () {
     var label = 'Toggle me';
 
     var _render3 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
-      isActive: false,
+      isChecked: false,
       label: label,
       onClick: function onClick() {}
     })),
@@ -40,12 +41,12 @@ describe('ToggleSwitch component', function () {
 
     expect(getByText(label)).toBeInTheDocument();
   });
-  it('should apply active color when isActive is true', function () {
+  it('should apply active color when isChecked is true', function () {
     var activeColor = 'green';
 
     var _render4 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
       backgroundColor: activeColor,
-      isActive: true,
+      isChecked: true,
       label: "Toggle me",
       onClick: function onClick() {}
     })),
@@ -54,4 +55,60 @@ describe('ToggleSwitch component', function () {
     var toggleButton = getByRole('button');
     expect(toggleButton).toHaveStyle("background-color: " + activeColor);
   });
+  it('should not be clickable when disabled', function () {
+    var mockOnClick = jest.fn();
+
+    var _render5 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+      disabled: true,
+      isChecked: false,
+      label: "Toggle me",
+      onClick: mockOnClick
+    })),
+        getByRole = _render5.getByRole;
+
+    var toggleButton = getByRole('button');
+    fireEvent.click(toggleButton);
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
+  describe('it should apply the correct size', function () {
+    it("should apply the correct size for xs", function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "xs"
+      })),
+          getByRole = _render6.getByRole;
+
+      var toggleButton = getByRole('button');
+      expect(toggleButton).toHaveStyle("height: " + base * 2 + "px");
+      expect(toggleButton).toHaveStyle("width: " + base * 3.5 + "px");
+    });
+    it("should apply the correct size for sm", function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "sm"
+      })),
+          getByRole = _render7.getByRole;
+
+      var toggleButton = getByRole('button');
+      expect(toggleButton).toHaveStyle("height: " + base * 2.25 + "px");
+      expect(toggleButton).toHaveStyle("width: " + base * 4 + "px");
+    });
+    it("should apply the correct default size (md)", function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ToggleSwitch, {
+        isChecked: false,
+        label: "Toggle me",
+        onClick: function onClick() {},
+        size: "md"
+      })),
+          getByRole = _render8.getByRole;
+
+      var toggleButton = getByRole('button');
+      expect(toggleButton).toHaveStyle("height: " + base * 2.5 + "px");
+      expect(toggleButton).toHaveStyle("width: " + base * 4.375 + "px");
+    });
+  });
 });

package/dist/types/ToggleSwitch/ToggleSwitch.d.ts

@@ -6,8 +6,8 @@ export declare type ToggleSwitchProps = {
     backgroundColor?: string;
     /** Whether the toggle is disabled. */
     disabled?: boolean;
-    /** Whether the toggle is active. */
-    isActive: boolean;
+    /** Whether the toggle is checked. */
+    isChecked: boolean;
     /** The label for the toggle. */
     label: string;
     /** The function to call when the toggle is clicked. */
@@ -17,6 +17,6 @@ export declare type ToggleSwitchProps = {
     /** The tooltip to display when the toggle is hovered. */
     tooltip?: string;
 } & StackViewProps;
-declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & ToggleSwitchProps & MediaQueries<ToggleSwitchProps>;
+declare type Props = React.RefAttributes<any> & ToggleSwitchProps & MediaQueries<ToggleSwitchProps>;
 export declare function ToggleSwitch(props: Props): JSX.Element;
 export default ToggleSwitch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.0-rc.7",
+  "version": "v2.9.0-rc.8",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Button/Button.tsx

@@ -260,15 +260,14 @@ export function Button({
   }
 
   if (disabled) {
-    const disabledStyles = buttonThemes[theme][variant || 'fill'].disabled
-
-    if (disabledStyles !== undefined) {
-      buttonProps = {
-        ...buttonProps,
-        ...disabledStyles,
+    const themeData = buttonThemes[theme]
+    if (themeData) {
+      const variantData = themeData[variant]
+      if (variantData && variantData.disabled) {
+        buttonProps = { ...buttonProps, ...variantData.disabled }
+      } else {
+        buttonProps.opacity = 0.65
       }
-    } else {
-      buttonProps.opacity = 0.65
     }
 
     buttonProps['aria-disabled'] = true

package/src/TimeField/TimeField.tsx

@@ -280,51 +280,51 @@ const TimeField = ({
   ) : (
     <InputBox ref={ref} inline {...restProps}>
       <NumberField
+        aria-label="Hours"
         autoWidth={false}
         fontVariantNumeric="tabular-nums"
-        moveFocusOnMax
-        value={hoursDisplay}
-        min={0}
-        max={twelveHourClock ? 12 : 23}
-        pad={2}
         grow={0}
-        width="2ch"
-        textAlign="center"
-        aria-label="Hours"
+        max={twelveHourClock ? 12 : 23}
+        min={0}
+        moveFocusOnMax
+        onBlur={handleHoursBlur}
         onChange={handleHoursChange}
         onKeyDown={handleHoursKeyDown}
-        onBlur={handleHoursBlur}
+        pad={2}
+        textAlign="center"
+        value={hoursDisplay}
+        width="2ch"
         {...{ ignoredKeys }}
       />
       <Box as="span" width={0.5} textAlign="center" userSelect="none">
         :
       </Box>
       <NumberField
+        aria-label="Minutes"
         autoWidth={false}
         fontVariantNumeric="tabular-nums"
-        moveFocusOnMax
-        value={minutes}
-        min={0}
-        max={59}
-        pad={2}
         grow={0}
-        width="2ch"
-        textAlign="center"
-        aria-label="Minutes"
+        max={59}
+        min={0}
+        moveFocusOnMax
         onChange={(e) => setMinutes(e)}
         onKeyDown={handleMinutesKeyDown}
+        pad={2}
+        textAlign="center"
+        value={minutes}
+        width="2ch"
         {...{ ignoredKeys }}
       />
       {twelveHourClock && (
         <InputField
-          highlightOnInteraction
-          value={meridiem}
-          grow={0}
-          width="2em"
-          textAlign="center"
           aria-label="AM/PM"
+          grow={0}
+          highlightOnInteraction
           onChange={noop}
           onKeyDown={handleAMPMKeyDown}
+          textAlign="center"
+          value={meridiem}
+          width="2em"
         />
       )}
     </InputBox>

package/src/ToggleSwitch/ToggleSwitch.mdx

@@ -2,8 +2,8 @@
 title: ToggleSwitch
 category: General
 summary: ToggleSwitches are used to switch between two states, most commonly on and off, and visually show the current state.
-propsSummary: Accepts [StackView](/stackview) props.
 themeKey: toggleSwitch
+uxCompliant: true
 ---
 
 ```jsx live
@@ -20,19 +20,19 @@ render(
       ))}
     </StackView>
     <StackView axis="horizontal" spacing={2}>
-      <ToggleSwitch isActive label="On" tooltip="On" />
+      <ToggleSwitch isChecked label="On" tooltip="On" />
       <ToggleSwitch disabled label="Disabled, off" tooltip="Disabled, off" />
       <ToggleSwitch
         disabled
-        isActive
+        isChecked
         label="Disabled, On"
         tooltip="Disabled, On"
       />
     </StackView>
     <StackView axis="horizontal" spacing={2}>
-      <ToggleSwitch color="red-5" isActive label="Custom color" />
+      <ToggleSwitch backgroundColor="red-5" isChecked label="Custom color" />
       <ThemeProvider theme={{ toggleSwitch: { backgroundColor: 'create35' } }}>
-        <ToggleSwitch isActive label="Theme-provided color" />
+        <ToggleSwitch isChecked label="Theme-provided color" />
       </ThemeProvider>
     </StackView>
   </StackView>
@@ -41,13 +41,13 @@ render(
 
 ```jsx live
 function App() {
-  const [isActive, setIsActive] = React.useState(false)
+  const [isChecked, setIsChecked] = React.useState(false)
   return (
     <StackView>
       <ToggleSwitch
-        isActive={isActive}
+        isChecked={isChecked}
         label="Controlled toggle"
-        onClick={() => setIsActive(!isActive)}
+        onClick={() => setIsChecked(!isChecked)}
       />
     </StackView>
   )

package/src/ToggleSwitch/ToggleSwitch.test.tsx

@@ -3,10 +3,12 @@ import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import ToggleSwitch from './ToggleSwitch'
 
+const base = 8
+
 describe('ToggleSwitch component', () => {
   it('should render with default properties', () => {
     const { getByRole } = render(
-      <ToggleSwitch isActive={false} label="Toggle me" onClick={() => {}} />
+      <ToggleSwitch isChecked={false} label="Toggle me" onClick={() => {}} />
     )
 
     const toggleButton = getByRole('button')
@@ -16,7 +18,7 @@ describe('ToggleSwitch component', () => {
   it('should call onClick when clicked', () => {
     const mockOnClick = jest.fn()
     const { getByRole } = render(
-      <ToggleSwitch isActive={false} label="Toggle me" onClick={mockOnClick} />
+      <ToggleSwitch isChecked={false} label="Toggle me" onClick={mockOnClick} />
     )
 
     const toggleButton = getByRole('button')
@@ -28,18 +30,18 @@ describe('ToggleSwitch component', () => {
   it('should display the label', () => {
     const label = 'Toggle me'
     const { getByText } = render(
-      <ToggleSwitch isActive={false} label={label} onClick={() => {}} />
+      <ToggleSwitch isChecked={false} label={label} onClick={() => {}} />
     )
 
     expect(getByText(label)).toBeInTheDocument()
   })
 
-  it('should apply active color when isActive is true', () => {
+  it('should apply active color when isChecked is true', () => {
     const activeColor = 'green'
     const { getByRole } = render(
       <ToggleSwitch
         backgroundColor={activeColor}
-        isActive={true}
+        isChecked={true}
         label="Toggle me"
         onClick={() => {}}
       />
@@ -48,4 +50,66 @@ describe('ToggleSwitch component', () => {
     const toggleButton = getByRole('button')
     expect(toggleButton).toHaveStyle(`background-color: ${activeColor}`)
   })
+
+  it('should not be clickable when disabled', () => {
+    const mockOnClick = jest.fn()
+    const { getByRole } = render(
+      <ToggleSwitch
+        disabled={true}
+        isChecked={false}
+        label="Toggle me"
+        onClick={mockOnClick}
+      />
+    )
+
+    const toggleButton = getByRole('button')
+    fireEvent.click(toggleButton)
+
+    expect(mockOnClick).not.toHaveBeenCalled()
+  })
+
+  describe('it should apply the correct size', () => {
+    it(`should apply the correct size for xs`, () => {
+      const { getByRole } = render(
+        <ToggleSwitch
+          isChecked={false}
+          label="Toggle me"
+          onClick={() => {}}
+          size="xs"
+        />
+      )
+
+      const toggleButton = getByRole('button')
+      expect(toggleButton).toHaveStyle(`height: ${base * 2}px`)
+      expect(toggleButton).toHaveStyle(`width: ${base * 3.5}px`)
+    })
+    it(`should apply the correct size for sm`, () => {
+      const { getByRole } = render(
+        <ToggleSwitch
+          isChecked={false}
+          label="Toggle me"
+          onClick={() => {}}
+          size="sm"
+        />
+      )
+
+      const toggleButton = getByRole('button')
+      expect(toggleButton).toHaveStyle(`height: ${base * 2.25}px`)
+      expect(toggleButton).toHaveStyle(`width: ${base * 4}px`)
+    })
+    it(`should apply the correct default size (md)`, () => {
+      const { getByRole } = render(
+        <ToggleSwitch
+          isChecked={false}
+          label="Toggle me"
+          onClick={() => {}}
+          size="md"
+        />
+      )
+
+      const toggleButton = getByRole('button')
+      expect(toggleButton).toHaveStyle(`height: ${base * 2.5}px`)
+      expect(toggleButton).toHaveStyle(`width: ${base * 4.375}px`)
+    })
+  })
 })

package/src/ToggleSwitch/ToggleSwitch.tsx

@@ -15,8 +15,8 @@ export type ToggleSwitchProps = {
   /** Whether the toggle is disabled. */
   disabled?: boolean
 
-  /** Whether the toggle is active. */
-  isActive: boolean
+  /** Whether the toggle is checked. */
+  isChecked: boolean
 
   /** The label for the toggle. */
   label: string
@@ -32,14 +32,13 @@ export type ToggleSwitchProps = {
 } & StackViewProps
 
 type Props = React.RefAttributes<any> &
-  React.HTMLAttributes<any> &
   ToggleSwitchProps &
   MediaQueries<ToggleSwitchProps>
 
 export function ToggleSwitch(props: Props) {
   const {
     disabled = false,
-    isActive,
+    isChecked,
     label,
     onClick,
     size = 'md',
@@ -71,7 +70,7 @@ export function ToggleSwitch(props: Props) {
         backgroundColor={
           disabled
             ? colors.grays.light.neutral81
-            : isActive
+            : isChecked
             ? backgroundColor
             : colors.grays.light.neutral62
         }
@@ -82,7 +81,6 @@ export function ToggleSwitch(props: Props) {
         theme={false}
         {...{ disabled, tooltip }}
         {...toggleButtonProps}
-        {...restProps}
       >
         <Box
           background="#fff"
@@ -91,7 +89,7 @@ export function ToggleSwitch(props: Props) {
           position="absolute"
           radius="circle"
           top={0.25}
-          transform={`translateX(${isActive ? 'calc(100% - 1px)' : '0%'})`}
+          transform={`translateX(${isChecked ? 'calc(100% - 1px)' : '0%'})`}
           transition="120ms"
           {...toggleNotchProps}
         />