From e6834bdfdab437f7c1c8ee7248ed6899662b8aa9 Mon Sep 17 00:00:00 2001 From: ishmatova Date: Thu, 11 Nov 2021 14:58:29 +0500 Subject: [PATCH] chore: deprecate label prop and revert theme variables --- .../components/Checkbox/Checkbox.styles.ts | 2 +- .../react-ui/components/Radio/Radio.styles.ts | 4 ++-- .../components/Switcher/Switcher.styles.ts | 18 +++++++------- .../react-ui/components/Switcher/Switcher.tsx | 17 ++++++++++++- .../react-ui/internal/themes/DefaultTheme.ts | 24 +++++++++---------- .../react-ui/internal/themes/FlatTheme.ts | 2 +- packages/react-ui/internal/themes/Theme8px.ts | 22 ++++++++--------- 7 files changed, 52 insertions(+), 37 deletions(-) diff --git a/packages/react-ui/components/Checkbox/Checkbox.styles.ts b/packages/react-ui/components/Checkbox/Checkbox.styles.ts index feeaf36a7af..3aded8d40cd 100644 --- 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 index b030f33f4b7..22474ed89c9 100644 --- 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 index e540755446b..d535f59b8de 100644 --- 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 index 9c7a0d207f0..93b8f100cfa 100644 --- 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 { 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 { return (
- {this.props.caption ?
{this.props.caption}
: null} + {this.props.caption || this.props.label ? ( +
{this.props.caption || this.props.label}
+ ) : null}
diff --git a/packages/react-ui/internal/themes/DefaultTheme.ts b/packages/react-ui/internal/themes/DefaultTheme.ts index ff3986f1505..b04b28b3c60 100644 --- 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 index cc2282f337b..ee8ec875305 100644 --- 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 index bb7d01d6757..24b70e8f9b6 100644 --- 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';