baseui 0.0.0-next-29453ad → 0.0.0-next-4e68b3e

package/README.md

@@ -24,14 +24,14 @@ Add `baseui` and its peer dependencies to your project:
 
 ```bash
 # using yarn
-yarn add baseui styletron-react styletron-engine-atomic
+yarn add baseui styletron-react styletron-engine-monolithic
 
 # using npm
-npm install baseui styletron-react styletron-engine-atomic
+npm install baseui styletron-react styletron-engine-monolithic
 ```
 
 ```javascript
-import {Client as Styletron} from 'styletron-engine-atomic';
+import {Client as Styletron} from 'styletron-engine-monolithic';
 import {Provider as StyletronProvider} from 'styletron-react';
 import {LightTheme, BaseProvider, styled} from 'baseui';
 import {StatefulInput} from 'baseui/input';

package/accordion/accordion.js

@@ -195,7 +195,6 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           accordion = _this$props2.accordion,
           disabled = _this$props2.disabled,
           children = _this$props2.children,
-          renderPanelContent = _this$props2.renderPanelContent,
           renderAll = _this$props2.renderAll,
           overrides = _this$props2.overrides; // flowlint-next-line unclear-type:off
 
@@ -220,7 +219,6 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           ref: itemRef,
           expanded: isExpanded || child.props.expanded,
           accordion: accordion,
-          renderPanelContent: renderPanelContent,
           renderAll: renderAll,
           overrides: child.props.overrides || overrides,
           disabled: child.props.disabled || disabled,
@@ -235,14 +233,6 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.cloneElement(child, props);
       });
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // TODO(v11)
-      if (process.env.NODE_ENV !== "production" && this.props.renderPanelContent) {
-        console.warn('baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.');
-      }
-    }
   }, {
     key: "render",
     value: function render() {
@@ -278,7 +268,6 @@ _defineProperty(Accordion, "defaultProps", {
   onChange: function onChange() {},
   overrides: {},
   renderAll: false,
-  renderPanelContent: false,
   stateReducer: function stateReducer(type, newState) {
     return newState;
   }

package/accordion/accordion.js.flow

@@ -22,7 +22,6 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
     onChange: () => {},
     overrides: {},
     renderAll: false,
-    renderPanelContent: false,
     stateReducer: (type, newState) => newState,
   };
 
@@ -105,7 +104,7 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
 
   getItems() {
     const { expanded } = this.state;
-    const { accordion, disabled, children, renderPanelContent, renderAll, overrides } = this.props;
+    const { accordion, disabled, children, renderAll, overrides } = this.props;
     // flowlint-next-line unclear-type:off
     return React.Children.map(children, (child: any, index) => {
       if (!child) return;
@@ -127,7 +126,6 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
         ref: itemRef,
         expanded: isExpanded || child.props.expanded,
         accordion,
-        renderPanelContent,
         renderAll,
         overrides: child.props.overrides || overrides,
         disabled: child.props.disabled || disabled,
@@ -137,15 +135,6 @@ export default class Accordion extends React.Component<AccordionPropsT, Accordio
     });
   }
 
-  componentDidMount() {
-    // TODO(v11)
-    if (__DEV__ && this.props.renderPanelContent) {
-      console.warn(
-        'baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.'
-      );
-    }
-  }
-
   render() {
     const { overrides = {} } = this.props;
     const { Root: RootOverride } = overrides;

package/accordion/index.d.ts

@@ -37,7 +37,6 @@ export interface AccordionProps {
   onChange?: (args: {expanded: React.Key[]}) => any;
   overrides?: AccordionOverrides<SharedProps>;
   stateReducer?: StateReducer<AccordionState>;
-  renderPanelContent?: boolean;
   renderAll?: boolean;
 }
 
@@ -48,7 +47,6 @@ export type StatelessAccordionProps = {
   expanded: React.Key[];
   onChange?: (args: {expanded: React.Key[]; key: React.Key}) => any;
   overrides?: AccordionOverrides<SharedProps> & PanelOverrides<SharedProps>;
-  renderPanelContent?: boolean;
   renderAll?: boolean;
 };
 
@@ -85,7 +83,6 @@ export interface SharedPanelProps {
   onKeyDown?: (e: KeyboardEvent) => any;
   overrides?: PanelOverrides<SharedProps>;
   title?: React.ReactNode;
-  renderPanelContent?: boolean;
   renderAll?: boolean;
 }
 

package/accordion/panel.js

@@ -58,8 +58,6 @@ var Panel = function Panel(_ref, ref) {
       overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? '' : _ref$title,
-      _ref$renderPanelConte = _ref.renderPanelContent,
-      renderPanelContent = _ref$renderPanelConte === void 0 ? false : _ref$renderPanelConte,
       _ref$renderAll = _ref.renderAll,
       renderAll = _ref$renderAll === void 0 ? false : _ref$renderAll;
 
@@ -241,7 +239,7 @@ var Panel = function Panel(_ref, ref) {
       ref: _animateRef
     }, sharedProps, contentProps, ariaControls ? {
       id: ariaControls
-    } : {}), localState.expanded || renderAll || renderPanelContent || localState.animationInProgress ? children : null)));
+    } : {}), localState.expanded || renderAll || localState.animationInProgress ? children : null)));
   });
 };
 

package/accordion/panel.js.flow

@@ -31,7 +31,6 @@ const Panel = (
     onKeyDown = () => {},
     overrides = {},
     title = '',
-    renderPanelContent = false,
     renderAll = false,
   }: PanelPropsT,
   ref
@@ -219,12 +218,7 @@ const Panel = (
               {...contentProps}
               {...(ariaControls ? { id: ariaControls } : {})}
             >
-              {localState.expanded ||
-              renderAll ||
-              renderPanelContent ||
-              localState.animationInProgress
-                ? children
-                : null}
+              {localState.expanded || renderAll || localState.animationInProgress ? children : null}
             </Content>
           </ContentAnimationContainer>
         </PanelContainer>

package/accordion/stateless-accordion.js

@@ -52,8 +52,7 @@ function StatelessAccordion(_ref) {
       onChange = _ref.onChange,
       _ref$overrides = _ref.overrides,
       overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
-      renderAll = _ref.renderAll,
-      renderPanelContent = _ref.renderPanelContent;
+      renderAll = _ref.renderAll;
 
   var RootOverrides = overrides.Root,
       PanelOverrides = _objectWithoutProperties(overrides, ["Root"]);
@@ -97,8 +96,7 @@ function StatelessAccordion(_ref) {
         });
       } : onChange,
       overrides: child.props.overrides || PanelOverrides,
-      renderAll: renderAll,
-      renderPanelContent: renderPanelContent
+      renderAll: renderAll
     });
   }));
 }

package/accordion/stateless-accordion.js.flow

@@ -18,7 +18,6 @@ function StatelessAccordion({
   onChange,
   overrides = {},
   renderAll,
-  renderPanelContent,
 }: StatelessAccordionPropsT) {
   const { Root: RootOverrides, ...PanelOverrides } = overrides;
   const [Root, rootProps] = getOverrides(RootOverrides, StyledRoot);
@@ -53,7 +52,6 @@ function StatelessAccordion({
               : onChange,
           overrides: child.props.overrides || PanelOverrides,
           renderAll,
-          renderPanelContent,
         });
       })}
     </Root>

package/accordion/types.js.flow

@@ -77,11 +77,6 @@ export type AccordionPropsT = {
   /** Handler called each time the component state changes.
    * Used to override default state-change functionality. */
   stateReducer: StateReducerT,
-  /**
-   * Allows users to render all child content whether a panel is expanded or not
-   * for SEO purposed
-   */
-  renderPanelContent?: boolean,
   /**
    * Allows users to render all child content whether a panel is expanded or not
    * for SEO purposed

package/button/constants.js

@@ -14,8 +14,7 @@ LICENSE file in the root directory of this source tree.
 var KIND = {
   primary: 'primary',
   secondary: 'secondary',
-  tertiary: 'tertiary',
-  minimal: 'minimal'
+  tertiary: 'tertiary'
 };
 exports.KIND = KIND;
 var SHAPE = {

package/button/constants.js.flow

@@ -10,7 +10,6 @@ export const KIND = {
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
-  minimal: 'minimal',
 };
 
 export const SHAPE = {

package/button/index.d.ts

@@ -10,7 +10,6 @@ export interface KIND {
   primary: 'primary';
   secondary: 'secondary';
   tertiary: 'tertiary';
-  minimal: 'minimal';
 }
 
 export interface SIZE {

package/button/styled-components.js

@@ -215,14 +215,6 @@ function getLoadingSpinnerColors(_ref8) {
         };
       }
 
-    case _constants.KIND.minimal:
-      {
-        return {
-          foreground: $theme.colors.buttonMinimalSpinnerForeground,
-          background: $theme.colors.buttonMinimalSpinnerBackground
-        };
-      }
-
     case _constants.KIND.primary:
     default:
       {
@@ -291,7 +283,7 @@ function getDisabledStyles(_ref11) {
         color: $theme.colors.buttonDisabledActiveText,
         backgroundColor: $theme.colors.buttonDisabledActiveFill
       };
-    } else if ($kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary) {
+    } else if ($kind === _constants.KIND.tertiary) {
       return {
         backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
         color: $theme.colors.buttonTertiaryDisabledActiveText
@@ -300,7 +292,7 @@ function getDisabledStyles(_ref11) {
   }
 
   return {
-    backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   };
 }
@@ -429,25 +421,6 @@ function getColorStyles(_ref13) {
         }
       };
 
-    case _constants.KIND.minimal:
-      if ($isSelected) {
-        return {
-          color: $theme.colors.buttonMinimalSelectedText,
-          backgroundColor: $theme.colors.buttonMinimalSelectedFill
-        };
-      }
-
-      return {
-        color: $theme.colors.buttonMinimalText,
-        backgroundColor: $theme.colors.buttonMinimalFill,
-        ':hover': {
-          backgroundColor: $isLoading ? $theme.colors.buttonMinimalActive : $theme.colors.buttonMinimalHover
-        },
-        ':active': {
-          backgroundColor: $theme.colors.buttonMinimalActive
-        }
-      };
-
     default:
       return Object.freeze({});
   }

package/button/styled-components.js.flow

@@ -175,12 +175,6 @@ function getLoadingSpinnerColors({ $theme, $kind, $disabled }) {
         background: $theme.colors.buttonTertiarySpinnerBackground,
       };
     }
-    case KIND.minimal: {
-      return {
-        foreground: $theme.colors.buttonMinimalSpinnerForeground,
-        background: $theme.colors.buttonMinimalSpinnerBackground,
-      };
-    }
     case KIND.primary:
     default: {
       return {
@@ -234,7 +228,7 @@ function getDisabledStyles({ $theme, $kind, $isSelected, $disabled }) {
         color: $theme.colors.buttonDisabledActiveText,
         backgroundColor: $theme.colors.buttonDisabledActiveFill,
       };
-    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+    } else if ($kind === KIND.tertiary) {
       return {
         backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
         color: $theme.colors.buttonTertiaryDisabledActiveText,
@@ -243,10 +237,7 @@ function getDisabledStyles({ $theme, $kind, $isSelected, $disabled }) {
   }
 
   return {
-    backgroundColor:
-      $kind === KIND.minimal || $kind === KIND.tertiary
-        ? 'transparent'
-        : $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText,
   };
 }
@@ -383,25 +374,6 @@ function getColorStyles({
           backgroundColor: $theme.colors.buttonTertiaryActive,
         },
       };
-    case KIND.minimal:
-      if ($isSelected) {
-        return {
-          color: $theme.colors.buttonMinimalSelectedText,
-          backgroundColor: $theme.colors.buttonMinimalSelectedFill,
-        };
-      }
-      return {
-        color: $theme.colors.buttonMinimalText,
-        backgroundColor: $theme.colors.buttonMinimalFill,
-        ':hover': {
-          backgroundColor: $isLoading
-            ? $theme.colors.buttonMinimalActive
-            : $theme.colors.buttonMinimalHover,
-        },
-        ':active': {
-          backgroundColor: $theme.colors.buttonMinimalActive,
-        },
-      };
     default:
       return Object.freeze({});
   }

package/checkbox/checkbox.js

@@ -133,10 +133,6 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isToggle", function () {
-      return _this.props.checkmarkType === _constants.STYLE_TYPE.toggle || _this.props.checkmarkType === _constants.STYLE_TYPE.toggle_round;
-    });
-
     return _this;
   }
 
@@ -149,32 +145,19 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
 
       if (autoFocus && inputRef.current) {
         inputRef.current.focus();
-      } // TODO(v11)
-
-
-      if (process.env.NODE_ENV !== "production") {
-        if (this.props.checkmarkType === _constants.STYLE_TYPE.toggle) {
-          console.warn("baseui:Checkbox The STYLE_TYPE.toggle value on the 'checkmarkType' prop does not conform to the current base design specification. " + 'Please update your code to STYLE_TYPE.toggle_round. This will be updated automatically in a future major version.');
-        }
-
-        if (this.props.isError) {
-          console.warn('baseui:Checkbox Property "isError" will be removed in the next major version. Use "error" property instead.');
-        }
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var checkmarkType = this.props.checkmarkType;
       var _this$props2 = this.props,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override,
           onChange = _this$props2.onChange,
           _this$props2$labelPla = _this$props2.labelPlacement,
-          labelPlacement = _this$props2$labelPla === void 0 ? this.isToggle() ? 'left' : 'right' : _this$props2$labelPla,
+          labelPlacement = _this$props2$labelPla === void 0 ? this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? 'left' : 'right' : _this$props2$labelPla,
           inputRef = _this$props2.inputRef,
           isIndeterminate = _this$props2.isIndeterminate,
-          isError = _this$props2.isError,
           error = _this$props2.error,
           disabled = _this$props2.disabled,
           value = _this$props2.value,
@@ -189,7 +172,6 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           LabelOverride = overrides.Label,
           InputOverride = overrides.Input,
           ToggleOverride = overrides.Toggle,
-          ToggleInnerOverride = overrides.ToggleInner,
           ToggleTrackOverride = overrides.ToggleTrack;
 
       var Root = (0, _overrides.getOverride)(RootOverride) || _styledComponents.Root;
@@ -202,8 +184,6 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
 
       var Toggle = (0, _overrides.getOverride)(ToggleOverride) || _styledComponents.Toggle;
 
-      var ToggleInner = (0, _overrides.getOverride)(ToggleInnerOverride) || _styledComponents.ToggleInner;
-
       var ToggleTrack = (0, _overrides.getOverride)(ToggleTrackOverride) || _styledComponents.ToggleTrack;
 
       var inputEvents = {
@@ -222,17 +202,14 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: this.state.isFocusVisible,
         $isHovered: this.state.isHovered,
         $isActive: this.state.isActive,
-        $isError: isError,
         $error: error,
         $checked: checked,
         $isIndeterminate: isIndeterminate,
         $required: required,
         $disabled: disabled,
-        $value: value,
-        $checkmarkType: checkmarkType
-      }; // TODO(v11) - add check for children (#2172)
-
-      var labelComp = /*#__PURE__*/React.createElement(Label, _extends({
+        $value: value
+      };
+      var labelComp = children && /*#__PURE__*/React.createElement(Label, _extends({
         $labelPlacement: labelPlacement
       }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), this.props.containsInteractiveElement ?
       /*#__PURE__*/
@@ -247,7 +224,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         "data-baseweb": "checkbox",
         title: title || null,
         $labelPlacement: labelPlacement
-      }, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.isToggle() ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleOverride)), /*#__PURE__*/React.createElement(ToggleInner, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleInnerOverride))))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
+      }, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleOverride)))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
         value: value,
         name: name,
         checked: checked,
@@ -256,7 +233,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
-        "aria-invalid": error || isError || null,
+        "aria-invalid": error || null,
         "aria-required": required || null,
         disabled: disabled,
         type: type,
@@ -279,7 +256,6 @@ _defineProperty(StatelessCheckbox, "defaultProps", {
   autoFocus: false,
   isIndeterminate: false,
   inputRef: /*#__PURE__*/React.createRef(),
-  isError: false,
   error: false,
   type: 'checkbox',
   checkmarkType: _constants.STYLE_TYPE.default,

package/checkbox/checkbox.js.flow

@@ -14,7 +14,6 @@ import {
   Label as StyledLabel,
   Root as StyledRoot,
   Toggle as StyledToggle,
-  ToggleInner as StyledToggleInner,
   ToggleTrack as StyledToggleTrack,
 } from './styled-components.js';
 import { STYLE_TYPE } from './constants.js';
@@ -31,7 +30,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     autoFocus: false,
     isIndeterminate: false,
     inputRef: React.createRef(),
-    isError: false,
     error: false,
     type: 'checkbox',
     checkmarkType: STYLE_TYPE.default,
@@ -56,21 +54,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
-
-    // TODO(v11)
-    if (__DEV__) {
-      if (this.props.checkmarkType === STYLE_TYPE.toggle) {
-        console.warn(
-          "baseui:Checkbox The STYLE_TYPE.toggle value on the 'checkmarkType' prop does not conform to the current base design specification. " +
-            'Please update your code to STYLE_TYPE.toggle_round. This will be updated automatically in a future major version.'
-        );
-      }
-      if (this.props.isError) {
-        console.warn(
-          'baseui:Checkbox Property "isError" will be removed in the next major version. Use "error" property instead.'
-        );
-      }
-    }
   }
 
   onMouseEnter = (e: SyntheticInputEvent<HTMLInputElement>) => {
@@ -109,22 +92,13 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     }
   };
 
-  isToggle = () => {
-    return (
-      this.props.checkmarkType === STYLE_TYPE.toggle ||
-      this.props.checkmarkType === STYLE_TYPE.toggle_round
-    );
-  };
-
   render() {
-    const { checkmarkType } = this.props;
     const {
       overrides = {},
       onChange,
-      labelPlacement = this.isToggle() ? 'left' : 'right',
+      labelPlacement = this.props.checkmarkType === STYLE_TYPE.toggle ? 'left' : 'right',
       inputRef,
       isIndeterminate,
-      isError,
       error,
       disabled,
       value,
@@ -142,7 +116,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       Label: LabelOverride,
       Input: InputOverride,
       Toggle: ToggleOverride,
-      ToggleInner: ToggleInnerOverride,
       ToggleTrack: ToggleTrackOverride,
     } = overrides;
 
@@ -151,7 +124,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     const Label = getOverride(LabelOverride) || StyledLabel;
     const Input = getOverride(InputOverride) || StyledInput;
     const Toggle = getOverride(ToggleOverride) || StyledToggle;
-    const ToggleInner = getOverride(ToggleInnerOverride) || StyledToggleInner;
     const ToggleTrack = getOverride(ToggleTrackOverride) || StyledToggleTrack;
 
     const inputEvents = {
@@ -170,17 +142,15 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       $isFocusVisible: this.state.isFocusVisible,
       $isHovered: this.state.isHovered,
       $isActive: this.state.isActive,
-      $isError: isError,
       $error: error,
       $checked: checked,
       $isIndeterminate: isIndeterminate,
       $required: required,
       $disabled: disabled,
       $value: value,
-      $checkmarkType: checkmarkType,
     };
-    // TODO(v11) - add check for children (#2172)
-    const labelComp = (
+
+    const labelComp = children && (
       <Label $labelPlacement={labelPlacement} {...sharedProps} {...getOverrideProps(LabelOverride)}>
         {this.props.containsInteractiveElement ? (
           // Prevents the event from bubbling up to the label and moving focus to the radio button
@@ -191,6 +161,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
         )}
       </Label>
     );
+
     return (
       <Root
         data-baseweb="checkbox"
@@ -201,11 +172,9 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
         {...getOverrideProps(RootOverride)}
       >
         {(labelPlacement === 'top' || labelPlacement === 'left') && labelComp}
-        {this.isToggle() ? (
+        {this.props.checkmarkType === STYLE_TYPE.toggle ? (
           <ToggleTrack {...sharedProps} {...getOverrideProps(ToggleTrackOverride)}>
-            <Toggle {...sharedProps} {...getOverrideProps(ToggleOverride)}>
-              <ToggleInner {...sharedProps} {...getOverrideProps(ToggleInnerOverride)} />
-            </Toggle>
+            <Toggle {...sharedProps} {...getOverrideProps(ToggleOverride)} />
           </ToggleTrack>
         ) : (
           <Checkmark {...sharedProps} {...getOverrideProps(CheckmarkOverride)} />
@@ -219,7 +188,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           aria-checked={isIndeterminate ? 'mixed' : checked}
           aria-describedby={this.props['aria-describedby']}
           aria-errormessage={this.props['aria-errormessage']}
-          aria-invalid={error || isError || null}
+          aria-invalid={error || null}
           aria-required={required || null}
           disabled={disabled}
           type={type}

package/checkbox/constants.js

@@ -20,7 +20,8 @@ exports.STATE_TYPE = STATE_TYPE;
 var STYLE_TYPE = Object.freeze({
   default: 'default',
   toggle: 'toggle',
-  toggle_round: 'toggle_round'
+  // maintaining key with aliased value to assist in transition to v11 but will be removed soon after release
+  toggle_round: 'toggle'
 });
 exports.STYLE_TYPE = STYLE_TYPE;
 var LABEL_PLACEMENT = Object.freeze({

package/checkbox/constants.js.flow

@@ -14,7 +14,8 @@ export const STATE_TYPE = {
 export const STYLE_TYPE = Object.freeze({
   default: 'default',
   toggle: 'toggle',
-  toggle_round: 'toggle_round',
+  // maintaining key with aliased value to assist in transition to v11 but will be removed soon after release
+  toggle_round: 'toggle',
 });
 
 export const LABEL_PLACEMENT = Object.freeze({

package/checkbox/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface STATE_TYPE {
   change: 'CHANGE';
@@ -8,7 +8,7 @@ export interface STATE_TYPE {
 export interface STYLE_TYPE {
   default: 'default';
   toggle: 'toggle';
-  toggle_round: 'toggle_round';
+  toggle_round: 'toggle';
 }
 
 export interface LABEL_PLACEMENT {
@@ -35,7 +35,7 @@ export type StateReducer = (
   stateType: string,
   nextState: CheckboxState,
   currentState: CheckboxState,
-  event: React.SyntheticEvent<HTMLInputElement>,
+  event: React.SyntheticEvent<HTMLInputElement>
 ) => CheckboxState;
 
 export interface StatefulContainerProps {
@@ -56,7 +56,6 @@ export const StatefulContainer: React.FC<StatefulContainerProps>;
 export interface StatefulCheckboxProps {
   overrides?: CheckboxOverrides;
   disabled?: boolean;
-  isError?: boolean;
   error?: boolean;
   containsInteractiveElement?: boolean;
   labelPlacement?: 'top' | 'right' | 'bottom' | 'left';
@@ -94,7 +93,6 @@ export interface CheckboxProps {
   checked?: boolean;
   disabled?: boolean;
   required?: boolean;
-  isError?: boolean;
   error?: boolean;
   inputRef?: React.Ref<HTMLInputElement>;
   autoFocus?: boolean;

package/checkbox/index.js

@@ -51,12 +51,6 @@ Object.defineProperty(exports, "StyledToggle", {
     return _styledComponents.Toggle;
   }
 });
-Object.defineProperty(exports, "StyledToggleInner", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.ToggleInner;
-  }
-});
 Object.defineProperty(exports, "StyledToggleTrack", {
   enumerable: true,
   get: function get() {