feat: remove cards and xxl size

gravity-ui · Jul 1, 2024 · e241564 · e241564
1 parent e8346fd
commit e241564
Show file tree

Hide file tree

Showing 6 changed files with 1 addition and 51 deletions.
diff --git 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<RadiusPresetName, RadiusValue> = {
@@ -52,15 +51,13 @@ export const RADIUS_PRESETS: Record<RadiusPresetName, RadiusValue> = {
         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,
 };

diff --git 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
@@ -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
@@ -68,7 +68,6 @@ export const CustomRadius = ({onUpdate, values}: CustomRadiusProps) => {
                 <RadiusInputRow onUpdate={onUpdate} radiusSizeName="m" value={values.m} />
                 <RadiusInputRow onUpdate={onUpdate} radiusSizeName="l" value={values.l} />
                 <RadiusInputRow onUpdate={onUpdate} radiusSizeName="xl" value={values.xl} />
-                <RadiusInputRow onUpdate={onUpdate} radiusSizeName="xxl" value={values.xxl} />
             </Flex>
         </ThemeSection>
     );

diff --git 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
@@ -1,7 +1,6 @@
 import {PencilToLine} from '@gravity-ui/icons';
 import {
     Button,
-    Card,
     Flex,
     FlexProps,
     Label,
@@ -43,17 +42,6 @@ const LabelBlock = (props: ShowcaseBlockProps) => (
     </BlockWrapper>
 );
 
-const CardBlock = (props: ShowcaseBlockProps) => (
-    <BlockWrapper {...props}>
-        <Card size="m" className={b('card')} type="selection" selected>
-            {props.text}
-        </Card>
-        <Card size="l" className={b('card')} type="selection" selected>
-            {props.text}
-        </Card>
-    </BlockWrapper>
-);
-
 const getIconSize = (size: ButtonProps['size']) => {
     switch (size) {
         case 'xs':
@@ -132,8 +120,6 @@ export const Showcase: React.FC<ShowcaseProps> = ({color, theme, style}) => {
                     <RadioButtonBlock text={t('label')} className={b('column-transform')} />
                 </Flex>
 
-                <CardBlock text={'\u00A0'} className={b('card-block')} />
-
                 <TextInputBlock text={t('input_placeholder')} className={b('text-input-block')} />
             </Flex>
         </ThemeProvider>