Add internal text to switch component

packages/core/src/common/classes.ts

@@ -126,9 +126,11 @@ export const INPUT_ACTION = `${INPUT}-action`;
 
 export const CONTROL = `${NS}-control`;
 export const CONTROL_INDICATOR = `${CONTROL}-indicator`;
+export const CONTROL_INDICATOR_CHILD = `${CONTROL_INDICATOR}-child`;
 export const CHECKBOX = `${NS}-checkbox`;
 export const RADIO = `${NS}-radio`;
 export const SWITCH = `${NS}-switch`;
+export const SWITCH_INNER_TEXT = `${SWITCH}-inner-text`;
 export const FILE_INPUT = `${NS}-file-input`;
 export const FILE_UPLOAD_INPUT = `${NS}-file-upload-input`;
 

packages/core/src/components/forms/_controls.scss

@@ -285,6 +285,12 @@ $control-indicator-spacing: $pt-grid-size !default;
   $switch-indicator-margin: 2px !default;
   $switch-indicator-size: calc(1em - #{$switch-indicator-margin * 2});
 
+  $switch-indicator-child-height: 1em;
+  $switch-indicator-child-outside-margin: 0.5em;
+  $switch-indicator-child-inside-margin: 1.2em;
+
+  $switch-indicator-text-font-size: 0.7em;
+
   $switch-background-color: rgba($gray4, 0.5) !default;
   $switch-background-color-hover: rgba($gray2, 0.5) !default;
   $switch-background-color-active: rgba($gray1, 0.5) !default;
@@ -350,7 +356,8 @@ $control-indicator-spacing: $pt-grid-size !default;
       // override default button styles, never have a box-shadow here.
       // stylelint-disable-next-line declaration-no-important
       box-shadow: none !important;
-      width: $switch-width;
+      width: auto;
+      min-width: $switch-width;
       transition: background-color $pt-transition-duration $pt-transition-ease;
 
       &::before {
@@ -368,7 +375,7 @@ $control-indicator-spacing: $pt-grid-size !default;
 
     input:checked ~ .#{$ns}-control-indicator::before {
       // 1em is size of indicator
-      left: $switch-width - 1em;
+      left: calc(100% - 1em);
     }
 
     &.#{$ns}-large {
@@ -401,6 +408,39 @@ $control-indicator-spacing: $pt-grid-size !default;
         box-shadow: inset $dark-button-box-shadow;
       }
     }
+
+    .#{$ns}-switch-inner-text {
+      text-align: center;
+      font-size: $switch-indicator-text-font-size;
+    }
+
+    .#{$ns}-control-indicator-child {
+      &:first-child {
+        visibility: hidden;
+        margin-right: $switch-indicator-child-inside-margin;
+        margin-left: $switch-indicator-child-outside-margin;
+        line-height: 0;
+      }
+
+      &:last-child {
+        visibility: visible;
+        margin-right: $switch-indicator-child-outside-margin;
+        margin-left: $switch-indicator-child-inside-margin;
+        line-height: $switch-indicator-child-height;
+      }
+    }
+
+    input:checked ~ .#{$ns}-control-indicator .#{$ns}-control-indicator-child {
+      &:first-child {
+        visibility: visible;
+        line-height: $switch-indicator-child-height;
+      }
+
+      &:last-child {
+        visibility: hidden;
+        line-height: 0;
+      }
+    }
   }
 
   .#{$ns}-dark & {

packages/core/src/components/forms/controls.tsx

