[DS][Button] Выравнивание публичного API

.storybook/storybook.requires.ts

@@ -1,56 +1,48 @@
 /* do not change this file, it is auto generated by storybook. */
 /// <reference types="@storybook/react-native/metro-env" />
-import { start, updateView, View, type Features } from '@storybook/react-native';
+import { start, updateView, View, type Features } from '@storybook/react-native'
 
-import "@storybook/addon-ondevice-notes/register";
-import "@storybook/addon-ondevice-controls/register";
-import "@storybook/addon-ondevice-actions/register";
+import '@storybook/addon-ondevice-notes/register'
+import '@storybook/addon-ondevice-controls/register'
+import '@storybook/addon-ondevice-actions/register'
 
 const normalizedStories = [
   {
-    titlePrefix: "",
-    directory: "./src",
-    files: "**/*.stories.?(ts|tsx|js|jsx)",
-    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    titlePrefix: '',
+    directory: './src',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
     req: require.context(
       '../src',
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),
-  }
-];
-
+  },
+]
 
 declare global {
-  var view: View;
-  var STORIES: typeof normalizedStories;
+  var view: View
+  var STORIES: typeof normalizedStories
   var STORYBOOK_WEBSOCKET:
     | { host?: string; port?: number; secured?: boolean }
-    | undefined;
-  var FEATURES: Features;
+    | undefined
+  var FEATURES: Features
 }
 
-
 const annotations = [
   require('./preview'),
-  require("@storybook/react-native/preview")
-];
-
-globalThis.STORIES = normalizedStories;
-
-
-module?.hot?.accept?.();
+  require('@storybook/react-native/preview'),
+]
 
+globalThis.STORIES = normalizedStories
 
+module?.hot?.accept?.()
 
 if (!globalThis.view) {
-  globalThis.view = start({
-    annotations,
-    storyEntries: normalizedStories,
-
-  });
+  globalThis.view = start({ annotations, storyEntries: normalizedStories })
 } else {
-  updateView(globalThis.view, annotations, normalizedStories);
+  updateView(globalThis.view, annotations, normalizedStories)
 }
 
-export const view: View = globalThis.view;
+export const view: View = globalThis.view

design-tokens/input/tokens.json

@@ -1547,19 +1547,19 @@
         "extSm": {
           "borderRadius": "{dimension.borderRadius.400}",
           "gap": "{dimension.space.200}",
-          "height": "{dimension.size.800}"
+          "height": "{dimension.size.1000}"
         },
         "extLg": {
           "borderRadius": "{dimension.borderRadius.400}",
-          "gap": "{dimension.space.400}",
-          "height": "{dimension.size.1200}"
+          "gap": "{dimension.space.300}",
+          "height": "3.125rem"
         },
         "extXlg": {
           "borderRadius": "{dimension.borderRadius.400}",
-          "gap": "{dimension.space.400}",
+          "gap": "{dimension.space.300}",
           "iconOnlyWidth": "{dimension.size.1300}",
           "paddingX": "{dimension.space.700}",
-          "paddingY": "{dimension.space.600}",
+          "paddingY": "{dimension.space.400}",
           "height": "{dimension.size.1300}"
         },
         "borderWidth": "{dimension.borderWidth.100}",
@@ -2036,13 +2036,13 @@
         }
       },
       "root": {
-        "borderRadius": "{dimension.borderRadius.400}",
+        "borderRadius": "{dimension.borderRadius.300}",
         "roundedBorderRadius": "{dimension.borderRadius.max}",
         "gap": "{dimension.space.200}",
         "paddingX": "{dimension.space.400}",
         "paddingY": "{dimension.space.200}",
-        "height": "{dimension.size.1000}",
-        "iconOnlyWidth": "{dimension.size.1000}",
+        "height": "{sizing.21x}",
+        "iconOnlyWidth": "{sizing.21x}",
         "raisedShadow": "none",
         "badgeSize": "{dimension.size.450}",
         "transitionDuration": "{effects.transition.duration.200}",
@@ -2052,16 +2052,16 @@
           "offset": "{dimension.focusRing.offset}"
         },
         "sm": {
-          "fontSize": "{fonts.fontSize.200}",
-          "iconOnlyWidth": "{dimension.size.800}",
+          "fontSize": "{fonts.fontSize.100}",
+          "iconOnlyWidth": "{dimension.size.1000}",
           "paddingX": "{dimension.space.400}",
           "paddingY": "{dimension.space.200}"
         },
         "lg": {
-          "fontSize": "{fonts.fontSize.500}",
-          "iconOnlyWidth": "{dimension.size.1200}",
+          "fontSize": "{fonts.fontSize.400}",
+          "iconOnlyWidth": "3.125rem",
           "paddingX": "{dimension.space.700}",
-          "paddingY": "{dimension.space.400}"
+          "paddingY": "{dimension.space.350}"
         },
         "label": { "fontWeight": "{fonts.fontWeight.demibold}" }
       }

src/components/Button/Button.tsx

@@ -1,13 +1,14 @@
-import { memo, useMemo } from 'react'
+import { memo } from 'react'
 
