feat(Radio, Switcher, Checkbox): rename label to caption

Resolve #2196

packages/react-ui/components/Checkbox/Checkbox.styles.ts

@@ -151,7 +151,7 @@ export const styles = memoizeStyle({
   caption(t: Theme) {
     return css`
       color: ${t.checkboxTextColorDefault};
-      padding-left: ${t.checkboxLabelGap};
+      padding-left: ${t.checkboxCaptionGap};
     `;
   },
 

packages/react-ui/components/Radio/Radio.styles.ts

@@ -155,18 +155,18 @@ export const styles = memoizeStyle({
     `;
   },
 
-  label(t: Theme) {
+  caption(t: Theme) {
     return css`
-      display: ${t.radioLabelDisplay};
+      display: ${t.radioCaptionDisplay};
       line-height: ${t.radioLineHeight};
-      margin-left: ${t.radioLabelGap};
+      margin-left: ${t.radioCaptionGap};
       white-space: normal;
       font-size: ${t.radioFontSize};
       color: ${t.radioTextColor};
     `;
   },
 
-  labelDisabled() {
+  captionDisabled() {
     return css`
       color: #a0a0a0;
     `;

packages/react-ui/components/Radio/Radio.tsx

@@ -161,20 +161,20 @@ export class Radio<T> extends React.Component<RadioProps<T>, RadioState> {
         <span {...radioProps}>
           <span className={styles.placeholder()} />
         </span>
-        {this.props.children && this.renderLabel()}
+        {this.props.children && this.renderCaption()}
       </label>
     );
   };
 
   private _isInRadioGroup = () => Boolean(this.context.name);
 
-  private renderLabel() {
-    const labelClassNames = cx({
-      [styles.label(this.theme)]: true,
-      [styles.labelDisabled()]: !!(this.props.disabled || this.context.disabled),
+  private renderCaption() {
+    const captionClassNames = cx({
+      [styles.caption(this.theme)]: true,
+      [styles.captionDisabled()]: !!(this.props.disabled || this.context.disabled),
     });
 
-    return <div className={labelClassNames}>{this.props.children}</div>;
+    return <div className={captionClassNames}>{this.props.children}</div>;
   }
 
   private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {

packages/react-ui/components/Switcher/Switcher.md

@@ -2,7 +2,7 @@
 const [value, setValue] = React.useState();
 
 <Switcher
-  label="Switch the switcher"
+  caption="Switch the switcher"
   items={['One', 'Two', 'Three']}
   value={value}
   onValueChange={setValue}

packages/react-ui/components/Switcher/Switcher.styles.ts

@@ -18,35 +18,35 @@ export const styles = memoizeStyle({
     `;
   },
 
-  label(t: Theme) {
+  caption(t: Theme) {
     return css`
       color: ${t.switcherTextColor};
       vertical-align: middle;
       display: inline-block;
     `;
   },
 
-  labelSmall(t: Theme) {
+  captionSmall(t: Theme) {
     return css`
-      margin-right: ${t.switcherLabelGapSmall};
-      font-size: ${t.switcherLabelFontSizeSmall};
-      line-height: ${t.switcherLabelLineHeightSmall};
+      margin-right: ${t.switcherCaptionGapSmall};
+      font-size: ${t.switcherCaptionFontSizeSmall};
+      line-height: ${t.switcherCaptionLineHeightSmall};
     `;
   },
 
-  labelMedium(t: Theme) {
+  captionMedium(t: Theme) {
     return css`
-      margin-right: ${t.switcherLabelGapMedium};
-      font-size: ${t.switcherLabelFontSizeMedium};
-      line-height: ${t.switcherLabelLineHeightMedium};
+      margin-right: ${t.switcherCaptionGapMedium};
+      font-size: ${t.switcherCaptionFontSizeMedium};
+      line-height: ${t.switcherCaptionLineHeightMedium};
     `;
   },
 
-  labelLarge(t: Theme) {
+  captionLarge(t: Theme) {
     return css`
-      margin-right: ${t.switcherLabelGapLarge};
-      font-size: ${t.switcherLabelFontSizeLarge};
-      line-height: ${t.switcherLabelLineHeightLarge};
+      margin-right: ${t.switcherCaptionGapLarge};
+      font-size: ${t.switcherCaptionFontSizeLarge};
+      line-height: ${t.switcherCaptionLineHeightLarge};
     `;
   },
 

packages/react-ui/components/Switcher/Switcher.tsx

@@ -25,7 +25,7 @@ export interface SwitcherProps extends CommonProps {
 
   onValueChange?: (value: string) => void;
 
-  label?: string;
+  caption?: string;
 
   error?: boolean;
 
@@ -59,7 +59,7 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
         }),
       ),
     ]).isRequired,
-    label: PropTypes.string,
+    caption: PropTypes.string,
     value: PropTypes.string,
     onValueChange: PropTypes.func,
   };
@@ -94,12 +94,12 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
       className: styles.input(),
     };
 
-    const lableClassName = cx(styles.label(this.theme), this.getLabelSizeClassName());
+    const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());
 
     return (
       <CommonWrapper {...this.props}>
         <div>
-          {this.props.label ? <div className={lableClassName}>{this.props.label}</div> : null}
+          {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}
           <div className={styles.wrap()}>
             <input {...inputProps} />
             <div className={listClassName}>
@@ -210,12 +210,12 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
   private getLabelSizeClassName = (): string => {
     switch (this.props.size) {
       case 'large':
-        return styles.labelLarge(this.theme);
+        return styles.captionLarge(this.theme);
       case 'medium':
-        return styles.labelMedium(this.theme);
+        return styles.captionMedium(this.theme);
       case 'small':
       default:
-        return styles.labelSmall(this.theme);
+        return styles.captionSmall(this.theme);
     }
   };
 }