@@ -82,6 +82,7 @@ export interface IControlProps extends IProps, HTMLInputProps {
 interface IControlInternalProps extends IControlProps {
     type: "checkbox" | "radio";
     typeClassName: string;
+    indicatorChildren?: React.ReactNode;
 }
 
 /**
@@ -92,6 +93,7 @@ const Control: React.SFC<IControlInternalProps> = ({
     alignIndicator,
     children,
     className,
+    indicatorChildren,
     inline,
     inputRef,
     label,
@@ -117,7 +119,7 @@ const Control: React.SFC<IControlInternalProps> = ({
     return (
         <TagName className={classes} style={style}>
             <input {...htmlProps} ref={inputRef} type={type} />
-            <span className={Classes.CONTROL_INDICATOR} />
+            <span className={Classes.CONTROL_INDICATOR}>{indicatorChildren}</span>
             {label}
             {labelElement}
             {children}
@@ -129,13 +131,47 @@ const Control: React.SFC<IControlInternalProps> = ({
 // Switch
 //
 
-export interface ISwitchProps extends IControlProps {}
+export interface ISwitchProps extends IControlProps {
+    /**
+     * Text to display inside the switch indicator when checked.
+     * If `innerLabel` is provided and this prop is omitted, then `innerLabel`
+     * will be used for both states.
+     * @default innerLabel
+     */
+    innerLabelChecked?: string;
+
+    /**
+     * Text to display inside the switch indicator when unchecked.
+     */
+    innerLabel?: string;
+}
 
 export class Switch extends React.PureComponent<ISwitchProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Switch`;
 
     public render() {
-        return <Control {...this.props} type="checkbox" typeClassName={Classes.SWITCH} />;
+        const { innerLabelChecked, innerLabel, ...controlProps } = this.props;
+        const switchLabels =
+            innerLabel || innerLabelChecked
+                ? [
+                      <div key="checked" className={Classes.CONTROL_INDICATOR_CHILD}>
+                          <div className={Classes.SWITCH_INNER_TEXT}>
+                              {innerLabelChecked ? innerLabelChecked : innerLabel}
+                          </div>
+                      </div>,
+                      <div key="unchecked" className={Classes.CONTROL_INDICATOR_CHILD}>
+                          <div className={Classes.SWITCH_INNER_TEXT}>{innerLabel}</div>
+                      </div>,
+                  ]
+                : null;
+        return (
+            <Control
+                {...controlProps}
+                type="checkbox"
+                typeClassName={Classes.SWITCH}
+                indicatorChildren={switchLabels}
+            />
+        );
     }
 }
 

packages/core/test/controls/controlsTests.tsx

@@ -31,7 +31,40 @@ describe("Controls:", () => {
         });
     });
 
-    controlsTests(Switch, "checkbox", Classes.SWITCH);
+    controlsTests(Switch, "checkbox", Classes.SWITCH, () => {
+        describe("internal text", () => {
+            it("renders both innerLabels when both defined", () => {
+                const switchWithText = mount(<Switch innerLabelChecked="checked" innerLabel="unchecked" />);
+                const innerTextNodes = switchWithText.find(`.${Classes.SWITCH_INNER_TEXT}`);
+                const checkedTest = innerTextNodes.first().text();
+                const uncheckedText = innerTextNodes.last().text();
+                assert.lengthOf(innerTextNodes, 2);
+                assert.equal(checkedTest.trim(), "checked");
+                assert.equal(uncheckedText.trim(), "unchecked");
+            });
+            it("does not render innerLabel components when neither defined", () => {
+                const switchWithoutText = mount(<Switch />);
+                const innerTextNodes = switchWithoutText.find(`.${Classes.SWITCH_INNER_TEXT}`);
+                assert.lengthOf(innerTextNodes, 0);
+            });
+            it("renders innerLabel when innerLabelChecked is undefined", () => {
+                const switchWithText = mount(<Switch innerLabel="onlyInnerLabel" />);
+                const innerTextNodes = switchWithText.find(`.${Classes.SWITCH_INNER_TEXT}`);
+                const checkedText = innerTextNodes.last().text();
+                const uncheckedText = innerTextNodes.first().text();
+                assert.equal(checkedText.trim(), "onlyInnerLabel");
+                assert.equal(checkedText.trim(), uncheckedText.trim());
+            });
+            it("renders innerLabelChecked only when checked", () => {
+                const switchWithText = mount(<Switch innerLabelChecked="onlyChecked" />);
+                const innerTextNodes = switchWithText.find(`.${Classes.SWITCH_INNER_TEXT}`);
+                const checked = innerTextNodes.first().text();
+                const uncheckedText = innerTextNodes.last().text();
+                assert.equal(checked.trim(), "onlyChecked");
+                assert.equal(uncheckedText.trim(), "");
+            });
+        });
+    });
 
     controlsTests(Radio, "radio", Classes.RADIO);
 
@@ -51,7 +84,7 @@ describe("Controls:", () => {
             it("supports JSX children", () => {
                 const control = mountControl({}, <span className="jsx-child" key="jsx" />, "Label Text");
                 assert.lengthOf(control.find(".jsx-child"), 1);
-                assert.equal(control.text(), "Label Text");
+                assert.equal(control.text().trim(), "Label Text");
             });
 
             it("supports JSX labelElement", () => {
@@ -60,7 +93,7 @@ describe("Controls:", () => {
 
                 const control = mountControl({ labelElement: <strong>boom</strong> });
                 assert.lengthOf(control.find("strong"), 1);
-                assert.equal(control.text(), "boom");
+                assert.equal(control.text().trim(), "boom");
             });
 
             if (moreTests != null) {

packages/docs-app/src/examples/core-examples/switchExample.tsx

@@ -19,6 +19,7 @@ export class SwitchExample extends CheckboxExample {
                     <Switch {...this.state} labelElement={<strong>Enabled</strong>} />
                     <Switch {...this.state} labelElement={<em>Public</em>} />
                     <Switch {...this.state} labelElement={<u>Cooperative</u>} defaultChecked={true} />
+                    <Switch {...this.state} labelElement={"Containing Text"} innerLabelChecked="on" innerLabel="off" />
                 </div>
                 <small style={{ width: "100%", textAlign: "center" }}>
                     This example uses <Code>labelElement</Code> to demonstrate JSX labels.