-import { BaseButton } from './BaseButton'
+import { BaseButton } from './internal/BaseButton'
+import { adaptButtonProps } from './internal/deprecated/adaptButtonProps'
+import { getButtonStyles } from './internal/getButtonStyles'
 import type { ButtonBaseVariant, ButtonProps } from './types'
-import { ButtonVariantContext } from './utils/ButtonVariantContext'
 
 /**
  * Button component
  * @param size - button size
- * @param shape - button shape
+ * @param rounded - rounded corners
  * @param loading - button loading state
  * @param variant - button variant
  * @param disabled - button disabled state
@@ -20,13 +21,10 @@ import { ButtonVariantContext } from './utils/ButtonVariantContext'
  * @link https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=160-5223
  */
 export const Button = memo<ButtonProps<ButtonBaseVariant>>(
-  ({ variant = 'primary', ...props }) => {
-    const variantContextValue = useMemo(() => ({ variant }), [variant])
-
-    return (
-      <ButtonVariantContext.Provider value={variantContextValue}>
-        <BaseButton variant={variant} {...props} />
-      </ButtonVariantContext.Provider>
-    )
-  }
+  ({ variant = 'primary', ...props }) => (
+    <BaseButton
+      resolveStyles={getButtonStyles(variant)}
+      {...adaptButtonProps(props)}
+    />
+  )
 )

src/components/Button/ButtonBadge.tsx

@@ -1,18 +1,19 @@
-import { memo, useMemo } from 'react'
+import { memo } from 'react'
 import { View } from 'react-native'
 
 import { StyleSheet } from 'react-native-unistyles'
 
 import { Badge, type BadgeProps } from '../Badge'
 
-import { BaseButton } from './BaseButton'
+import { BaseButton } from './internal/BaseButton'
+import { adaptButtonProps } from './internal/deprecated/adaptButtonProps'
+import { getButtonStyles } from './internal/getButtonStyles'
 import type { ButtonBadgeProps, ButtonBaseVariant, ButtonProps } from './types'
-import { ButtonVariantContext } from './utils/ButtonVariantContext'
 
 /**
  * Button component with badge
  * @param size - button size
- * @param shape - button shape
+ * @param rounded - rounded corners
  * @param loading - button loading state
  * @param variant - button variant
  * @param disabled - button disabled state
@@ -28,8 +29,6 @@ import { ButtonVariantContext } from './utils/ButtonVariantContext'
 export const ButtonBadge = memo<
   ButtonProps<ButtonBaseVariant> & ButtonBadgeProps
 >(({ badgeLabel, badgeSeverity, variant = 'primary', ...props }) => {
-  const variantContextValue = useMemo(() => ({ variant }), [variant])
-
   const badgeCommonProps = {
     severity: badgeSeverity,
     testID: ButtonBadgeTestId.badge,
@@ -39,13 +38,14 @@ export const ButtonBadge = memo<
     : { ...badgeCommonProps, dot: true, style: styles.badgeDot }
 
   return (
-    <ButtonVariantContext.Provider value={variantContextValue}>
-      <View style={styles.container}>
-        <BaseButton variant={variant} {...props} />
-
-        <Badge {...badgeProps} />
-      </View>
-    </ButtonVariantContext.Provider>
+    <View style={styles.container}>
+      <BaseButton
+        resolveStyles={getButtonStyles(variant)}
+        {...adaptButtonProps(props)}
+      />
+
+      <Badge {...badgeProps} />
+    </View>
   )
 })
 

src/components/Button/ButtonSeverity.tsx

@@ -1,19 +1,20 @@
-import { memo, useMemo } from 'react'
+import { memo } from 'react'
 
-import { BaseButton } from './BaseButton'
+import { BaseButton } from './internal/BaseButton'
+import { adaptButtonSeverityProps } from './internal/deprecated/adaptButtonSeverityProps'
+import { getSeverityButtonStyles } from './internal/getSeverityButtonStyles'
 import type {
   ButtonProps,
   ButtonSeverityProps,
   ButtonSeverityVariant,
 } from './types'
-import { ButtonVariantContext } from './utils/ButtonVariantContext'
 
 /**
  * Button component
  * @param size - button size
- * @param shape - button shape
+ * @param rounded - rounded corners
  * @param loading - button loading state
- * @param variant - button variant
+ * @param appearance - button presentation
  * @param disabled - button disabled state
  * @param iconOnly - button with only Icon
  * @param iconPosition - icon position
@@ -25,15 +26,14 @@ import { ButtonVariantContext } from './utils/ButtonVariantContext'
  */
 export const ButtonSeverity = memo<
   ButtonProps<ButtonSeverityVariant> & ButtonSeverityProps
->(({ severity, variant = 'basic', ...props }) => {
-  const variantContextValue = useMemo(
-    () => ({ variant, severity }),
-    [severity, variant]
-  )
+>((props) => {
+  const { appearance, severity, ...buttonProps } =
+    adaptButtonSeverityProps(props)
 
   return (
-    <ButtonVariantContext.Provider value={variantContextValue}>
-      <BaseButton variant={variant} {...props} />
-    </ButtonVariantContext.Provider>
+    <BaseButton
+      resolveStyles={getSeverityButtonStyles(appearance, severity)}
+      {...buttonProps}
+    />
   )
 })