packages/react-ui/components/Switcher/__stories__/Switcher.stories.tsx

@@ -14,7 +14,7 @@ class Component extends React.Component<{ items: string[]; error?: boolean }, {
       <Switcher
         value={this.state.value}
         onValueChange={this.handleChange}
-        label={'Label for Switcher'}
+        caption={'Label for Switcher'}
         {...this.props}
       />
     );
@@ -61,9 +61,9 @@ Errored.parameters = { creevey: { skip: [{ in: ['chromeFlat', 'chromeFlat8px'] }
 export const Disabled = () => {
   return (
     <Gapped vertical>
-      <Switcher disabled value={'One'} label={'Label for Switcher'} items={['One', 'Two', 'Three']} />
-      <Switcher disabled value={'Two'} label={'Label for Switcher'} items={['One', 'Two', 'Three']} />
-      <Switcher disabled value={'Three'} label={'Label for Switcher'} items={['One', 'Two', 'Three']} />
+      <Switcher disabled value={'One'} caption={'Label for Switcher'} items={['One', 'Two', 'Three']} />
+      <Switcher disabled value={'Two'} caption={'Label for Switcher'} items={['One', 'Two', 'Three']} />
+      <Switcher disabled value={'Three'} caption={'Label for Switcher'} items={['One', 'Two', 'Three']} />
     </Gapped>
   );
 };

packages/react-ui/internal/themes/DefaultTheme.ts

@@ -1059,7 +1059,7 @@ export class DefaultTheme {
     return this.controlLineHeightSmall;
   }
   public static checkboxBoxSize = '16px';
-  public static checkboxLabelGap = '10px';
+  public static checkboxCaptionGap = '10px';
   public static checkboxPaddingY = '0';
   public static checkboxBgStart = '#fdfdfd';
   public static checkboxBgEnd = '#ededed';
@@ -1238,7 +1238,7 @@ export class DefaultTheme {
   public static get radioLineHeight() {
     return this.controlLineHeightSmall;
   }
-  public static radioLabelGap = '9px';
+  public static radioCaptionGap = '9px';
   public static radioPaddingY = '0';
   public static radioVerticalAlign = '-2px';
   public static radioBgImage = 'linear-gradient(-180deg, #fff 0, #ebebeb 100%)';
@@ -1279,7 +1279,7 @@ export class DefaultTheme {
   public static get radioDisabledShadow() {
     return `0 0 0 ${this.radioBorderWidth} rgba(0, 0, 0, 0.15)`;
   }
-  public static radioLabelDisplay = 'inline-table';
+  public static radioCaptionDisplay = 'inline-table';
   public static radioBorderWidthCompensation = '0px';
   public static radioMarginY = '2px';
   //#endregion
@@ -1364,15 +1364,15 @@ export class DefaultTheme {
     return this.textColorDefault;
   }
   public static switcherOutlineWidth = '2px';
-  public static switcherLabelFontSizeSmall = 'inherit';
-  public static switcherLabelFontSizeMedium = 'inherit';
-  public static switcherLabelFontSizeLarge = 'inherit';
-  public static switcherLabelLineHeightSmall = 'inherit';
-  public static switcherLabelLineHeightMedium = 'inherit';
-  public static switcherLabelLineHeightLarge = 'inherit';
-  public static switcherLabelGapSmall = '15px';
-  public static switcherLabelGapMedium = '15px';
-  public static switcherLabelGapLarge = '15px';
+  public static switcherCaptionFontSizeSmall = 'inherit';
+  public static switcherCaptionFontSizeMedium = 'inherit';
+  public static switcherCaptionFontSizeLarge = 'inherit';
+  public static switcherCaptionLineHeightSmall = 'inherit';
+  public static switcherCaptionLineHeightMedium = 'inherit';
+  public static switcherCaptionLineHeightLarge = 'inherit';
+  public static switcherCaptionGapSmall = '15px';
+  public static switcherCaptionGapMedium = '15px';
+  public static switcherCaptionGapLarge = '15px';
   public static get switcherButtonPaddingXSmall() {
     return this.btnPaddingXSmall;
   }

packages/react-ui/internal/themes/FlatTheme.ts

@@ -197,7 +197,7 @@ export class FlatTheme extends (class {} as typeof DefaultThemeInternal) {
   public static get radioDisabledShadow() {
     return `0 0 0 ${this.radioBorderWidth} ${this.borderColorDisabled}`;
   }
-  public static radioLabelDisplay = 'inline-block';
+  public static radioCaptionDisplay = 'inline-block';
   public static get radioHoverBg() {
     return this.checkboxHoverBg;
   }

packages/react-ui/internal/themes/Theme8px.ts

@@ -204,7 +204,7 @@ export class Theme8px extends (class {} as typeof DefaultThemeInternal) {
   public static get checkboxFontSize() {
     return this.fontSizeSmall;
   }
-  public static checkboxLabelGap = '8px';
+  public static checkboxCaptionGap = '8px';
   public static get checkboxPaddingY() {
     const controlHeight = parseInt(this.controlHeightSmall, 10) || 0;
     const lineHeight = parseInt(this.checkboxLineHeight, 10) || 0;
@@ -353,7 +353,7 @@ export class Theme8px extends (class {} as typeof DefaultThemeInternal) {
   public static get radioFontSize() {
     return this.fontSizeSmall;
   }
-  public static radioLabelGap = '8px';
+  public static radioCaptionGap = '8px';
   public static get radioPaddingY() {
     const controlHeight = parseInt(this.controlHeightSmall, 10) || 0;
     const lineHeight = parseInt(this.radioLineHeight, 10) || 0;
@@ -405,31 +405,31 @@ export class Theme8px extends (class {} as typeof DefaultThemeInternal) {
   public static get switcherOutlineWidth() {
     return this.btnOutlineWidth;
   }
-  public static get switcherLabelFontSizeSmall() {
+  public static get switcherCaptionFontSizeSmall() {
     return this.btnFontSizeSmall;
   }
-  public static get switcherLabelFontSizeMedium() {
+  public static get switcherCaptionFontSizeMedium() {
     return this.btnFontSizeMedium;
   }
-  public static get switcherLabelFontSizeLarge() {
+  public static get switcherCaptionFontSizeLarge() {
     return this.btnFontSizeLarge;
   }
-  public static get switcherLabelLineHeightSmall() {
+  public static get switcherCaptionLineHeightSmall() {
     return this.btnLineHeightSmall;
   }
-  public static get switcherLabelLineHeightMedium() {
+  public static get switcherCaptionLineHeightMedium() {
     return this.btnLineHeightMedium;
   }
-  public static get switcherLabelLineHeightLarge() {
+  public static get switcherCaptionLineHeightLarge() {
     return this.btnLineHeightLarge;
   }
-  public static get switcherLabelGapSmall() {
+  public static get switcherCaptionGapSmall() {
     return this.btnPaddingXSmall;
   }
-  public static get switcherLabelGapMedium() {
+  public static get switcherCaptionGapMedium() {
     return this.btnPaddingXMedium;
   }
-  public static get switcherLabelGapLarge() {
+  public static get switcherCaptionGapLarge() {
     return this.btnPaddingXLarge;
   }
   public static switcherButtonPaddingXSmall = '7px';