From 55827eba7265d713a2766438e6ccde289ba5fd01 Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Mon, 17 Jun 2024 18:33:08 +0300 Subject: [PATCH 1/6] feat: add radius tab feat: create base component for theme page and them sections feat: base types and logic feat: basic palette in colors tab feat: CRUD for basic palette fix: palette tokens order feat: add private colors generator feat: add main settings feat: private color select and advanced brand palette feat: advanced mode switch feat: improve private color editor fix: styles of form row feat: base theme export refactoring: move components to ui and utils to lib chore: fix styles chore: move code to Themes fix: styles and some refactoring feat: i18n feat: add border options feat: Component Preview fix: style for mobile feat: CustomRadius Component feat: refactor types chore: rename options->presets chore: rename RadiusSize->RadiusValue feat: add radius actions feat: connect to theme provider feat: add export styles feat: input type number feat: add icon to button --- public/locales/en/themes.json | 13 +- public/locales/ru/themes.json | 13 +- src/components/Themes/Themes.tsx | 3 +- src/components/Themes/lib/constants.ts | 39 ++++- .../Themes/lib/themeCreatorContext.ts | 6 + .../Themes/lib/themeCreatorExport.ts | 15 ++ .../Themes/lib/themeCreatorUtils.ts | 49 ++++++ src/components/Themes/lib/types.ts | 18 ++- .../BorderCard/BorderCard.scss | 29 ++++ .../BorderRadiusTab/BorderCard/BorderCard.tsx | 45 ++++++ .../BorderPresets/BorderPresets.tsx | 49 ++++++ .../ui/BorderRadiusTab/BorderRadiusTab.scss | 10 ++ .../ui/BorderRadiusTab/BorderRadiusTab.tsx | 34 +++++ .../ComponentPreview/ComponentPreview.tsx | 23 +++ .../CustomRadius/CustomRadius.scss | 28 ++++ .../CustomRadius/CustomRadius.tsx | 75 ++++++++++ .../ui/BorderRadiusTab/Showcase/Showcase.scss | 44 ++++++ .../ui/BorderRadiusTab/Showcase/Showcase.tsx | 141 ++++++++++++++++++ .../Themes/ui/ThemeCreatorContextProvider.tsx | 54 ++++++- .../uikit/TextInput/TextInputComponent.tsx | 2 +- 20 files changed, 678 insertions(+), 12 deletions(-) create mode 100644 src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss create mode 100644 src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx create mode 100644 src/components/Themes/ui/BorderRadiusTab/BorderPresets/BorderPresets.tsx create mode 100644 src/components/Themes/ui/BorderRadiusTab/BorderRadiusTab.scss create mode 100644 src/components/Themes/ui/BorderRadiusTab/BorderRadiusTab.tsx create mode 100644 src/components/Themes/ui/BorderRadiusTab/ComponentPreview/ComponentPreview.tsx create mode 100644 src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.scss create mode 100644 src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.tsx create mode 100644 src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.scss create mode 100644 src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx diff --git a/public/locales/en/themes.json b/public/locales/en/themes.json index c557122147bd..03d5b4021927 100644 --- a/public/locales/en/themes.json +++ b/public/locales/en/themes.json @@ -21,5 +21,14 @@ "component_preview": "Component preview", "is_everything_set": "Is everything set?", "cancel": "Cancel", - "export_theme_config": "Export theme config" -} \ No newline at end of file + "export_theme_config": "Export theme config", + "radius": "Radius", + "radius_regular": "Regular", + "radius_circled": "Circled", + "radius_squared": "Squared", + "radius_custom": "Custom radius", + "choose_border_radius": "Choose border radius", + "label": "Label", + "input_placeholder": "Content", + "button": "Button" +} diff --git a/public/locales/ru/themes.json b/public/locales/ru/themes.json index d48f76caad0f..e2cd383d9346 100644 --- a/public/locales/ru/themes.json +++ b/public/locales/ru/themes.json @@ -21,5 +21,14 @@ "component_preview": "Предпросмотр компонентов", "is_everything_set": "Все настроили?", "cancel": "Закрыть", - "export_theme_config": "Экспорт конфигурации темы" -} \ No newline at end of file + "export_theme_config": "Экспорт конфигурации темы", + "radius": "Радиус", + "radius_regular": "Стандартный", + "radius_circled": "Круглый", + "radius_squared": "Без скругления", + "radius_custom": "Настроить скругление", + "choose_border_radius": "Выберите радиус скругления", + "label": "Ярлык", + "input_placeholder": "Контент", + "button": "Кнопка" +} diff --git a/src/components/Themes/Themes.tsx b/src/components/Themes/Themes.tsx index db307c040f19..262ac299ca16 100644 --- a/src/components/Themes/Themes.tsx +++ b/src/components/Themes/Themes.tsx @@ -9,6 +9,7 @@ import {TagItem, Tags} from '../Tags/Tags'; import './Themes.scss'; import {DEFAULT_THEME} from './lib/constants'; +import {BorderRadiusTab} from './ui/BorderRadiusTab/BorderRadiusTab'; import {ColorsTab} from './ui/ColorsTab/ColorsTab'; import {PreviewTab} from './ui/PreviewTab/PreviewTab'; import {ThemeCreatorContextProvider} from './ui/ThemeCreatorContextProvider'; @@ -26,7 +27,7 @@ enum ThemeTab { const tabToComponent: Record = { [ThemeTab.Colors]: ColorsTab, [ThemeTab.Typography]: () =>
TODO Typography
, - [ThemeTab.BorderRadius]: () =>
TODO borders
, + [ThemeTab.BorderRadius]: BorderRadiusTab, [ThemeTab.Preview]: PreviewTab, }; diff --git a/src/components/Themes/lib/constants.ts b/src/components/Themes/lib/constants.ts index ba88cea603a2..5c9bcdfb7667 100644 --- a/src/components/Themes/lib/constants.ts +++ b/src/components/Themes/lib/constants.ts @@ -1,7 +1,9 @@ -import type {ThemeOptions} from './types'; +import {RadiusPresetName, RadiusValue, type ThemeOptions} from './types'; export const THEME_COLOR_VARIABLE_PREFIX = '--g-color'; +export const THEME_BORDER_RADIUS_VARIABLE_PREFIX = '--g-border-radius'; + export const DEFAULT_NEW_COLOR_TITLE = 'New color'; export const DEFAULT_PALETTE: ThemeOptions['palette'] = { @@ -33,6 +35,36 @@ export const DEFAULT_PALETTE: ThemeOptions['palette'] = { export const DEFAULT_PALETTE_TOKENS = new Set(Object.keys(DEFAULT_PALETTE.light)); +export const DEFAULT_RADIUS: RadiusValue = { + xs: '3', + s: '5', + m: '6', + l: '8', + xl: '10', + xxl: '16', +}; + +export const RADIUS_PRESETS: Record = { + [RadiusPresetName.Regular]: DEFAULT_RADIUS, + [RadiusPresetName.Circled]: { + xs: '100', + s: '100', + m: '100', + l: '100', + xl: '100', + xxl: '100', + }, + [RadiusPresetName.Squared]: { + xs: '0', + s: '0', + m: '0', + l: '0', + xl: '0', + xxl: '0', + }, + [RadiusPresetName.Custom]: DEFAULT_RADIUS, +}; + export const DEFAULT_THEME: ThemeOptions = { palette: DEFAULT_PALETTE, colors: { @@ -65,6 +97,9 @@ export const DEFAULT_THEME: ThemeOptions = { 'text-link-visited-hover': 'private.purple.850-solid', }, }, - borders: {}, + borders: { + preset: RadiusPresetName.Regular, + values: RADIUS_PRESETS[RadiusPresetName.Regular], + }, typography: {}, }; diff --git a/src/components/Themes/lib/themeCreatorContext.ts b/src/components/Themes/lib/themeCreatorContext.ts index ce12acbfdeb9..73425d2218a7 100644 --- a/src/components/Themes/lib/themeCreatorContext.ts +++ b/src/components/Themes/lib/themeCreatorContext.ts @@ -5,9 +5,11 @@ import {DEFAULT_THEME} from './constants'; import {initThemeCreator} from './themeCreatorUtils'; import type { AddColorToThemeParams, + ChangeRadiusPresetInThemeParams, ChangeUtilityColorInThemeParams, RenameColorInThemeParams, UpdateColorInThemeParams, + UpdateCustomRadiusPresetInThemeParams, } from './themeCreatorUtils'; import type {ThemeCreatorState} from './types'; @@ -21,6 +23,8 @@ export interface ThemeCreatorMethodsContextType { removeColor: (title: string) => void; renameColor: (params: RenameColorInThemeParams) => void; changeUtilityColor: (params: ChangeUtilityColorInThemeParams) => void; + changeRadiusPreset: (params: ChangeRadiusPresetInThemeParams) => void; + updateCustomRadiusPreset: (params: UpdateCustomRadiusPresetInThemeParams) => void; } export const ThemeCreatorMethodsContext = createContext({ @@ -29,4 +33,6 @@ export const ThemeCreatorMethodsContext = createContext { + if (radiusValue) { + cssVariables += `${createBorderRadiusCssVariable( + radiusName, + )}: ${radiusValue}px ${forPreview ? ' !important' : ''};\n`; + } + }); + cssVariables += createBorderRadiusClassesForCards(themeState.borders.values); + } + return cssVariables.trim(); }; diff --git a/src/components/Themes/lib/themeCreatorUtils.ts b/src/components/Themes/lib/themeCreatorUtils.ts index 18c4cb4f41f6..e23d6b496399 100644 --- a/src/components/Themes/lib/themeCreatorUtils.ts +++ b/src/components/Themes/lib/themeCreatorUtils.ts @@ -6,6 +6,8 @@ import lowerCase from 'lodash/lowerCase'; import { DEFAULT_NEW_COLOR_TITLE, DEFAULT_PALETTE_TOKENS, + RADIUS_PRESETS, + THEME_BORDER_RADIUS_VARIABLE_PREFIX, THEME_COLOR_VARIABLE_PREFIX, } from './constants'; import {generatePrivateColors} from './privateColors'; @@ -14,10 +16,12 @@ import type { Palette, PaletteTokens, PrivateColors, + RadiusValue, ThemeCreatorState, ThemeOptions, ThemeVariant, } from './types'; +import {RadiusPresetName} from './types'; function createColorToken(title: string) { return kebabCase(title); @@ -450,3 +454,48 @@ export function initThemeCreator(inputTheme: ThemeOptions): ThemeCreatorState { tokens: Object.keys(paletteTokens), }; } + +export type ChangeRadiusPresetInThemeParams = { + radiusPresetName: RadiusPresetName; +}; + +export function changeRadiusPresetInTheme( + themeState: ThemeCreatorState, + {radiusPresetName}: ChangeRadiusPresetInThemeParams, +): ThemeCreatorState { + const newBorderValue = { + preset: radiusPresetName, + values: {...RADIUS_PRESETS[radiusPresetName]}, + }; + + return {...themeState, borders: newBorderValue}; +} + +export type UpdateCustomRadiusPresetInThemeParams = {radiusValue: Partial}; + +export function updateCustomRadiusPresetInTheme( + themeState: ThemeCreatorState, + {radiusValue}: UpdateCustomRadiusPresetInThemeParams, +): ThemeCreatorState { + const previousRadiusValues = themeState.borders.values; + const newCustomPresetValues = { + preset: RadiusPresetName.Custom, + values: {...previousRadiusValues, ...radiusValue}, + }; + + return {...themeState, borders: newCustomPresetValues}; +} + +export function createBorderRadiusCssVariable(radiusSize: string) { + return `${THEME_BORDER_RADIUS_VARIABLE_PREFIX}-${radiusSize}`; +} + +export function createBorderRadiusClassesForCards(values: RadiusValue) { + const cardSizeM = values.l + ? `.g-card_size_m {--_--border-radius: ${values.l}px !important;}\n` + : ''; + const cardSizeL = values.xxl + ? `.g-card_size_l {--_--border-radius: ${values.xxl}px !important;}\n` + : ''; + return cardSizeM && cardSizeL ? '\n' + cardSizeM + cardSizeL : ''; +} diff --git a/src/components/Themes/lib/types.ts b/src/components/Themes/lib/types.ts index 5fb4fd2a2c60..4efe3a0b472d 100644 --- a/src/components/Themes/lib/types.ts +++ b/src/components/Themes/lib/types.ts @@ -22,7 +22,21 @@ export type ColorsOptions = { export type ColorOption = keyof ColorsOptions; -export type BordersOptions = {}; +export type RadiusSizeName = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'; + +export enum RadiusPresetName { + Regular = 'radius_regular', + Circled = 'radius_circled', + Squared = 'radius_squared', + Custom = 'radius_custom', +} + +export type RadiusValue = Record; + +export type BordersOption = { + preset: RadiusPresetName; + values: RadiusValue; +}; export type TypographyOptions = {}; @@ -31,7 +45,7 @@ export interface ThemeOptions { palette: Record; /** Utility colors that used in components (background, link, brand-text, etc.) */ colors: Record; - borders: BordersOptions; + borders: BordersOption; typography: TypographyOptions; } diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss new file mode 100644 index 000000000000..5787ed41bb73 --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss @@ -0,0 +1,29 @@ +@use '../../../../../variables.scss'; + +$block: '.#{variables.$ns}border-card'; + +#{$block} { + position: relative; + display: flex; + padding: 26px; + height: 80px; + align-items: center; + justify-content: center; + cursor: pointer; + + &__icon { + position: absolute; + top: 4px; + right: 4px; + color: var(--g-color-base-brand); + } + + &__fake-button { + width: 69px; + height: 28px; + background-color: var(--g-color-base-brand); + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx new file mode 100644 index 000000000000..4a7128588e8c --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx @@ -0,0 +1,45 @@ +import {CircleCheckFill} from '@gravity-ui/icons'; +import {Card, Text} from '@gravity-ui/uikit'; +import React, {useCallback} from 'react'; +import {useTranslation} from 'react-i18next'; +import {RADIUS_PRESETS} from 'src/components/Themes/lib/constants'; +import {RadiusPresetName} from 'src/components/Themes/lib/types'; + +import {block} from '../../../../../utils'; + +import './BorderCard.scss'; + +const b = block('border-card'); + +export type BorderCardProps = { + preset: RadiusPresetName; + selected: boolean; + onClick: (preset: RadiusPresetName) => void; +}; + +const FakeButton = ({preset, text}: {preset: RadiusPresetName; text: string}) => ( +
+ {text} +
+); + +export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => { + const {t} = useTranslation('themes'); + + const handleClick = useCallback(() => { + onClick(preset); + }, [preset]); + + const displayName = t(preset); + + return ( + + {preset === RadiusPresetName.Custom ? ( + {displayName} + ) : ( + + )} + {selected && } + + ); +}; diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderPresets/BorderPresets.tsx b/src/components/Themes/ui/BorderRadiusTab/BorderPresets/BorderPresets.tsx new file mode 100644 index 000000000000..45352a4e94b6 --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/BorderPresets/BorderPresets.tsx @@ -0,0 +1,49 @@ +import {Col, Row} from '@gravity-ui/uikit'; +import React, {useCallback} from 'react'; +import {useTranslation} from 'react-i18next'; +import {ChangeRadiusPresetInThemeParams} from 'src/components/Themes/lib/themeCreatorUtils'; +import {RadiusPresetName} from 'src/components/Themes/lib/types'; + +import {ThemeSection} from '../../ThemeSection'; +import {BorderCard, BorderCardProps} from '../BorderCard/BorderCard'; + +const ColCard = (props: BorderCardProps) => ( + + + +); + +const PRESETS_ORDER = [ + RadiusPresetName.Regular, + RadiusPresetName.Circled, + RadiusPresetName.Squared, + RadiusPresetName.Custom, +]; + +export type BorderPresetsProps = { + selectedPreset: RadiusPresetName; + onClick: (preset: ChangeRadiusPresetInThemeParams) => void; +}; + +export const BorderPresets = ({selectedPreset, onClick}: BorderPresetsProps) => { + const {t} = useTranslation('themes'); + + const handleClick = useCallback((preset: RadiusPresetName) => { + onClick({radiusPresetName: preset}); + }, []); + + return ( + + + {PRESETS_ORDER.map((preset) => ( + + ))} + + + ); +}; diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderRadiusTab.scss b/src/components/Themes/ui/BorderRadiusTab/BorderRadiusTab.scss new file mode 100644 index 000000000000..cf9eb497c5b8 --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/BorderRadiusTab.scss @@ -0,0 +1,10 @@ +@use '~@gravity-ui/uikit/styles/themes/_index.scss' as themes; +@use '../../../../variables.scss'; + +$block: '.#{variables.$ns}border-radius-tab'; + +#{$block} { + @include themes.g-theme-common; //restore default uikit styles for components + + gap: calc(var(--g-spacing-base) * 20); +} diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderRadiusTab.tsx b/src/components/Themes/ui/BorderRadiusTab/BorderRadiusTab.tsx new file mode 100644 index 000000000000..5a5770935d01 --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/BorderRadiusTab.tsx @@ -0,0 +1,34 @@ +import {Flex} from '@gravity-ui/uikit'; +import React from 'react'; + +import {block} from '../../../../utils'; +import {useThemeCreator, useThemeCreatorMethods} from '../../hooks'; +import {RadiusPresetName} from '../../lib/types'; +import {ExportThemeSection} from '../ExportThemeSection/ExportThemeSection'; + +import {BorderPresets} from './BorderPresets/BorderPresets'; +import './BorderRadiusTab.scss'; +import {ComponentPreview} from './ComponentPreview/ComponentPreview'; +import {CustomRadius} from './CustomRadius/CustomRadius'; + +const b = block('border-radius-tab'); + +export const BorderRadiusTab = () => { + const themeState = useThemeCreator(); + + const {changeRadiusPreset, updateCustomRadiusPreset} = useThemeCreatorMethods(); + + const preset = themeState.borders.preset; + const values = themeState.borders.values; + + return ( + + + {preset === RadiusPresetName.Custom && ( + + )} + + + + ); +}; diff --git a/src/components/Themes/ui/BorderRadiusTab/ComponentPreview/ComponentPreview.tsx b/src/components/Themes/ui/BorderRadiusTab/ComponentPreview/ComponentPreview.tsx new file mode 100644 index 000000000000..ee16aa74282f --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/ComponentPreview/ComponentPreview.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import {useTranslation} from 'react-i18next'; + +import {useThemeCreator} from '../../../hooks'; +import {exportTheme} from '../../../lib/themeCreatorExport'; +import {ThemeSection} from '../../ThemeSection'; +import {Showcase} from '../Showcase/Showcase'; + +export const ComponentPreview = () => { + const {t} = useTranslation('themes'); + const themeState = useThemeCreator(); + + const themeStyles = React.useMemo( + () => exportTheme({themeState, ignoreDefaultValues: false}), + [themeState], + ); + + return ( + + + + ); +}; diff --git a/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.scss b/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.scss new file mode 100644 index 000000000000..ac2e41b4dbf3 --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.scss @@ -0,0 +1,28 @@ +@use '~@gravity-ui/uikit/styles/themes/_index.scss' as themes; +@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; +@use '../../../../../variables.scss'; +@use '../../../../../mixins.scss' as baseMixins; + +$root: '.g-root'; +$block: '.#{variables.$ns}custom-radius'; + +// Workaround for missing theme class in ThemeProvider +$workaroundBlockDarkTheme: &#{$block}_theme_dark; + +#{$block} { + &__px { + margin-inline: 8px; + } + + &__radius-input-row { + align-items: center; + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + appearance: none; + margin: 0; + } + input[type='number'] { + appearance: textfield; + } + } +} diff --git a/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.tsx b/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.tsx new file mode 100644 index 000000000000..19bc1c1c7de0 --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.tsx @@ -0,0 +1,75 @@ +import {Col, Flex, Row, Text, TextInput} from '@gravity-ui/uikit'; +import React, {useCallback, useMemo} from 'react'; +import {useTranslation} from 'react-i18next'; +import {UpdateCustomRadiusPresetInThemeParams} from 'src/components/Themes/lib/themeCreatorUtils'; +import {RadiusSizeName, RadiusValue} from 'src/components/Themes/lib/types'; + +import {block} from '../../../../../utils'; +import {ThemeSection} from '../../ThemeSection'; + +import './CustomRadius.scss'; + +const b = block('custom-radius'); + +type RadiusInputProps = { + radiusSizeName: RadiusSizeName; + onUpdate: (param: UpdateCustomRadiusPresetInThemeParams) => void; + value?: string; +}; + +const RadiusInputRow = ({radiusSizeName, onUpdate, value}: RadiusInputProps) => { + const {t} = useTranslation('themes'); + + const text = useMemo(() => t('radius') + ` ${radiusSizeName.toUpperCase()}`, [radiusSizeName]); + + const handleUpdate = useCallback( + (newValue: string) => { + onUpdate({radiusValue: {[radiusSizeName]: newValue}}); + }, + [radiusSizeName], + ); + + return ( + + + {text} + + + + px + + } + /> + + + ); +}; + +type CustomRadiusProps = { + values: RadiusValue; + onUpdate: (param: UpdateCustomRadiusPresetInThemeParams) => void; +}; + +export const CustomRadius = ({onUpdate, values}: CustomRadiusProps) => { + const {t} = useTranslation('themes'); + + return ( + + + + + + + + + + + ); +}; diff --git a/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.scss b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.scss new file mode 100644 index 000000000000..5a3df7ceebb2 --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.scss @@ -0,0 +1,44 @@ +@use '~@gravity-ui/uikit/styles/themes/_index.scss' as themes; +@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables; +@use '../../../../../variables.scss'; +@use '../../../../../mixins.scss' as baseMixins; + +$root: '.g-root'; +$block: '.#{variables.$ns}border-radius-showcase'; + +// Workaround for missing theme class in ThemeProvider +$workaroundBlockDarkTheme: &#{$block}_theme_dark; + +#{$block} { + padding: 40px; + border-radius: 24px; + + &__column-transform { + @media (max-width: (map-get(pcVariables.$gridBreakpoints, 'md') - 1)) { + flex-direction: column; + width: 100%; + } + } + + &__card-block { + flex-grow: 1; + margin-inline-start: calc(var(--g-spacing-base) * 11); + @media (max-width: (map-get(pcVariables.$gridBreakpoints, 'lg') - 1)) { + order: 1; + margin-inline-start: 0; + } + } + + &__card { + height: 196px; + flex-grow: 1; + } + + &__text-input-block { + flex-grow: 1; + @media (max-width: (map-get(pcVariables.$gridBreakpoints, 'lg') - 1)) { + flex-direction: column; + width: 100%; + } + } +} diff --git a/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx new file mode 100644 index 000000000000..7392925b643a --- /dev/null +++ b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx @@ -0,0 +1,141 @@ +import {PencilToLine} from '@gravity-ui/icons'; +import { + Button, + Card, + Flex, + FlexProps, + Label, + RadioButton, + TextInput, + Theme, + ThemeProvider, +} from '@gravity-ui/uikit'; +import type {ButtonProps} from '@gravity-ui/uikit'; +import React, {useMemo} from 'react'; +import {useTranslation} from 'react-i18next'; + +import {block} from '../../../../../utils'; + +import './Showcase.scss'; + +const b = block('border-radius-showcase'); + +export type ShowcaseProps = { + color?: string; + theme: Theme; + style?: string; +}; + +type ShowcaseBlockProps = FlexProps & { + text: string; +}; + +const BlockWrapper = (props: FlexProps) => ( + + {props.children} + +); +const LabelBlock = (props: ShowcaseBlockProps) => ( + + + + + +); + +const CardBlock = (props: ShowcaseBlockProps) => ( + + + {props.text} + + + {props.text} + + +); + +const getIconSize = (size: ButtonProps['size']) => { + switch (size) { + case 'xs': + return 12; + case 'xl': + return 20; + default: + return 16; + } +}; + +const ShowcaseButton = ({size, children}: Pick) => { + const iconSize = getIconSize(size); + return ( + + ); +}; + +const ButtonBlock = (props: ShowcaseBlockProps) => ( + + {props.text} + {props.text} + {props.text} + {props.text} + {props.text} + +); + +const RadioButtonBlock = (props: ShowcaseBlockProps) => { + const radioButtonOptions = useMemo( + () => [ + {value: '1', content: props.text}, + {value: '2', content: props.text}, + ], + [], + ); + return ( + + + + + + + ); +}; +const TextInputBlock = (props: ShowcaseBlockProps) => ( + + + + + + +); + +const borderRadiusShowcaseCn = b(); + +export const Showcase: React.FC = ({color, theme, style}) => { + const {t} = useTranslation('themes'); + + return ( + + {style ? : null} + + + + + + + + + + + + + ); +}; diff --git a/src/components/Themes/ui/ThemeCreatorContextProvider.tsx b/src/components/Themes/ui/ThemeCreatorContextProvider.tsx index a786c6e58156..f0371f70cc46 100644 --- a/src/components/Themes/ui/ThemeCreatorContextProvider.tsx +++ b/src/components/Themes/ui/ThemeCreatorContextProvider.tsx @@ -4,17 +4,21 @@ import {ThemeCreatorContext, ThemeCreatorMethodsContext} from '../lib/themeCreat import type {ThemeCreatorMethodsContextType} from '../lib/themeCreatorContext'; import type { AddColorToThemeParams, + ChangeRadiusPresetInThemeParams, ChangeUtilityColorInThemeParams, RenameColorInThemeParams, UpdateColorInThemeParams, + UpdateCustomRadiusPresetInThemeParams, } from '../lib/themeCreatorUtils'; import { addColorToTheme, + changeRadiusPresetInTheme, changeUtilityColorInTheme, initThemeCreator, removeColorFromTheme, renameColorInTheme, updateColorInTheme, + updateCustomRadiusPresetInTheme, } from '../lib/themeCreatorUtils'; import type {ThemeCreatorState, ThemeOptions} from '../lib/types'; @@ -39,6 +43,14 @@ type ThemeCreatorAction = type: 'changeUtilityColor'; payload: ChangeUtilityColorInThemeParams; } + | { + type: 'changeRadiusPreset'; + payload: ChangeRadiusPresetInThemeParams; + } + | { + type: 'updateCustomRadiusPreset'; + payload: UpdateCustomRadiusPresetInThemeParams; + } | { type: 'reinitialize'; payload: ThemeOptions; @@ -59,6 +71,10 @@ const themeCreatorReducer = ( return updateColorInTheme(prevState, action.payload); case 'changeUtilityColor': return changeUtilityColorInTheme(prevState, action.payload); + case 'changeRadiusPreset': + return changeRadiusPresetInTheme(prevState, action.payload); + case 'updateCustomRadiusPreset': + return updateCustomRadiusPresetInTheme(prevState, action.payload); case 'reinitialize': return initThemeCreator(action.payload); default: @@ -133,9 +149,43 @@ export const ThemeCreatorContextProvider: React.FC = ({ }); }, []); + const changeRadiusPreset = React.useCallback< + ThemeCreatorMethodsContextType['changeRadiusPreset'] + >((payload) => { + dispatchThemeCreator({ + type: 'changeRadiusPreset', + payload, + }); + }, []); + + const updateCustomRadiusPreset = React.useCallback< + ThemeCreatorMethodsContextType['updateCustomRadiusPreset'] + >((payload) => { + dispatchThemeCreator({ + type: 'updateCustomRadiusPreset', + payload, + }); + }, []); + const methods = React.useMemo( - () => ({addColor, renameColor, removeColor, updateColor, changeUtilityColor}), - [addColor, renameColor, removeColor, updateColor, changeUtilityColor], + () => ({ + addColor, + renameColor, + removeColor, + updateColor, + changeUtilityColor, + changeRadiusPreset, + updateCustomRadiusPreset, + }), + [ + addColor, + renameColor, + removeColor, + updateColor, + changeUtilityColor, + changeRadiusPreset, + updateCustomRadiusPreset, + ], ); return ( diff --git a/src/content/components/uikit/TextInput/TextInputComponent.tsx b/src/content/components/uikit/TextInput/TextInputComponent.tsx index ab32d86b6591..892b0fac45ac 100644 --- a/src/content/components/uikit/TextInput/TextInputComponent.tsx +++ b/src/content/components/uikit/TextInput/TextInputComponent.tsx @@ -3,7 +3,7 @@ import React from 'react'; export const TextInputComponent = (props: TextInputProps) => { return ( -
+
); From 1ce516119fc7cdfb9883d4caf6eb704635669629 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 27 Jun 2024 12:11:19 +0300 Subject: [PATCH 2/6] fix: label row --- src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx index 7392925b643a..e047b4312d9f 100644 --- a/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx +++ b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx @@ -127,7 +127,7 @@ export const Showcase: React.FC = ({color, theme, style}) => { {style ? : null} - + From f4245dfa1f0a23b970c1b9a5e6f4466091e9b620 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Thu, 27 Jun 2024 15:27:24 +0300 Subject: [PATCH 3/6] feat: add common part in exported css --- .../Themes/lib/themeCreatorExport.ts | 36 +++++++++------- .../Themes/lib/themeCreatorUtils.ts | 42 +++++++++++++++++-- 2 files changed, 58 insertions(+), 20 deletions(-) diff --git a/src/components/Themes/lib/themeCreatorExport.ts b/src/components/Themes/lib/themeCreatorExport.ts index 73c5b394ce15..2c58437c5e73 100644 --- a/src/components/Themes/lib/themeCreatorExport.ts +++ b/src/components/Themes/lib/themeCreatorExport.ts @@ -1,7 +1,6 @@ import {DEFAULT_PALETTE, DEFAULT_THEME} from './constants'; import { - createBorderRadiusClassesForCards, - createBorderRadiusCssVariable, + createBorderRadiusPresetForExport, createPrivateColorCssVariable, createPrivateColorCssVariableFromToken, createPrivateColorToken, @@ -9,12 +8,14 @@ import { isPrivateColorToken, } from './themeCreatorUtils'; import type {ColorOption, ThemeCreatorState, ThemeVariant} from './types'; -import {RadiusPresetName} from './types'; + +const COMMON_VARIABLES_TEMPLATE_NAME = '%COMMON_VARIABLES%'; const SCSS_TEMPLATE = ` @use '@gravity-ui/uikit/styles/themes'; .g-root { + ${COMMON_VARIABLES_TEMPLATE_NAME} &_theme_light { @include themes.g-theme-light; @@ -104,22 +105,23 @@ export function exportTheme({ }, ); - // Don't export radiuses that are equals to default - if (!ignoreDefaultValues || themeState.borders.preset !== RadiusPresetName.Regular) { - Object.entries(themeState.borders.values).forEach(([radiusName, radiusValue]) => { - if (radiusValue) { - cssVariables += `${createBorderRadiusCssVariable( - radiusName, - )}: ${radiusValue}px ${forPreview ? ' !important' : ''};\n`; - } + if (forPreview) { + cssVariables += createBorderRadiusPresetForExport({ + borders: themeState.borders, + forPreview, + ignoreDefaultValues, }); - cssVariables += createBorderRadiusClassesForCards(themeState.borders.values); } return cssVariables.trim(); }; return { + common: createBorderRadiusPresetForExport({ + borders: themeState.borders, + forPreview, + ignoreDefaultValues, + }), light: prepareThemeVariables('light'), dark: prepareThemeVariables('dark'), }; @@ -132,10 +134,12 @@ export function exportThemeForDialog({themeState, format = 'scss'}: ExportThemeF return 'not implemented'; } - const {light, dark} = exportTheme({themeState, format, forPreview: false}); + const {common, light, dark} = exportTheme({themeState, format, forPreview: false}); return SCSS_TEMPLATE.replace( - '%LIGHT_THEME_VARIABLES%', - light.replaceAll('\n', '\n'.padEnd(9)), - ).replace('%DARK_THEME_VARIABLES%', dark.replaceAll('\n', '\n'.padEnd(9))); + COMMON_VARIABLES_TEMPLATE_NAME, + common.replaceAll('\n', '\n'.padEnd(5)), + ) + .replace('%LIGHT_THEME_VARIABLES%', light.replaceAll('\n', '\n'.padEnd(9))) + .replace('%DARK_THEME_VARIABLES%', dark.replaceAll('\n', '\n'.padEnd(9))); } diff --git a/src/components/Themes/lib/themeCreatorUtils.ts b/src/components/Themes/lib/themeCreatorUtils.ts index e23d6b496399..4c0583cca90b 100644 --- a/src/components/Themes/lib/themeCreatorUtils.ts +++ b/src/components/Themes/lib/themeCreatorUtils.ts @@ -12,6 +12,7 @@ import { } from './constants'; import {generatePrivateColors} from './privateColors'; import type { + BordersOption, ColorsOptions, Palette, PaletteTokens, @@ -486,16 +487,49 @@ export function updateCustomRadiusPresetInTheme( return {...themeState, borders: newCustomPresetValues}; } -export function createBorderRadiusCssVariable(radiusSize: string) { +function createBorderRadiusCssVariable(radiusSize: string) { return `${THEME_BORDER_RADIUS_VARIABLE_PREFIX}-${radiusSize}`; } -export function createBorderRadiusClassesForCards(values: RadiusValue) { +function createBorderRadiusClassesForCards(values: RadiusValue, forPreview: boolean) { const cardSizeM = values.l - ? `.g-card_size_m {--_--border-radius: ${values.l}px !important;}\n` + ? `.g-card_size_m { + --_--border-radius: ${values.l}px${forPreview ? ' !important' : ''}; +}\n` : ''; const cardSizeL = values.xxl - ? `.g-card_size_l {--_--border-radius: ${values.xxl}px !important;}\n` + ? `.g-card_size_l { + --_--border-radius: ${values.xxl}px${forPreview ? ' !important' : ''}; +}\n` : ''; return cardSizeM && cardSizeL ? '\n' + cardSizeM + cardSizeL : ''; } + +/** + * Generates ready-to-use in css string with borders variables + * @returns string + */ +export function createBorderRadiusPresetForExport({ + borders, + forPreview, + ignoreDefaultValues, +}: { + borders: BordersOption; + ignoreDefaultValues: boolean; + forPreview: boolean; +}) { + // Don't export radius preset that are equals to default + if (ignoreDefaultValues && borders.preset === RadiusPresetName.Regular) { + return ''; + } + let cssString = ''; + Object.entries(borders.values).forEach(([radiusName, radiusValue]) => { + if (radiusValue) { + cssString += `${createBorderRadiusCssVariable(radiusName)}: ${radiusValue}px${ + forPreview ? ' !important' : '' + };\n`; + } + }); + cssString += createBorderRadiusClassesForCards(borders.values, forPreview); + return cssString; +} From 68c5747ff8296015b2bb278d4d10eafe857e97d2 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Fri, 28 Jun 2024 17:10:55 +0300 Subject: [PATCH 4/6] feat: use selectable card component --- .../BorderCard/BorderCard.scss | 29 ------------------ .../BorderRadiusTab/BorderCard/BorderCard.tsx | 30 +++++-------------- 2 files changed, 8 insertions(+), 51 deletions(-) delete mode 100644 src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss deleted file mode 100644 index 5787ed41bb73..000000000000 --- a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use '../../../../../variables.scss'; - -$block: '.#{variables.$ns}border-card'; - -#{$block} { - position: relative; - display: flex; - padding: 26px; - height: 80px; - align-items: center; - justify-content: center; - cursor: pointer; - - &__icon { - position: absolute; - top: 4px; - right: 4px; - color: var(--g-color-base-brand); - } - - &__fake-button { - width: 69px; - height: 28px; - background-color: var(--g-color-base-brand); - display: flex; - align-items: center; - justify-content: center; - } -} diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx index 4a7128588e8c..c5ac417af6aa 100644 --- a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx +++ b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx @@ -1,28 +1,15 @@ -import {CircleCheckFill} from '@gravity-ui/icons'; -import {Card, Text} from '@gravity-ui/uikit'; import React, {useCallback} from 'react'; import {useTranslation} from 'react-i18next'; +import {SelectableCard} from 'src/components/SelectableCard/SelectableCard'; import {RADIUS_PRESETS} from 'src/components/Themes/lib/constants'; import {RadiusPresetName} from 'src/components/Themes/lib/types'; -import {block} from '../../../../../utils'; - -import './BorderCard.scss'; - -const b = block('border-card'); - export type BorderCardProps = { preset: RadiusPresetName; selected: boolean; onClick: (preset: RadiusPresetName) => void; }; -const FakeButton = ({preset, text}: {preset: RadiusPresetName; text: string}) => ( -
- {text} -
-); - export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => { const {t} = useTranslation('themes'); @@ -33,13 +20,12 @@ export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => { const displayName = t(preset); return ( - - {preset === RadiusPresetName.Custom ? ( - {displayName} - ) : ( - - )} - {selected && } - + ); }; From d11a24be0663980dae544c7210c5520c62d47ae2 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Fri, 28 Jun 2024 18:19:10 +0300 Subject: [PATCH 5/6] feat: remove cards and xxl size --- src/components/Themes/lib/constants.ts | 3 --- src/components/Themes/lib/themeCreatorUtils.ts | 15 --------------- src/components/Themes/lib/types.ts | 2 +- .../CustomRadius/CustomRadius.tsx | 1 - .../ui/BorderRadiusTab/Showcase/Showcase.scss | 17 ----------------- .../ui/BorderRadiusTab/Showcase/Showcase.tsx | 14 -------------- 6 files changed, 1 insertion(+), 51 deletions(-) diff --git a/src/components/Themes/lib/constants.ts b/src/components/Themes/lib/constants.ts index 5c9bcdfb7667..87d050bacb08 100644 --- a/src/components/Themes/lib/constants.ts +++ b/src/components/Themes/lib/constants.ts @@ -41,7 +41,6 @@ export const DEFAULT_RADIUS: RadiusValue = { m: '6', l: '8', xl: '10', - xxl: '16', }; export const RADIUS_PRESETS: Record = { @@ -52,7 +51,6 @@ export const RADIUS_PRESETS: Record = { m: '100', l: '100', xl: '100', - xxl: '100', }, [RadiusPresetName.Squared]: { xs: '0', @@ -60,7 +58,6 @@ export const RADIUS_PRESETS: Record = { m: '0', l: '0', xl: '0', - xxl: '0', }, [RadiusPresetName.Custom]: DEFAULT_RADIUS, }; diff --git a/src/components/Themes/lib/themeCreatorUtils.ts b/src/components/Themes/lib/themeCreatorUtils.ts index 4c0583cca90b..d6a6af28abef 100644 --- a/src/components/Themes/lib/themeCreatorUtils.ts +++ b/src/components/Themes/lib/themeCreatorUtils.ts @@ -491,20 +491,6 @@ function createBorderRadiusCssVariable(radiusSize: string) { return `${THEME_BORDER_RADIUS_VARIABLE_PREFIX}-${radiusSize}`; } -function createBorderRadiusClassesForCards(values: RadiusValue, forPreview: boolean) { - const cardSizeM = values.l - ? `.g-card_size_m { - --_--border-radius: ${values.l}px${forPreview ? ' !important' : ''}; -}\n` - : ''; - const cardSizeL = values.xxl - ? `.g-card_size_l { - --_--border-radius: ${values.xxl}px${forPreview ? ' !important' : ''}; -}\n` - : ''; - return cardSizeM && cardSizeL ? '\n' + cardSizeM + cardSizeL : ''; -} - /** * Generates ready-to-use in css string with borders variables * @returns string @@ -530,6 +516,5 @@ export function createBorderRadiusPresetForExport({ };\n`; } }); - cssString += createBorderRadiusClassesForCards(borders.values, forPreview); return cssString; } diff --git a/src/components/Themes/lib/types.ts b/src/components/Themes/lib/types.ts index 4efe3a0b472d..e51dc07a0ada 100644 --- a/src/components/Themes/lib/types.ts +++ b/src/components/Themes/lib/types.ts @@ -22,7 +22,7 @@ export type ColorsOptions = { export type ColorOption = keyof ColorsOptions; -export type RadiusSizeName = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'; +export type RadiusSizeName = 'xs' | 's' | 'm' | 'l' | 'xl'; export enum RadiusPresetName { Regular = 'radius_regular', diff --git a/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.tsx b/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.tsx index 19bc1c1c7de0..b48a4f160153 100644 --- a/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.tsx +++ b/src/components/Themes/ui/BorderRadiusTab/CustomRadius/CustomRadius.tsx @@ -68,7 +68,6 @@ export const CustomRadius = ({onUpdate, values}: CustomRadiusProps) => { - ); diff --git a/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.scss b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.scss index 5a3df7ceebb2..cc7e82206699 100644 --- a/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.scss +++ b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.scss @@ -6,9 +6,6 @@ $root: '.g-root'; $block: '.#{variables.$ns}border-radius-showcase'; -// Workaround for missing theme class in ThemeProvider -$workaroundBlockDarkTheme: &#{$block}_theme_dark; - #{$block} { padding: 40px; border-radius: 24px; @@ -20,20 +17,6 @@ $workaroundBlockDarkTheme: &#{$block}_theme_dark; } } - &__card-block { - flex-grow: 1; - margin-inline-start: calc(var(--g-spacing-base) * 11); - @media (max-width: (map-get(pcVariables.$gridBreakpoints, 'lg') - 1)) { - order: 1; - margin-inline-start: 0; - } - } - - &__card { - height: 196px; - flex-grow: 1; - } - &__text-input-block { flex-grow: 1; @media (max-width: (map-get(pcVariables.$gridBreakpoints, 'lg') - 1)) { diff --git a/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx index e047b4312d9f..f80d661b8086 100644 --- a/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx +++ b/src/components/Themes/ui/BorderRadiusTab/Showcase/Showcase.tsx @@ -1,7 +1,6 @@ import {PencilToLine} from '@gravity-ui/icons'; import { Button, - Card, Flex, FlexProps, Label, @@ -43,17 +42,6 @@ const LabelBlock = (props: ShowcaseBlockProps) => ( ); -const CardBlock = (props: ShowcaseBlockProps) => ( - - - {props.text} - - - {props.text} - - -); - const getIconSize = (size: ButtonProps['size']) => { switch (size) { case 'xs': @@ -132,8 +120,6 @@ export const Showcase: React.FC = ({color, theme, style}) => { - - From 7f29f294b2292f373d06ae54655b47309098aef6 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Tue, 2 Jul 2024 14:00:47 +0300 Subject: [PATCH 6/6] feat: use textProps to control style --- package-lock.json | 8 +++--- package.json | 2 +- .../SelectableCard/SelectableCard.tsx | 28 +++++-------------- .../BorderRadiusTab/BorderCard/BorderCard.tsx | 3 +- 4 files changed, 14 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 401ce6d32c0c..9232e2cdf9e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@gravity-ui/icons": "^2.8.1", "@gravity-ui/navigation": "^2.15.0", "@gravity-ui/page-constructor": "^5.2.0", - "@gravity-ui/uikit": "^6.17.0", + "@gravity-ui/uikit": "^6.20.1", "@mdx-js/mdx": "^2.3.0", "@mdx-js/react": "^2.3.0", "@octokit/rest": "^20.1.1", @@ -2554,9 +2554,9 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "6.17.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.17.0.tgz", - "integrity": "sha512-aelbGQh0DxgZ/b3hbjZNBPc417mmoL4P5vq6yYOvUol/4GKimofgs7kOB2IjIVOAaEYivGgoVjmLQxREJfM15A==", + "version": "6.20.1", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.20.1.tgz", + "integrity": "sha512-BtkEWkpPLvXm7C/R23jp1nRwWkcd+pmBbsuJZU4qoYASFk0uhq7apkrrPcfCX+9Qk3PXiZg8xHwUlqjG33y0bw==", "dependencies": { "@bem-react/classname": "^1.6.0", "@gravity-ui/i18n": "^1.3.0", diff --git a/package.json b/package.json index ca7e10583b73..e6aee2fa5adc 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@gravity-ui/icons": "^2.8.1", "@gravity-ui/navigation": "^2.15.0", "@gravity-ui/page-constructor": "^5.2.0", - "@gravity-ui/uikit": "^6.17.0", + "@gravity-ui/uikit": "^6.20.1", "@mdx-js/mdx": "^2.3.0", "@mdx-js/react": "^2.3.0", "@octokit/rest": "^20.1.1", diff --git a/src/components/SelectableCard/SelectableCard.tsx b/src/components/SelectableCard/SelectableCard.tsx index d9efd9def665..2954300d40a6 100644 --- a/src/components/SelectableCard/SelectableCard.tsx +++ b/src/components/SelectableCard/SelectableCard.tsx @@ -21,10 +21,6 @@ export type SelecableCardProps = { * Props for inner Text component */ textProps?: TextProps; - /** - * Style object to customize decorated text. Has an impact when pureText has falsie values - */ - contentStyle?: React.CSSProperties; } & Pick & Pick; @@ -32,12 +28,10 @@ const CardContent = ({ text, pureText, textProps, - contentStyle, -}: Pick) => { +}: Pick) => { const props: Record = pureText ? {variant: 'body-2'} : {color: 'inverted-primary', className: b('fake-button')}; - props.style = contentStyle; return ( {text} @@ -52,17 +46,9 @@ export const SelectableCard = ({ onClick, className, textProps, - contentStyle, -}: SelecableCardProps) => { - return ( - - - {selected && } - - ); -}; +}: SelecableCardProps) => ( + + + {selected && } + +); diff --git a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx index c5ac417af6aa..85ad454058a6 100644 --- a/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx +++ b/src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx @@ -18,6 +18,7 @@ export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => { }, [preset]); const displayName = t(preset); + const borderRadiusStyle = {borderRadius: RADIUS_PRESETS[preset]?.m + 'px'}; return ( { onClick={handleClick} selected={selected} pureText={preset === RadiusPresetName.Custom} - contentStyle={{borderRadius: RADIUS_PRESETS[preset]?.m + 'px'}} + textProps={{style: borderRadiusStyle}} /> ); };