chore: deprecate label prop and revert theme variables

skbkontur · Nov 11, 2021 · e6834bd · e6834bd
1 parent bbfe750
commit e6834bd
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 37 deletions.
diff --git a/packages/react-ui/components/Checkbox/Checkbox.styles.ts b/packages/react-ui/components/Checkbox/Checkbox.styles.ts
@@ -150,7 +150,7 @@ export const styles = memoizeStyle({
   caption(t: Theme) {
     return css`
       color: ${t.checkboxTextColorDefault};
-      padding-left: ${t.checkboxCaptionGap};
+      padding-left: ${t.checkboxLabelGap};
     `;
   },
 

diff --git a/packages/react-ui/components/Radio/Radio.styles.ts b/packages/react-ui/components/Radio/Radio.styles.ts
@@ -157,9 +157,9 @@ export const styles = memoizeStyle({
 
   caption(t: Theme) {
     return css`
-      display: ${t.radioCaptionDisplay};
+      display: ${t.radioLabelDisplay};
       line-height: ${t.radioLineHeight};
-      margin-left: ${t.radioCaptionGap};
+      margin-left: ${t.radioLabelGap};
       white-space: normal;
       font-size: ${t.radioFontSize};
       color: ${t.radioTextColor};

diff --git a/packages/react-ui/components/Switcher/Switcher.styles.ts b/packages/react-ui/components/Switcher/Switcher.styles.ts
@@ -28,25 +28,25 @@ export const styles = memoizeStyle({
 
   captionSmall(t: Theme) {
     return css`
-      margin-right: ${t.switcherCaptionGapSmall};
-      font-size: ${t.switcherCaptionFontSizeSmall};
-      line-height: ${t.switcherCaptionLineHeightSmall};
+      margin-right: ${t.switcherLabelGapSmall};
+      font-size: ${t.switcherLabelFontSizeSmall};
+      line-height: ${t.switcherLabelLineHeightSmall};
     `;
   },
 
   captionMedium(t: Theme) {
     return css`
-      margin-right: ${t.switcherCaptionGapMedium};
-      font-size: ${t.switcherCaptionFontSizeMedium};
-      line-height: ${t.switcherCaptionLineHeightMedium};
+      margin-right: ${t.switcherLabelGapMedium};
+      font-size: ${t.switcherLabelFontSizeMedium};
+      line-height: ${t.switcherLabelLineHeightMedium};
     `;
   },
 
   captionLarge(t: Theme) {
     return css`
-      margin-right: ${t.switcherCaptionGapLarge};
-      font-size: ${t.switcherCaptionFontSizeLarge};
-      line-height: ${t.switcherCaptionLineHeightLarge};
+      margin-right: ${t.switcherLabelGapLarge};
+      font-size: ${t.switcherLabelFontSizeLarge};
+      line-height: ${t.switcherLabelLineHeightLarge};
     `;
   },
 

diff --git a/packages/react-ui/components/Switcher/Switcher.tsx b/packages/react-ui/components/Switcher/Switcher.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import warning from 'warning';
 
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';
 import { Group } from '../Group';
@@ -15,6 +16,8 @@ import { getSwitcherTheme } from './switcherTheme';
 
 export type SwitcherSize = ButtonSize;
 
+let labelWarningShown = false;
+
 export interface SwitcherProps extends CommonProps {
   /**
    * Список строк или список элементов типа `{ label: string, value: string }`
@@ -24,6 +27,10 @@ export interface SwitcherProps extends CommonProps {
   value?: string;
 
   onValueChange?: (value: string) => void;
+  /**
+   * @deprecated используйте проп `caption` вместо `label`.
+   */
+  label?: string;
 
   caption?: string;
 
@@ -62,6 +69,12 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     caption: PropTypes.string,
     value: PropTypes.string,
     onValueChange: PropTypes.func,
+    label(props: SwitcherProps) {
+      if (props.label && !labelWarningShown) {
+        warning(false, `[Switcher]: prop 'label' is deprecated. Please, use 'caption' instead. `);
+        labelWarningShown = true;
+      }
+    },
   };
 
   public state: SwitcherState = {
@@ -99,7 +112,9 @@ export class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     return (
       <CommonWrapper {...this.props}>
         <div>
-          {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}
+          {this.props.caption || this.props.label ? (
+            <div className={captionClassName}>{this.props.caption || this.props.label}</div>
+          ) : null}
           <div className={styles.wrap()}>
             <input {...inputProps} />
             <div className={listClassName}>

diff --git a/packages/react-ui/internal/themes/DefaultTheme.ts b/packages/react-ui/internal/themes/DefaultTheme.ts
@@ -1080,7 +1080,7 @@ export class DefaultTheme {
     return this.controlLineHeightSmall;
   }
   public static checkboxBoxSize = '16px';
-  public static checkboxCaptionGap = '10px';
+  public static checkboxLabelGap = '10px';
   public static checkboxPaddingY = '0';
   public static checkboxBgStart = '#fdfdfd';
   public static checkboxBgEnd = '#ededed';
@@ -1259,7 +1259,7 @@ export class DefaultTheme {
   public static get radioLineHeight() {
     return this.controlLineHeightSmall;
   }
-  public static radioCaptionGap = '9px';
+  public static radioLabelGap = '9px';
   public static radioPaddingY = '0';
   public static radioVerticalAlign = '-2px';
   public static radioBgImage = 'linear-gradient(-180deg, #fff 0, #ebebeb 100%)';
@@ -1300,7 +1300,7 @@ export class DefaultTheme {
   public static get radioDisabledShadow() {
     return `0 0 0 ${this.radioBorderWidth} rgba(0, 0, 0, 0.15)`;
   }
-  public static radioCaptionDisplay = 'inline-table';
+  public static radioLabelDisplay = 'inline-table';
   public static radioBorderWidthCompensation = '0px';
   public static radioMarginY = '2px';
   //#endregion
@@ -1385,15 +1385,15 @@ export class DefaultTheme {
     return this.textColorDefault;
   }
   public static switcherOutlineWidth = '2px';
-  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 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 get switcherButtonPaddingXSmall() {
     return this.btnPaddingXSmall;
   }

diff --git a/packages/react-ui/internal/themes/FlatTheme.ts b/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 radioCaptionDisplay = 'inline-block';
+  public static radioLabelDisplay = 'inline-block';
   public static get radioHoverBg() {
     return this.checkboxHoverBg;
   }

diff --git a/packages/react-ui/internal/themes/Theme8px.ts b/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 checkboxCaptionGap = '8px';
+  public static checkboxLabelGap = '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 radioCaptionGap = '8px';
+  public static radioLabelGap = '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 switcherCaptionFontSizeSmall() {
+  public static get switcherLabelFontSizeSmall() {
     return this.btnFontSizeSmall;
   }
-  public static get switcherCaptionFontSizeMedium() {
+  public static get switcherLabelFontSizeMedium() {
     return this.btnFontSizeMedium;
   }
-  public static get switcherCaptionFontSizeLarge() {
+  public static get switcherLabelFontSizeLarge() {
     return this.btnFontSizeLarge;
   }
-  public static get switcherCaptionLineHeightSmall() {
+  public static get switcherLabelLineHeightSmall() {
     return this.btnLineHeightSmall;
   }
-  public static get switcherCaptionLineHeightMedium() {
+  public static get switcherLabelLineHeightMedium() {
     return this.btnLineHeightMedium;
   }
-  public static get switcherCaptionLineHeightLarge() {
+  public static get switcherLabelLineHeightLarge() {
     return this.btnLineHeightLarge;
   }
-  public static get switcherCaptionGapSmall() {
+  public static get switcherLabelGapSmall() {
     return this.btnPaddingXSmall;
   }
-  public static get switcherCaptionGapMedium() {
+  public static get switcherLabelGapMedium() {
     return this.btnPaddingXMedium;
   }
-  public static get switcherCaptionGapLarge() {
+  public static get switcherLabelGapLarge() {
     return this.btnPaddingXLarge;
   }
   public static switcherButtonPaddingXSmall = '7px';