Add internal text to switch component

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

@@ -285,10 +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-text-font-size: 0.6em; //@KEVINNG MAKE THIS RIGHT
-  $switch-indicator-text-line-height: 1.7em; //@KEVINNG MAKE THIS RIGHT
-  $switch-indicator-text-outside-margin: 0.75em; //@KEVINNG MAKE THIS RIGHT
-  $switch-indicator-text-inside-margin: 1.75em; //@KEVINNG MAKE THIS RIGHT
+  $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.5em;
+  $switch-indicator-text-line-height: 2em; //to match height of parent
 
   $switch-background-color: rgba($gray4, 0.5) !default;
   $switch-background-color-hover: rgba($gray2, 0.5) !default;
@@ -374,7 +376,7 @@ $control-indicator-spacing: $pt-grid-size !default;
 
     input:checked ~ .#{$ns}-control-indicator::before {
       right: 0;
-      left: auto;
+      left: calc(100% - 1em);
     }
 
     &.#{$ns}-large {
@@ -408,34 +410,37 @@ $control-indicator-spacing: $pt-grid-size !default;
       }
     }
 
-    .#{$ns}-control-indicator-child {
+    .#{$ns}-switch-inner-text {
       text-align: center;
+      line-height: $switch-indicator-text-line-height;
       font-size: $switch-indicator-text-font-size;
+    }
 
-      &.#{$ns}-switch-active-text {
+    .#{$ns}-control-indicator-child {
+      &:first-child {
         visibility: hidden;
-        margin-right: $switch-indicator-text-inside-margin;
-        margin-left: $switch-indicator-text-outside-margin;
-        line-height: 0;
+        margin-right: $switch-indicator-child-inside-margin;
+        margin-left: $switch-indicator-child-outside-margin;
+        height: 0;
       }
 
-      &.#{$ns}-switch-inactive-text {
+      &:last-child {
         visibility: visible;
-        margin-right: $switch-indicator-text-outside-margin;
-        margin-left: $switch-indicator-text-inside-margin;
-        line-height: $switch-indicator-text-line-height;
+        margin-right: $switch-indicator-child-outside-margin;
+        margin-left: $switch-indicator-child-inside-margin;
+        height: $switch-indicator-child-height;
       }
     }
 
-    input:checked ~ .#{$ns}-control-indicator {
-      .#{$ns}-switch-active-text {
+    input:checked ~ .#{$ns}-control-indicator .#{$ns}-control-indicator-child {
+      &:first-child {
         visibility: visible;
-        line-height: $switch-indicator-text-line-height;
+        height: $switch-indicator-child-height;
       }
 
-      .#{$ns}-switch-inactive-text {
+      &:last-child {
         visibility: hidden;
-        line-height: 0;
+        height: 0;
       }
     }
   }

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

@@ -82,7 +82,7 @@ export interface IControlProps extends IProps, HTMLInputProps {
 interface IControlInternalProps extends IControlProps {
     type: "checkbox" | "radio";
     typeClassName: string;
-    indicatorChildren?: React.ReactNode[];
+    indicatorChildren?: React.ReactNode;
 }
 
 /**
@@ -133,39 +133,37 @@ const Control: React.SFC<IControlInternalProps> = ({
 
 export interface ISwitchProps extends IControlProps {
     /**
-     * String to display within the switch control component when the switch is active ("on").
+     * String to display within the switch control component when the switch is checked/on. Defaults to innerLabel.
      */
-    internalTextActive?: string;
+    innerLabelChecked?: string;
 
     /**
-     * String to display within the switch control component when the switch is inactive ("off").
+     * String to display within the switch control component when the switch is unchecked/off. Defaults to "".
      */
-    internalTextInactive?: string;
+    innerLabel?: string;
 }
 
 export class Switch extends React.PureComponent<ISwitchProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Switch`;
-    private switchText = [
-        <div
-            key={`${Classes.SWITCH}-active-text`}
-            className={classNames(`${Classes.CONTROL_INDICATOR}-child`, `${Classes.SWITCH}-active-text`)}
-        >
-            {this.props.internalTextActive}
-        </div>,
-        <div
-            key={`${Classes.SWITCH}-inactive-text`}
-            className={classNames(`${Classes.CONTROL_INDICATOR}-child`, `${Classes.SWITCH}-inactive-text`)}
-        >
-            {this.props.internalTextInactive}
-        </div>,
-    ];
+    private childClassName = `${Classes.CONTROL_INDICATOR}-child`;
+    private textClassName = `${Classes.SWITCH}-inner-text`;
+
     public render() {
+        const { innerLabelChecked, innerLabel, ...controlProps } = this.props;
+        const switchLabels = [
+            <div key={`${Classes.SWITCH}-checked-text`} className={this.childClassName}>
+                <div className={this.textClassName}> {innerLabelChecked ? innerLabelChecked : innerLabel} </div>
+            </div>,
+            <div key={`${Classes.SWITCH}-unchecked-text`} className={this.childClassName}>
+                <div className={this.textClassName}> {innerLabel} </div>
+            </div>,
+        ];
         return (
             <Control
-                {...this.props}
+                {...controlProps}
                 type="checkbox"
                 typeClassName={Classes.SWITCH}
-                indicatorChildren={this.switchText}
+                indicatorChildren={switchLabels}
             />
         );
     }

packages/core/test/controls/controlsTests.tsx

@@ -33,11 +33,12 @@ describe("Controls:", () => {
 
     controlsTests(Switch, "checkbox", Classes.SWITCH, () => {
         describe("internal text", () => {
-            const switchWithText = mount(
-                <Switch internalTextActive="Active Text" internalTextInactive="Inactive Text" />,
-            );
+            const switchWithText = mount(<Switch innerLabelChecked="Checked text" innerLabel="Unchecked text" />);
             it("renders internal text", () => {
-                assert.equal(switchWithText.find(`.${Classes.SWITCH}-active-text`).text(), "Active Text");
+                const innerTextNodes = switchWithText.find(`.${Classes.SWITCH}-inner-text`);
+                assert.lengthOf(innerTextNodes, 2);
+                const uncheckedText = innerTextNodes.last().text();
+                assert.equal(uncheckedText.trim(), "Unchecked text");
             });
         });
     });
@@ -60,7 +61,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", () => {
@@ -69,7 +70,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

@@ -22,8 +22,8 @@ export class SwitchExample extends CheckboxExample {
                     <Switch
                         {...this.state}
                         labelElement={"Containing Text"}
-                        internalTextActive="activeText"
-                        internalTextInactive="inactiveText"
+                        innerLabelChecked="checked"
+                        innerLabel="unchecked"
                     />
                 </div>
                 <small style={{ width: "100%", textAlign: "center" }}>