@itcase/ui-react-native 1.10.86 → 1.10.87

package/src/components/Search/Search.tsx

@@ -9,10 +9,17 @@ import {
 import { tokens } from '../../styles/tokens'
 import { colorTheme } from '../../utils'
 import { Icon } from '../Icon'
+import type { IconProps } from '../Icon/Icon.interface'
 import { searchAppearance } from './Search.appearance'
 import type { SearchConfig, SearchProps } from './Search.interface'
 import { styles } from './Search.styles'
 
+function getSearchIconAppearance(iconSize?: string): IconProps['appearance'] {
+  const sizeKey = iconSize === '16' ? 'size16_16' : 'size24_24'
+
+  return `surfacePrimary ${sizeKey} ghost rounded`
+}
+
 const searchConfig: SearchConfig = {
   appearance: {},
   setAppearance: (newComponent) => {
@@ -94,7 +101,7 @@ function Search(props: SearchProps) {
     >
       {SearchIcon && (
         <Icon
-          appearance="ghost"
+          appearance={getSearchIconAppearance(iconBeforeSize)}
           size={iconBeforeSize}
           iconFill={iconBeforeFill}
           iconSize={iconBeforeSize}
@@ -125,7 +132,7 @@ function Search(props: SearchProps) {
 
         {resolvedValue && (
           <Icon
-            appearance="ghost"
+            appearance={getSearchIconAppearance(iconClearSize)}
             size={iconClearSize}
             iconFill={iconClearFill}
             iconSize={iconClearSize}
@@ -138,7 +145,7 @@ function Search(props: SearchProps) {
 
       {iconAfter && (
         <Icon
-          appearance="ghost"
+          appearance={getSearchIconAppearance(iconAfterSize)}
           size={iconAfterSize}
           iconFill={iconAfterFill}
           iconSize={iconAfterSize}

package/src/components/Segmented/Segmented.interface.ts

@@ -26,8 +26,8 @@ interface SegmentedAppearanceProps {
   borderColor?: BorderColorProps
   fill?: FillProps
   fillActive?: FillActiveProps
-  iconAppearance?: string
-  iconAppearanceActive?: string
+  iconAppearance?: IconProps['appearance']
+  iconAppearanceActive?: IconProps['appearance']
   iconFill?: IconProps['iconFill']
   iconFillActive?: IconProps['iconFill']
   iconFillDisabled?: IconProps['iconFill']

package/src/components/Select/Select.interface.ts

@@ -17,6 +17,7 @@ import type {
 } from '@itcase/types-ui'
 
 import type { ComponentGalleryArgs } from '../../storybook'
+import type { IconProps } from '../Icon/Icon.interface'
 import type { selectSizePropsType } from './styles/selectSize'
 
 interface SelectOptionItem {
@@ -28,8 +29,8 @@ interface SelectAppearanceProps {
   borderColor?: BorderColorProps
   fill?: FillProps
   fillDisabled?: FillProps
-  iconAppearance?: string
-  iconCloseAppearance?: string
+  iconAppearance?: IconProps['appearance']
+  iconCloseAppearance?: IconProps['appearance']
   menuFill?: FillProps
   optionFill?: FillProps
   optionFillActive?: FillProps
@@ -45,7 +46,7 @@ interface SelectAppearanceProps {
 interface SelectProps extends SelectAppearanceProps {
   isDisabled?: boolean
   onValueChange?: (value: string) => void
-  appearance?: SelectAppearanceKey
+  appearance?: CompositeAppearanceStateDefault
   menu?: SelectMenu
   optionsList?: SelectOptionItem[]
   placeholder?: string
@@ -54,7 +55,6 @@ interface SelectProps extends SelectAppearanceProps {
 }
 
 type SelectMenu = 'bottom' | 'overlay' | 'screen'
-type SelectAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
 type SelectConfig = AppearanceConfig<AppearanceKeysState, SelectAppearanceProps>
 type SelectAppearance = SelectConfig['appearance']
 type SelectAppearanceStyle = AppearanceRecord<
@@ -72,6 +72,7 @@ type SelectAppearanceSize = AppearancePartialRecord<
   SelectAppearanceProps,
   'size' | 'textSize'
 >
+type SelectAppearanceKey = NonNullable<SelectProps['appearance']>
 
 type SelectGalleryStory = ComponentGalleryArgs & {
   placeholder?: string

package/src/components/Switch/Switch.interface.ts

@@ -33,14 +33,6 @@ interface SwitchAppearanceProps {
   titleTextSize?: TextSizeProps
 }
 
-type SwitchAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
-type SwitchConfig = AppearanceConfig<AppearanceKeysState, SwitchAppearanceProps>
-type SwitchAppearance = SwitchConfig['appearance']
-type SwitchAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  SwitchAppearanceProps,
-  'borderColor' | 'fill'
->
 type SwitchAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   SwitchAppearanceProps,
@@ -53,8 +45,7 @@ interface SwitchProps extends SwitchAppearanceProps {
   onChange?: (isActive: boolean) => void
   onPress?: (event: GestureResponderEvent) => void
   align?: switchAlignPropsType
-  appearance?: SwitchAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   dataTestId?: string
   defaultIsActive?: boolean
   desc?: string
@@ -63,6 +54,15 @@ interface SwitchProps extends SwitchAppearanceProps {
   width?: WidthProps
 }
 
+type SwitchConfig = AppearanceConfig<AppearanceKeysState, SwitchAppearanceProps>
+type SwitchAppearance = SwitchConfig['appearance']
+type SwitchAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  SwitchAppearanceProps,
+  'borderColor' | 'fill'
+>
+type SwitchAppearanceKey = NonNullable<SwitchProps['appearance']>
+
 type SwitchGalleryStory = ComponentGalleryArgs &
   Pick<SwitchProps, 'desc' | 'isActive' | 'isDisabled' | 'title'>
 

package/src/components/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useState } from 'react'
 import {
   Animated,
   Pressable,
@@ -10,7 +10,6 @@ import {
   useAppearanceConfig,
   useDevicePropsGenerator,
 } from '@itcase/ui-core/hooks'
-import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
 
 import { tokens } from '../../styles/tokens'
 import { Text } from '../Text'
@@ -39,7 +38,6 @@ function Switch(props: SwitchProps) {
     fillToggle,
     title,
     desc,
-    appearanceStyle,
     defaultIsActive = false,
     style,
     isActive: isActiveProp,
@@ -70,23 +68,8 @@ function Switch(props: SwitchProps) {
     [isActive, isControlled, isDisabled, onChange, onPress],
   )
 
-  const resolvedAppearance = useMemo(() => {
-    const appearanceTokens = appearance.split(' ')
-    const isCompositeAppearance = appearanceTokens.length > 1
-
-    let result = isCompositeAppearance
-      ? appearance
-      : mergeAppearanceKeys(appearance, appearanceStyle || 'solid')
-
-    if (!isCompositeAppearance && size) {
-      result = mergeAppearanceKeys(result, `size${size.toUpperCase()}`)
-    }
-
-    return result
-  }, [appearance, appearanceStyle, size])
-
   const appearanceConfig = useAppearanceConfig(
-    resolvedAppearance,
+    appearance,
     switchConfig,
     isDisabled,
   )

package/src/components/Textarea/Textarea.interface.ts

@@ -33,21 +33,6 @@ interface TextareaAppearanceProps {
   width?: WidthProps
 }
 
-type TextareaAppearanceKey =
-  AppearanceKeysState | CompositeAppearanceStateDefault
-type TextareaConfig = AppearanceConfig<
-  AppearanceKeysState,
-  TextareaAppearanceProps
->
-type TextareaAppearance = TextareaConfig['appearance']
-type TextareaAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  TextareaAppearanceProps,
-  'borderColor' | 'fill'
->
-type TextareaAppearanceShape = Partial<
-  Record<AppearanceShapeKey, Partial<Pick<TextareaAppearanceProps, 'shape'>>>
->
 type TextareaAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   TextareaAppearanceProps,
@@ -61,8 +46,7 @@ interface TextareaProps extends TextareaAppearanceProps {
   onBlur?: (event: TextInputFocusEvent) => void
   onChangeText?: (text: string) => void
   onFocus?: (event: TextInputFocusEvent) => void
-  appearance?: TextareaAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   maxLength?: number
   minHeight?: number
   placeholder?: string
@@ -71,6 +55,21 @@ interface TextareaProps extends TextareaAppearanceProps {
   value?: string
 }
 
+type TextareaConfig = AppearanceConfig<
+  AppearanceKeysState,
+  TextareaAppearanceProps
+>
+type TextareaAppearance = TextareaConfig['appearance']
+type TextareaAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  TextareaAppearanceProps,
+  'borderColor' | 'fill'
+>
+type TextareaAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<TextareaAppearanceProps, 'shape'>>>
+>
+type TextareaAppearanceKey = NonNullable<TextareaProps['appearance']>
+
 export type {
   TextareaAppearance,
   TextareaAppearanceKey,

package/src/components/Textarea/Textarea.tsx

@@ -30,7 +30,6 @@ function Textarea(props: TextareaProps) {
     appearance = 'defaultPrimary sizeM solid rounded',
     minHeight,
     maxLength,
-    appearanceStyle,
     placeholder,
     rows,
     style,
@@ -44,19 +43,12 @@ function Textarea(props: TextareaProps) {
   } = props
 
   const resolvedAppearance = useMemo(() => {
-    const appearanceTokens = appearance.split(' ')
-    const isCompositeAppearance = appearanceTokens.length > 1
-
-    let result = isCompositeAppearance
-      ? appearance
-      : mergeAppearanceKeys(appearance, appearanceStyle || 'solid')
-
     if (isError) {
-      result = mergeAppearanceKeys(result, 'errorPrimary')
+      return mergeAppearanceKeys(appearance, 'errorPrimary')
     }
 
-    return result
-  }, [appearance, appearanceStyle, isError])
+    return appearance
+  }, [appearance, isError])
 
   const appearanceConfig = useAppearanceConfig(
     resolvedAppearance,

package/src/components/Tile/Tile.interface.ts

@@ -40,7 +40,7 @@ interface TileAppearanceProps {
   descTextSize?: TextSizeProps
   direction?: DirectionProps
   fill?: FillProps
-  iconAppearance?: string
+  iconAppearance?: IconProps['appearance']
   iconFill?: IconProps['fill']
   iconFillIcon?: IconProps['iconFill']
   iconShape?: IconProps['shape']
@@ -69,13 +69,12 @@ type TileAppearanceSize = AppearancePartialRecord<
   TileAppearanceProps,
   'descTextSize' | 'iconSize' | 'size' | 'titleTextSize'
 >
-type TileAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
 
 interface TileProps extends TileAppearanceProps {
   onPress?: (event: GestureResponderEvent) => void
   onPressIcon?: (event: GestureResponderEvent) => void
   after?: ReactNode
-  appearance?: TileAppearanceKey
+  appearance?: CompositeAppearanceKeys
   badgeValue?: BadgeProps['text']
   before?: ReactNode
   children?: ReactNode
@@ -87,6 +86,8 @@ interface TileProps extends TileAppearanceProps {
   title?: string
 }
 
+type TileAppearanceKey = NonNullable<TileProps['appearance']>
+
 type TileGalleryStory = ComponentGalleryArgs &
   Pick<TileProps, 'badgeValue' | 'desc' | 'title'> & {
     showIcon?: boolean

package/src/components/Tile/stories/TileSwap.stories.tsx

@@ -21,11 +21,9 @@ export const Before: Story = {
   args: {
     before: (
       <Button
-        appearance="accentPrimary"
+        appearance="accentPrimary sizeXL solid rounded"
         width="fill"
-        size="xl"
         label="Label"
-        appearanceStyle="solid"
       />
     ),
   },
@@ -35,11 +33,9 @@ export const Children: Story = {
   args: {
     children: (
       <Button
-        appearance="accentPrimary"
+        appearance="accentPrimary sizeXL solid rounded"
         width="fill"
-        size="xl"
         label="Label"
-        appearanceStyle="solid"
       />
     ),
   },
@@ -49,11 +45,9 @@ export const After: Story = {
   args: {
     after: (
       <Button
-        appearance="accentPrimary"
+        appearance="accentPrimary sizeXL solid rounded"
         width="fill"
-        size="xl"
         label="Label"
-        appearanceStyle="solid"
       />
     ),
   },

package/src/components/Tooltip/Tooltip.interface.ts

@@ -40,7 +40,7 @@ interface TooltipAppearanceProps {
 interface TooltipProps extends TooltipAppearanceProps {
   isVisible?: boolean
   after?: ReactNode
-  appearance?: TooltipAppearanceKey
+  appearance?: CompositeAppearanceStateDefault
   before?: ReactNode
   children?: ReactNode
   position?: TooltipPosition
@@ -49,8 +49,6 @@ interface TooltipProps extends TooltipAppearanceProps {
   title?: string
 }
 
-type TooltipAppearanceKey =
-  AppearanceKeysState | CompositeAppearanceStateDefault
 type TooltipConfig = AppearanceConfig<
   AppearanceKeysState,
   TooltipAppearanceProps
@@ -71,6 +69,7 @@ type TooltipAppearanceSize = AppearancePartialRecord<
   TooltipAppearanceProps,
   'size' | 'textSize' | 'titleSize'
 >
+type TooltipAppearanceKey = NonNullable<TooltipProps['appearance']>
 
 type TooltipGalleryStory = ComponentGalleryArgs &
   Pick<TooltipProps, 'isVisible' | 'text' | 'title'>

package/src/components/Warning/Warning.interface.ts

@@ -19,7 +19,7 @@ import type {
   TextWeightProps,
 } from '@itcase/types-ui'
 
-import type { SvgIconComponent } from '../Icon/Icon.interface'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
 import type { iconSizePropsType } from '../Icon/styles/iconSize'
 import type { warningSizePropsType } from './styles/warningSize'
 
@@ -29,10 +29,10 @@ interface WarningAppearanceProps {
   descriptionTextSize?: TextSizeProps
   fill?: FillProps
   iconAfter?: SvgIconComponent
-  iconAfterAppearance?: string
+  iconAfterAppearance?: IconProps['appearance']
   iconAfterFillIcon?: ItemFillActiveProps
   iconBefore?: SvgIconComponent
-  iconBeforeAppearance?: string
+  iconBeforeAppearance?: IconProps['appearance']
   iconBeforeFillIcon?: ItemFillActiveProps
   iconSize?: iconSizePropsType
   labelTextColor?: TextColorProps