From 761b58a308fce8932d070af57fd9166067f34a7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Mon, 13 Apr 2026 09:29:49 +0500 Subject: [PATCH 01/13] =?UTF-8?q?perf:=20=D1=83=D1=81=D0=BA=D0=BE=D1=80?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20eslint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Добавил кеширование и игнорирование вспомогательных папок --- eslint.config.ts | 14 ++++++++++++++ package.json | 4 ++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/eslint.config.ts b/eslint.config.ts index 509fd71..8b9966f 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -7,7 +7,21 @@ export default defineConfig([ { files: ['configs/eslint/**/*'], rules: { 'max-lines': 'off' } }, { ignores: [ + 'node_modules/**/*', + '.expo/**/*', + '.git/**/*', + '.idea/**/*', 'dist/**/*', + 'build/**/*', + 'coverage/**/*', + '**/*.min.js', + '.gradle/**/*', + 'android/**/*', + 'ios/**/*', + '.yarn/**/*', + '.vscode/**/*', + '.jest/**/*', + '.gemini/**/*', '.storybook/**/*', 'configs/cz-conventional-mobile/**/*', ], diff --git a/package.json b/package.json index 9f0494e..7227774 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "storybook-generate": "sb-rn-get-stories --config-path .storybook && sed -i -e 's/export const view = global.view/export const view: ReturnType = global.view/' .storybook/storybook.requires.ts && prettier .storybook --write", "doctor": "expo-doctor", "check": "expo install --check", - "lint:check": "eslint .", - "lint:fix": "eslint --fix .", + "lint:check": "eslint --cache .", + "lint:fix": "eslint --fix --cache .", "prettier:check": "prettier . --check", "prettier:fix": "prettier . --write", "prettier:watch": "onchange . -- prettier --write --ignore-unknown \"{{changed}}\"", From 775f46a2220f6a3b1d7a4c7c329e471c650537ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Mon, 13 Apr 2026 09:31:47 +0500 Subject: [PATCH 02/13] =?UTF-8?q?perf:=20=D1=83=D1=81=D0=BA=D0=BE=D1=80?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20jest?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Поднял количество maxWorker до максимума --- jest.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest.config.ts b/jest.config.ts index b5a706d..f070054 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -14,7 +14,7 @@ const config: Config.InitialOptions = { coverageReporters: ['text', 'text-summary'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], testRunner: 'jest-circus', - maxWorkers: 4, + maxWorkers: '100%', rootDir: '.', moduleNameMapper: { '\\.svg': '/__mocks__/svgMock.js' }, setupFiles: ['/jest.setup.ts'], From adf7e7a20f4dcd1a6daac19d2639a2d7d164538a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Mon, 13 Apr 2026 14:46:18 +0500 Subject: [PATCH 03/13] =?UTF-8?q?test:=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D1=81=D0=BD=D0=B0=D0=BF=D1=88=D0=BE=D1=82=D1=8B?= =?UTF-8?q?,=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D1=8B=D0=B5=20=D0=BC=D0=BE=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jest.d.ts | 6 +++ jest.setup.ts | 47 +++++++++++++++++++ .../__snapshots__/Accordion.test.tsx.snap | 4 +- .../__snapshots__/DialogHeader.test.tsx.snap | 12 ++--- .../MenuItemTemplate.test.tsx.snap | 2 +- .../__snapshots__/Message.test.tsx.snap | 6 +-- .../__snapshots__/Rating.test.tsx.snap | 16 +++---- .../__snapshots__/RatingClear.test.tsx.snap | 16 +++---- .../__snapshots__/RatingItem.test.tsx.snap | 16 +++---- .../__snapshots__/Service.test.tsx.snap | 12 ++--- 10 files changed, 95 insertions(+), 42 deletions(-) diff --git a/jest.d.ts b/jest.d.ts index a86a404..d41f79d 100644 --- a/jest.d.ts +++ b/jest.d.ts @@ -3,3 +3,9 @@ type PropertyCombinations = { [K in keyof T]: Array } declare let generatePropsCombinations: ( properties: PropertyCombinations ) => T[] + +declare module '@react-native/normalize-colors' { + const normalizeColors: (color: string | number) => number | null + + export default normalizeColors +} diff --git a/jest.setup.ts b/jest.setup.ts index 5fbb78c..28a57c3 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -1,9 +1,56 @@ import 'jest-extended' import 'react-native-gesture-handler/jestSetup' import { setUpTests } from 'react-native-reanimated' +import 'react-native-unistyles/mocks' setUpTests() +type ThemeName = 'light' | 'dark' + +interface MockedUnistylesModule { + StyleSheet: { create: (...args: unknown[]) => unknown } + UnistylesRuntime: { + miniRuntime: unknown + setTheme: jest.Mock + themeName: ThemeName | undefined + } + useUnistyles: jest.Mock + withUnistyles: jest.Mock +} + +const { darkTheme, lightTheme } = require('./src/theme') + +const unistyles = jest.requireMock( + 'react-native-unistyles' +) as MockedUnistylesModule + +const getTheme = (themeName: ThemeName | undefined) => + themeName === 'dark' ? darkTheme : lightTheme + +const originalStyleSheetCreate = unistyles.StyleSheet.create +const runtime = unistyles.UnistylesRuntime + +runtime.themeName = 'light' +runtime.setTheme = jest.fn((themeName: ThemeName) => { + runtime.themeName = themeName +}) + +unistyles.useUnistyles = jest.fn(() => ({ + theme: getTheme(runtime.themeName), + rt: runtime, +})) + +unistyles.StyleSheet.create = jest.fn( + (stylesheet: Parameters[0]) => + typeof stylesheet === 'function' + ? originalStyleSheetCreate(() => + stylesheet(getTheme(runtime.themeName), runtime.miniRuntime) + ) + : originalStyleSheetCreate(stylesheet) +) + +unistyles.withUnistyles = jest.fn((Component: T) => Component) + generatePropsCombinations = (properties: PropertyCombinations): T[] => { const keys = Object.keys(properties) as Array diff --git a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index 163abe4..f17b7d8 100644 --- a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +++ b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap @@ -344,7 +344,7 @@ exports[`Accordion Header elements maximal 1`] = ` strokeWidth={2} > Date: Mon, 13 Apr 2026 14:47:57 +0500 Subject: [PATCH 04/13] =?UTF-8?q?chore:=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20eslint/prettier=20=D0=BA=D0=BE=D0=BD?= =?UTF-8?q?=D1=84=D0=B8=D0=B3=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierignore | 6 +++++- eslint.config.ts | 5 +++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/.prettierignore b/.prettierignore index 7207909..b109670 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,8 @@ ios/Pods +ios +.github/workflows .yarn android/app/.cxx -CHANGELOG.md \ No newline at end of file +android/app/build +android/build +CHANGELOG.md diff --git a/eslint.config.ts b/eslint.config.ts index 8b9966f..063ecab 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -5,6 +5,11 @@ import { MobileConfig } from './configs/eslint' export default defineConfig([ ...MobileConfig, { files: ['configs/eslint/**/*'], rules: { 'max-lines': 'off' } }, + // Временное решение до миграции компонентов + { + files: ['src/components/**/*.{ts,tsx}'], + rules: { '@typescript-eslint/no-deprecated': 'off' }, + }, { ignores: [ 'node_modules/**/*', From ba3279ddd91abc09f303744521dee882cf174bd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Mon, 13 Apr 2026 15:02:41 +0500 Subject: [PATCH 05/13] =?UTF-8?q?feat(unistyles):=20=D0=BC=D0=B8=D0=B3?= =?UTF-8?q?=D1=80=D0=B0=D1=86=D0=B8=D1=8F=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5?= =?UTF-8?q?=D0=B9=20=D0=BD=D0=B0=20unistyles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- MIGRATION.md | 79 +++++++++++++++++++++ package.json | 4 +- src/hooks/__tests__/useChangeTheme.test.tsx | 50 ++++++++----- src/hooks/__tests__/useTheme.test.tsx | 34 ++++++--- src/hooks/useChangeTheme.ts | 20 +++++- src/hooks/useFonts.ts | 17 +++-- src/hooks/useTheme.ts | 17 +++-- src/index.ts | 14 +++- src/theme/ThemeContext.tsx | 55 -------------- src/theme/darkTheme.ts | 1 + src/theme/index.ts | 21 +++++- src/theme/lightTheme.ts | 1 + src/theme/types.ts | 1 + src/utils/makeStyles.ts | 49 +++++-------- yarn.lock | 63 +++++++++++++--- 15 files changed, 283 insertions(+), 143 deletions(-) create mode 100644 MIGRATION.md delete mode 100644 src/theme/ThemeContext.tsx diff --git a/MIGRATION.md b/MIGRATION.md new file mode 100644 index 0000000..bf31224 --- /dev/null +++ b/MIGRATION.md @@ -0,0 +1,79 @@ +# Миграция на Unistyles V3 + +Стили переведены на `react-native-unistyles`. Удален собственный `React Context` +и провайдер. + +## Изменения + +### `ThemeContextProvider` — удалён + +Темы регистрируются автоматически. Обёртка больше не нужна. + +### `useFonts` — deprecated + +Используйте `useUnistyles`: + +```tsx +import { useUnistyles } from '@cdek-it/react-native-ui-kit' + +const { theme } = useUnistyles() +theme.fonts +``` + +Или прямо в стилях через `StyleSheet.create(...)`. + +### `makeStyles` — deprecated + +Используйте `StyleSheet.create(...)`: + +```tsx +import { StyleSheet } from '@cdek-it/react-native-ui-kit' + +const styles = StyleSheet.create((theme) => ({ + container: { backgroundColor: theme.Button.Brand.buttonBg }, +})) +``` + +`makeStyles` использует `useUnistyles()`, что вызывает React-ререндеры при смене +темы. `StyleSheet.create(...)` — нативный путь, обновляет стили **без** +ререндеров. + +SDK реэкспортирует `StyleSheet`, `useUnistyles`, `UnistylesRuntime` и +`withUnistyles`, поэтому потребителям не нужно импортировать +`react-native-unistyles` напрямую. + +### `useTheme()` — deprecated + +```tsx +import { UnistylesRuntime, useUnistyles } from '@cdek-it/react-native-ui-kit' + +const themeName = UnistylesRuntime.themeName // 'light' | 'dark' +``` + +Для реактивного поведения используйте `useUnistyles()`: + +```tsx +const { rt } = useUnistyles() +rt.themeName +``` + +### `useChangeTheme()` — deprecated + +```tsx +import { UnistylesRuntime } from '@cdek-it/react-native-ui-kit' + +UnistylesRuntime.setTheme('dark') +``` + +## Babel конфигурация + +Для получения нативного обновления стилей без React-ререндеров: + +1. Используйте `StyleSheet.create(...)`. +2. Добавьте `autoProcessPaths` в Babel-конфиг вашего приложения. + +Документация: + +- [useUnistyles](https://www.unistyl.es/v3/references/use-unistyles/) +- [StyleSheet](https://www.unistyl.es/v3/references/stylesheet/) +- [Babel plugin](https://www.unistyl.es/v3/other/babel-plugin/) diff --git a/package.json b/package.json index 7227774..af6da0b 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,8 @@ "pod-install": "bundle exec pod install --project-directory=ios" }, "dependencies": { - "@tabler/icons-react-native": "^3.36.0" + "@tabler/icons-react-native": "3.36.1", + "react-native-unistyles": "3.2.3" }, "devDependencies": { "@babel/core": "7.28.5", @@ -106,6 +107,7 @@ "react-native": "0.81.5", "react-native-advanced-input-mask": "1.4.6", "react-native-gesture-handler": "2.29.1", + "react-native-nitro-modules": "0.35.2", "react-native-reanimated": "4.1.1", "react-native-safe-area-context": "5.6.2", "react-native-svg": "15.15.1", diff --git a/src/hooks/__tests__/useChangeTheme.test.tsx b/src/hooks/__tests__/useChangeTheme.test.tsx index f1e5c2b..8f24423 100644 --- a/src/hooks/__tests__/useChangeTheme.test.tsx +++ b/src/hooks/__tests__/useChangeTheme.test.tsx @@ -1,29 +1,41 @@ -import { renderHook } from '@testing-library/react-native' +/* eslint-disable @typescript-eslint/no-deprecated -- Проверяем deprecated API на обратную совместимость. */ +import { act, renderHook } from '@testing-library/react-native' +import { UnistylesRuntime } from 'react-native-unistyles' -import { ThemeContext, ThemeVariant } from '../../theme' +import { ThemeVariant } from '../../theme' import { useChangeTheme } from '../useChangeTheme' describe('useChangeTheme', () => { - test('returns correct function', () => { - const mockedChangeTheme = jest.fn() - const { result } = renderHook(() => useChangeTheme(), { - wrapper: ({ children }) => ( - - {children} - - ), + beforeEach(() => { + jest.clearAllMocks() + }) + + test('вызывает UnistylesRuntime.setTheme с "light" для ThemeVariant.Light', () => { + const { result } = renderHook(() => useChangeTheme()) + + act(() => { + result.current(ThemeVariant.Light) + }) + + expect(UnistylesRuntime.setTheme).toHaveBeenCalledWith('light') + }) + + test('вызывает UnistylesRuntime.setTheme с "dark" для ThemeVariant.Dark', () => { + const { result } = renderHook(() => useChangeTheme()) + + act(() => { + result.current(ThemeVariant.Dark) }) - expect(result.current).toStrictEqual(expect.any(Function)) + expect(UnistylesRuntime.setTheme).toHaveBeenCalledWith('dark') + }) + + test('возвращает стабильную ссылку на callback', () => { + const { result, rerender } = renderHook(() => useChangeTheme()) + const first = result.current - result.current?.(ThemeVariant.Dark) + rerender({}) - expect(mockedChangeTheme).toHaveBeenCalledWith(ThemeVariant.Dark) + expect(result.current).toBe(first) }) }) diff --git a/src/hooks/__tests__/useTheme.test.tsx b/src/hooks/__tests__/useTheme.test.tsx index bcb3fcf..c4cd598 100644 --- a/src/hooks/__tests__/useTheme.test.tsx +++ b/src/hooks/__tests__/useTheme.test.tsx @@ -1,16 +1,32 @@ +/* eslint-disable @typescript-eslint/no-deprecated -- Проверяем deprecated API на обратную совместимость. */ import { renderHook } from '@testing-library/react-native' +import { UnistylesRuntime } from 'react-native-unistyles' -import { ThemeContextProvider, ThemeVariant } from '../../theme' +import { ThemeVariant } from '../../theme' import { useTheme } from '../useTheme' +const setThemeName = (themeName: 'light' | 'dark') => { + Object.assign(UnistylesRuntime, { themeName }) +} + describe('useTheme', () => { - test('returns correct function', () => { - const { result } = renderHook(() => useTheme(), { - wrapper: ({ children }) => ( - {children} - ), - }) - - expect(Object.values(ThemeVariant)).toContain(result.current) + afterEach(() => { + setThemeName('light') + }) + + test('возвращает ThemeVariant.Light, когда активна светлая тема', () => { + setThemeName('light') + + const { result } = renderHook(() => useTheme()) + + expect(result.current).toBe(ThemeVariant.Light) + }) + + test('возвращает ThemeVariant.Dark, когда активна тёмная тема', () => { + setThemeName('dark') + + const { result } = renderHook(() => useTheme()) + + expect(result.current).toBe(ThemeVariant.Dark) }) }) diff --git a/src/hooks/useChangeTheme.ts b/src/hooks/useChangeTheme.ts index 896e21f..f0f889d 100644 --- a/src/hooks/useChangeTheme.ts +++ b/src/hooks/useChangeTheme.ts @@ -1,7 +1,21 @@ -import { useContext } from 'react' +import { useCallback } from 'react' +import { UnistylesRuntime } from 'react-native-unistyles' -import { ThemeContext } from '../theme' +import { ThemeVariant } from '../theme' +const THEME_MAP: Record = { + [ThemeVariant.Light]: 'light', + [ThemeVariant.Dark]: 'dark', +} + +/** + * Возвращает callback для переключения темы. + * + * @deprecated Используйте `UnistylesRuntime.setTheme` из SDK напрямую. + * Будет удалён в следующей minor версии. + */ export const useChangeTheme = () => { - return useContext(ThemeContext).changeTheme + return useCallback((theme: ThemeVariant) => { + UnistylesRuntime.setTheme(THEME_MAP[theme]) + }, []) } diff --git a/src/hooks/useFonts.ts b/src/hooks/useFonts.ts index 9bd519d..5c70ec8 100644 --- a/src/hooks/useFonts.ts +++ b/src/hooks/useFonts.ts @@ -1,7 +1,16 @@ -import { useContext } from 'react' +import { useUnistyles } from 'react-native-unistyles' -import { ThemeContext } from '../theme' +import type { FontsConfig } from '../theme' -export const useFonts = () => { - return useContext(ThemeContext).fonts +/** + * Возвращает конфигурацию шрифтов. + * + * @deprecated Используйте `useUnistyles().theme.fonts` или `StyleSheet.create(...)` + * из SDK. + * Будет удалён в следующей minor версии. + */ +export const useFonts = (): FontsConfig => { + const { theme } = useUnistyles() + + return theme.fonts } diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts index 5f9057a..3e8b5ab 100644 --- a/src/hooks/useTheme.ts +++ b/src/hooks/useTheme.ts @@ -1,7 +1,14 @@ -import { useContext } from 'react' +import { UnistylesRuntime } from 'react-native-unistyles' -import { ThemeContext } from '../theme' +import { ThemeVariant } from '../theme' -export const useTheme = () => { - return useContext(ThemeContext).theme -} +/** + * Возвращает текущую тему. + * + * @deprecated Используйте `UnistylesRuntime.themeName` из SDK. + * + * Для реактивного поведения: `useUnistyles().rt.themeName`. + * Будет удалён в следующей minor версии. + */ +export const useTheme = (): ThemeVariant => + UnistylesRuntime.themeName === 'dark' ? ThemeVariant.Dark : ThemeVariant.Light diff --git a/src/index.ts b/src/index.ts index 4b9cc53..64e8feb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,12 +1,22 @@ export * from './components' export { useChangeTheme } from './hooks/useChangeTheme' export { - ThemeContext, - ThemeContextProvider, ThemeVariant, darkTheme, lightTheme, + type ThemeType, + type FontsConfig, + type FontsConfigType, } from './theme' +export { + StyleSheet, + UnistylesRuntime, + useUnistyles, + withUnistyles, +} from 'react-native-unistyles' +/* eslint-disable @typescript-eslint/no-deprecated -- Deprecated API сохраняем в публичном интерфейсе для обратной совместимости. */ +export { useFonts } from './hooks/useFonts' export { makeStyles } from './utils/makeStyles' export { useTheme } from './hooks/useTheme' +/* eslint-enable @typescript-eslint/no-deprecated */ export { SvgUniversal, type SvgSource } from './utils/SvgUniversal' diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx deleted file mode 100644 index e62e96c..0000000 --- a/src/theme/ThemeContext.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { - type ReactNode, - createContext, - useCallback, - useMemo, - useState, -} from 'react' - -import { SkeletonContextProvider } from '../utils/SkeletonContext' - -import { ThemeVariant, type FontsConfig } from './types' - -interface ThemeContextType { - theme: ThemeVariant - fonts: FontsConfig - changeTheme: (theme: ThemeVariant) => void -} - -export interface ThemeContextProviderProps { - readonly initialTheme?: ThemeVariant - readonly fonts?: FontsConfig - readonly children: ReactNode -} - -const defaultThemeContext: ThemeContextType = { - theme: ThemeVariant.Light, - fonts: { primary: 'TT Fellows', secondary: 'PT Sans' }, - changeTheme: () => { - /* do nothing */ - }, -} -export const ThemeContext = createContext(defaultThemeContext) - -export const ThemeContextProvider = ({ - children, - initialTheme = defaultThemeContext.theme, - fonts = defaultThemeContext.fonts, -}: ThemeContextProviderProps) => { - const [theme, setTheme] = useState(initialTheme) - - const changeTheme = useCallback((nextTheme: ThemeVariant) => { - setTheme(nextTheme) - }, []) - - const contextValue = useMemo( - () => ({ theme, fonts, changeTheme }), - [theme, fonts, changeTheme] - ) - - return ( - - {children} - - ) -} diff --git a/src/theme/darkTheme.ts b/src/theme/darkTheme.ts index bf0edf2..46a628d 100644 --- a/src/theme/darkTheme.ts +++ b/src/theme/darkTheme.ts @@ -8,4 +8,5 @@ import type { ThemeType } from './types' export const darkTheme: ThemeType = { theme: { ...darkThemeAssets, InputSize, ModalSize, custom: customDark }, ...commonTheme, + fonts: { primary: 'TT Fellows', secondary: 'PT Sans' }, } diff --git a/src/theme/index.ts b/src/theme/index.ts index b5184e0..2420961 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,9 +1,24 @@ -export { darkTheme } from './darkTheme' -export { lightTheme } from './lightTheme' -export { ThemeContextProvider, ThemeContext } from './ThemeContext' +import { StyleSheet } from 'react-native-unistyles' + +import { darkTheme } from './darkTheme' +import { lightTheme } from './lightTheme' + +StyleSheet.configure({ + settings: { initialTheme: 'light' }, + themes: { light: lightTheme, dark: darkTheme }, +}) + +export { darkTheme, lightTheme } export { type ThemeType, ThemeVariant, type FontsConfigType, type FontsConfig, } from './types' + +declare module 'react-native-unistyles' { + export interface UnistylesThemes { + light: typeof lightTheme + dark: typeof darkTheme + } +} diff --git a/src/theme/lightTheme.ts b/src/theme/lightTheme.ts index 68d86d2..eecf593 100644 --- a/src/theme/lightTheme.ts +++ b/src/theme/lightTheme.ts @@ -8,4 +8,5 @@ import type { ThemeType } from './types' export const lightTheme: ThemeType = { theme: { ...lightThemeAssets, InputSize, ModalSize, custom: customLight }, ...commonTheme, + fonts: { primary: 'TT Fellows', secondary: 'PT Sans' }, } diff --git a/src/theme/types.ts b/src/theme/types.ts index 1545a96..250836a 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -29,6 +29,7 @@ export interface ThemeType { typography: typeof typography custom: typeof customCommon shadow: typeof shadow + fonts: FontsConfig } export enum ThemeVariant { diff --git a/src/utils/makeStyles.ts b/src/utils/makeStyles.ts index 64fc814..cf9ac78 100644 --- a/src/utils/makeStyles.ts +++ b/src/utils/makeStyles.ts @@ -1,38 +1,23 @@ import { useMemo } from 'react' import type { ImageStyle, TextStyle, ViewStyle } from 'react-native' - -import { useFonts } from '../hooks/useFonts' -import { useTheme } from '../hooks/useTheme' -import { - type FontsConfigType, - type ThemeType, - darkTheme, - lightTheme, - ThemeVariant, -} from '../theme' - +import { useUnistyles } from 'react-native-unistyles' + +import type { ThemeType } from '../theme' + +/** + * @deprecated Используйте `StyleSheet.create(...)` из SDK. + * + * `makeStyles` использует `useUnistyles()`, что вызывает React-ререндеры при смене + * темы. `StyleSheet.create(...)` — нативный путь, обновляет стили **без** ререндеров. + * + * Будет удалён в следующей minor версии. + */ export const makeStyles = (createStyles: CreateStyles): (() => T) => - () => { - const fonts = useFonts() - const theme = useTheme() - const themeValues = useMemo(() => { - switch (theme) { - case ThemeVariant.Light: - return lightTheme - - case ThemeVariant.Dark: - return darkTheme - - default: - return lightTheme - } - }, [theme]) - - return useMemo( - () => createStyles({ ...themeValues, fonts }) as T, - [fonts, themeValues] - ) + (): T => { + const { theme } = useUnistyles() + + return useMemo(() => createStyles(theme as ThemeType) as T, [theme]) } type StylesItem = ViewStyle | ImageStyle | TextStyle @@ -40,7 +25,7 @@ type StylesItem = ViewStyle | ImageStyle | TextStyle type StylesObject = Record type CreateStyles = ( - theme: ThemeType & FontsConfigType + theme: ThemeType ) => CheckInvalidProps extends never ? T : 'TypeError. Invalid key of style property was used.' diff --git a/yarn.lock b/yarn.lock index 5b49e04..4bb2e48 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2682,6 +2682,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:7.29.0": + version: 7.29.0 + resolution: "@babel/types@npm:7.29.0" + dependencies: + "@babel/helper-string-parser": "npm:^7.27.1" + "@babel/helper-validator-identifier": "npm:^7.28.5" + checksum: 10/bfc2b211210f3894dcd7e6a33b2d1c32c93495dc1e36b547376aa33441abe551ab4bc1640d4154ee2acd8e46d3bbc925c7224caae02fcaf0e6a771e97fccc661 + languageName: node + linkType: hard + "@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.25.7, @babel/types@npm:^7.25.8, @babel/types@npm:^7.3.3": version: 7.25.8 resolution: "@babel/types@npm:7.25.8" @@ -2778,7 +2788,7 @@ __metadata: "@storybook/preview-api": "npm:8.6.14" "@storybook/react-native": "npm:10.1.1" "@stylistic/eslint-plugin": "npm:5.6.1" - "@tabler/icons-react-native": "npm:^3.36.0" + "@tabler/icons-react-native": "npm:3.36.1" "@testing-library/react-native": "npm:13.3.3" "@types/jest": "npm:29.5.14" "@types/lodash.map": "npm:4.6.13" @@ -2820,9 +2830,11 @@ __metadata: react-native: "npm:0.81.5" react-native-advanced-input-mask: "npm:1.4.6" react-native-gesture-handler: "npm:2.29.1" + react-native-nitro-modules: "npm:0.35.2" react-native-reanimated: "npm:4.1.1" react-native-safe-area-context: "npm:5.6.2" react-native-svg: "npm:15.15.1" + react-native-unistyles: "npm:3.2.3" react-native-worklets: "npm:0.5.1" release-it: "npm:19.1.0" standard-version: "npm:9.5.0" @@ -5578,21 +5590,21 @@ __metadata: languageName: node linkType: hard -"@tabler/icons-react-native@npm:^3.36.0": - version: 3.36.0 - resolution: "@tabler/icons-react-native@npm:3.36.0" +"@tabler/icons-react-native@npm:3.36.1": + version: 3.36.1 + resolution: "@tabler/icons-react-native@npm:3.36.1" dependencies: - "@tabler/icons": "npm:3.36.0" + "@tabler/icons": "npm:" peerDependencies: react: ">= 16.5.1" - checksum: 10/aa3f9075074b6eedadfa5ebb97f2cfb96fd4eaacab79e8f0615f3247b34537a31c2df7ed53f461af8f69c35b478748f82ffdb60e7afbc79fec4f17a4616f0635 + checksum: 10/34e944ebd0376bdbe5c7e1a845ec19e34423ecbf8390eea1c1ef6b47ace09bbd9831c51b7bbec00e0e96c1468be302f4fe67a001137ad31ee151d3939f2e1dcd languageName: node linkType: hard -"@tabler/icons@npm:3.36.0": - version: 3.36.0 - resolution: "@tabler/icons@npm:3.36.0" - checksum: 10/007ec7ddad617f784a81f792d2bddfc11e76541c011bc50e9ebed9ce5210278076c8688cd73d081ac1c54e42a8bc7437bbcda41638204d43edd069a0c8387516 +"@tabler/icons@npm:": + version: 3.41.1 + resolution: "@tabler/icons@npm:3.41.1" + checksum: 10/9a1af1a659c9e997a37e83acfd408fc32486687107b1a71e8fe03472274490c92c4512a1e62fd68d23e8d2d5f2c57feea2d22245605a07c8eeed67fcc683c544 languageName: node linkType: hard @@ -16113,6 +16125,16 @@ __metadata: languageName: node linkType: hard +"react-native-nitro-modules@npm:0.35.2": + version: 0.35.2 + resolution: "react-native-nitro-modules@npm:0.35.2" + peerDependencies: + react: "*" + react-native: "*" + checksum: 10/22977e5e22c63fb91526c90fa59fcfe5c7f97978c583400f433a1d3ef8ee32fbceb0ad1b009b5bf0d1794e94a11716ad752fd7702c2d67fc808a0256c6e35488 + languageName: node + linkType: hard + "react-native-reanimated@npm:4.1.1": version: 4.1.1 resolution: "react-native-reanimated@npm:4.1.1" @@ -16152,6 +16174,27 @@ __metadata: languageName: node linkType: hard +"react-native-unistyles@npm:3.2.3": + version: 3.2.3 + resolution: "react-native-unistyles@npm:3.2.3" + dependencies: + "@babel/types": "npm:7.29.0" + peerDependencies: + "@react-native/normalize-colors": "*" + react: "*" + react-native: ">=0.76.0" + react-native-edge-to-edge: "*" + react-native-nitro-modules: "*" + react-native-reanimated: "*" + peerDependenciesMeta: + react-native-edge-to-edge: + optional: true + react-native-reanimated: + optional: true + checksum: 10/217875c9993f88bd5b183e2341feff115777872c3ea6dc0aac493f01bcb7cb2f34a3f4dabd1f0ba613553cad8a42395eda62f448f71e7f8b64fcd9fb262cb99b + languageName: node + linkType: hard + "react-native-url-polyfill@npm:^3.0.0": version: 3.0.0 resolution: "react-native-url-polyfill@npm:3.0.0" From 5ae413bc1e0b1aa5b30c4824567f13210cf9019e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Mon, 13 Apr 2026 15:16:35 +0500 Subject: [PATCH 06/13] fix: eslint --- .../{useChangeTheme.test.tsx => useChangeTheme.test.ts} | 0 src/hooks/__tests__/{useTheme.test.tsx => useTheme.test.ts} | 0 src/index.ts | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) rename src/hooks/__tests__/{useChangeTheme.test.tsx => useChangeTheme.test.ts} (100%) rename src/hooks/__tests__/{useTheme.test.tsx => useTheme.test.ts} (100%) diff --git a/src/hooks/__tests__/useChangeTheme.test.tsx b/src/hooks/__tests__/useChangeTheme.test.ts similarity index 100% rename from src/hooks/__tests__/useChangeTheme.test.tsx rename to src/hooks/__tests__/useChangeTheme.test.ts diff --git a/src/hooks/__tests__/useTheme.test.tsx b/src/hooks/__tests__/useTheme.test.ts similarity index 100% rename from src/hooks/__tests__/useTheme.test.tsx rename to src/hooks/__tests__/useTheme.test.ts diff --git a/src/index.ts b/src/index.ts index 64e8feb..0f3f9a6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,5 @@ export * from './components' +/* eslint-disable @typescript-eslint/no-deprecated -- Deprecated API сохраняем в публичном интерфейсе для обратной совместимости. */ export { useChangeTheme } from './hooks/useChangeTheme' export { ThemeVariant, @@ -14,7 +15,6 @@ export { useUnistyles, withUnistyles, } from 'react-native-unistyles' -/* eslint-disable @typescript-eslint/no-deprecated -- Deprecated API сохраняем в публичном интерфейсе для обратной совместимости. */ export { useFonts } from './hooks/useFonts' export { makeStyles } from './utils/makeStyles' export { useTheme } from './hooks/useTheme' From f59dd08797e1eff2789aeed0583a30daa61ac424 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Mon, 13 Apr 2026 17:52:09 +0500 Subject: [PATCH 07/13] =?UTF-8?q?feat(unistyles):=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B5=D0=B2=D0=BE=D0=B4=20ui=20kit=20=D0=BD=D0=B0=20unistyles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.tsx | 13 +- .storybook/storybook.requires.ts | 49 +- babel.config.js | 16 +- ios/CDEKUI.xcodeproj/project.pbxproj | 8 +- ios/Podfile.lock | 54 + jest.setup.ts | 101 +- package.json | 2 +- src/components/Accordion/Accordion.tsx | 6 +- src/components/Avatar/Avatar.tsx | 7 +- .../__snapshots__/Avatar.test.tsx.snap | 18 +- src/components/Badge/Badge.tsx | 139 +- .../__snapshots__/Badge.test.tsx.snap | 204 +- src/components/Button/BaseButton.tsx | 85 +- src/components/Button/Button.tsx | 16 +- src/components/Button/ButtonBadge.tsx | 104 +- src/components/Button/ButtonSeverity.tsx | 27 +- .../__snapshots__/Button.test.tsx.snap | 39056 +++++++++------- .../__snapshots__/ButtonBadge.test.tsx.snap | 102 +- .../ButtonSeverity.test.tsx.snap | 136 +- src/components/Button/styles/index.ts | 2 - .../Button/styles/useBasicButtonStyles.ts | 108 - .../Button/styles/useDangerButtonStyles.ts | 75 - .../Button/styles/useInfoButtonStyles.ts | 73 - .../Button/styles/useSeverityButtonStyles.ts | 39 - .../Button/styles/useSuccessButtonStyles.ts | 82 - .../Button/styles/useWarningButtonStyles.ts | 82 - src/components/Button/types.ts | 6 + .../Button/utils/ButtonActivityIndicator.tsx | 55 +- .../Button/utils/ButtonContainer.tsx | 532 +- src/components/Button/utils/ButtonIcon.tsx | 183 +- src/components/Button/utils/ButtonLabel.tsx | 174 +- .../Button/utils/ButtonLeftArea.tsx | 30 +- .../Button/utils/ButtonPressedContext.ts | 3 + .../Button/utils/ButtonRightArea.tsx | 30 +- .../Button/utils/ButtonVariantContext.ts | 12 + .../utils/useButtonContainerCallbackStyle.ts | 189 - .../Button/utils/useButtonLabelStyle.ts | 64 - src/components/Button/utils/useIconStyle.ts | 62 - .../Button/utils/useTypeBasedStyle.ts | 12 - src/components/Checkbox/Checkbox.tsx | 95 +- .../__snapshots__/Checkbox.test.tsx.snap | 219 +- .../Checkbox/hooks/usePressableStyles.ts | 110 - src/components/Chip/Chip.tsx | 6 +- src/components/Dialog/DialogComponent.tsx | 5 +- src/components/Dialog/DialogHeader.tsx | 7 +- src/components/Divider/Divider.tsx | 7 +- src/components/Input/InputGroup.tsx | 17 +- src/components/Input/InputGroupAddon.tsx | 6 +- src/components/Input/InputOtp/InputOtp.tsx | 5 +- .../Input/InputOtp/InputOtpItem.tsx | 6 +- .../Input/InputSwitch/InputSwitch.tsx | 11 +- .../__snapshots__/InputSwitch.test.tsx.snap | 16 +- .../InputSwitch/styles/useHandleStyles.ts | 10 +- .../InputSwitch/styles/useSliderStyles.ts | 44 +- .../Input/InputTextBase/useInputStyles.ts | 13 +- src/components/List/Base/ListBase.tsx | 88 +- src/components/MenuItem/MenuItemAccessory.tsx | 6 +- src/components/MenuItem/MenuItemIcon.tsx | 9 +- .../MenuItem/Template/MenuItemTemplate.tsx | 10 +- .../MenuItemTemplate.test.tsx.snap | 60 +- src/components/Message/Message.tsx | 172 +- .../__snapshots__/Message.test.tsx.snap | 331 +- src/components/ProgressBar/ProgressBar.tsx | 6 +- .../ProgressSpinner/ProgressSpinner.tsx | 7 +- src/components/RadioButton/RadioButton.tsx | 223 +- .../__snapshots__/RadioButton.test.tsx.snap | 137 +- src/components/Rating/Rating.tsx | 6 +- src/components/Rating/RatingClear.tsx | 6 +- src/components/Rating/RatingItem.tsx | 6 +- src/components/Rating/RatingItemContainer.tsx | 6 +- src/components/SelectButton/SelectButton.tsx | 5 +- .../SelectButton/SelectButtonItem.tsx | 22 +- src/components/Skeleton/Skeleton.tsx | 5 +- src/components/Slider/Slider.tsx | 11 +- src/components/Tabs/TabItem/TabItem.tsx | 8 +- src/components/Tabs/Tabs.tsx | 6 +- .../__snapshots__/Tabs.test.tsx.snap | 144 +- src/components/Tag/Tag.tsx | 91 +- .../__tests__/__snapshots__/Tag.test.tsx.snap | 168 +- src/components/Timer/Timer.tsx | 5 +- src/components/Timer/TimerFlip.tsx | 5 +- src/components/ToggleButton/ToggleButton.tsx | 255 +- .../__snapshots__/ToggleButton.test.tsx.snap | 351 +- .../ToggleButton/hooks/useIconSize.ts | 31 - .../ToggleButton/hooks/useLabelSize.ts | 24 - .../ToggleButton/hooks/useStateStyles.ts | 117 - src/components/Typography/Anchor.tsx | 10 +- src/components/Typography/Body.tsx | 6 +- src/components/Typography/Caption.tsx | 5 +- src/components/Typography/Service.tsx | 8 +- src/components/Typography/Subtitle.tsx | 20 +- src/components/Typography/Title.tsx | 12 +- src/hooks/__tests__/useChangeTheme.test.ts | 3 +- src/hooks/__tests__/useTheme.test.ts | 3 +- src/hooks/useChangeTheme.ts | 2 +- src/hooks/useFonts.ts | 3 +- src/hooks/useTheme.ts | 3 +- src/index.ts | 3 +- src/theme/index.ts | 2 +- src/utils/index.ts | 6 + src/utils/makeStyles.ts | 3 +- 101 files changed, 24510 insertions(+), 20433 deletions(-) delete mode 100644 src/components/Button/styles/index.ts delete mode 100644 src/components/Button/styles/useBasicButtonStyles.ts delete mode 100644 src/components/Button/styles/useDangerButtonStyles.ts delete mode 100644 src/components/Button/styles/useInfoButtonStyles.ts delete mode 100644 src/components/Button/styles/useSeverityButtonStyles.ts delete mode 100644 src/components/Button/styles/useSuccessButtonStyles.ts delete mode 100644 src/components/Button/styles/useWarningButtonStyles.ts create mode 100644 src/components/Button/utils/ButtonPressedContext.ts create mode 100644 src/components/Button/utils/ButtonVariantContext.ts delete mode 100644 src/components/Button/utils/useButtonContainerCallbackStyle.ts delete mode 100644 src/components/Button/utils/useButtonLabelStyle.ts delete mode 100644 src/components/Button/utils/useIconStyle.ts delete mode 100644 src/components/Button/utils/useTypeBasedStyle.ts delete mode 100644 src/components/Checkbox/hooks/usePressableStyles.ts delete mode 100644 src/components/ToggleButton/hooks/useIconSize.ts delete mode 100644 src/components/ToggleButton/hooks/useLabelSize.ts delete mode 100644 src/components/ToggleButton/hooks/useStateStyles.ts create mode 100644 src/utils/index.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d4317ac..c621cff 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,7 +1,6 @@ import type { Preview } from '@storybook/react' import { makeStyles, - ThemeContextProvider, ThemeVariant, useChangeTheme, } from '../src' @@ -12,13 +11,11 @@ const preview: Preview = { decorators: [ (Story, { args }) => { return ( - - - - - - - + + + + + ) }, ], diff --git a/.storybook/storybook.requires.ts b/.storybook/storybook.requires.ts index 21bd048..00985b4 100644 --- a/.storybook/storybook.requires.ts +++ b/.storybook/storybook.requires.ts @@ -1,47 +1,52 @@ /* do not change this file, it is auto generated by storybook. */ +import { start, updateView, View } from '@storybook/react-native'; -import { start, updateView } 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)?)$/, // @ts-ignore req: require.context( '../src', true, /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/ ), - }, -] + } +]; + declare global { - var view: ReturnType - var STORIES: typeof normalizedStories + var view: View; + var STORIES: typeof normalizedStories; } + const annotations = [ require('./preview'), - require('@storybook/react-native/dist/preview'), - require('@storybook/addon-actions/preview'), -] + require("@storybook/react-native/preview") +]; -global.STORIES = normalizedStories +global.STORIES = normalizedStories; // @ts-ignore -module?.hot?.accept?.() +module?.hot?.accept?.(); + + if (!global.view) { - global.view = start({ annotations, storyEntries: normalizedStories }) + global.view = start({ + annotations, + storyEntries: normalizedStories, + + }); } else { - updateView(global.view, annotations, normalizedStories) + updateView(global.view, annotations, normalizedStories); } -export const view: ReturnType = global.view +export const view: View = global.view; diff --git a/babel.config.js b/babel.config.js index 46fba68..ae8e3b2 100644 --- a/babel.config.js +++ b/babel.config.js @@ -3,6 +3,20 @@ module.exports = (api) => { return { presets: ['babel-preset-expo'], - plugins: ['@babel/plugin-transform-class-static-block'], + plugins: [ + [ + 'react-native-unistyles/plugin', + { + root: 'src', + autoProcessImports: [ + '../utils', + '../../utils', + '../../../utils', + '../../../../utils', + ], + }, + ], + '@babel/plugin-transform-class-static-block', + ], } } diff --git a/ios/CDEKUI.xcodeproj/project.pbxproj b/ios/CDEKUI.xcodeproj/project.pbxproj index 61e5b27..07cbe84 100644 --- a/ios/CDEKUI.xcodeproj/project.pbxproj +++ b/ios/CDEKUI.xcodeproj/project.pbxproj @@ -362,11 +362,11 @@ ); OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG"; PRODUCT_BUNDLE_IDENTIFIER = ru.cdek.uikit.prime; - PRODUCT_NAME = "CDEKUI"; + PRODUCT_NAME = CDEKUI; SWIFT_OBJC_BRIDGING_HEADER = "CDEKUI/CDEKUI-Bridging-Header.h"; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = "1"; + TARGETED_DEVICE_FAMILY = 1; VERSIONING_SYSTEM = "apple-generic"; }; name = Debug; @@ -393,10 +393,10 @@ ); OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE"; PRODUCT_BUNDLE_IDENTIFIER = ru.cdek.uikit.prime; - PRODUCT_NAME = "CDEKUI"; + PRODUCT_NAME = CDEKUI; SWIFT_OBJC_BRIDGING_HEADER = "CDEKUI/CDEKUI-Bridging-Header.h"; SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = "1"; + TARGETED_DEVICE_FAMILY = 1; VERSIONING_SYSTEM = "apple-generic"; }; name = Release; diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 4f3054a..3b89007 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -64,6 +64,29 @@ PODS: - hermes-engine (0.81.5): - hermes-engine/Pre-built (= 0.81.5) - hermes-engine/Pre-built (0.81.5) + - NitroModules (0.35.2): + - hermes-engine + - RCTRequired + - RCTTypeSafety + - React-callinvoker + - React-Core + - React-Core-prebuilt + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-jsi + - React-NativeModulesApple + - React-RCTFabric + - React-renderercss + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - ReactNativeDependencies + - Yoga - RCTDeprecation (0.81.5) - RCTRequired (0.81.5) - RCTTypeSafety (0.81.5): @@ -2086,6 +2109,29 @@ PODS: - ReactCommon/turbomodule/core - ReactNativeDependencies - Yoga + - Unistyles (3.2.3): + - hermes-engine + - NitroModules + - RCTRequired + - RCTTypeSafety + - React-Core + - React-Core-prebuilt + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-jsi + - React-NativeModulesApple + - React-RCTFabric + - React-renderercss + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - ReactNativeDependencies + - Yoga - Yoga (0.0.0) DEPENDENCIES: @@ -2099,6 +2145,7 @@ DEPENDENCIES: - ExpoModulesCore (from `../node_modules/expo-modules-core`) - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`) + - NitroModules (from `../node_modules/react-native-nitro-modules`) - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`) - RCTRequired (from `../node_modules/react-native/Libraries/Required`) - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) @@ -2173,6 +2220,7 @@ DEPENDENCIES: - RNReanimated (from `../node_modules/react-native-reanimated`) - RNSVG (from `../node_modules/react-native-svg`) - RNWorklets (from `../node_modules/react-native-worklets`) + - Unistyles (from `../node_modules/react-native-unistyles`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: @@ -2201,6 +2249,8 @@ EXTERNAL SOURCES: hermes-engine: :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec" :tag: hermes-2025-07-07-RNv0.81.0-e0fc67142ec0763c6b6153ca2bf96df815539782 + NitroModules: + :path: "../node_modules/react-native-nitro-modules" RCTDeprecation: :path: "../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation" RCTRequired: @@ -2347,6 +2397,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-svg" RNWorklets: :path: "../node_modules/react-native-worklets" + Unistyles: + :path: "../node_modules/react-native-unistyles" Yoga: :path: "../node_modules/react-native/ReactCommon/yoga" @@ -2362,6 +2414,7 @@ SPEC CHECKSUMS: FBLazyVector: e95a291ad2dadb88e42b06e0c5fb8262de53ec12 ForkInputMask: 55e3fbab504b22da98483e9f9a6514b98fdd2f3c hermes-engine: 9f4dfe93326146a1c99eb535b1cb0b857a3cd172 + NitroModules: 76063cb7bc1a21cf46d11b25abfcf1759bf0be47 RCTDeprecation: 943572d4be82d480a48f4884f670135ae30bf990 RCTRequired: 8f3cfc90cc25cf6e420ddb3e7caaaabc57df6043 RCTTypeSafety: 16a4144ca3f959583ab019b57d5633df10b5e97c @@ -2435,6 +2488,7 @@ SPEC CHECKSUMS: RNReanimated: 6e0147e13f8906f63703143f40237f84347e6ca1 RNSVG: cf9ae78f2edf2988242c71a6392d15ff7dd62522 RNWorklets: 76fce72926e28e304afb44f0da23b2d24f2c1fa0 + Unistyles: 6bb7e273c90d75b4f6bcb68fd1b94fb7b246145b Yoga: 5934998fbeaef7845dbf698f698518695ab4cd1a PODFILE CHECKSUM: 64cb709f656081a8373e391252a6bd658b57e3c1 diff --git a/jest.setup.ts b/jest.setup.ts index 28a57c3..fd4df2e 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -27,7 +27,6 @@ const unistyles = jest.requireMock( const getTheme = (themeName: ThemeName | undefined) => themeName === 'dark' ? darkTheme : lightTheme -const originalStyleSheetCreate = unistyles.StyleSheet.create const runtime = unistyles.UnistylesRuntime runtime.themeName = 'light' @@ -40,13 +39,101 @@ unistyles.useUnistyles = jest.fn(() => ({ rt: runtime, })) -unistyles.StyleSheet.create = jest.fn( - (stylesheet: Parameters[0]) => - typeof stylesheet === 'function' - ? originalStyleSheetCreate(() => - stylesheet(getTheme(runtime.themeName), runtime.miniRuntime) +const normalizeVariantValue = (value: unknown) => { + if (typeof value === 'boolean') { + return value ? 'true' : 'false' + } + + return value +} + +const resolveStyle = ( + style: Record, + activeVariants: Record +) => { + const { variants, compoundVariants, ...baseStyle } = style as { + variants?: Record>> + compoundVariants?: Array> + } + + const resolvedStyle: Record = { ...baseStyle } + + if (variants) { + for (const [variantName, variantMap] of Object.entries(variants)) { + const activeValue = normalizeVariantValue(activeVariants[variantName]) + + if ( + activeValue !== undefined && + variantMap[activeValue as keyof typeof variantMap] + ) { + Object.assign( + resolvedStyle, + variantMap[activeValue as keyof typeof variantMap] ) - : originalStyleSheetCreate(stylesheet) + } + } + } + + if (compoundVariants) { + for (const compoundVariant of compoundVariants) { + const { styles, ...conditions } = compoundVariant + const matches = Object.entries(conditions).every( + ([variantName, expectedValue]) => + normalizeVariantValue(activeVariants[variantName]) === + normalizeVariantValue(expectedValue) + ) + + if (matches && styles && typeof styles === 'object') { + Object.assign(resolvedStyle, styles) + } + } + } + + return resolvedStyle +} + +unistyles.StyleSheet.create = jest.fn( + (stylesheet: ((theme: ReturnType) => unknown) | unknown) => { + const styleDefinitions = + typeof stylesheet === 'function' + ? stylesheet(getTheme(runtime.themeName)) + : stylesheet + + const activeVariants: Record = {} + const resolvedStyles: Record = { + useVariants: (variants: Record) => { + Object.keys(activeVariants).forEach((key) => { + activeVariants[key] = undefined + }) + + Object.assign(activeVariants, variants) + }, + } + + for (const [styleName, styleValue] of Object.entries( + styleDefinitions as Record + )) { + Object.defineProperty(resolvedStyles, styleName, { + enumerable: true, + get() { + if ( + styleValue && + typeof styleValue === 'object' && + !Array.isArray(styleValue) + ) { + return resolveStyle( + styleValue as Record, + activeVariants + ) + } + + return styleValue + }, + }) + } + + return resolvedStyles + } ) unistyles.withUnistyles = jest.fn((Component: T) => Component) diff --git a/package.json b/package.json index af6da0b..d925a41 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "scripts": { "build": "rm -rf dist && tsc -p tsconfig.build.json", "test": "jest", - "start": "expo start --dev-client", + "start": "expo start --dev-client --clear", "android": "expo run:android", "ios": "expo run:ios --no-install", "storybook-generate": "sb-rn-get-stories --config-path .storybook && sed -i -e 's/export const view = global.view/export const view: ReturnType = global.view/' .storybook/storybook.requires.ts && prettier .storybook --write", diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 9af5bde..1b2ff85 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -10,8 +10,8 @@ import Animated, { import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' export interface AccordionProps extends ViewProps { /** Иконка слева от заголовка */ @@ -50,8 +50,6 @@ export const Accordion: React.FC = ({ children, ...rest }) => { - const styles = useStyles() - const contentHeight = useSharedValue(0) const contentOpenFraction = useSharedValue(initiallyExpanded ? 1 : 0) const [isExpanded, setIsExpanded] = useState(initiallyExpanded) @@ -151,7 +149,7 @@ export const AccordionTestIds = { separator: 'Separator', } -const useStyles = makeStyles(({ theme, fonts }) => ({ +const styles = StyleSheet.create(({ theme, fonts }) => ({ component: { width: '100%' }, header: { paddingVertical: theme.Panel.Accordion.accordionHeaderPaddingTopBottom, diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index bfae1fb..755c3a2 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -21,8 +21,8 @@ import { type ViewStyle, } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' export type AvatarSize = 'xlarge' | 'large' | 'normal' @@ -137,7 +137,6 @@ export const Avatar = memo( onError, iconColor, }) => { - const styles = useStyles() const window = useWindowDimensions() const [badgeLayout, setBadgeLayout] = useState() @@ -192,7 +191,7 @@ export const Avatar = memo( width={iconSize} /> ) - }, [Icon, calculatedSize, iconColor, size, styles, type]) + }, [Icon, calculatedSize, iconColor, size, type]) useEffect(() => { if (badge) { @@ -255,7 +254,7 @@ export const Avatar = memo( } ) -const useStyles = makeStyles(({ theme, border, typography, fonts }) => ({ +const styles = StyleSheet.create(({ theme, border, typography, fonts }) => ({ container: { justifyContent: 'center', alignItems: 'center', diff --git a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index 734dacd..87f18c6 100644 --- a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -1701,17 +1701,13 @@ exports[`Avatar component tests With badge, showBadge: true 1`] = ` > ( - ({ children, dot, severity = 'basic', style, testID, ...rest }) => { - const styles = useStyles() +export const Badge = memo( + ({ + children, + dot, + severity = 'basic', + style, + testID, + ...rest + }: BadgeProps) => { + badgeStyles.useVariants({ severity }) const [textLayout, setTextLayout] = useState() const onTextLayout = useCallback((e: LayoutChangeEvent) => { @@ -60,18 +67,15 @@ export const Badge = memo( }, []) return ( - + {dot ? ( - + ) : ( <> - + {children} @@ -81,12 +85,12 @@ export const Badge = memo( {children} @@ -100,41 +104,70 @@ export const Badge = memo( } ) -const useStyles = makeStyles(({ theme, border, typography, fonts }) => ({ - container: { alignItems: 'flex-start' }, - dot: { - width: theme.Misc.Badge.badgeDotSize, - height: theme.Misc.Badge.badgeDotSize, - borderRadius: border.Radius['rounded-full'], - }, - textBadgeContainer: { - height: theme.Misc.Badge.badgeHeight, - paddingHorizontal: theme.Misc.Tag.tagPadding, - justifyContent: 'center', - borderRadius: border.Radius['rounded-full'], - }, - textBadge: { - color: theme.Misc.Badge.badgeTextColor, - fontSize: typography.Size['text-xs'], - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - }, - basic: { backgroundColor: theme.Misc.Badge.badgeBg }, - info: { backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg }, - success: { - backgroundColor: theme.Button.Severity.Success.Basic.successButtonBg, - }, - warning: { - backgroundColor: theme.Button.Severity.Warning.Basic.warningButtonBg, - }, - danger: { - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, - }, - hiddenContainer: { - width: Dimensions.get('window').width, - height: 0, - flexDirection: 'row', - position: 'absolute', - }, -})) +const badgeStyles = StyleSheet.create( + ({ theme, border, typography, fonts }) => ({ + container: { alignItems: 'flex-start' }, + dot: { + width: theme.Misc.Badge.badgeDotSize, + height: theme.Misc.Badge.badgeDotSize, + borderRadius: border.Radius['rounded-full'], + variants: { + severity: { + basic: { backgroundColor: theme.Misc.Badge.badgeBg }, + info: { + backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, + }, + success: { + backgroundColor: + theme.Button.Severity.Success.Basic.successButtonBg, + }, + warning: { + backgroundColor: + theme.Button.Severity.Warning.Basic.warningButtonBg, + }, + danger: { + backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, + }, + }, + }, + }, + textBadgeContainer: { + height: theme.Misc.Badge.badgeHeight, + paddingHorizontal: theme.Misc.Tag.tagPadding, + justifyContent: 'center', + borderRadius: border.Radius['rounded-full'], + variants: { + severity: { + basic: { backgroundColor: theme.Misc.Badge.badgeBg }, + info: { + backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, + }, + success: { + backgroundColor: + theme.Button.Severity.Success.Basic.successButtonBg, + }, + warning: { + backgroundColor: + theme.Button.Severity.Warning.Basic.warningButtonBg, + }, + danger: { + backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, + }, + }, + }, + }, + textBadge: { + color: theme.Misc.Badge.badgeTextColor, + fontSize: typography.Size['text-xs'], + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.primary, + }, + hiddenContainer: { + width: Dimensions.get('window').width, + height: 0, + flexDirection: 'row', + position: 'absolute', + }, + }) +) diff --git a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap index e5b425a..0cac9d8 100644 --- a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -13,16 +13,12 @@ exports[`Badge component tests dot, severity: basic 1`] = ` > @@ -41,16 +37,12 @@ exports[`Badge component tests dot, severity: danger 1`] = ` > @@ -69,16 +61,12 @@ exports[`Badge component tests dot, severity: info 1`] = ` > @@ -97,16 +85,12 @@ exports[`Badge component tests dot, severity: success 1`] = ` > @@ -125,16 +109,12 @@ exports[`Badge component tests dot, severity: warning 1`] = ` > @@ -153,17 +133,13 @@ exports[`Badge component tests severity: basic 1`] = ` > diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx index 4b604e3..5e752b2 100644 --- a/src/components/Button/BaseButton.tsx +++ b/src/components/Button/BaseButton.tsx @@ -1,21 +1,21 @@ import { useCallback, useState } from 'react' - import type { GestureResponderEvent } from 'react-native' import { genericMemo } from '../../utils/genericMemo' -import type { ButtonProps, ButtonVariant, VariantStyles } from './types' +import type { ButtonProps, ButtonVariant } from './types' import { ButtonLeftArea, ButtonRightArea, ButtonLabel, ButtonContainer, } from './utils' +import { ButtonPressedContext } from './utils/ButtonPressedContext' export type BaseButtonComponentProps = Omit< ButtonProps, 'variant' -> & { readonly variant: Variant } & VariantStyles +> & { readonly variant: Variant } const BaseButtonComponent = ({ size = 'base', @@ -28,15 +28,11 @@ const BaseButtonComponent = ({ Icon, label, style, - containerVariantStyles, - labelVariantStyles, - pressedVariantStyles, - iconVariantStyles, - pressedLabelVariantStyles, onPressIn: onPressInProp, onPressOut: onPressOutProp, ...props }: BaseButtonComponentProps) => { + const isDisabled = !!disabled const [pressed, setPressed] = useState(false) const onPressIn = useCallback( @@ -56,62 +52,31 @@ const BaseButtonComponent = ({ ) return ( - - - - + - + {...props} + > + + + + + ) } diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 1ac8c54..539561d 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,8 +1,8 @@ -import { memo } from 'react' +import { memo, useMemo } from 'react' import { BaseButton } from './BaseButton' -import { useBasicButtonStyles } from './styles' import type { ButtonBaseVariant, ButtonProps } from './types' +import { ButtonVariantContext } from './utils/ButtonVariantContext' /** * Button component @@ -18,10 +18,14 @@ import type { ButtonBaseVariant, ButtonProps } from './types' * @param style - external style control for component * @see BaseButton */ -export const Button = memo>( - ({ variant = 'primary', ...props }) => { - const buttonStyles = useBasicButtonStyles() +export const Button = memo( + ({ variant = 'primary', ...props }: ButtonProps) => { + const variantContextValue = useMemo(() => ({ variant }), [variant]) - return + return ( + + + + ) } ) diff --git a/src/components/Button/ButtonBadge.tsx b/src/components/Button/ButtonBadge.tsx index 1dfad82..8e9ab6d 100644 --- a/src/components/Button/ButtonBadge.tsx +++ b/src/components/Button/ButtonBadge.tsx @@ -6,12 +6,12 @@ import { type ViewStyle, } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { Badge } from '../Badge' import { BaseButton } from './BaseButton' -import { useBasicButtonStyles } from './styles' import type { ButtonBadgeProps, ButtonBaseVariant, ButtonProps } from './types' +import { ButtonVariantContext } from './utils/ButtonVariantContext' /** * Button component with badge @@ -29,59 +29,65 @@ import type { ButtonBadgeProps, ButtonBaseVariant, ButtonProps } from './types' * @param badgeLabel - text label inside badge * @see BaseButton */ -export const ButtonBadge = memo< - ButtonProps & ButtonBadgeProps ->(({ badgeLabel, badgeSeverity, variant = 'primary', ...props }) => { - const buttonStyles = useBasicButtonStyles() - const styles = useStyles() - const [badgeLayout, setBadgeLayout] = useState() +export const ButtonBadge = memo( + ({ + badgeLabel, + badgeSeverity, + variant = 'primary', + ...props + }: ButtonProps & ButtonBadgeProps) => { + const [badgeLayout, setBadgeLayout] = useState() + const variantContextValue = useMemo(() => ({ variant }), [variant]) - const badgeContainerStyle = useMemo( - () => ({ - position: 'absolute', - top: badgeLayout ? -Math.round(badgeLayout.height / 2) : 0, - right: badgeLayout ? -Math.round(badgeLayout.width / 2) : 0, - }), - [badgeLayout] - ) + const badgeContainerStyle = useMemo( + () => ({ + position: 'absolute', + top: badgeLayout ? -Math.round(badgeLayout.height / 2) : 0, + right: badgeLayout ? -Math.round(badgeLayout.width / 2) : 0, + }), + [badgeLayout] + ) - const onLayout = useCallback( - (e: LayoutChangeEvent) => setBadgeLayout(e.nativeEvent.layout), - [] - ) + const onLayout = useCallback( + (e: LayoutChangeEvent) => setBadgeLayout(e.nativeEvent.layout), + [] + ) - const badgeCommonProps = useMemo( - () => ({ severity: badgeSeverity, testID: ButtonBadgeTestId.badge }), - [badgeSeverity] - ) + const badgeCommonProps = useMemo( + () => ({ severity: badgeSeverity, testID: ButtonBadgeTestId.badge }), + [badgeSeverity] + ) - return ( - - - - - {badgeLabel ? ( - + + - {badgeLabel} - - ) : ( - - )} - - - ) -}) + + + {badgeLabel ? ( + + {badgeLabel} + + ) : ( + + )} + + + + ) + } +) -const useStyles = makeStyles(() => ({ +const styles = StyleSheet.create(() => ({ root: { flexDirection: 'row' }, contentContainer: { flex: 1 }, iconOnlyContainer: { flex: 0 }, diff --git a/src/components/Button/ButtonSeverity.tsx b/src/components/Button/ButtonSeverity.tsx index 0f017a3..8bd9780 100644 --- a/src/components/Button/ButtonSeverity.tsx +++ b/src/components/Button/ButtonSeverity.tsx @@ -1,12 +1,12 @@ -import { memo } from 'react' +import { memo, useMemo } from 'react' import { BaseButton } from './BaseButton' -import { useSeverityButtonStyles } from './styles' import type { ButtonProps, ButtonSeverityProps, ButtonSeverityVariant, } from './types' +import { ButtonVariantContext } from './utils/ButtonVariantContext' /** * Button component @@ -23,10 +23,21 @@ import type { * @param severity - severity button styling variant * @see BaseButton */ -export const ButtonSeverity = memo< - ButtonProps & ButtonSeverityProps ->(({ severity, variant = 'basic', ...props }) => { - const buttonStyles = useSeverityButtonStyles(severity) +export const ButtonSeverity = memo( + ({ + severity, + variant = 'basic', + ...props + }: ButtonProps & ButtonSeverityProps) => { + const variantContextValue = useMemo( + () => ({ variant, severity }), + [severity, variant] + ) - return -}) + return ( + + + + ) + } +) diff --git a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 58dda76..e166941 100644 --- a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -33,21 +33,25 @@ exports[`Button component tests Button default props 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - { - "alignItems": "center", - "backgroundColor": "#44e858", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 10.5, - "borderWidth": 1, - "flexDirection": "row", - "gap": 7, - "height": 35, - "justifyContent": "center", - "maxHeight": 35, - "minHeight": 35, - "paddingHorizontal": 14, - "paddingVertical": 0, - } + [ + { + "alignItems": "center", + "backgroundColor": "#44e858", + "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderRadius": 10.5, + "borderWidth": 1, + "flexDirection": "row", + "gap": 7, + "height": 35, + "justifyContent": "center", + "maxHeight": 35, + "minHeight": 35, + "paddingHorizontal": 14, + "paddingVertical": 0, + }, + false, + undefined, + ] } > + + +`; + +exports[`Button component tests Button with only icon, size - small, shape - circle, variant - primary, loading - true, disabled - true 1`] = ` + - - -`; - -exports[`Button component tests Button with only icon, size - small, shape - circle, variant - primary, loading - true, disabled - true 1`] = ` - + + Button + + +`; + +exports[`Button component tests Button with text, size - base, shape - square, variant - link, loading - false, disabled - true 2`] = ` + `; -exports[`Button component tests Button with text, size - base, shape - square, variant - link, loading - false, disabled - true 2`] = ` +exports[`Button component tests Button with text, size - base, shape - square, variant - link, loading - true, disabled - false 1`] = ` - - Button - - -`; - -exports[`Button component tests Button with text, size - base, shape - square, variant - link, loading - true, disabled - false 1`] = ` - + + Button + + +`; + +exports[`Button component tests Button with text, size - small, shape - circle, variant - text, loading - true, disabled - true 2`] = ` + - - Button - - -`; - -exports[`Button component tests Button with text, size - small, shape - circle, variant - text, loading - true, disabled - true 2`] = ` - + + Button + + +`; + +exports[`Button component tests Button with text, size - xlarge, shape - circle, variant - primary, loading - false, disabled - true 2`] = ` + - - Button - - -`; - -exports[`Button component tests Button with text, size - xlarge, shape - circle, variant - primary, loading - false, disabled - true 2`] = ` - @@ -221,21 +221,25 @@ exports[`ButtonSeverity component tests badge - dot 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - { - "alignItems": "center", - "backgroundColor": "#44e858", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 10.5, - "borderWidth": 1, - "flexDirection": "row", - "gap": 7, - "height": 35, - "justifyContent": "center", - "maxHeight": 35, - "minHeight": 35, - "paddingHorizontal": 14, - "paddingVertical": 0, - } + [ + { + "alignItems": "center", + "backgroundColor": "#44e858", + "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderRadius": 10.5, + "borderWidth": 1, + "flexDirection": "row", + "gap": 7, + "height": 35, + "justifyContent": "center", + "maxHeight": 35, + "minHeight": 35, + "paddingHorizontal": 14, + "paddingVertical": 0, + }, + false, + undefined, + ] } > diff --git a/src/components/Button/__tests__/__snapshots__/ButtonSeverity.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/ButtonSeverity.test.tsx.snap index da1b450..faec5f7 100644 --- a/src/components/Button/__tests__/__snapshots__/ButtonSeverity.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/ButtonSeverity.test.tsx.snap @@ -33,21 +33,25 @@ exports[`ButtonSeverity component tests severity - danger 1`] = ` onResponderTerminationRequest={[Function]} onStartShouldSetResponder={[Function]} style={ - { - "alignItems": "center", - "backgroundColor": "#fbacaa", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 10.5, - "borderWidth": 1, - "flexDirection": "row", - "gap": 7, - "height": 35, - "justifyContent": "center", - "maxHeight": 35, - "minHeight": 35, - "paddingHorizontal": 14, - "paddingVertical": 0, - } + [ + { + "alignItems": "center", + "backgroundColor": "#fbacaa", + "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderRadius": 10.5, + "borderWidth": 1, + "flexDirection": "row", + "gap": 7, + "height": 35, + "justifyContent": "center", + "maxHeight": 35, + "minHeight": 35, + "paddingHorizontal": 14, + "paddingVertical": 0, + }, + false, + undefined, + ] } > { - const labelVariantStyles = useLabelVariantStyles() - const pressedVariantStyles = usePressedVariantStyles() - const containerVariantStyles = useContainerVariantStyles() - const iconVariantStyles = useIconVariantStyles() - const pressedLabelVariantStyles = usePressedLabelVariantStyles() - - return { - containerVariantStyles, - labelVariantStyles, - pressedVariantStyles, - iconVariantStyles, - pressedLabelVariantStyles, - } -} - -const useLabelVariantStyles = makeStyles(({ theme }) => ({ - primary: { color: theme.Button.Brand.buttonTextColor }, - - secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, - - tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, - - text: { color: theme.Button.Text.textButtonTextColor }, - - link: { color: theme.Button.Text.textButtonTextColor }, -})) - -const usePressedVariantStyles = makeStyles(({ theme }) => ({ - primary: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Brand.buttonHoverBg, - }, - - secondary: { - borderColor: theme.Button.Primary.secondaryButtonHoverBorderColor, - backgroundColor: theme.Button.Primary.secondaryButtonHoverBg, - }, - - tertiary: { - borderColor: theme.Button.Secondary.helpButtonHoverBorderColor, - backgroundColor: theme.Button.Secondary.helpButtonHoverBg, - }, - - text: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonHoverBg, - }, - - link: {}, -})) - -const useContainerVariantStyles = makeStyles(({ theme, spacing }) => ({ - primary: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Brand.buttonBg, - }, - - secondary: { - borderColor: theme.Button.Primary.secondaryButtonBorderColor, - backgroundColor: theme.Button.Primary.secondaryButtonBg, - }, - - tertiary: { - borderColor: theme.Button.Secondary.helpButtonBorderColor, - backgroundColor: theme.Button.Secondary.helpButtonBg, - }, - - text: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, - }, - - link: { - paddingHorizontal: 0, - paddingVertical: spacing.Padding['p-1'], - height: 'auto', - minHeight: 'auto', - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, - }, -})) - -const useIconVariantStyles = makeStyles(({ theme }) => ({ - primary: { color: theme.Button.Brand.buttonTextColor }, - - secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, - - tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, - - text: { color: theme.Button.Text.textButtonTextColor }, - - link: { color: theme.Button.Text.textButtonTextColor }, -})) - -const usePressedLabelVariantStyles = makeStyles(({ theme, typography }) => ({ - primary: { color: theme.Button.Brand.buttonTextColor }, - - secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, - - tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, - - text: { color: theme.Button.Text.textButtonTextColor }, - - link: { color: typography.Color.Common['text-color-secondary'] }, -})) diff --git a/src/components/Button/styles/useDangerButtonStyles.ts b/src/components/Button/styles/useDangerButtonStyles.ts deleted file mode 100644 index 396c7e4..0000000 --- a/src/components/Button/styles/useDangerButtonStyles.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { makeStyles } from '../../../utils/makeStyles' - -export const useDangerButtonStyles = () => { - const labelVariantStyles = useLabelVariantStyles() - const pressedVariantStyles = usePressedVariantStyles() - const containerVariantStyles = useContainerVariantStyles() - const iconVariantStyles = useIconVariantStyles() - - return { - containerVariantStyles, - labelVariantStyles, - pressedVariantStyles, - iconVariantStyles, - pressedLabelVariantStyles: labelVariantStyles, - } -} - -const useLabelVariantStyles = makeStyles(({ theme }) => ({ - basic: { color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor }, - - outlined: { - color: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor, - }, - - text: { color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor }, -})) - -const usePressedVariantStyles = makeStyles(({ theme }) => ({ - basic: { - borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonHoverBg, - }, - - outlined: { - borderColor: - theme.Button.Severity.Danger.Outlined - .dangerOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonHoverBg, - }, - - text: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: theme.Button.Severity.Danger.Text.dangerTextButtonHoverBg, - }, -})) - -const useContainerVariantStyles = makeStyles(({ theme }) => ({ - basic: { - borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, - }, - - outlined: { - borderColor: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonBg, - }, - - text: { - borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: theme.Button.Severity.Danger.Text.dangerTextButtonBg, - }, -})) - -const useIconVariantStyles = makeStyles(({ theme }) => ({ - basic: { color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor }, - - outlined: { - color: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor, - }, - - text: { color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor }, -})) diff --git a/src/components/Button/styles/useInfoButtonStyles.ts b/src/components/Button/styles/useInfoButtonStyles.ts deleted file mode 100644 index 83c102d..0000000 --- a/src/components/Button/styles/useInfoButtonStyles.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { makeStyles } from '../../../utils/makeStyles' - -export const useInfoButtonStyles = () => { - const labelVariantStyles = useLabelVariantStyles() - const pressedVariantStyles = usePressedVariantStyles() - const containerVariantStyles = useContainerVariantStyles() - const iconVariantStyles = useIconVariantStyles() - - return { - containerVariantStyles, - labelVariantStyles, - pressedVariantStyles, - iconVariantStyles, - pressedLabelVariantStyles: labelVariantStyles, - } -} - -const useLabelVariantStyles = makeStyles(({ theme }) => ({ - basic: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor }, - - outlined: { - color: theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor, - }, - - text: { color: theme.Button.Severity.Info.Text.infoTextButtonTextColor }, -})) - -const usePressedVariantStyles = makeStyles(({ theme }) => ({ - basic: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonHoverBg, - }, - - outlined: { - borderColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonHoverBg, - }, - - text: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonHoverBg, - }, -})) - -const useContainerVariantStyles = makeStyles(({ theme }) => ({ - basic: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, - }, - - outlined: { - borderColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Outlined.infoOutlinedButtonBg, - }, - - text: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonBg, - }, -})) - -const useIconVariantStyles = makeStyles(({ theme }) => ({ - basic: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor }, - - outlined: { - color: theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor, - }, - - text: { color: theme.Button.Severity.Info.Text.infoTextButtonTextColor }, -})) diff --git a/src/components/Button/styles/useSeverityButtonStyles.ts b/src/components/Button/styles/useSeverityButtonStyles.ts deleted file mode 100644 index 331249d..0000000 --- a/src/components/Button/styles/useSeverityButtonStyles.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { useMemo } from 'react' - -import type { ButtonSeverityProps } from '../types' - -import { useDangerButtonStyles } from './useDangerButtonStyles' -import { useInfoButtonStyles } from './useInfoButtonStyles' -import { useSuccessButtonStyles } from './useSuccessButtonStyles' -import { useWarningButtonStyles } from './useWarningButtonStyles' - -export const useSeverityButtonStyles = ( - severity: ButtonSeverityProps['severity'] -) => { - const dangerButtonStyles = useDangerButtonStyles() - const warningButtonStyles = useWarningButtonStyles() - const infoButtonStyles = useInfoButtonStyles() - const successButtonStyles = useSuccessButtonStyles() - - return useMemo(() => { - switch (severity) { - case 'danger': - return dangerButtonStyles - - case 'warning': - return warningButtonStyles - - case 'info': - return infoButtonStyles - - case 'success': - return successButtonStyles - } - }, [ - dangerButtonStyles, - infoButtonStyles, - severity, - successButtonStyles, - warningButtonStyles, - ]) -} diff --git a/src/components/Button/styles/useSuccessButtonStyles.ts b/src/components/Button/styles/useSuccessButtonStyles.ts deleted file mode 100644 index a80acc6..0000000 --- a/src/components/Button/styles/useSuccessButtonStyles.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { makeStyles } from '../../../utils/makeStyles' - -export const useSuccessButtonStyles = () => { - const labelVariantStyles = useLabelVariantStyles() - const pressedVariantStyles = usePressedVariantStyles() - const containerVariantStyles = useContainerVariantStyles() - const iconVariantStyles = useIconVariantStyles() - - return { - containerVariantStyles, - labelVariantStyles, - pressedVariantStyles, - iconVariantStyles, - pressedLabelVariantStyles: labelVariantStyles, - } -} - -const useLabelVariantStyles = makeStyles(({ theme }) => ({ - basic: { color: theme.Button.Severity.Success.Basic.successButtonTextColor }, - - outlined: { - color: - theme.Button.Severity.Success.Outlined.successOutlinedButtonTextColor, - }, - - text: { - color: theme.Button.Severity.Success.Text.successTextButtonTextColor, - }, -})) - -const usePressedVariantStyles = makeStyles(({ theme }) => ({ - basic: { - borderColor: theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: theme.Button.Severity.Success.Basic.successButtonHoverBg, - }, - - outlined: { - borderColor: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Success.Outlined.successOutlinedButtonHoverBg, - }, - - text: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Success.Text.successTextButtonHoverBg, - }, -})) - -const useContainerVariantStyles = makeStyles(({ theme }) => ({ - basic: { - borderColor: theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: theme.Button.Severity.Success.Basic.successButtonBg, - }, - - outlined: { - borderColor: - theme.Button.Severity.Success.Outlined.successOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Outlined.successOutlinedButtonBg, - }, - - text: { - borderColor: theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: theme.Button.Severity.Success.Text.successTextButtonBg, - }, -})) - -const useIconVariantStyles = makeStyles(({ theme }) => ({ - basic: { color: theme.Button.Severity.Success.Basic.successButtonTextColor }, - - outlined: { - color: - theme.Button.Severity.Success.Outlined.successOutlinedButtonTextColor, - }, - - text: { - color: theme.Button.Severity.Success.Text.successTextButtonTextColor, - }, -})) diff --git a/src/components/Button/styles/useWarningButtonStyles.ts b/src/components/Button/styles/useWarningButtonStyles.ts deleted file mode 100644 index 6b58834..0000000 --- a/src/components/Button/styles/useWarningButtonStyles.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { makeStyles } from '../../../utils/makeStyles' - -export const useWarningButtonStyles = () => { - const labelVariantStyles = useLabelVariantStyles() - const pressedVariantStyles = usePressedVariantStyles() - const containerVariantStyles = useContainerVariantStyles() - const iconVariantStyles = useIconVariantStyles() - - return { - containerVariantStyles, - labelVariantStyles, - pressedVariantStyles, - iconVariantStyles, - pressedLabelVariantStyles: labelVariantStyles, - } -} - -const useLabelVariantStyles = makeStyles(({ theme }) => ({ - basic: { color: theme.Button.Severity.Warning.Basic.warningButtonTextColor }, - - outlined: { - color: - theme.Button.Severity.Warning.Outlined.warningOutlinedButtonTextColor, - }, - - text: { - color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor, - }, -})) - -const usePressedVariantStyles = makeStyles(({ theme }) => ({ - basic: { - borderColor: theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: theme.Button.Severity.Warning.Basic.warningButtonHoverBg, - }, - - outlined: { - borderColor: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Outlined.warningOutlinedButtonHoverBg, - }, - - text: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Warning.Text.warningTextButtonHoverBg, - }, -})) - -const useContainerVariantStyles = makeStyles(({ theme }) => ({ - basic: { - borderColor: theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: theme.Button.Severity.Warning.Basic.warningButtonBg, - }, - - outlined: { - borderColor: - theme.Button.Severity.Warning.Outlined.warningOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Outlined.warningOutlinedButtonBg, - }, - - text: { - borderColor: theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: theme.Button.Severity.Warning.Text.warningTextButtonBg, - }, -})) - -const useIconVariantStyles = makeStyles(({ theme }) => ({ - basic: { color: theme.Button.Severity.Warning.Basic.warningButtonTextColor }, - - outlined: { - color: - theme.Button.Severity.Warning.Outlined.warningOutlinedButtonTextColor, - }, - - text: { - color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor, - }, -})) diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts index e5768c1..81bf64a 100644 --- a/src/components/Button/types.ts +++ b/src/components/Button/types.ts @@ -97,27 +97,33 @@ export type ButtonProps = | IconTextButton | IconOnlyButtonProps +/** @deprecated */ export type LabelVariantStyles = Record< Required>['variant'], TextStyle > +/** @deprecated */ export type PressedVariantStyles = Record< Required>['variant'], ViewStyle > +/** @deprecated */ export type ContainerVariantStyles = Record< Required>['variant'], ViewStyle > +/** @deprecated */ export type IconVariantStyles = Record< Required>['variant'], { color: ColorValue } > +/** @deprecated */ export type PressedLabelVariantStyles = Record< Required>['variant'], { color: ColorValue } > +/** @deprecated */ export interface VariantStyles { containerVariantStyles: ContainerVariantStyles pressedVariantStyles: PressedVariantStyles diff --git a/src/components/Button/utils/ButtonActivityIndicator.tsx b/src/components/Button/utils/ButtonActivityIndicator.tsx index 441f080..bcca0a1 100644 --- a/src/components/Button/utils/ButtonActivityIndicator.tsx +++ b/src/components/Button/utils/ButtonActivityIndicator.tsx @@ -1,44 +1,47 @@ import { ActivityIndicator } from 'react-native' +import { StyleSheet } from '../../../utils' import { genericMemo } from '../../../utils/genericMemo' -import { makeStyles } from '../../../utils/makeStyles' -import type { BaseButtonProps, ButtonVariant } from '../types' +import type { BaseButtonProps, ButtonSize } from '../types' -import { useTypeBasedStyle } from './useTypeBasedStyle' - -export type ButtonActivityIndicatorProps = Pick< - Required>, +export type ButtonActivityIndicatorProps = Pick< + Required>, 'size' -> +> & { readonly size: ButtonSize } -const ButtonActivityIndicatorComponent = ({ +const ButtonActivityIndicatorComponent = ({ size, -}: ButtonActivityIndicatorProps) => { - const styles = useStyles() - - const sizeBasedStyle = useTypeBasedStyle(size, styles) as { height: number } +}: ButtonActivityIndicatorProps) => { + buttonActivityIndicatorStyles.useVariants({ size }) return ( ) } -const useStyles = makeStyles(({ theme }) => ({ - xlarge: { height: 21 }, - - large: { height: 21 }, - - base: { height: 17.5 }, - - small: { height: 14 }, - - activityIndicator: { color: theme.Button.Disabled.disabledButtonTextColor }, -})) - export const ButtonActivityIndicator = genericMemo( ButtonActivityIndicatorComponent ) + +const buttonActivityIndicatorStyles = StyleSheet.create(({ theme }) => ({ + indicator: { + color: theme.Button.Disabled.disabledButtonTextColor, + variants: { + size: { + xlarge: { height: 21 }, + large: { height: 21 }, + base: { height: 17.5 }, + small: { height: 14 }, + }, + }, + }, +})) diff --git a/src/components/Button/utils/ButtonContainer.tsx b/src/components/Button/utils/ButtonContainer.tsx index b68219b..1d39d71 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -1,62 +1,77 @@ -import type { ReactNode } from 'react' -import { Pressable } from 'react-native' +/* eslint-disable max-lines */ +/* eslint-disable max-lines-per-function */ +import { type ReactNode, useContext } from 'react' +import { Pressable, type PressableStateCallbackType } from 'react-native' + +import { StyleSheet } from '../../../utils' import { genericMemo } from '../../../utils/genericMemo' -import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types' +import type { BaseButtonProps, ButtonShape, ButtonSize } from '../types' -import { useButtonContainerCallbackStyle } from './useButtonContainerCallbackStyle' +import { ButtonPressedContext } from './ButtonPressedContext' +import { ButtonVariantContext } from './ButtonVariantContext' -export type ButtonContainerComponentProps = Omit< - BaseButtonProps, - | 'size' - | 'variant' - | 'disabled' - | 'loading' - | 'shape' - | 'Icon' - | 'iconPosition' - | 'label' -> & - Pick< - Required>, - 'size' | 'variant' | 'disabled' | 'loading' | 'shape' - > & { readonly children: ReactNode } & Pick< - VariantStyles, - 'containerVariantStyles' | 'pressedVariantStyles' - > +export interface ButtonContainerProps { + readonly size: ButtonSize + readonly shape: ButtonShape + readonly disabled: boolean + readonly loading: boolean + readonly isIconOnly: boolean + readonly style?: BaseButtonProps['style'] + readonly pressableRef?: BaseButtonProps['pressableRef'] + readonly children: ReactNode + readonly onPressIn?: BaseButtonProps['onPressIn'] + readonly onPressOut?: BaseButtonProps['onPressOut'] + [key: string]: unknown +} -export const ButtonContainerComponent = ({ +const ButtonContainerComponent = ({ style, size, disabled, loading, - variant, shape, - iconOnly, + isIconOnly, children, - containerVariantStyles, - pressedVariantStyles, pressableRef, + onPressIn, + onPressOut, ...props -}: ButtonContainerComponentProps) => { - const containerCallbackStyle = useButtonContainerCallbackStyle( +}: ButtonContainerProps) => { + const pressed = useContext(ButtonPressedContext) + const { variant, severity } = useContext(ButtonVariantContext) + + buttonContainerStyles.useVariants({ size, - variant, shape, - disabled, - loading, - iconOnly, - style, - containerVariantStyles, - pressedVariantStyles - ) + variant, + severity, + pressed: pressed ? 'true' : 'false', + disabled: disabled || loading ? 'true' : 'false', + iconOnly: isIconOnly ? 'true' : 'false', + }) + + const resolvedStyle = + typeof style === 'function' + ? (state: PressableStateCallbackType) => [ + buttonContainerStyles.container, + isIconOnly && buttonContainerStyles.iconOnly, + style(state), + ] + : [ + buttonContainerStyles.container, + isIconOnly && buttonContainerStyles.iconOnly, + style, + ] return ( {children} @@ -65,3 +80,442 @@ export const ButtonContainerComponent = ({ } export const ButtonContainer = genericMemo(ButtonContainerComponent) + +const buttonContainerStyles = StyleSheet.create( + ({ theme, border, spacing, sizing }) => ({ + container: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderWidth: border.Width.border, + variants: { + size: { + xlarge: { + paddingHorizontal: spacing.Padding['p-6'], + paddingVertical: theme.Button.Common.buttonPaddingTopBottom, + height: theme.Button.Common.buttonHeightXL, + minHeight: theme.Button.Common.buttonHeightXL, + maxHeight: theme.Button.Common.buttonHeightXL, + gap: spacing.Gap['gap-3'], + borderRadius: theme.General.borderRadius2XL, + }, + large: { + paddingHorizontal: spacing.Padding['p-6'], + paddingVertical: theme.Button.Common.buttonPaddingTopBottom, + height: theme.Button.Common.buttonHeightLG, + minHeight: theme.Button.Common.buttonHeightLG, + maxHeight: theme.Button.Common.buttonHeightLG, + gap: spacing.Gap['gap-3'], + borderRadius: theme.General.borderRadius2XL, + }, + base: { + paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, + paddingVertical: theme.Button.Common.buttonPaddingTopBottom, + height: theme.Button.Common.buttonHeight, + minHeight: theme.Button.Common.buttonHeight, + maxHeight: theme.Button.Common.buttonHeight, + gap: theme.General.inlineSpacing, + borderRadius: theme.General.borderRadiusXL, + }, + small: { + paddingHorizontal: spacing.Padding['p-3'], + paddingVertical: theme.Button.Common.buttonPaddingTopBottom, + height: theme.Button.Common.buttonHeightSM, + minHeight: theme.Button.Common.buttonHeightSM, + maxHeight: theme.Button.Common.buttonHeightSM, + gap: theme.General.inlineSpacing, + borderRadius: theme.General.borderRadiusXL, + }, + }, + shape: { + square: {}, + circle: { borderRadius: border.Radius['rounded-full'] }, + }, + variant: { + primary: { + borderColor: theme.Button.Brand.buttonBorderColor, + backgroundColor: theme.Button.Brand.buttonBg, + }, + secondary: { + borderColor: theme.Button.Primary.secondaryButtonBorderColor, + backgroundColor: theme.Button.Primary.secondaryButtonBg, + }, + tertiary: { + borderColor: theme.Button.Secondary.helpButtonBorderColor, + backgroundColor: theme.Button.Secondary.helpButtonBg, + }, + text: { + borderColor: theme.Button.Brand.buttonBorderColor, + backgroundColor: theme.Button.Text.textButtonBg, + }, + link: { + paddingHorizontal: 0, + paddingVertical: spacing.Padding['p-1'], + height: 'auto', + minHeight: 'auto', + borderColor: theme.Button.Brand.buttonBorderColor, + backgroundColor: theme.Button.Text.textButtonBg, + }, + basic: { + borderColor: theme.Button.Brand.buttonBorderColor, + backgroundColor: theme.Button.Brand.buttonBg, + }, + outlined: { + borderColor: theme.Button.Brand.buttonBorderColor, + backgroundColor: theme.Button.Text.textButtonBg, + }, + }, + severity: { info: {}, success: {}, warning: {}, danger: {} }, + pressed: { true: {}, false: {} }, + disabled: { + true: { + backgroundColor: theme.Button.Disabled.disabledButtonBg, + borderColor: theme.Button.Disabled.disabledButtonBorderColor, + }, + false: {}, + }, + iconOnly: { true: {}, false: {} }, + }, + compoundVariants: [ + // basic button pressed + { + variant: 'primary', + pressed: 'true', + styles: { + borderColor: theme.Button.Brand.buttonBorderColor, + backgroundColor: theme.Button.Brand.buttonHoverBg, + }, + }, + { + variant: 'secondary', + pressed: 'true', + styles: { + borderColor: theme.Button.Primary.secondaryButtonHoverBorderColor, + backgroundColor: theme.Button.Primary.secondaryButtonHoverBg, + }, + }, + { + variant: 'tertiary', + pressed: 'true', + styles: { + borderColor: theme.Button.Secondary.helpButtonHoverBorderColor, + backgroundColor: theme.Button.Secondary.helpButtonHoverBg, + }, + }, + { + variant: 'text', + pressed: 'true', + styles: { + borderColor: theme.Button.Brand.buttonBorderColor, + backgroundColor: theme.Button.Text.textButtonHoverBg, + }, + }, + + // severity container (override placeholder variant styles) + { + variant: 'basic', + severity: 'info', + styles: { + borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, + backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, + }, + }, + { + variant: 'outlined', + severity: 'info', + styles: { + borderColor: + theme.Button.Severity.Info.Outlined.infoOutlinedButtonBorderColor, + backgroundColor: + theme.Button.Severity.Info.Outlined.infoOutlinedButtonBg, + }, + }, + { + variant: 'text', + severity: 'info', + styles: { + borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, + backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonBg, + }, + }, + { + variant: 'basic', + severity: 'success', + styles: { + borderColor: + theme.Button.Severity.Success.Basic.successButtonBorderColor, + backgroundColor: + theme.Button.Severity.Success.Basic.successButtonBg, + }, + }, + { + variant: 'outlined', + severity: 'success', + styles: { + borderColor: + theme.Button.Severity.Success.Outlined + .successOutlinedButtonBorderColor, + backgroundColor: + theme.Button.Severity.Success.Outlined.successOutlinedButtonBg, + }, + }, + { + variant: 'text', + severity: 'success', + styles: { + borderColor: + theme.Button.Severity.Success.Basic.successButtonBorderColor, + backgroundColor: + theme.Button.Severity.Success.Text.successTextButtonBg, + }, + }, + { + variant: 'basic', + severity: 'warning', + styles: { + borderColor: + theme.Button.Severity.Warning.Basic.warningButtonBorderColor, + backgroundColor: + theme.Button.Severity.Warning.Basic.warningButtonBg, + }, + }, + { + variant: 'outlined', + severity: 'warning', + styles: { + borderColor: + theme.Button.Severity.Warning.Outlined + .warningOutlinedButtonBorderColor, + backgroundColor: + theme.Button.Severity.Warning.Outlined.warningOutlinedButtonBg, + }, + }, + { + variant: 'text', + severity: 'warning', + styles: { + borderColor: + theme.Button.Severity.Warning.Basic.warningButtonBorderColor, + backgroundColor: + theme.Button.Severity.Warning.Text.warningTextButtonBg, + }, + }, + { + variant: 'basic', + severity: 'danger', + styles: { + borderColor: + theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, + backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, + }, + }, + { + variant: 'outlined', + severity: 'danger', + styles: { + borderColor: + theme.Button.Severity.Danger.Outlined + .dangerOutlinedButtonBorderColor, + backgroundColor: + theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonBg, + }, + }, + { + variant: 'text', + severity: 'danger', + styles: { + borderColor: + theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, + backgroundColor: + theme.Button.Severity.Danger.Text.dangerTextButtonBg, + }, + }, + + // severity pressed + { + variant: 'basic', + severity: 'info', + pressed: 'true', + styles: { + borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, + backgroundColor: theme.Button.Severity.Info.Basic.infoButtonHoverBg, + }, + }, + { + variant: 'outlined', + severity: 'info', + pressed: 'true', + styles: { + borderColor: + theme.Button.Severity.Info.Outlined + .infoOutlinedButtonHoverBorderColor, + backgroundColor: + theme.Button.Severity.Info.Outlined.infoOutlinedButtonHoverBg, + }, + }, + { + variant: 'text', + severity: 'info', + pressed: 'true', + styles: { + borderColor: theme.Surface['surface-transparent'], + backgroundColor: + theme.Button.Severity.Info.Text.infoTextButtonHoverBg, + }, + }, + { + variant: 'basic', + severity: 'success', + pressed: 'true', + styles: { + borderColor: + theme.Button.Severity.Success.Basic.successButtonBorderColor, + backgroundColor: + theme.Button.Severity.Success.Basic.successButtonHoverBg, + }, + }, + { + variant: 'outlined', + severity: 'success', + pressed: 'true', + styles: { + borderColor: + theme.Button.Severity.Success.Outlined + .successOutlinedButtonHoverBorderColor, + backgroundColor: + theme.Button.Severity.Success.Outlined + .successOutlinedButtonHoverBg, + }, + }, + { + variant: 'text', + severity: 'success', + pressed: 'true', + styles: { + borderColor: theme.Surface['surface-transparent'], + backgroundColor: + theme.Button.Severity.Success.Text.successTextButtonHoverBg, + }, + }, + { + variant: 'basic', + severity: 'warning', + pressed: 'true', + styles: { + borderColor: + theme.Button.Severity.Warning.Basic.warningButtonBorderColor, + backgroundColor: + theme.Button.Severity.Warning.Basic.warningButtonHoverBg, + }, + }, + { + variant: 'outlined', + severity: 'warning', + pressed: 'true', + styles: { + borderColor: + theme.Button.Severity.Warning.Outlined + .warningOutlinedButtonHoverBorderColor, + backgroundColor: + theme.Button.Severity.Warning.Outlined + .warningOutlinedButtonHoverBg, + }, + }, + { + variant: 'text', + severity: 'warning', + pressed: 'true', + styles: { + borderColor: theme.Surface['surface-transparent'], + backgroundColor: + theme.Button.Severity.Warning.Text.warningTextButtonHoverBg, + }, + }, + { + variant: 'basic', + severity: 'danger', + pressed: 'true', + styles: { + borderColor: + theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, + backgroundColor: + theme.Button.Severity.Danger.Basic.dangerButtonHoverBg, + }, + }, + { + variant: 'outlined', + severity: 'danger', + pressed: 'true', + styles: { + borderColor: + theme.Button.Severity.Danger.Outlined + .dangerOutlinedButtonHoverBorderColor, + backgroundColor: + theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonHoverBg, + }, + }, + { + variant: 'text', + severity: 'danger', + pressed: 'true', + styles: { + borderColor: theme.Surface['surface-transparent'], + backgroundColor: + theme.Button.Severity.Danger.Text.dangerTextButtonHoverBg, + }, + }, + + // link + iconOnly special sizes + { + variant: 'link', + iconOnly: 'true', + size: 'xlarge', + styles: { + paddingHorizontal: spacing.Gap['gap-1'], + paddingVertical: spacing.Gap['gap-1'], + height: sizing.Height['h-2'], + minHeight: sizing.Height['h-2'], + maxHeight: sizing.Height['h-2'], + }, + }, + { + variant: 'link', + iconOnly: 'true', + size: 'large', + styles: { + paddingHorizontal: spacing.Gap['gap-0'], + paddingVertical: spacing.Gap['gap-0'], + height: 24.5, + minHeight: 24.5, + maxHeight: 24.5, + }, + }, + { + variant: 'link', + iconOnly: 'true', + size: 'base', + styles: { + paddingHorizontal: spacing.Gap['gap-1'], + paddingVertical: spacing.Gap['gap-1'], + height: 21.5, + minHeight: 21.5, + maxHeight: 21.5, + }, + }, + { + variant: 'link', + iconOnly: 'true', + size: 'small', + styles: { + paddingHorizontal: spacing.Gap['gap-1'], + paddingVertical: spacing.Gap['gap-1'], + height: sizing.Height['h-1'], + minHeight: sizing.Height['h-2'], + maxHeight: sizing.Height['h-2'], + }, + }, + ], + }, + iconOnly: { aspectRatio: 1 }, + }) +) diff --git a/src/components/Button/utils/ButtonIcon.tsx b/src/components/Button/utils/ButtonIcon.tsx index a9bbfae..3137aaa 100644 --- a/src/components/Button/utils/ButtonIcon.tsx +++ b/src/components/Button/utils/ButtonIcon.tsx @@ -1,31 +1,36 @@ +import { useContext } from 'react' + +import { StyleSheet } from '../../../utils' import { SvgUniversal } from '../../../utils/SvgUniversal' import { genericMemo } from '../../../utils/genericMemo' -import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types' +import type { BaseButtonProps, ButtonSize } from '../types' -import { useIconStyle } from './useIconStyle' +import { ButtonPressedContext } from './ButtonPressedContext' +import { ButtonVariantContext } from './ButtonVariantContext' -export type ButtonIconComponentProps = Pick< - Required>, - 'size' | 'variant' | 'disabled' | 'loading' -> & - Pick, 'Icon'> & - Pick, 'iconVariantStyles'> +export interface ButtonIconProps { + readonly size: ButtonSize + readonly disabled: boolean + readonly loading: boolean + readonly Icon?: BaseButtonProps['Icon'] +} -export const ButtonIconComponent = ({ +const ButtonIconComponent = ({ size, - variant, disabled, loading, Icon, - iconVariantStyles, -}: ButtonIconComponentProps) => { - const iconStyle = useIconStyle( +}: ButtonIconProps) => { + const pressed = useContext(ButtonPressedContext) + const { variant, severity } = useContext(ButtonVariantContext) + + buttonIconStyles.useVariants({ size, variant, - disabled, - loading, - iconVariantStyles - ) + severity, + pressed: pressed ? 'true' : 'false', + disabled: disabled || loading ? 'true' : 'false', + }) if (!Icon) { return null @@ -33,13 +38,151 @@ export const ButtonIconComponent = ({ return ( ) } export const ButtonIcon = genericMemo(ButtonIconComponent) + +const buttonIconStyles = StyleSheet.create(({ theme, typography }) => ({ + icon: { + variants: { + size: { + xlarge: { + height: typography.Size['text-2xl'], + width: typography.Size['text-2xl'], + }, + large: { + height: typography.Size['text-2xl'], + width: typography.Size['text-2xl'], + }, + base: { + height: typography.Size['text-xl'], + width: typography.Size['text-xl'], + }, + small: { + height: typography.Size['text-base'], + width: typography.Size['text-base'], + }, + }, + variant: { + primary: { color: theme.Button.Brand.buttonTextColor }, + secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, + tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, + text: { color: theme.Button.Text.textButtonTextColor }, + link: { color: theme.Button.Text.textButtonTextColor }, + basic: { color: theme.Button.Brand.buttonTextColor }, + outlined: { color: theme.Button.Brand.buttonTextColor }, + }, + severity: { info: {}, success: {}, warning: {}, danger: {} }, + pressed: { true: {}, false: {} }, + disabled: { + true: { color: theme.Button.Disabled.disabledButtonTextColor }, + false: {}, + }, + }, + compoundVariants: [ + // link pressed + { + variant: 'link', + pressed: 'true', + styles: { color: typography.Color.Common['text-color-secondary'] }, + }, + + // severity icon colors + { + variant: 'basic', + severity: 'info', + styles: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor }, + }, + { + variant: 'outlined', + severity: 'info', + styles: { + color: + theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor, + }, + }, + { + variant: 'text', + severity: 'info', + styles: { + color: theme.Button.Severity.Info.Text.infoTextButtonTextColor, + }, + }, + { + variant: 'basic', + severity: 'success', + styles: { + color: theme.Button.Severity.Success.Basic.successButtonTextColor, + }, + }, + { + variant: 'outlined', + severity: 'success', + styles: { + color: + theme.Button.Severity.Success.Outlined + .successOutlinedButtonTextColor, + }, + }, + { + variant: 'text', + severity: 'success', + styles: { + color: theme.Button.Severity.Success.Text.successTextButtonTextColor, + }, + }, + { + variant: 'basic', + severity: 'warning', + styles: { + color: theme.Button.Severity.Warning.Basic.warningButtonTextColor, + }, + }, + { + variant: 'outlined', + severity: 'warning', + styles: { + color: + theme.Button.Severity.Warning.Outlined + .warningOutlinedButtonTextColor, + }, + }, + { + variant: 'text', + severity: 'warning', + styles: { + color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor, + }, + }, + { + variant: 'basic', + severity: 'danger', + styles: { + color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor, + }, + }, + { + variant: 'outlined', + severity: 'danger', + styles: { + color: + theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor, + }, + }, + { + variant: 'text', + severity: 'danger', + styles: { + color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor, + }, + }, + ], + }, +})) diff --git a/src/components/Button/utils/ButtonLabel.tsx b/src/components/Button/utils/ButtonLabel.tsx index 9971bd9..235e423 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -1,46 +1,178 @@ +import { useContext } from 'react' import { Text } from 'react-native' +import { StyleSheet } from '../../../utils' import { genericMemo } from '../../../utils/genericMemo' -import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types' +import type { BaseButtonProps, ButtonSize } from '../types' -import { useButtonLabelStyle } from './useButtonLabelStyle' +import { ButtonPressedContext } from './ButtonPressedContext' +import { ButtonVariantContext } from './ButtonVariantContext' -export type ButtonLabelComponentProps = Pick< - BaseButtonProps, - 'iconOnly' | 'label' -> & - Pick< - Required>, - 'size' | 'variant' | 'disabled' | 'loading' - > & - Pick, 'labelVariantStyles'> +export interface ButtonLabelProps { + readonly iconOnly?: BaseButtonProps['iconOnly'] + readonly label?: string + readonly size: ButtonSize + readonly disabled: boolean + readonly loading: boolean +} -export const ButtonLabelComponent = ({ +const ButtonLabelComponent = ({ label, iconOnly, size, disabled, loading, - variant, - labelVariantStyles, -}: ButtonLabelComponentProps) => { - const labelStyle = useButtonLabelStyle( +}: ButtonLabelProps) => { + const pressed = useContext(ButtonPressedContext) + const { variant, severity } = useContext(ButtonVariantContext) + + buttonLabelStyles.useVariants({ size, variant, - disabled, - loading, - labelVariantStyles - ) + severity, + pressed: pressed ? 'true' : 'false', + disabled: disabled || loading ? 'true' : 'false', + }) if (iconOnly) { return null } return ( - + {label} ) } export const ButtonLabel = genericMemo(ButtonLabelComponent) + +const buttonLabelStyles = StyleSheet.create(({ theme, typography, fonts }) => ({ + label: { + fontWeight: 600, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.primary, + variants: { + size: { + xlarge: { fontSize: typography.Size['text-xl'] }, + large: { fontSize: typography.Size['text-xl'] }, + base: { fontSize: typography.Size['text-base'] }, + small: { fontSize: typography.Size['text-sm'] }, + }, + variant: { + primary: { color: theme.Button.Brand.buttonTextColor }, + secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, + tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, + text: { color: theme.Button.Text.textButtonTextColor }, + link: { color: theme.Button.Text.textButtonTextColor }, + basic: { color: theme.Button.Brand.buttonTextColor }, + outlined: { color: theme.Button.Brand.buttonTextColor }, + }, + severity: { info: {}, success: {}, warning: {}, danger: {} }, + pressed: { true: {}, false: {} }, + disabled: { + true: { color: theme.Button.Disabled.disabledButtonTextColor }, + false: {}, + }, + }, + compoundVariants: [ + // link pressed color change + { + variant: 'link', + pressed: 'true', + styles: { color: typography.Color.Common['text-color-secondary'] }, + }, + + // severity label colors + { + variant: 'basic', + severity: 'info', + styles: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor }, + }, + { + variant: 'outlined', + severity: 'info', + styles: { + color: + theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor, + }, + }, + { + variant: 'text', + severity: 'info', + styles: { + color: theme.Button.Severity.Info.Text.infoTextButtonTextColor, + }, + }, + { + variant: 'basic', + severity: 'success', + styles: { + color: theme.Button.Severity.Success.Basic.successButtonTextColor, + }, + }, + { + variant: 'outlined', + severity: 'success', + styles: { + color: + theme.Button.Severity.Success.Outlined + .successOutlinedButtonTextColor, + }, + }, + { + variant: 'text', + severity: 'success', + styles: { + color: theme.Button.Severity.Success.Text.successTextButtonTextColor, + }, + }, + { + variant: 'basic', + severity: 'warning', + styles: { + color: theme.Button.Severity.Warning.Basic.warningButtonTextColor, + }, + }, + { + variant: 'outlined', + severity: 'warning', + styles: { + color: + theme.Button.Severity.Warning.Outlined + .warningOutlinedButtonTextColor, + }, + }, + { + variant: 'text', + severity: 'warning', + styles: { + color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor, + }, + }, + { + variant: 'basic', + severity: 'danger', + styles: { + color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor, + }, + }, + { + variant: 'outlined', + severity: 'danger', + styles: { + color: + theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor, + }, + }, + { + variant: 'text', + severity: 'danger', + styles: { + color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor, + }, + }, + ], + }, +})) diff --git a/src/components/Button/utils/ButtonLeftArea.tsx b/src/components/Button/utils/ButtonLeftArea.tsx index 5ea7b3e..55569a2 100644 --- a/src/components/Button/utils/ButtonLeftArea.tsx +++ b/src/components/Button/utils/ButtonLeftArea.tsx @@ -1,38 +1,30 @@ import { genericMemo } from '../../../utils/genericMemo' -import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types' +import type { BaseButtonProps, ButtonSize } from '../types' import { ButtonActivityIndicator } from './ButtonActivityIndicator' import { ButtonIcon } from './ButtonIcon' -export type ButtonLeftAreaComponentProps = Pick< - BaseButtonProps, - 'iconPosition' | 'Icon' -> & - Pick< - Required>, - 'size' | 'variant' | 'loading' | 'disabled' - > & - Pick, 'iconVariantStyles'> +export interface ButtonLeftAreaProps { + readonly size: ButtonSize + readonly iconPosition?: BaseButtonProps['iconPosition'] + readonly loading: boolean + readonly disabled: boolean + readonly Icon?: BaseButtonProps['Icon'] +} -export const ButtonLeftAreaComponent = ({ +const ButtonLeftAreaComponent = ({ size, iconPosition, - variant, Icon, loading, disabled, - iconVariantStyles, -}: ButtonLeftAreaComponentProps) => { +}: ButtonLeftAreaProps) => { if (iconPosition === 'left' || iconPosition === 'prefix') { if (loading && !disabled) { return } - return ( - - ) + return } return null diff --git a/src/components/Button/utils/ButtonPressedContext.ts b/src/components/Button/utils/ButtonPressedContext.ts new file mode 100644 index 0000000..0a8bfcc --- /dev/null +++ b/src/components/Button/utils/ButtonPressedContext.ts @@ -0,0 +1,3 @@ +import { createContext } from 'react' + +export const ButtonPressedContext = createContext(false) diff --git a/src/components/Button/utils/ButtonRightArea.tsx b/src/components/Button/utils/ButtonRightArea.tsx index 0a98ad8..5967b75 100644 --- a/src/components/Button/utils/ButtonRightArea.tsx +++ b/src/components/Button/utils/ButtonRightArea.tsx @@ -1,38 +1,30 @@ import { genericMemo } from '../../../utils/genericMemo' -import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types' +import type { BaseButtonProps, ButtonSize } from '../types' import { ButtonActivityIndicator } from './ButtonActivityIndicator' import { ButtonIcon } from './ButtonIcon' -export type ButtonRightAreaComponentProps = Pick< - BaseButtonProps, - 'iconPosition' | 'Icon' -> & - Pick< - Required>, - 'size' | 'variant' | 'loading' | 'disabled' - > & - Pick, 'iconVariantStyles'> +export interface ButtonRightAreaProps { + readonly size: ButtonSize + readonly iconPosition?: BaseButtonProps['iconPosition'] + readonly loading: boolean + readonly disabled: boolean + readonly Icon?: BaseButtonProps['Icon'] +} -const ButtonRightAreaComponent = ({ +const ButtonRightAreaComponent = ({ size, iconPosition, - variant, Icon, loading, disabled, - iconVariantStyles, -}: ButtonRightAreaComponentProps) => { +}: ButtonRightAreaProps) => { if (iconPosition === 'right' || iconPosition === 'postfix') { if (loading && !disabled) { return } - return ( - - ) + return } return null diff --git a/src/components/Button/utils/ButtonVariantContext.ts b/src/components/Button/utils/ButtonVariantContext.ts new file mode 100644 index 0000000..82cafe0 --- /dev/null +++ b/src/components/Button/utils/ButtonVariantContext.ts @@ -0,0 +1,12 @@ +import { createContext } from 'react' + +import type { ButtonSeverity, ButtonVariant } from '../types' + +export interface ButtonVariantContextValue { + variant: ButtonVariant + severity?: ButtonSeverity +} + +export const ButtonVariantContext = createContext({ + variant: 'primary', +}) diff --git a/src/components/Button/utils/useButtonContainerCallbackStyle.ts b/src/components/Button/utils/useButtonContainerCallbackStyle.ts deleted file mode 100644 index db44759..0000000 --- a/src/components/Button/utils/useButtonContainerCallbackStyle.ts +++ /dev/null @@ -1,189 +0,0 @@ -import { useCallback, useMemo } from 'react' -import { - type PressableStateCallbackType, - type StyleProp, - StyleSheet, - type ViewStyle, -} from 'react-native' - -import { makeStyles } from '../../../utils/makeStyles' -import type { - BaseButtonProps, - ButtonVariant, - ContainerVariantStyles, - PressedVariantStyles, -} from '../types' - -import { useTypeBasedStyle } from './useTypeBasedStyle' - -export const useButtonContainerCallbackStyle = ( - size: Required>['size'], - variant: Required>['variant'], - shape: Required>['shape'], - disabled: Required>['disabled'], - loading: Required>['loading'], - iconOnly: Required>['iconOnly'], - style: BaseButtonProps['style'], - containerVariantStyles: ContainerVariantStyles, - pressedVariantStyles: PressedVariantStyles -) => { - const styles = useButtonContainerStyle() - - const sizeBasedStyle = useTypeBasedStyle(size, styles) - const variantBasedStyle = useTypeBasedStyle(variant, containerVariantStyles) - const shapeBasedStyle = useTypeBasedStyle(shape, styles) - const pressedStyle = useTypeBasedStyle(variant, pressedVariantStyles) - const iconOnlyLinkContainerStyle = useIconOnlyLinkContainerStyle() - const disabledStyle = useMemo(() => { - if (variant === 'link') { - return - } - - return styles.disabled - }, [styles.disabled, variant]) - - return useCallback( - ({ pressed }: PressableStateCallbackType) => { - const containerStyle: Array> = [ - styles.container, - sizeBasedStyle, - variantBasedStyle, - shapeBasedStyle, - ] - - if (iconOnly) { - containerStyle.push(styles.iconOnly) - - if (variant === 'link') { - containerStyle.push(iconOnlyLinkContainerStyle[size]) - } - } - - if (disabled || loading) { - containerStyle.push(disabledStyle) - } - - if (pressed) { - containerStyle.push(pressedStyle) - } - - if (typeof style === 'function') { - containerStyle.push(style({ pressed })) - } else { - containerStyle.push(style) - } - - return StyleSheet.flatten(containerStyle) - }, - [ - disabled, - disabledStyle, - iconOnly, - iconOnlyLinkContainerStyle, - loading, - pressedStyle, - shapeBasedStyle, - size, - sizeBasedStyle, - style, - styles.container, - styles.iconOnly, - variant, - variantBasedStyle, - ] - ) -} - -const useButtonContainerStyle = makeStyles(({ theme, border, spacing }) => ({ - container: { - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - borderWidth: border.Width.border, - }, - - xlarge: { - paddingHorizontal: spacing.Padding['p-6'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightXL, - minHeight: theme.Button.Common.buttonHeightXL, - maxHeight: theme.Button.Common.buttonHeightXL, - gap: spacing.Gap['gap-3'], - borderRadius: theme.General.borderRadius2XL, - }, - - large: { - paddingHorizontal: spacing.Padding['p-6'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightLG, - minHeight: theme.Button.Common.buttonHeightLG, - maxHeight: theme.Button.Common.buttonHeightLG, - gap: spacing.Gap['gap-3'], - borderRadius: theme.General.borderRadius2XL, - }, - - base: { - paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeight, - minHeight: theme.Button.Common.buttonHeight, - maxHeight: theme.Button.Common.buttonHeight, - gap: theme.General.inlineSpacing, - borderRadius: theme.General.borderRadiusXL, - }, - - small: { - paddingHorizontal: spacing.Padding['p-3'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightSM, - minHeight: theme.Button.Common.buttonHeightSM, - maxHeight: theme.Button.Common.buttonHeightSM, - gap: theme.General.inlineSpacing, - borderRadius: theme.General.borderRadiusXL, - }, - - square: {}, - - circle: { borderRadius: border.Radius['rounded-full'] }, - - disabled: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - }, - - iconOnly: { aspectRatio: 1 }, -})) - -const useIconOnlyLinkContainerStyle = makeStyles(({ spacing, sizing }) => ({ - xlarge: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: sizing.Height['h-2'], - minHeight: sizing.Height['h-2'], - maxHeight: sizing.Height['h-2'], - }, - - large: { - paddingHorizontal: spacing.Gap['gap-0'], - paddingVertical: spacing.Gap['gap-0'], - height: 24.5, - minHeight: 24.5, - maxHeight: 24.5, - }, - - base: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: 21.5, - minHeight: 21.5, - maxHeight: 21.5, - }, - - small: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: sizing.Height['h-1'], - minHeight: sizing.Height['h-2'], - maxHeight: sizing.Height['h-2'], - }, -})) diff --git a/src/components/Button/utils/useButtonLabelStyle.ts b/src/components/Button/utils/useButtonLabelStyle.ts deleted file mode 100644 index e403303..0000000 --- a/src/components/Button/utils/useButtonLabelStyle.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { useMemo } from 'react' -import { type StyleProp, StyleSheet, type TextStyle } from 'react-native' - -import { makeStyles } from '../../../utils/makeStyles' -import type { - BaseButtonProps, - ButtonVariant, - LabelVariantStyles, -} from '../types' - -import { useTypeBasedStyle } from './useTypeBasedStyle' - -export const useButtonLabelStyle = ( - size: Required>['size'], - variant: Required>['variant'], - disabled: Required>['disabled'], - loading: Required>['loading'], - labelVariantStyles: LabelVariantStyles -) => { - const styles = useButtonLabelStyles() - - const sizeBasedStyle = useTypeBasedStyle(size, styles) - const variantBasedStyle = useTypeBasedStyle(variant, labelVariantStyles) - - return useMemo(() => { - const containerStyle: Array> = [ - styles.font, - sizeBasedStyle, - variantBasedStyle, - ] - - if (disabled || loading) { - containerStyle.push(styles.disabled) - } - - return StyleSheet.flatten(containerStyle) - }, [ - disabled, - loading, - sizeBasedStyle, - styles.disabled, - styles.font, - variantBasedStyle, - ]) -} - -const useButtonLabelStyles = makeStyles(({ theme, typography, fonts }) => ({ - font: { - fontWeight: 600, - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - }, - - xlarge: { fontSize: typography.Size['text-xl'] }, - - large: { fontSize: typography.Size['text-xl'] }, - - base: { fontSize: typography.Size['text-base'] }, - - small: { fontSize: typography.Size['text-sm'] }, - - disabled: { color: theme.Button.Disabled.disabledButtonTextColor }, -})) diff --git a/src/components/Button/utils/useIconStyle.ts b/src/components/Button/utils/useIconStyle.ts deleted file mode 100644 index f319ac2..0000000 --- a/src/components/Button/utils/useIconStyle.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { useMemo } from 'react' -import { type ColorValue, StyleSheet, type TextStyle } from 'react-native' - -import { makeStyles } from '../../../utils/makeStyles' -import type { - BaseButtonProps, - ButtonVariant, - IconVariantStyles, -} from '../types' - -import { useTypeBasedStyle } from './useTypeBasedStyle' - -export const useIconStyle = ( - size: Required>['size'], - variant: Required>['variant'], - disabled: Required>['disabled'], - loading: Required>['loading'], - iconVariantStyles: IconVariantStyles -) => { - const styles = useStyles() - - const sizeBasedStyle = useTypeBasedStyle(size, styles) - const variantBasedStyle = useTypeBasedStyle(variant, iconVariantStyles) - - return useMemo(() => { - const containerStyle = [sizeBasedStyle, variantBasedStyle] as TextStyle[] - - if (disabled || loading) { - containerStyle.push(styles.disabled) - } - - return StyleSheet.flatten(containerStyle) as { - width: number - height: number - color: ColorValue - } - }, [disabled, loading, sizeBasedStyle, styles.disabled, variantBasedStyle]) -} - -const useStyles = makeStyles(({ theme, typography }) => ({ - xlarge: { - height: typography.Size['text-2xl'], - width: typography.Size['text-2xl'], - }, - - large: { - height: typography.Size['text-2xl'], - width: typography.Size['text-2xl'], - }, - - base: { - height: typography.Size['text-xl'], - width: typography.Size['text-xl'], - }, - - small: { - height: typography.Size['text-base'], - width: typography.Size['text-base'], - }, - - disabled: { color: theme.Button.Disabled.disabledButtonTextColor }, -})) diff --git a/src/components/Button/utils/useTypeBasedStyle.ts b/src/components/Button/utils/useTypeBasedStyle.ts deleted file mode 100644 index afcdcaf..0000000 --- a/src/components/Button/utils/useTypeBasedStyle.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useMemo } from 'react' -import type { StyleProp, ViewStyle, TextStyle, ImageStyle } from 'react-native' - -export const useTypeBasedStyle = < - Type extends string, - Style extends TextStyle | ViewStyle | ImageStyle | object, ->( - type: Type, - styles: Record> -) => { - return useMemo(() => styles[type], [styles, type]) -} diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index c402c4a..1f9d87d 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,16 +1,14 @@ import { IconCheck, IconMinus } from '@tabler/icons-react-native' -import React, { memo, useCallback, useMemo, useState } from 'react' +import { memo, useCallback, useMemo, useState } from 'react' import { type AccessibilityProps, + StyleSheet as RNStyleSheet, Pressable, - StyleSheet, View, } from 'react-native' import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils' -import { makeStyles } from '../../utils/makeStyles' - -import { usePressableStyles } from './hooks/usePressableStyles' +import { StyleSheet } from '../../utils' type CheckboxState = 'default' | 'danger' @@ -41,7 +39,7 @@ export interface CheckboxProps * Используется для множественного выбора элементов * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5316 */ -export const Checkbox = memo( +export const Checkbox = memo( ({ onPress, checked = false, @@ -52,6 +50,15 @@ export const Checkbox = memo( }: CheckboxProps) => { const [isPressed, setIsPressed] = useState(false) + const filled = checked || indeterminate + + styles.useVariants({ + filled: filled ? 'true' : 'false', + pressed: isPressed ? 'true' : 'false', + state: state === 'danger' ? 'danger' : undefined, + disabled: disabled ? 'true' : 'false', + }) + const Icon = useMemo(() => { if (indeterminate) { return IconMinus @@ -64,15 +71,6 @@ export const Checkbox = memo( return null }, [indeterminate, checked]) - const getPressableStyles = usePressableStyles({ - checked, - indeterminate, - disabled, - state, - }) - - const styles = useStyles() - const onPressIn = useCallback(() => { setIsPressed(true) }, []) @@ -81,10 +79,6 @@ export const Checkbox = memo( setIsPressed(false) }, []) - const pressableStyles = useMemo(() => { - return getPressableStyles(isPressed) - }, [getPressableStyles, isPressed]) - return ( ( onPressIn={onPressIn} onPressOut={onPressOut} > - + {Icon ? ( ( } ) -const useStyles = makeStyles(({ theme, sizing }) => ({ +const styles = StyleSheet.create(({ theme, border, sizing }) => ({ container: { justifyContent: 'center', alignItems: 'center', width: theme.Form.Checkbox.checkboxWidth, height: theme.Form.Checkbox.checkboxHeight, }, - background: { ...StyleSheet.absoluteFillObject }, + background: { ...RNStyleSheet.absoluteFillObject }, + backgroundState: { + borderRadius: border.Radius['rounded-lg'], + borderWidth: border.Width.border, + variants: { + filled: { + true: { + backgroundColor: theme.Form.Checkbox.checkboxActiveBg, + borderColor: theme.Form.Checkbox.checkboxActiveBorderColor, + }, + false: { + backgroundColor: theme.Form.InputText.inputBg, + borderColor: theme.Form.InputText.inputBorderColor, + }, + }, + pressed: { + true: { borderColor: theme.Form.InputText.inputHoverBorderColor }, + false: {}, + }, + state: { + danger: { + borderColor: theme.Form.InputText.inputErrorBorderColor, + outlineStyle: 'solid', + outlineColor: theme.General.focusOutlineErrorColor, + outlineWidth: Math.round(theme.General.focusShadowWidth), + }, + }, + disabled: { true: { outlineWidth: 0 }, false: {} }, + }, + compoundVariants: [ + { + filled: 'true', + pressed: 'true', + styles: { + backgroundColor: theme.Form.Checkbox.checkboxActiveHoverBg, + borderColor: theme.Form.Checkbox.checkboxActiveHoverBorderColor, + }, + }, + { + filled: 'false', + disabled: 'true', + styles: { + backgroundColor: theme.Button.Disabled.disabledButtonBg, + borderColor: theme.Form.InputText.inputBorderColor, + mixBlendMode: 'luminosity', + }, + }, + { + filled: 'true', + disabled: 'true', + styles: { + borderColor: theme.Form.Checkbox.checkboxActiveBorderColor, + opacity: 0.2, + mixBlendMode: 'luminosity', + }, + }, + ], + }, icon: { height: sizing.Height['h-1'], width: sizing.Width['w-1'], diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap index 3a300dc..e4ca822 100644 --- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap @@ -53,23 +53,15 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#ffffff", - "borderColor": "#db3424", - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, - }, - false, - false, - ], + { + "backgroundColor": "#ffffff", + "borderColor": "#db3424", + "borderRadius": 7, + "borderWidth": 1, + "outlineColor": "#fff0f0", + "outlineStyle": "solid", + "outlineWidth": 4, + }, ] } /> @@ -129,20 +121,12 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#ffffff", - "borderColor": "#cecfd2", - }, - false, - false, - ], + { + "backgroundColor": "#ffffff", + "borderColor": "#cecfd2", + "borderRadius": 7, + "borderWidth": 1, + }, ] } /> @@ -202,23 +186,15 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, - }, - false, - false, - ], + { + "backgroundColor": "#2b2e33", + "borderColor": "#db3424", + "borderRadius": 7, + "borderWidth": 1, + "outlineColor": "#fff0f0", + "outlineStyle": "solid", + "outlineWidth": 4, + }, ] } /> @@ -360,20 +336,12 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#2b2e33", - "borderColor": "#2b2e33", - }, - false, - false, - ], + { + "backgroundColor": "#2b2e33", + "borderColor": "#2b2e33", + "borderRadius": 7, + "borderWidth": 1, + }, ] } /> @@ -515,23 +483,15 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, - }, - false, - false, - ], + { + "backgroundColor": "#2b2e33", + "borderColor": "#db3424", + "borderRadius": 7, + "borderWidth": 1, + "outlineColor": "#fff0f0", + "outlineStyle": "solid", + "outlineWidth": 4, + }, ] } /> @@ -673,20 +633,12 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#2b2e33", - "borderColor": "#2b2e33", - }, - false, - false, - ], + { + "backgroundColor": "#2b2e33", + "borderColor": "#2b2e33", + "borderRadius": 7, + "borderWidth": 1, + }, ] } /> @@ -828,28 +780,17 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, - }, - { - "borderColor": "#2b2e33", - "mixBlendMode": "luminosity", - "opacity": 0.2, - "outlineWidth": 0, - }, - false, - ], + { + "backgroundColor": "#2b2e33", + "borderColor": "#2b2e33", + "borderRadius": 7, + "borderWidth": 1, + "mixBlendMode": "luminosity", + "opacity": 0.2, + "outlineColor": "#fff0f0", + "outlineStyle": "solid", + "outlineWidth": 0, + }, ] } /> @@ -991,25 +932,15 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#2b2e33", - "borderColor": "#2b2e33", - }, - { - "borderColor": "#2b2e33", - "mixBlendMode": "luminosity", - "opacity": 0.2, - "outlineWidth": 0, - }, - false, - ], + { + "backgroundColor": "#2b2e33", + "borderColor": "#2b2e33", + "borderRadius": 7, + "borderWidth": 1, + "mixBlendMode": "luminosity", + "opacity": 0.2, + "outlineWidth": 0, + }, ] } /> @@ -1151,20 +1082,12 @@ exports[`Checkbox snapshots default 1`] = ` "right": 0, "top": 0, }, - [ - { - "borderRadius": 7, - "borderWidth": 1, - "height": 21, - "width": 21, - }, - { - "backgroundColor": "#ffffff", - "borderColor": "#cecfd2", - }, - false, - false, - ], + { + "backgroundColor": "#ffffff", + "borderColor": "#cecfd2", + "borderRadius": 7, + "borderWidth": 1, + }, ] } /> diff --git a/src/components/Checkbox/hooks/usePressableStyles.ts b/src/components/Checkbox/hooks/usePressableStyles.ts deleted file mode 100644 index 900a1b4..0000000 --- a/src/components/Checkbox/hooks/usePressableStyles.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { useCallback, useMemo } from 'react' - -import { makeStyles } from '../../../utils/makeStyles' -import type { CheckboxProps } from '../Checkbox' - -export const usePressableStyles = ({ - checked, - indeterminate = false, - disabled = false, - state, -}: Pick) => { - const styles = useStyles() - - const styleMap = useMemo( - () => ({ - default: { filled: styles.defaultFilled, clean: styles.defaultClean }, - disabled: { filled: styles.disabledFilled, clean: styles.disabledClean }, - danger: { - filled: { ...styles.dangerFilled, ...styles.dangerOutline }, - clean: { ...styles.dangerClean, ...styles.dangerOutline }, - }, - hover: { filled: styles.hoverFilled, clean: styles.hoverClean }, - }), - [ - styles.defaultFilled, - styles.defaultClean, - styles.disabledFilled, - styles.disabledClean, - styles.dangerFilled, - styles.dangerClean, - styles.hoverFilled, - styles.hoverClean, - styles.dangerOutline, - ] - ) - - return useCallback( - (pressed: boolean) => { - const isFilled = checked || indeterminate - const stateStyles = - state in styleMap && isFilled - ? styleMap[state].filled - : styleMap[state].clean - const disabledStyles = isFilled - ? styleMap.disabled.filled - : styleMap.disabled.clean - const pressedStyles = isFilled - ? styleMap.hover.filled - : styleMap.hover.clean - - return [ - styles.container, - stateStyles, - disabled && disabledStyles, - pressed && pressedStyles, - ] - }, - [checked, indeterminate, disabled, state, styles.container, styleMap] - ) -} - -const useStyles = makeStyles(({ theme, border }) => ({ - container: { - width: theme.Form.Checkbox.checkboxWidth, - height: theme.Form.Checkbox.checkboxHeight, - borderRadius: border.Radius['rounded-lg'], - borderWidth: border.Width.border, - }, - defaultClean: { - backgroundColor: theme.Form.InputText.inputBg, - borderColor: theme.Form.InputText.inputBorderColor, - }, - defaultFilled: { - backgroundColor: theme.Form.Checkbox.checkboxActiveBg, - borderColor: theme.Form.Checkbox.checkboxActiveBorderColor, - }, - hoverClean: { - backgroundColor: theme.Form.InputText.inputBg, - borderColor: theme.Form.InputText.inputHoverBorderColor, - }, - hoverFilled: { - backgroundColor: theme.Form.Checkbox.checkboxActiveHoverBg, - borderColor: theme.Form.Checkbox.checkboxActiveHoverBorderColor, - }, - dangerClean: { - backgroundColor: theme.Form.InputText.inputBg, - borderColor: theme.Form.InputText.inputErrorBorderColor, - }, - dangerFilled: { - backgroundColor: theme.Form.Checkbox.checkboxActiveBg, - borderColor: theme.Form.InputText.inputErrorBorderColor, - }, - dangerOutline: { - outlineStyle: 'solid', - outlineColor: theme.General.focusOutlineErrorColor, - outlineWidth: Math.round(theme.General.focusShadowWidth), - }, - disabledClean: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Form.InputText.inputBorderColor, - outlineWidth: 0, - mixBlendMode: 'luminosity', - }, - disabledFilled: { - borderColor: theme.Form.Checkbox.checkboxActiveBorderColor, - opacity: 0.2, - outlineWidth: 0, - mixBlendMode: 'luminosity', - }, -})) diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index ffc52bc..6af29c9 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -2,8 +2,8 @@ import { IconX } from '@tabler/icons-react-native' import { memo } from 'react' import { Text, Pressable, type PressableProps } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' export interface ChipProps extends PressableProps { /** SVG-иконка */ @@ -40,8 +40,6 @@ export const Chip = memo( showIcon = true, ...rest }) => { - const styles = useStyles() - return ( ( } ) -const useStyles = makeStyles(({ theme, typography, border, fonts }) => ({ +const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({ chip: { height: theme.Misc.Chip.chipHeight, alignSelf: 'flex-start', diff --git a/src/components/Dialog/DialogComponent.tsx b/src/components/Dialog/DialogComponent.tsx index fd963ad..0f985c6 100644 --- a/src/components/Dialog/DialogComponent.tsx +++ b/src/components/Dialog/DialogComponent.tsx @@ -1,7 +1,7 @@ import React, { type ReactNode } from 'react' import { View, useWindowDimensions } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' export interface DialogComponentProps { readonly body?: React.ComponentType @@ -14,7 +14,6 @@ export const DialogComponent: React.FC = ({ footer: Footer, header = null, }) => { - const styles = useStyles() const { width, height } = useWindowDimensions() const maxSize = { maxWidth: width - 40, maxHeight: height - 100 } @@ -37,7 +36,7 @@ export const DialogComponent: React.FC = ({ ) } -const useStyles = makeStyles(({ theme }) => ({ +const styles = StyleSheet.create(({ theme }) => ({ root: { backgroundColor: theme.Overlay.Dialog.Header.dialogHeaderBg, borderColor: theme.Overlay.Overlay.overlayContentBorderColor, diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index dfffd1d..8e8e683 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -10,7 +10,7 @@ import { import { useMemo } from 'react' import { TouchableOpacity, View } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { Title } from '../Typography' type Severity = 'danger' | 'warning' | 'info' | 'success' | 'help' @@ -34,7 +34,6 @@ export const DialogHeader = ({ onClose, severity, }: DialogHeaderProps) => { - const styles = useStyles() const tids = DialogHeaderTestId const icon = useMemo(() => { @@ -43,7 +42,7 @@ export const DialogHeader = ({ const Icon = iconsMap[severity] return - }, [severity, styles]) + }, [severity]) return ( <> @@ -68,7 +67,7 @@ export const DialogHeader = ({ ) } -const useStyles = makeStyles(({ theme, spacing, typography, border }) => ({ +const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({ text: { flex: 1 }, header: { flexDirection: 'row', diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 52406f5..4fae623 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -1,8 +1,8 @@ import { memo, useMemo } from 'react' import { View, type ViewStyle, type StyleProp } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' import { Subtitle } from '../Typography' export interface DividerProps { @@ -63,7 +63,6 @@ export const Divider = memo( style, Icon, }) => { - const styles = useStyles() const isVertical = useMemo(() => layout === 'vertical', [layout]) const showIcon = useMemo( () => !!(showIconProp && Icon), @@ -77,7 +76,7 @@ export const Divider = memo( const lineStyle = useMemo( () => [styles.line, type === 'dash' && styles.lineDash], - [styles.line, styles.lineDash, type] + [type] ) return ( @@ -132,7 +131,7 @@ export const Divider = memo( } ) -const useStyles = makeStyles(({ spacing, theme, sizing, typography }) => ({ +const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ container: { minHeight: sizing.Height['h-2'], flexDirection: 'row', diff --git a/src/components/Input/InputGroup.tsx b/src/components/Input/InputGroup.tsx index b837943..dd1e8e7 100644 --- a/src/components/Input/InputGroup.tsx +++ b/src/components/Input/InputGroup.tsx @@ -2,12 +2,12 @@ import { memo, useCallback, useImperativeHandle, useMemo, useRef } from 'react' import { type TextInput, View, - StyleSheet, + StyleSheet as RNStyleSheet, type ViewStyle, type StyleProp, } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { InputGroupAddon, type InputGroupAddonProps } from './InputGroupAddon' import { InputTextBase } from './InputTextBase/InputTextBase' @@ -40,7 +40,6 @@ export const InputGroup = memo( inputRef: propsInputRef, ...otherProps }) => { - const styles = useStyles() const inputRef = useRef(null) const focus = useCallback(() => inputRef.current?.focus(), [inputRef]) @@ -51,18 +50,12 @@ export const InputGroup = memo( ) const containerStyle = useMemo(() => { - return StyleSheet.flatten([ + return RNStyleSheet.flatten([ styles.inputContainer, !!left && styles.inputContainerForLeftAddon, !!right && styles.inputContainerForRightAddon, ]) - }, [ - left, - right, - styles.inputContainer, - styles.inputContainerForLeftAddon, - styles.inputContainerForRightAddon, - ]) + }, [left, right]) return ( @@ -97,7 +90,7 @@ export const InputGroup = memo( } ) -const useStyles = makeStyles(() => ({ +const styles = StyleSheet.create(() => ({ container: { flexDirection: 'row' }, inputWrapper: { flexGrow: 1, zIndex: 10 }, inputContainer: { flexGrow: 1 }, diff --git a/src/components/Input/InputGroupAddon.tsx b/src/components/Input/InputGroupAddon.tsx index 6ad2456..14e5cba 100644 --- a/src/components/Input/InputGroupAddon.tsx +++ b/src/components/Input/InputGroupAddon.tsx @@ -1,8 +1,8 @@ import { memo } from 'react' import { Pressable, Text } from 'react-native' +import { StyleSheet } from '../../utils' import { SvgUniversal, type SvgSource } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' export interface InputGroupAddonProps { /** Содержимое аддона инпут группы, текст или SVG-иконка */ @@ -22,8 +22,6 @@ export interface InputGroupAddonProps { */ export const InputGroupAddon = memo( ({ content, onPress, position, disabled }) => { - const styles = useStyles() - return ( ( } ) -const useStyles = makeStyles(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ container: { paddingVertical: theme.Form.InputText.inputPaddingTopBottom, paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, diff --git a/src/components/Input/InputOtp/InputOtp.tsx b/src/components/Input/InputOtp/InputOtp.tsx index e747ccf..0a6f653 100644 --- a/src/components/Input/InputOtp/InputOtp.tsx +++ b/src/components/Input/InputOtp/InputOtp.tsx @@ -18,7 +18,7 @@ import { type BlurEvent, } from 'react-native' -import { makeStyles } from '../../../utils/makeStyles' +import { StyleSheet } from '../../../utils' import { InputOtpItem } from './InputOtpItem' @@ -50,7 +50,6 @@ export const InputOtp = memo( onBlur, ...rest }) => { - const styles = useStyles() const [isFocused, setIsFocused] = useState(false) const inputRef = useRef(null) @@ -137,7 +136,7 @@ export const InputOtp = memo( } ) -const useStyles = makeStyles(({ spacing }) => ({ +const styles = StyleSheet.create(({ spacing }) => ({ container: {}, content: { flexDirection: 'row', gap: spacing.Gap['gap-2'] }, diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index f40c123..1af3b84 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -9,7 +9,7 @@ import Animated, { withTiming, } from 'react-native-reanimated' -import { makeStyles } from '../../../utils/makeStyles' +import { StyleSheet } from '../../../utils' export interface InputOtpItemProps extends Pick { value?: string @@ -23,8 +23,6 @@ const CURSOR_ANIMATION_DURATION = 500 export const InputOtpItem = memo( ({ value, error, pressed, disabled, focused, testID }) => { - const styles = useStyles() - const opacity = useSharedValue(1) useEffect(() => { @@ -66,7 +64,7 @@ export const InputOtpItem = memo( } ) -const useStyles = makeStyles(({ theme, border, fonts, typography }) => ({ +const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({ container: { minHeight: theme.Button.Common.buttonHeight, minWidth: theme.Button.Common.buttonHeight, diff --git a/src/components/Input/InputSwitch/InputSwitch.tsx b/src/components/Input/InputSwitch/InputSwitch.tsx index a2a5241..bb06abf 100644 --- a/src/components/Input/InputSwitch/InputSwitch.tsx +++ b/src/components/Input/InputSwitch/InputSwitch.tsx @@ -19,11 +19,8 @@ export const InputSwitch = memo( danger = false, ...props }) => { - const { sliderStyle, onPressedChange } = useSliderStyles( - checked, - disabled, - danger - ) + const { containerStyle, sliderStyle, onPressIn, onPressOut } = + useSliderStyles(checked, disabled, danger) const { handleStyle } = useHandleStyles(checked) const handlePress = useCallback(() => { @@ -33,8 +30,10 @@ export const InputSwitch = memo( return ( diff --git a/src/components/Input/InputSwitch/__tests__/__snapshots__/InputSwitch.test.tsx.snap b/src/components/Input/InputSwitch/__tests__/__snapshots__/InputSwitch.test.tsx.snap index 24be13a..a860e6b 100644 --- a/src/components/Input/InputSwitch/__tests__/__snapshots__/InputSwitch.test.tsx.snap +++ b/src/components/Input/InputSwitch/__tests__/__snapshots__/InputSwitch.test.tsx.snap @@ -170,7 +170,7 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""rgba(133, 136, 142, 1)"", + "backgroundColor": ""#85888e"", "borderColor": ""transparent"", "borderRadius": 100, "borderWidth": 1, @@ -183,7 +183,7 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - style={ [ { - "backgroundColor": "rgba(133, 136, 142, 1)", + "backgroundColor": "#85888e", "borderColor": "transparent", "borderRadius": 100, "borderWidth": 1, @@ -642,7 +642,7 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""rgba(133, 136, 142, 1)"", + "backgroundColor": ""#85888e"", "borderColor": ""#db3424"", "borderRadius": 100, "borderWidth": 1, @@ -655,7 +655,7 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - style={ [ { - "backgroundColor": "rgba(133, 136, 142, 1)", + "backgroundColor": "#85888e", "borderColor": "#db3424", "borderRadius": 100, "borderWidth": 1, @@ -1114,7 +1114,7 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""rgba(43, 46, 51, 1)"", + "backgroundColor": ""#2b2e33"", "borderColor": ""transparent"", "borderRadius": 100, "borderWidth": 1, @@ -1127,7 +1127,7 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - style={ [ { - "backgroundColor": "rgba(43, 46, 51, 1)", + "backgroundColor": "#2b2e33", "borderColor": "transparent", "borderRadius": 100, "borderWidth": 1, @@ -1586,7 +1586,7 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f } jestInlineStyle={ { - "backgroundColor": ""rgba(43, 46, 51, 1)"", + "backgroundColor": ""#2b2e33"", "borderColor": ""#db3424"", "borderRadius": 100, "borderWidth": 1, @@ -1599,7 +1599,7 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f style={ [ { - "backgroundColor": "rgba(43, 46, 51, 1)", + "backgroundColor": "#2b2e33", "borderColor": "#db3424", "borderRadius": 100, "borderWidth": 1, diff --git a/src/components/Input/InputSwitch/styles/useHandleStyles.ts b/src/components/Input/InputSwitch/styles/useHandleStyles.ts index f33b53d..e6358a1 100644 --- a/src/components/Input/InputSwitch/styles/useHandleStyles.ts +++ b/src/components/Input/InputSwitch/styles/useHandleStyles.ts @@ -1,11 +1,11 @@ import { useCallback, useEffect, useMemo } from 'react' -import { StyleSheet } from 'react-native' +import { StyleSheet as RNStyleSheet } from 'react-native' import { useSharedValue, withTiming } from 'react-native-reanimated' -import { makeStyles } from '../../../../utils/makeStyles' +import { StyleSheet } from '../../../../utils' export const useHandleStyles = (checked: boolean) => { - const styles = useStyles() + const styles = handleStyles const calculateHandleLeftPosition = useCallback( (checked: boolean) => @@ -37,7 +37,7 @@ export const useHandleStyles = (checked: boolean) => { const handleStyle = useMemo( () => - StyleSheet.flatten([ + RNStyleSheet.flatten([ styles.handle, { left: handleLeftPosition, backgroundColor: handlerBackgrouind }, ]), @@ -47,7 +47,7 @@ export const useHandleStyles = (checked: boolean) => { return { handleStyle } } -const useStyles = makeStyles(({ theme, border }) => ({ +const handleStyles = StyleSheet.create(({ theme, border }) => ({ handle: { height: theme.Form.inputSwitch.inputSwitchHandleHeight, width: theme.Form.inputSwitch.inputSwitchHandleWidth, diff --git a/src/components/Input/InputSwitch/styles/useSliderStyles.ts b/src/components/Input/InputSwitch/styles/useSliderStyles.ts index a5f4015..d2922a0 100644 --- a/src/components/Input/InputSwitch/styles/useSliderStyles.ts +++ b/src/components/Input/InputSwitch/styles/useSliderStyles.ts @@ -1,15 +1,16 @@ -import { useCallback, useEffect, useMemo } from 'react' -import { type PressableStateCallbackType, StyleSheet } from 'react-native' +import { useCallback, useEffect, useMemo, useState } from 'react' +import { StyleSheet as RNStyleSheet } from 'react-native' import { useSharedValue, withTiming } from 'react-native-reanimated' -import { makeStyles } from '../../../../utils/makeStyles' +import { StyleSheet } from '../../../../utils' export const useSliderStyles = ( checked: boolean, disabled: boolean, danger: boolean ) => { - const styles = useStyles() + const styles = switchStyles + const [pressed, setPressed] = useState(false) const calculateSliderBackground = useCallback( (checked: boolean, disabled: boolean, pressed: boolean) => { @@ -65,40 +66,37 @@ export const useSliderStyles = ( ) const sliderBorderColor = useSharedValue(calculateSliderBorderColor(danger)) + useEffect(() => { + sliderBackground.value = withTiming( + calculateSliderBackground(checked, disabled, pressed) + ) + }, [calculateSliderBackground, checked, disabled, pressed, sliderBackground]) + useEffect(() => { sliderBorderColor.value = withTiming(calculateSliderBorderColor(danger)) }, [calculateSliderBorderColor, danger, sliderBorderColor]) const sliderStyle = useMemo( () => - StyleSheet.flatten([ + RNStyleSheet.flatten([ styles.slider, { backgroundColor: sliderBackground, borderColor: sliderBorderColor }, ]), [sliderBackground, sliderBorderColor, styles.slider] ) - const onPressedChange = useCallback( - ({ pressed }: PressableStateCallbackType) => { - sliderBackground.value = withTiming( - calculateSliderBackground(checked, disabled, pressed) - ) - - return styles.container - }, - [ - calculateSliderBackground, - checked, - disabled, - sliderBackground, - styles.container, - ] - ) + const onPressIn = useCallback(() => setPressed(true), []) + const onPressOut = useCallback(() => setPressed(false), []) - return { sliderStyle, onPressedChange } + return { + containerStyle: styles.container, + sliderStyle, + onPressIn, + onPressOut, + } } -const useStyles = makeStyles(({ theme, border }) => ({ +const switchStyles = StyleSheet.create(({ theme, border }) => ({ container: { height: theme.Form.inputSwitch.inputSwitchHeight, width: theme.Form.inputSwitch.inputSwitchWidth, diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 8b0b722..19c0923 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -1,31 +1,28 @@ import { useMemo } from 'react' -import { makeStyles } from '../../../utils/makeStyles' +import { StyleSheet } from '../../../utils' import type { InputTextBaseProps } from './types' export const useInputStyle = (size: InputTextBaseProps['size'] = 'base') => { - const styles = useStyles() - const containerMinHeight = useContainerMinHeight() - const minHeight = useMemo(() => { if (typeof size === 'number') { return Math.max(size, containerMinHeight.base.minHeight) } return containerMinHeight[size].minHeight - }, [size, containerMinHeight]) + }, [size]) - return { ...styles, container: { ...styles.container, minHeight } } + return { ...inputStyles, container: { ...inputStyles.container, minHeight } } } -const useContainerMinHeight = makeStyles(({ theme }) => ({ +const containerMinHeight = StyleSheet.create(({ theme }) => ({ base: { minHeight: theme.InputSize.base['min-height'] }, large: { minHeight: theme.InputSize.large['min-height'] }, xlarge: { minHeight: theme.InputSize.xlarge['min-height'] }, })) -const useStyles = makeStyles( +const inputStyles = StyleSheet.create( ({ theme, border, typography, spacing, fonts }) => ({ container: { flexDirection: 'row', diff --git a/src/components/List/Base/ListBase.tsx b/src/components/List/Base/ListBase.tsx index d27c2ba..bf5c4ed 100644 --- a/src/components/List/Base/ListBase.tsx +++ b/src/components/List/Base/ListBase.tsx @@ -7,8 +7,8 @@ import { type ColorValue, } from 'react-native' +import { StyleSheet } from '../../../utils' import { type SvgSource, SvgUniversal } from '../../../utils/SvgUniversal' -import { makeStyles } from '../../../utils/makeStyles' import { Subtitle, Body, Caption } from '../../Typography' /** Свойства ListBase */ @@ -58,14 +58,12 @@ export const ListBase = memo( testID, ...rest }) => { - const styles = useStyles() - const leftIconStyle: ViewStyle = useMemo(() => { return { ...styles.leftIcon, alignSelf: iconAlignment === 'top' ? 'flex-start' : undefined, } - }, [styles.leftIcon, iconAlignment]) + }, [iconAlignment]) const fullDivider = divider === 'full' ? styles.divider : {} const contentDivider = divider === 'content' ? styles.divider : {} @@ -136,43 +134,45 @@ export const ListBase = memo( } ) -const useStyles = makeStyles(({ spacing, typography, theme, background }) => ({ - container: { - flexDirection: 'row', - paddingLeft: spacing.Padding['p-4'], - gap: spacing.Padding['p-4'], - alignItems: 'center', - }, - pressed: { backgroundColor: background.Common['bg-surface-ground-hover'] }, - disabled: { opacity: 0.6 }, - leftIcon: { paddingVertical: spacing.Padding['p-4'] }, - content: { - flex: 1, - flexDirection: 'row', - justifyContent: 'space-between', - paddingVertical: spacing.Padding['p-2'], - paddingEnd: spacing.Padding['p-4'], - gap: spacing.Gap['gap-4'], - }, - labelContainer: { - paddingVertical: spacing.Padding['p-2'], - gap: spacing.Gap['gap-2'], - flex: 1, - }, - titleContainer: { gap: spacing.Gap['gap-1'] }, - extraContainer: { paddingVertical: spacing.Padding['p-2'] }, - icon: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], - }, - rightSection: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: spacing.Padding['p-2'], - gap: spacing.Gap['gap-4'], - }, - divider: { - borderTopColor: theme.Surface['surface-border'], - borderTopWidth: 1, - }, -})) +const styles = StyleSheet.create( + ({ spacing, typography, theme, background }) => ({ + container: { + flexDirection: 'row', + paddingLeft: spacing.Padding['p-4'], + gap: spacing.Padding['p-4'], + alignItems: 'center', + }, + pressed: { backgroundColor: background.Common['bg-surface-ground-hover'] }, + disabled: { opacity: 0.6 }, + leftIcon: { paddingVertical: spacing.Padding['p-4'] }, + content: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + paddingVertical: spacing.Padding['p-2'], + paddingEnd: spacing.Padding['p-4'], + gap: spacing.Gap['gap-4'], + }, + labelContainer: { + paddingVertical: spacing.Padding['p-2'], + gap: spacing.Gap['gap-2'], + flex: 1, + }, + titleContainer: { gap: spacing.Gap['gap-1'] }, + extraContainer: { paddingVertical: spacing.Padding['p-2'] }, + icon: { + width: typography.Size['text-2xl'], + height: typography.Size['text-2xl'], + }, + rightSection: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: spacing.Padding['p-2'], + gap: spacing.Gap['gap-4'], + }, + divider: { + borderTopColor: theme.Surface['surface-border'], + borderTopWidth: 1, + }, + }) +) diff --git a/src/components/MenuItem/MenuItemAccessory.tsx b/src/components/MenuItem/MenuItemAccessory.tsx index 8807fb9..58b9b07 100644 --- a/src/components/MenuItem/MenuItemAccessory.tsx +++ b/src/components/MenuItem/MenuItemAccessory.tsx @@ -3,8 +3,8 @@ import { memo, useMemo } from 'react' import { View } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' export interface MenuItemAccessoryProps { /** SVG-иконка */ @@ -18,8 +18,6 @@ export interface MenuItemAccessoryProps { */ export const MenuItemAccessory = memo( ({ Icon, disabled }) => { - const styles = useStyles() - const IconComponent = useMemo( () => (disabled ? IconLock : Icon), [Icon, disabled] @@ -33,7 +31,7 @@ export const MenuItemAccessory = memo( } ) -const useStyles = makeStyles(({ theme }) => ({ +const styles = StyleSheet.create(({ theme }) => ({ container: { justifyContent: 'center' }, icon: { width: theme.Menu.Item.menuitemSubmenuIconFontSize, diff --git a/src/components/MenuItem/MenuItemIcon.tsx b/src/components/MenuItem/MenuItemIcon.tsx index a235590..6458b07 100644 --- a/src/components/MenuItem/MenuItemIcon.tsx +++ b/src/components/MenuItem/MenuItemIcon.tsx @@ -4,11 +4,10 @@ import { type DimensionValue, type LayoutChangeEvent, View, - StyleSheet, } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' import { Badge, type BadgeSeverity } from '../Badge/Badge' interface MenuItemIconStyle { @@ -49,8 +48,6 @@ export const MenuItemIcon = ({ style, badgeSeverity, }: MenuItemIconProps) => { - const styles = useStyles() - const [badgePosition, setBadgePosition] = useState<{ top: DimensionValue right: DimensionValue @@ -67,7 +64,7 @@ export const MenuItemIcon = ({ styles.badge, { top: badgePosition.top, right: badgePosition.right }, ]), - [badgePosition.right, badgePosition.top, styles.badge] + [badgePosition.right, badgePosition.top] ) return ( @@ -88,7 +85,7 @@ export const MenuItemIcon = ({ ) } -const useStyles = makeStyles(() => ({ +const styles = StyleSheet.create(() => ({ container: { justifyContent: 'center', position: 'relative' }, badge: { position: 'absolute' }, diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index e31c259..2ee1b05 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -9,8 +9,8 @@ import { type ViewStyle, } from 'react-native' +import { StyleSheet } from '../../../utils' import type { SvgSource } from '../../../utils/SvgUniversal' -import { makeStyles } from '../../../utils/makeStyles' import type { BadgeSeverity } from '../../Badge/Badge' import { Body, Caption } from '../../Typography' import { MenuItemAccessory } from '../MenuItemAccessory' @@ -71,11 +71,9 @@ export const MenuItemTemplate = memo( style, ...rest }) => { - const styles = useStyles() - const iconStyle = useMemo( () => ({ ...styles.icon, color: iconColor || styles.icon.color }), - [iconColor, styles.icon] + [iconColor] ) const pressableStyle = useCallback( @@ -85,7 +83,7 @@ export const MenuItemTemplate = memo( style, disabled && styles.containerDisabled, ], - [disabled, styles, style] + [disabled, style] ) return ( @@ -130,7 +128,7 @@ export const MenuItemTemplate = memo( } ) -const useStyles = makeStyles(({ theme, spacing, typography, border }) => ({ +const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({ container: { borderColor: theme.Menu.Item.menuitemBorderColor, borderWidth: border.Width.border, diff --git a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap index 581bce0..8402de7 100644 --- a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap +++ b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap @@ -199,26 +199,26 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "alignItems": "flex-start", }, - { - "position": "absolute", - "right": 0, - "top": 0, - }, - ] - } - > - + @@ -1780,26 +1780,26 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` { "alignItems": "flex-start", }, - { - "position": "absolute", - "right": 0, - "top": 0, - }, - ] - } - > - + diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 656c3f1..4cc7072 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -5,7 +5,7 @@ import { IconInfoCircle, IconX, } from '@tabler/icons-react-native' -import { type ComponentProps, memo, type ReactNode, useMemo } from 'react' +import { memo, type ComponentProps, type ReactNode, useMemo } from 'react' import { type AccessibilityProps, type StyleProp, @@ -14,8 +14,8 @@ import { type ViewStyle, } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' import { ButtonSeverity } from '../Button/ButtonSeverity' import { Timer } from '../Timer/Timer' import { Body, Caption } from '../Typography' @@ -23,44 +23,44 @@ import { Body, Caption } from '../Typography' export interface MessageProps extends AccessibilityProps, Pick { /** Текст заголовка */ - title: string + readonly title: string /** Тело сообщения */ - body?: ReactNode + readonly body?: ReactNode /** Текст подписи */ - caption?: string + readonly caption?: string /** Футер сообщения */ - footer?: ReactNode + readonly footer?: ReactNode /** * Обработчик нажатия на кнопку закрытия. * Кнопка не отображается, если обработчик не передан. */ - onClose?: () => void + readonly onClose?: () => void /** * Текст на кнопке закрытия тоста * Если не указан, в кнопке отображается иконка "крестик" * Это свойство игнорируется если onClose = undefined */ - closeLabel?: string + readonly closeLabel?: string /** Срабатывает при истечении таймера */ - onTimerFinish?: () => void + readonly onTimerFinish?: () => void /** * Выбор варианта стиля компонента * @default 'info' */ - severity?: 'info' | 'success' | 'warning' | 'danger' + readonly severity?: 'info' | 'success' | 'warning' | 'danger' /** Дополнительная стилизация для контейнера компонента */ - style?: StyleProp + readonly style?: StyleProp /** Значение таймера, если нужно отображать таймер вместо иконки */ - timerValue?: number + readonly timerValue?: number /** * SVG-иконка. @@ -72,21 +72,21 @@ export interface MessageProps * IconCircleX для severity='danger' * */ - Icon?: SvgSource + readonly Icon?: SvgSource /** * Скрыть иконку. * Позволяет скрывать установленные или дефолтные иконки * Дефолтное значение: false */ - hiddenIcon?: boolean + readonly hiddenIcon?: boolean } /** * Унифицированный компонент, который используется для отображения информационных сообщений * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=562-2947 */ -export const Message = memo( +export const Message = memo( ({ title, body, @@ -102,8 +102,9 @@ export const Message = memo( timerValue, Icon: IconProp, ...rest - }) => { - const styles = useStyles() + }: MessageProps) => { + messageStyles.useVariants({ severity }) + const Icon = useMemo(() => { if (IconProp) { return IconProp @@ -152,7 +153,7 @@ export const Message = memo( testID={TestId.CloseButton} /> ) - }, [closeLabel, severity, onClose]) + }, [closeLabel, onClose, severity]) const LeftContent = useMemo(() => { if (timerValue) { @@ -162,29 +163,29 @@ export const Message = memo( if (!hiddenIcon) { return ( ) } return undefined - }, [timerValue, hiddenIcon, onTimerFinish, Icon, styles, severity]) + }, [hiddenIcon, Icon, onTimerFinish, timerValue]) return ( - - + + {LeftContent} - + {title} @@ -202,58 +203,73 @@ export const Message = memo( } ) -const useStyles = makeStyles(({ theme, typography, spacing, border }) => ({ - container: { - borderRadius: theme.General.borderRadiusXL, - borderWidth: border.Width.border, - overflow: 'hidden', - }, - content: { - flexGrow: 1, - borderLeftWidth: border.Width['border-3'] - border.Width.border, - padding: spacing.Padding['p-4'], - paddingLeft: spacing.Padding['p-5'], - gap: spacing.Gap['gap-4'], - }, - info: { - borderColor: theme.Message.Severities.Info.infoMessageBorderColor, - backgroundColor: theme.Message.Severities.Info.infoMessageBg, - }, - contentinfo: { - borderColor: theme.Message.Severities.Info.infoMessageIconColor, - }, - success: { - borderColor: theme.Message.Severities.Success.successMessageBorderColor, - backgroundColor: theme.Message.Severities.Success.successMessageBg, - }, - contentsuccess: { - borderColor: theme.Message.Severities.Success.successMessageIconColor, - }, - warning: { - borderColor: theme.Message.Severities.Warning.warningMessageBorderColor, - backgroundColor: theme.Message.Severities.Warning.warningMessageBg, - }, - contentwarning: { - borderColor: theme.Message.Severities.Warning.warningMessageIconColor, - }, - danger: { - borderColor: theme.Message.Severities.Danger.dangerMessageBorderColor, - backgroundColor: theme.Message.Severities.Danger.dangerMessageBg, - }, - contentdanger: { - borderColor: theme.Message.Severities.Danger.dangerMessageIconColor, - }, - titleRow: { flexDirection: 'row', gap: spacing.Gap['gap-4'] }, - titleTextContainer: { - flex: 1, - alignSelf: 'center', - gap: spacing.Gap['gap-1'], - }, - iconSize: { - width: typography.Size['text-4xl'], - height: typography.Size['text-4xl'], - }, -})) +const messageStyles = StyleSheet.create( + ({ theme, typography, spacing, border }) => ({ + container: { + borderRadius: theme.General.borderRadiusXL, + borderWidth: border.Width.border, + overflow: 'hidden', + variants: { + severity: { + info: { + borderColor: theme.Message.Severities.Info.infoMessageBorderColor, + backgroundColor: theme.Message.Severities.Info.infoMessageBg, + }, + success: { + borderColor: + theme.Message.Severities.Success.successMessageBorderColor, + backgroundColor: theme.Message.Severities.Success.successMessageBg, + }, + warning: { + borderColor: + theme.Message.Severities.Warning.warningMessageBorderColor, + backgroundColor: theme.Message.Severities.Warning.warningMessageBg, + }, + danger: { + borderColor: + theme.Message.Severities.Danger.dangerMessageBorderColor, + backgroundColor: theme.Message.Severities.Danger.dangerMessageBg, + }, + }, + }, + }, + content: { + flexGrow: 1, + borderLeftWidth: border.Width['border-3'] - border.Width.border, + padding: spacing.Padding['p-4'], + paddingLeft: spacing.Padding['p-5'], + gap: spacing.Gap['gap-4'], + variants: { + severity: { + info: { + borderColor: theme.Message.Severities.Info.infoMessageIconColor, + }, + success: { + borderColor: + theme.Message.Severities.Success.successMessageIconColor, + }, + warning: { + borderColor: + theme.Message.Severities.Warning.warningMessageIconColor, + }, + danger: { + borderColor: theme.Message.Severities.Danger.dangerMessageIconColor, + }, + }, + }, + }, + titleRow: { flexDirection: 'row', gap: spacing.Gap['gap-4'] }, + titleTextContainer: { + flex: 1, + alignSelf: 'center', + gap: spacing.Gap['gap-1'], + }, + iconSize: { + width: typography.Size['text-4xl'], + height: typography.Size['text-4xl'], + }, + }) +) export enum TestId { Container = 'MessageContainer', diff --git a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap index 202e88c..b4a8367 100644 --- a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap +++ b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap @@ -6,14 +6,12 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` style={ [ { + "backgroundColor": "#fafdff", + "borderColor": "#d4ecfe", "borderRadius": 10.5, "borderWidth": 1, "overflow": "hidden", }, - { - "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - }, undefined, ] } @@ -21,18 +19,14 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` > @@ -881,14 +855,12 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se style={ [ { + "backgroundColor": "#fafffb", + "borderColor": "#d4fedc", "borderRadius": 10.5, "borderWidth": 1, "overflow": "hidden", }, - { - "backgroundColor": "#fafffb", - "borderColor": "#d4fedc", - }, undefined, ] } @@ -896,18 +868,14 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se > @@ -1210,14 +1183,12 @@ exports[`Message {"hiddenIcon": false} 1`] = ` style={ [ { + "backgroundColor": "#fafdff", + "borderColor": "#d4ecfe", "borderRadius": 10.5, "borderWidth": 1, "overflow": "hidden", }, - { - "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - }, undefined, ] } @@ -1225,18 +1196,14 @@ exports[`Message {"hiddenIcon": false} 1`] = ` > { */ export const ProgressBar = memo( ({ value: propsValue, showValue = false, style }) => { - const styles = useStyles() - const [containerWidth, setContainerWidth] = useState(0) const indicatorWidth = useSharedValue(0) @@ -91,7 +89,7 @@ export const ProgressBar = memo( } ) -const useStyles = makeStyles(({ theme, typography, border, fonts }) => ({ +const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({ container: { borderRadius: border.Radius['rounded-full'], backgroundColor: theme.Misc.ProgressBar.progressBarBg, diff --git a/src/components/ProgressSpinner/ProgressSpinner.tsx b/src/components/ProgressSpinner/ProgressSpinner.tsx index 0658ac5..66a757f 100644 --- a/src/components/ProgressSpinner/ProgressSpinner.tsx +++ b/src/components/ProgressSpinner/ProgressSpinner.tsx @@ -10,7 +10,7 @@ import Animated, { } from 'react-native-reanimated' import Svg, { Circle } from 'react-native-svg' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' const AnimatedSvg = Animated.createAnimatedComponent(Svg) const AnimatedCircle = Animated.createAnimatedComponent(Circle) @@ -37,7 +37,6 @@ export interface ProgressSpinnerProps { */ export const ProgressSpinner = memo( ({ size = 'md', fill = 'primary' }) => { - const styles = useStyles() const circleAnimation = useSharedValue(0) const containerAnimation = useSharedValue(0) @@ -65,7 +64,7 @@ export const ProgressSpinner = memo( case 'white': return styles.white.color } - }, [fill, styles.primary.color, styles.white.color]) + }, [fill]) const center = useMemo(() => sizeInDp / 2, [sizeInDp]) const radius = useMemo(() => center - STROKE_WIDTH / 2, [center]) @@ -126,7 +125,7 @@ export const ProgressSpinner = memo( } ) -const useStyles = makeStyles(({ theme, global }) => ({ +const styles = StyleSheet.create(({ theme, global }) => ({ primary: { color: theme.General.primaryColor }, white: { color: global.Neutrals.White['white-100'] }, })) diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index 3bb7fc0..d9eef00 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -1,35 +1,33 @@ -import { memo, useCallback, useMemo } from 'react' +import { memo, useCallback, useState } from 'react' import { type AccessibilityProps, Pressable, - type PressableStateCallbackType, - StyleSheet, View, type ViewProps, } from 'react-native' import Animated, { LinearTransition } from 'react-native-reanimated' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' export interface RadioButtonProps extends AccessibilityProps, Pick { /** Обработчик нажатия на кнопку */ - onPress: () => void + readonly onPress: () => void /** * true, если необходим компонент в активном состоянии * @default false */ - checked?: boolean + readonly checked?: boolean /** * Управление доступностью компонента * @default false */ - disabled?: boolean + readonly disabled?: boolean /** Выбор состояния компонента */ - state?: 'default' | 'danger' + readonly state?: 'default' | 'danger' } -export const RadioButton = memo( +export const RadioButton = memo( ({ onPress, checked = false, @@ -37,92 +35,44 @@ export const RadioButton = memo( state = 'default', testID, ...rest - }) => { - const styles = useStyles() + }: RadioButtonProps) => { + const [pressed, setPressed] = useState(false) - const centerViewBackground = useMemo( - () => [styles.defaultView, disabled && !checked && styles.disabledView], - [disabled, checked, styles.defaultView, styles.disabledView] - ) - - const pressableStyles = useCallback( - ({ pressed }: PressableStateCallbackType) => { - const result = [styles.container, styles.default] - - if (checked) { - result.push(styles.checked) - } - - if (pressed) { - result.push(styles.pressed) - - if (checked) { - result.push(styles.checkedPressed) - } - } - - if (state === 'danger') { - result.push(styles.danger) - - if (checked) { - result.push(styles.dangerChecked) - - if (pressed) { - result.push(styles.dangerCheckedPressed) - } - } - } - - if (disabled) { - result.push(styles.disabled) + radioStyles.useVariants({ + checked: checked ? 'true' : 'false', + pressed: pressed ? 'true' : 'false', + state: state === 'danger' ? 'danger' : undefined, + disabled: disabled ? 'true' : 'false', + }) - if (checked) { - result.push(styles.disabledChecked) - } - } - - return StyleSheet.flatten(result) - }, - [ - checked, - disabled, - state, - styles.container, - styles.default, - styles.pressed, - styles.checked, - styles.checkedPressed, - styles.danger, - styles.dangerChecked, - styles.dangerCheckedPressed, - styles.disabled, - styles.disabledChecked, - ] - ) + const onPressIn = useCallback(() => setPressed(true), []) + const onPressOut = useCallback(() => setPressed(false), []) return ( {!disabled && state === 'danger' && ( )} - + ) } ) -const useStyles = makeStyles(({ theme }) => ({ +const radioStyles = StyleSheet.create(({ theme }) => ({ container: { width: theme.Form.RadioButton.radiobuttonWidth, height: theme.Form.RadioButton.radiobuttonHeight, @@ -130,11 +80,83 @@ const useStyles = makeStyles(({ theme }) => ({ alignItems: 'center', justifyContent: 'center', margin: theme.General.focusShadowWidth, + variants: { + checked: { + true: { + borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + borderWidth: 5, + }, + false: { + borderColor: theme.Form.InputText.inputBorderColor, + borderWidth: 1, + backgroundColor: theme.Form.InputText.inputBg, + }, + }, + pressed: { + true: { borderColor: theme.Form.InputText.inputHoverBorderColor }, + false: {}, + }, + state: { + danger: { borderColor: theme.Form.InputText.inputErrorBorderColor }, + }, + disabled: { + true: { + borderColor: theme.Form.InputText.inputBorderColor, + backgroundColor: theme.Button.Disabled.disabledButtonBg, + opacity: 0.6, + borderWidth: 1, + }, + false: {}, + }, + }, + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { + borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor, + backgroundColor: + theme.Form.RadioButton.radiobuttonActiveHoverBorderColor, + borderWidth: 5, + }, + }, + { + state: 'danger', + checked: 'true', + styles: { + borderColor: theme.Form.InputText.inputErrorBorderColor, + backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + borderWidth: 1, + }, + }, + { + checked: 'true', + disabled: 'true', + styles: { + borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + borderWidth: 5, + }, + }, + ], }, center: { width: theme.Form.RadioButton.radiobuttonIconSize, height: theme.Form.RadioButton.radiobuttonIconSize, borderRadius: theme.Form.RadioButton.radiobuttonIconSize, + backgroundColor: theme.Form.InputText.inputBg, + variants: { + checked: { true: {}, false: {} }, + disabled: { true: {}, false: {} }, + }, + compoundVariants: [ + { + disabled: 'true', + checked: 'false', + styles: { backgroundColor: 'transparent' }, + }, + ], }, outline: { position: 'absolute', @@ -149,59 +171,4 @@ const useStyles = makeStyles(({ theme }) => ({ theme.General.focusShadowWidth * 2, backgroundColor: theme.General.focusOutlineErrorColor, }, - - // centerView - defaultView: { backgroundColor: theme.Form.InputText.inputBg }, - disabledView: { backgroundColor: 'transparent' }, - - // container viewState - default: { - borderColor: theme.Form.InputText.inputBorderColor, - borderWidth: 1, - backgroundColor: theme.Form.InputText.inputBg, - }, - pressed: { - borderColor: theme.Form.InputText.inputHoverBorderColor, - backgroundColor: theme.Form.InputText.inputBg, - borderWidth: 1, - }, - checked: { - borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - borderWidth: 5, - }, - checkedPressed: { - borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor, - borderWidth: 5, - }, - // danger viewState - danger: { - borderColor: theme.Form.InputText.inputErrorBorderColor, - backgroundColor: theme.Form.InputText.inputBg, - borderWidth: 1, - }, - dangerChecked: { - borderColor: theme.Form.InputText.inputErrorBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - borderWidth: 1, - }, - dangerCheckedPressed: { - borderColor: theme.Form.InputText.inputErrorBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - borderWidth: 1, - }, - // disabled viewState - disabled: { - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Button.Disabled.disabledButtonBg, - opacity: 0.6, - borderWidth: 1, - mixBlendMode: 'luminosity', - }, - disabledChecked: { - borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - borderWidth: 5, - }, })) diff --git a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap index a75154f..80f0aff 100644 --- a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap +++ b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap @@ -91,19 +91,12 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger > @@ -159,19 +152,12 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = defaul > @@ -220,7 +206,6 @@ exports[`RadioButton snapshots checked = false, disabled = true, state = default "height": 21, "justifyContent": "center", "margin": 3.5, - "mixBlendMode": "luminosity", "opacity": 0.6, "width": 21, } @@ -229,21 +214,12 @@ exports[`RadioButton snapshots checked = false, disabled = true, state = default > @@ -341,19 +317,12 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = danger > @@ -409,19 +378,12 @@ exports[`RadioButton snapshots checked = true, disabled = false, state = default > @@ -470,7 +432,6 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default "height": 21, "justifyContent": "center", "margin": 3.5, - "mixBlendMode": "luminosity", "opacity": 0.6, "width": 21, } @@ -479,19 +440,12 @@ exports[`RadioButton snapshots checked = true, disabled = true, state = default > @@ -547,19 +501,12 @@ exports[`RadioButton snapshots default 1`] = ` > diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx index db533e5..19356e4 100644 --- a/src/components/Rating/Rating.tsx +++ b/src/components/Rating/Rating.tsx @@ -1,7 +1,7 @@ import { memo, useCallback, useMemo } from 'react' import { type AccessibilityProps, View, type ViewProps } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { RatingClear } from './RatingClear' import { RatingItem } from './RatingItem' @@ -65,8 +65,6 @@ export const Rating = memo( testID, ...rest }) => { - const styles = useStyles() - const handleItemPress = useCallback( (index: number) => () => { onChange(index + 1) @@ -102,7 +100,7 @@ export const Rating = memo( } ) -const useStyles = makeStyles(({ theme }) => ({ +const styles = StyleSheet.create(({ theme }) => ({ container: { flexDirection: 'row', gap: theme.General.inlineSpacing, diff --git a/src/components/Rating/RatingClear.tsx b/src/components/Rating/RatingClear.tsx index 889585c..e6cb4bf 100644 --- a/src/components/Rating/RatingClear.tsx +++ b/src/components/Rating/RatingClear.tsx @@ -1,7 +1,7 @@ import { IconBan } from '@tabler/icons-react-native' import { memo } from 'react' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { RatingItemContainer, @@ -24,8 +24,6 @@ export interface RatingClearProps extends Omit< * @see RatingItemContainer - компонент контейнер для элемента */ export const RatingClear = memo(({ ...rest }) => { - const styles = useStyles() - return ( {({ disabled, pressed }) => ( @@ -45,7 +43,7 @@ export const RatingClear = memo(({ ...rest }) => { ) }) -const useStyles = makeStyles(({ theme }) => ({ +const styles = StyleSheet.create(({ theme }) => ({ icon: { height: theme.Form.Rating.ratingIconFontSize, width: theme.Form.Rating.ratingIconFontSize, diff --git a/src/components/Rating/RatingItem.tsx b/src/components/Rating/RatingItem.tsx index c079c7c..671863e 100644 --- a/src/components/Rating/RatingItem.tsx +++ b/src/components/Rating/RatingItem.tsx @@ -1,7 +1,7 @@ import { IconStar, IconStarFilled } from '@tabler/icons-react-native' import { memo, useMemo } from 'react' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { RatingItemContainer, @@ -30,8 +30,6 @@ export interface RatingItemProps extends Omit< * @see RatingItemContainer - компонент контейнер для элемента */ export const RatingItem = memo(({ checked, ...rest }) => { - const styles = useStyles() - const Icon = useMemo(() => (checked ? IconStarFilled : IconStar), [checked]) return ( @@ -67,7 +65,7 @@ export const RatingItem = memo(({ checked, ...rest }) => { ) }) -const useStyles = makeStyles(({ theme }) => ({ +const styles = StyleSheet.create(({ theme }) => ({ icon: { height: theme.Form.Rating.ratingIconFontSize, width: theme.Form.Rating.ratingIconFontSize, diff --git a/src/components/Rating/RatingItemContainer.tsx b/src/components/Rating/RatingItemContainer.tsx index e0cd066..5f20722 100644 --- a/src/components/Rating/RatingItemContainer.tsx +++ b/src/components/Rating/RatingItemContainer.tsx @@ -1,7 +1,7 @@ import { memo, type ReactNode } from 'react' import { Pressable, type PressableProps } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' /** * Свойста компонента контейнера для элемента в компоненте рейтинга @@ -43,8 +43,6 @@ export interface RatingItemContainerProps extends Omit< */ export const RatingItemContainer = memo( ({ disabled = false, paddings = false, children, ...rest }) => { - const styles = useStyles() - return ( ( } ) -const useStyles = makeStyles(({ theme, sizing }) => ({ +const styles = StyleSheet.create(({ theme, sizing }) => ({ container: { alignItems: 'center', justifyContent: 'center', diff --git a/src/components/SelectButton/SelectButton.tsx b/src/components/SelectButton/SelectButton.tsx index 7b9753a..cf32efe 100644 --- a/src/components/SelectButton/SelectButton.tsx +++ b/src/components/SelectButton/SelectButton.tsx @@ -20,7 +20,7 @@ import Animated, { import { scheduleOnRN } from 'react-native-worklets' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { SelectButtonItem, @@ -77,7 +77,6 @@ export const SelectButton = memo( position: positionProp, ...rest }) => { - const styles = useStyles() const buttonsLayoutListRef = useRef([]) const buttonsLayoutList = useSharedValue([]) const [frameKey, setFrameKey] = useState(Date.now()) @@ -189,7 +188,7 @@ export const SelectButton = memo( } ) -const useStyles = makeStyles(({ theme }) => ({ +const styles = StyleSheet.create(({ theme }) => ({ container: { flexDirection: 'row', padding: theme.Form.SelectButton.selectButtonGroupPadding, diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index 0ee17b6..aa35a5a 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -9,8 +9,8 @@ import Animated, { import { scheduleOnRN } from 'react-native-worklets' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' export interface SelectButtonItemProps extends Pick< ViewProps, @@ -66,8 +66,6 @@ export const SelectButtonItem = memo( showIcon = true, Icon, }) => { - const styles = useStyles() - const iconSize = useMemo(() => { switch (size) { case 'small': @@ -82,13 +80,7 @@ export const SelectButtonItem = memo( case 'xlarge': return styles.iconXLarge } - }, [ - size, - styles.iconBase, - styles.iconLarge, - styles.iconSmall, - styles.iconXLarge, - ]) + }, [size]) const labelFontSize = useMemo(() => { switch (size) { @@ -104,13 +96,7 @@ export const SelectButtonItem = memo( case 'xlarge': return styles.labelXLarge } - }, [ - size, - styles.labelBase, - styles.labelLarge, - styles.labelSmall, - styles.labelXLarge, - ]) + }, [size]) const animatedColorStyle = useAnimatedStyle(() => { return { @@ -181,7 +167,7 @@ export const SelectButtonItem = memo( } ) -const useStyles = makeStyles( +const styles = StyleSheet.create( ({ theme, typography, border, spacing, fonts }) => ({ container: { flex: 1, diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx index 091bfaf..36ed750 100644 --- a/src/components/Skeleton/Skeleton.tsx +++ b/src/components/Skeleton/Skeleton.tsx @@ -7,8 +7,8 @@ import Animated, { import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg' import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils' +import { StyleSheet } from '../../utils' import { SkeletonContext } from '../../utils/SkeletonContext' -import { makeStyles } from '../../utils/makeStyles' interface SkeletonProps extends ViewProps {} @@ -17,7 +17,6 @@ interface SkeletonProps extends ViewProps {} * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=5241-3731 */ export const Skeleton = memo(({ style, testID, ...rest }) => { - const styles = useStyles() const { globalTranslateX, registerSkeleton, @@ -87,7 +86,7 @@ export const Skeleton = memo(({ style, testID, ...rest }) => { ) }) -const useStyles = makeStyles(({ border, theme }) => ({ +const styles = StyleSheet.create(({ border, theme }) => ({ container: { borderRadius: border.Radius['rounded-lg'], overflow: 'hidden', diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index f7be8e3..ea38c14 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -15,7 +15,7 @@ import Animated, { import { scheduleOnRN } from 'react-native-worklets' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' export interface SliderProps extends AccessibilityProps, Pick { @@ -64,7 +64,7 @@ const clamp = (val: number, min: number, max: number) => { */ export const Slider = memo( // TODO: refactor component to fix max-statements - // eslint-disable-next-line max-statements + ({ disabled = false, range = false, @@ -75,7 +75,6 @@ export const Slider = memo( testID, ...rest }) => { - const styles = useStyles() const minPointX = useSharedValue(0) const maxPointX = useSharedValue(0) @@ -89,12 +88,12 @@ export const Slider = memo( const pointerStyle = useMemo( () => [styles.point, isPressed && styles.hovered], - [styles.point, isPressed, styles.hovered] + [isPressed] ) const lineStyle = useMemo( () => [styles.line, isPressed && styles.hovered], - [styles.line, isPressed, styles.hovered] + [isPressed] ) const interpolateInitVal = useCallback( @@ -254,7 +253,7 @@ export const Slider = memo( } ) -const useStyles = makeStyles(({ theme, border }) => { +const styles = StyleSheet.create(({ theme, border }) => { return { container: { width: '100%', diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 0b6e146..8c6ee02 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -1,8 +1,8 @@ import { memo, useCallback, type ReactNode } from 'react' import { Text, Pressable, View, type ViewProps } from 'react-native' +import { StyleSheet } from '../../../utils' import { type SvgSource, SvgUniversal } from '../../../utils/SvgUniversal' -import { makeStyles } from '../../../utils/makeStyles' export interface TabItemProps { /** SVG-иконка */ @@ -34,8 +34,6 @@ export interface TabItemProps { // export const TabItem = memo( ({ Icon, label, badge, index, onPress, disabled, active, onLayout }) => { - const styles = useStyles() - const getIconColor = useCallback( (pressed: boolean) => { if (disabled) { @@ -52,7 +50,7 @@ export const TabItem = memo( return styles.icon.color }, - [disabled, active, styles] + [disabled, active] ) return ( @@ -99,7 +97,7 @@ export const TabItem = memo( } ) -const useStyles = makeStyles(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ container: { alignItems: 'center', flexDirection: 'row', diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 3f6529d..646cd8d 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -13,7 +13,7 @@ import Animated, { withTiming, } from 'react-native-reanimated' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { TabItem, type TabItemProps } from './TabItem/TabItem' @@ -37,8 +37,6 @@ export interface TabsProps // export const Tabs = memo( ({ items, disabled = false, activeIndex, onChange, testID, ...rest }) => { - const styles = useStyles() - const [tabsLayouts, setTabsLayouts] = useState< Record >({}) @@ -93,7 +91,7 @@ export const Tabs = memo( } ) -const useStyles = makeStyles(({ theme, border }) => ({ +const styles = StyleSheet.create(({ theme, border }) => ({ container: { flexDirection: 'row', gap: theme.Panel.TabView.tabviewHeaderSpacing, diff --git a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap index c3c1e6a..753038b 100644 --- a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -166,17 +166,13 @@ exports[`TabItem component tests active: label, badge 1`] = ` > { /** Текст */ - text: string + readonly text: string /** true, если необходимо полное скругление углов компонента */ - rounded?: boolean + readonly rounded?: boolean /** * Выбор варианта стиля компонента * @default 'basic' */ - severity?: 'basic' | 'info' | 'success' | 'warning' | 'danger' | 'secondary' + readonly severity?: + | 'basic' + | 'info' + | 'success' + | 'warning' + | 'danger' + | 'secondary' /** * Показать или скрыть иконку внутри компонента * @default true */ - showIcon?: boolean + readonly showIcon?: boolean /** Дополнительная стилизация для контейнера компонента */ - style?: StyleProp + readonly style?: StyleProp /** SVG-иконка */ - Icon?: SvgSource + readonly Icon?: SvgSource } /** * Используется для маркировки элементов интерфейса * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4921 */ -export const Tag = memo( +export const Tag = memo( ({ text, rounded, @@ -52,31 +58,27 @@ export const Tag = memo( Icon, testID, ...rest - }) => { - const styles = useStyles() + }: TagProps) => { + tagStyles.useVariants({ severity }) return ( {showIcon && Icon ? ( ) : null} {text} @@ -87,7 +89,7 @@ export const Tag = memo( } ) -const useStyles = makeStyles( +const tagStyles = StyleSheet.create( ({ theme, border, spacing, typography, fonts }) => ({ container: { alignSelf: 'flex-start', @@ -97,12 +99,31 @@ const useStyles = makeStyles( paddingHorizontal: theme.Misc.Tag.tagPadding, height: theme.Misc.Tag.tagHeight, borderRadius: border.Radius['rounded-lg'], + variants: { + severity: { + basic: { backgroundColor: theme.Misc.Badge.badgeBg }, + info: { + backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, + }, + success: { + backgroundColor: + theme.Button.Severity.Success.Basic.successButtonBg, + }, + warning: { + backgroundColor: + theme.Button.Severity.Warning.Basic.warningButtonBg, + }, + danger: { + backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, + }, + secondary: { backgroundColor: theme.Surface['surface-border'] }, + }, + }, }, roundedContainer: { borderRadius: border.Radius['rounded-full'] }, icon: { width: theme.Misc.Tag.tagFontSize, height: theme.Misc.Tag.tagFontSize, - color: theme.Misc.Badge.badgeTextColor, }, text: { flexShrink: 1, @@ -110,25 +131,17 @@ const useStyles = makeStyles( includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.primary, + variants: { + severity: { + basic: { color: theme.Misc.Badge.badgeTextColor }, + info: { color: theme.Misc.Badge.badgeInfoTextColor }, + success: { color: theme.Misc.Badge.badgeSuccessTextColor }, + warning: { color: theme.Misc.Badge.badgeWarningTextColor }, + danger: { color: theme.Misc.Badge.badgeDangerTextColor }, + secondary: { color: theme.Misc.Badge.badgeTextColor }, + }, + }, }, - textbasic: { color: theme.Misc.Badge.badgeTextColor }, - textinfo: { color: theme.Misc.Badge.badgeInfoTextColor }, - textwarning: { color: theme.Misc.Badge.badgeWarningTextColor }, - textsuccess: { color: theme.Misc.Badge.badgeSuccessTextColor }, - textdanger: { color: theme.Misc.Badge.badgeDangerTextColor }, - textsecondary: { color: theme.Misc.Badge.badgeTextColor }, - basic: { backgroundColor: theme.Misc.Badge.badgeBg }, - info: { backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg }, - success: { - backgroundColor: theme.Button.Severity.Success.Basic.successButtonBg, - }, - warning: { - backgroundColor: theme.Button.Severity.Warning.Basic.warningButtonBg, - }, - danger: { - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, - }, - secondary: { backgroundColor: theme.Surface['surface-border'] }, }) ) diff --git a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap index 2704eec..d41f7d7 100644 --- a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -10,15 +10,13 @@ exports[`Tag snapshot: default 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#44e858", "borderRadius": 7, "flexDirection": "row", "gap": 3.5, "height": 21, "paddingHorizontal": 7, }, - { - "backgroundColor": "#44e858", - }, undefined, ] } @@ -27,18 +25,14 @@ exports[`Tag snapshot: default 1`] = ` @@ -58,15 +52,13 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#44e858", "borderRadius": 7, "flexDirection": "row", "gap": 3.5, "height": 21, "paddingHorizontal": 7, }, - { - "backgroundColor": "#44e858", - }, { "borderRadius": 100, }, @@ -156,18 +148,14 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` @@ -187,15 +175,13 @@ exports[`Tag snapshot: severity = danger 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#fbacaa", "borderRadius": 7, "flexDirection": "row", "gap": 3.5, "height": 21, "paddingHorizontal": 7, }, - { - "backgroundColor": "#fbacaa", - }, undefined, ] } @@ -204,18 +190,14 @@ exports[`Tag snapshot: severity = danger 1`] = ` @@ -235,15 +217,13 @@ exports[`Tag snapshot: severity = info, showIcon = false, with Icon 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#aad7fb", "borderRadius": 7, "flexDirection": "row", "gap": 3.5, "height": 21, "paddingHorizontal": 7, }, - { - "backgroundColor": "#aad7fb", - }, undefined, ] } @@ -331,18 +311,14 @@ exports[`Tag snapshot: severity = info, showIcon = false, with Icon 1`] = ` @@ -362,15 +338,13 @@ exports[`Tag snapshot: severity = secondary, rounded = false, showIcon = true, w { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#e2e2e4", "borderRadius": 7, "flexDirection": "row", "gap": 3.5, "height": 21, "paddingHorizontal": 7, }, - { - "backgroundColor": "#e2e2e4", - }, false, ] } @@ -458,18 +432,14 @@ exports[`Tag snapshot: severity = secondary, rounded = false, showIcon = true, w @@ -494,15 +464,13 @@ exports[`Tag snapshot: severity = success, with custom styles 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#aafbb7", "borderRadius": 7, "flexDirection": "row", "gap": 3.5, "height": 21, "paddingHorizontal": 7, }, - { - "backgroundColor": "#aafbb7", - }, undefined, ] } @@ -511,18 +479,14 @@ exports[`Tag snapshot: severity = success, with custom styles 1`] = ` @@ -542,15 +506,13 @@ exports[`Tag snapshot: severity = warning 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#fddeaa", "borderRadius": 7, "flexDirection": "row", "gap": 3.5, "height": 21, "paddingHorizontal": 7, }, - { - "backgroundColor": "#fddeaa", - }, undefined, ] } @@ -559,18 +521,14 @@ exports[`Tag snapshot: severity = warning 1`] = ` diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index a56e426..ab33346 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -9,7 +9,7 @@ import Animated, { } from 'react-native-reanimated' import Svg, { Circle } from 'react-native-svg' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { TimerFlip } from './TimerFlip' import { COUNTER_SIZE } from './constants' @@ -33,7 +33,6 @@ const BORDER_WIDTH = 2 * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=270-1514 */ export const Timer = memo(({ countFrom, onFinish }) => { - const styles = useStyles() const circleAnimation = useSharedValue(0) const [currentTimerValue, setCurrentTimerValue] = useState(countFrom) const circumferenceRadius = COUNTER_SIZE / 2 - BORDER_WIDTH @@ -97,7 +96,7 @@ export const Timer = memo(({ countFrom, onFinish }) => { ) }) -const useStyles = makeStyles(({ typography }) => ({ +const styles = StyleSheet.create(({ typography }) => ({ container: { overflow: 'hidden', width: COUNTER_SIZE, diff --git a/src/components/Timer/TimerFlip.tsx b/src/components/Timer/TimerFlip.tsx index bf8089a..1c21384 100644 --- a/src/components/Timer/TimerFlip.tsx +++ b/src/components/Timer/TimerFlip.tsx @@ -8,7 +8,7 @@ import Animated, { import { scheduleOnRN } from 'react-native-worklets' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' import { COUNTER_SIZE } from './constants' @@ -18,7 +18,6 @@ interface TimerFlipProps { } export const TimerFlip = memo(({ value, duration = 300 }) => { - const styles = useStyles() const [currentValue, setCurrentValue] = useState(value) const [nextValue, setNextValue] = useState(value) const progress = useSharedValue(0) @@ -66,7 +65,7 @@ export const TimerFlip = memo(({ value, duration = 300 }) => { ) }) -const useStyles = makeStyles(({ typography, fonts }) => ({ +const styles = StyleSheet.create(({ typography, fonts }) => ({ container: { overflow: 'hidden', width: COUNTER_SIZE, diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index 8ec530a..3fd997e 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -9,56 +9,52 @@ import { type ViewStyle, } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' - -import { useIconSize } from './hooks/useIconSize' -import { useLabelSize } from './hooks/useLabelSize' -import { useStateStyles } from './hooks/useStateStyles' export interface ToggleButtonProps extends AccessibilityProps, Pick { /** Обработчик нажатия на кнопку */ - onPress: () => void + readonly onPress: () => void /** * true, если необходим компонент в активном состоянии * @default false */ - checked?: boolean + readonly checked?: boolean /** * Управление доступностью компонента * @default false */ - disabled?: boolean + readonly disabled?: boolean /** Отображение только иконки без текста */ - iconOnly?: boolean + readonly iconOnly?: boolean /** * Выбор позиции иконки. 'left' - иконка слева, 'right' - иконка справа, null - иконка скрыта * @default 'left' */ - iconPos?: 'left' | 'right' | null + readonly iconPos?: 'left' | 'right' | null /** Текст на кнопке */ - label?: string + readonly label?: string /** * Выбор размера элемента * @default 'base' */ - size?: 'xlarge' | 'large' | 'base' | 'small' + readonly size?: 'xlarge' | 'large' | 'base' | 'small' /** Дополнительная стилизация для контейнера компонента */ - style?: StyleProp + readonly style?: StyleProp /** SVG-иконка */ - Icon?: SvgSource + readonly Icon?: SvgSource } /** * Используется для выбора нескольких значений с помощью кнопки * @see https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4821 */ -export const ToggleButton = memo( +export const ToggleButton = memo( ({ onPress, - checked, - disabled, + checked = false, + disabled = false, iconOnly: iconOnlyProp, iconPos = 'left', label, @@ -67,12 +63,15 @@ export const ToggleButton = memo( Icon, testID, ...rest - }) => { - const styles = useStyles() - const labelSize = useLabelSize(size) - const iconSize = useIconSize(size) + }: ToggleButtonProps) => { const [pressed, setPressed] = useState(false) - const stateStyles = useStateStyles(checked, disabled, pressed) + + toggleStyles.useVariants({ + size, + checked: checked ? 'true' : 'false', + pressed: pressed ? 'true' : 'false', + disabled: disabled ? 'true' : 'false', + }) const iconOnly = useMemo( () => iconOnlyProp || !label, @@ -86,14 +85,14 @@ export const ToggleButton = memo( return ( ) - }, [Icon, iconSize.height, iconSize.width, stateStyles.label]) + }, [Icon]) const onPressIn = useCallback(() => setPressed(true), []) const onPressOut = useCallback(() => setPressed(false), []) @@ -101,7 +100,7 @@ export const ToggleButton = memo( return ( ( > @@ -122,10 +119,7 @@ export const ToggleButton = memo( ) : ( <> {iconPos === 'left' && icon} - + {label} {Icon && iconPos === 'right' ? icon : null} @@ -137,42 +131,161 @@ export const ToggleButton = memo( } ) -const useStyles = makeStyles(({ theme, spacing, border, fonts }) => ({ - container: { - alignSelf: 'flex-start', - borderRadius: border.Radius['rounded-full'], - borderWidth: border.Width.border, - overflow: 'hidden', - }, - contentContainer: { - flexDirection: 'row', - alignItems: 'center', - alignSelf: 'flex-start', - borderRadius: border.Radius['rounded-full'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - paddingHorizontal: spacing.Padding['p-6'], - gap: spacing.Gap['gap-3'], - }, - xlarge: { minHeight: theme.Button.Common.buttonHeightXL }, - large: { minHeight: theme.Button.Common.buttonHeightLG }, - base: { - minHeight: theme.Button.Common.buttonHeight, - paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, - gap: theme.General.inlineSpacing, - }, - small: { - minHeight: theme.Button.Common.buttonHeightSM, - paddingHorizontal: spacing.Padding['p-3'], - gap: theme.General.inlineSpacing, - }, - iconOnly: { - aspectRatio: 1, - paddingHorizontal: 0, - paddingVertical: 0, - justifyContent: 'center', - }, - label: { flexShrink: 1, fontFamily: fonts.primary }, -})) +const toggleStyles = StyleSheet.create( + ({ theme, spacing, border, fonts, typography }) => ({ + container: { + alignSelf: 'flex-start', + borderRadius: border.Radius['rounded-full'], + borderWidth: border.Width.border, + overflow: 'hidden', + variants: { + checked: { + true: { + borderColor: theme.Form.ToggleButton.toggleButtonActiveBorderColor, + }, + false: { + borderColor: theme.Form.ToggleButton.toggleButtonBorderColor, + }, + }, + pressed: { + true: { borderColor: theme.Form.ToggleButton.toggleButtonHoverBg }, + false: {}, + }, + disabled: { + true: { + borderColor: theme.Button.Disabled.disabledButtonBorderColor, + opacity: 0.6, + }, + false: {}, + }, + }, + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { + borderColor: + theme.Form.ToggleButton.toggleButtonActiveHoverBorderColor, + }, + }, + ], + }, + contentContainer: { + flexDirection: 'row', + alignItems: 'center', + alignSelf: 'flex-start', + borderRadius: border.Radius['rounded-full'], + paddingVertical: theme.Button.Common.buttonPaddingTopBottom, + paddingHorizontal: spacing.Padding['p-6'], + gap: spacing.Gap['gap-3'], + variants: { + size: { + xlarge: { minHeight: theme.Button.Common.buttonHeightXL }, + large: { minHeight: theme.Button.Common.buttonHeightLG }, + base: { + minHeight: theme.Button.Common.buttonHeight, + paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, + gap: theme.General.inlineSpacing, + }, + small: { + minHeight: theme.Button.Common.buttonHeightSM, + paddingHorizontal: spacing.Padding['p-3'], + gap: theme.General.inlineSpacing, + }, + }, + checked: { + true: { + backgroundColor: theme.Form.ToggleButton.toggleButtonActiveBg, + }, + false: { backgroundColor: theme.Form.ToggleButton.toggleButtonBg }, + }, + pressed: { + true: { + backgroundColor: theme.Form.ToggleButton.toggleButtonHoverBg, + }, + false: {}, + }, + disabled: { + true: { backgroundColor: theme.Button.Disabled.disabledButtonBg }, + false: {}, + }, + }, + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { + backgroundColor: theme.Form.ToggleButton.toggleButtonActiveHoverBg, + }, + }, + ], + }, + iconOnly: { + aspectRatio: 1, + paddingHorizontal: 0, + paddingVertical: 0, + justifyContent: 'center', + }, + icon: { + variants: { + size: { + xlarge: { + width: typography.Size['text-4xl'], + height: typography.Size['text-4xl'], + }, + large: { + width: typography.Size['text-2xl'], + height: typography.Size['text-2xl'], + }, + base: { + width: typography.Size['text-xl'], + height: typography.Size['text-xl'], + }, + small: { + width: typography.Size['text-base'], + height: typography.Size['text-base'], + }, + }, + }, + }, + label: { + flexShrink: 1, + fontFamily: fonts.primary, + fontWeight: '600', + includeFontPadding: false, + verticalAlign: 'middle', + variants: { + size: { + xlarge: { fontSize: typography.Size['text-2xl'] }, + large: { fontSize: typography.Size['text-xl'] }, + base: { fontSize: typography.Size['text-base'] }, + small: { fontSize: typography.Size['text-sm'] }, + }, + checked: { + true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, + false: { color: theme.Form.ToggleButton.toggleButtonTextColor }, + }, + pressed: { + true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, + false: {}, + }, + disabled: { + true: { color: theme.Button.Disabled.disabledButtonTextColor }, + false: {}, + }, + }, + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { + color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, + }, + }, + ], + }, + }) +) export const ToggleButtonTestId = { root: 'ToggleButton', diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 0f327a3..b3143d4 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -10,20 +10,12 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa [ { "alignSelf": "flex-start", + "borderColor": "rgba(255, 255, 255, 0.0001)", "borderRadius": 100, "borderWidth": 1, "overflow": "hidden", }, undefined, - [ - { - "borderColor": "rgba(255, 255, 255, 0.0001)", - }, - false, - false, - false, - false, - ], ] } testID="ToggleButton" @@ -34,27 +26,15 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#e2e2e4", "borderRadius": 100, "flexDirection": "row", - "gap": 10.5, - "paddingHorizontal": 21, - "paddingVertical": 0, - }, - { "gap": 7, "minHeight": 28, "paddingHorizontal": 10.5, + "paddingVertical": 0, }, false, - [ - { - "backgroundColor": "#e2e2e4", - }, - false, - false, - false, - false, - ], ] } testID="ToggleButton.container" @@ -79,15 +59,10 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "backgroundColor": "transparent", "borderWidth": 0, }, - [ - { - "color": "#181a1f", - }, - false, - false, - false, - false, - ], + { + "height": 14, + "width": 14, + }, { "flex": 0, "height": 14, @@ -102,7 +77,6 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa xmlns="http://www.w3.org/2000/svg" > @@ -216,20 +172,12 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa [ { "alignSelf": "flex-start", + "borderColor": "rgba(255, 255, 255, 0.0001)", "borderRadius": 100, "borderWidth": 1, "overflow": "hidden", }, undefined, - [ - { - "borderColor": "rgba(255, 255, 255, 0.0001)", - }, - false, - false, - false, - false, - ], ] } testID="ToggleButton" @@ -240,58 +188,30 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#e2e2e4", "borderRadius": 100, "flexDirection": "row", - "gap": 10.5, - "paddingHorizontal": 21, - "paddingVertical": 0, - }, - { "gap": 7, "minHeight": 28, "paddingHorizontal": 10.5, + "paddingVertical": 0, }, false, - [ - { - "backgroundColor": "#e2e2e4", - }, - false, - false, - false, - false, - ], ] } testID="ToggleButton.container" > @@ -317,15 +237,10 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "backgroundColor": "transparent", "borderWidth": 0, }, - [ - { - "color": "#181a1f", - }, - false, - false, - false, - false, - ], + { + "height": 14, + "width": 14, + }, { "flex": 0, "height": 14, @@ -340,7 +255,6 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa xmlns="http://www.w3.org/2000/svg" > @@ -814,6 +648,7 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal [ { "alignSelf": "flex-start", + "borderColor": "rgba(255, 255, 255, 0.0001)", "borderRadius": 100, "borderWidth": 1, "overflow": "hidden", @@ -821,17 +656,6 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal { "margin": 10, }, - [ - { - "borderColor": "rgba(255, 255, 255, 0.0001)", - }, - false, - { - "borderColor": "rgba(255, 255, 255, 0.0001)", - }, - false, - false, - ], ] } testID="ToggleButton" @@ -842,32 +666,20 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal { "alignItems": "center", "alignSelf": "flex-start", + "backgroundColor": "#2b2e33", "borderRadius": 100, "flexDirection": "row", "gap": 10.5, + "minHeight": 56, "paddingHorizontal": 21, "paddingVertical": 0, }, - { - "minHeight": 56, - }, { "aspectRatio": 1, "justifyContent": "center", "paddingHorizontal": 0, "paddingVertical": 0, }, - [ - { - "backgroundColor": "#e2e2e4", - }, - false, - { - "backgroundColor": "#2b2e33", - }, - false, - false, - ], ] } testID="ToggleButton.container" @@ -892,17 +704,10 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal "backgroundColor": "transparent", "borderWidth": 0, }, - [ - { - "color": "#181a1f", - }, - false, - { - "color": "#ffffff", - }, - false, - false, - ], + { + "height": 31.5, + "width": 31.5, + }, { "flex": 0, "height": 31, @@ -917,7 +722,6 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal xmlns="http://www.w3.org/2000/svg" > { - const styles = useStyles() - - return useMemo(() => { - return styles[size] - }, [size, styles]) -} - -const useStyles = makeStyles(({ typography }) => ({ - xlarge: { - width: typography.Size['text-4xl'], - height: typography.Size['text-4xl'], - }, - large: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], - }, - base: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - }, - small: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, -})) diff --git a/src/components/ToggleButton/hooks/useLabelSize.ts b/src/components/ToggleButton/hooks/useLabelSize.ts deleted file mode 100644 index 99e6821..0000000 --- a/src/components/ToggleButton/hooks/useLabelSize.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { useMemo } from 'react' - -import { makeStyles } from '../../../utils/makeStyles' -import type { ToggleButtonProps } from '../ToggleButton' - -export const useLabelSize = (size: ToggleButtonProps['size'] = 'base') => { - const styles = useStyles() - - return useMemo(() => { - return [styles.common, styles[size]] - }, [size, styles]) -} - -const useStyles = makeStyles(({ typography }) => ({ - common: { - fontWeight: '600', - includeFontPadding: false, - verticalAlign: 'middle', - }, - xlarge: { fontSize: typography.Size['text-2xl'] }, - large: { fontSize: typography.Size['text-xl'] }, - base: { fontSize: typography.Size['text-base'] }, - small: { fontSize: typography.Size['text-sm'] }, -})) diff --git a/src/components/ToggleButton/hooks/useStateStyles.ts b/src/components/ToggleButton/hooks/useStateStyles.ts deleted file mode 100644 index f0a4750..0000000 --- a/src/components/ToggleButton/hooks/useStateStyles.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { useMemo } from 'react' - -import { makeStyles } from '../../../utils/makeStyles' - -export const useStateStyles = ( - checked = false, - disabled = false, - pressed = false -) => { - const styles = useStyles() - - const borderContainer = useMemo( - () => [ - styles.borderContainer, - pressed && styles.pressedBorderContainer, - checked && styles.checkedBorderContainer, - checked && pressed && styles.checkedPressedBorderContainer, - disabled && styles.disabledBorderContainer, - ], - [ - checked, - disabled, - pressed, - styles.borderContainer, - styles.checkedBorderContainer, - styles.checkedPressedBorderContainer, - styles.disabledBorderContainer, - styles.pressedBorderContainer, - ] - ) - - const contentContainer = useMemo( - () => [ - styles.contentContainer, - pressed && styles.pressedContentContainer, - checked && styles.checkedContentContainer, - checked && pressed && styles.checkedPressedContentContainer, - disabled && styles.disabledContentContainer, - ], - [ - checked, - disabled, - pressed, - styles.checkedContentContainer, - styles.checkedPressedContentContainer, - styles.contentContainer, - styles.disabledContentContainer, - styles.pressedContentContainer, - ] - ) - - const label = useMemo( - () => [ - styles.label, - pressed && styles.pressedLabel, - checked && styles.checkedLabel, - checked && pressed && styles.checkedPressedLabel, - disabled && styles.disabledLabel, - ], - [ - checked, - disabled, - pressed, - styles.checkedLabel, - styles.checkedPressedLabel, - styles.disabledLabel, - styles.label, - styles.pressedLabel, - ] - ) - - return useMemo( - () => ({ borderContainer, contentContainer, label }), - [borderContainer, contentContainer, label] - ) -} - -const useStyles = makeStyles(({ theme }) => ({ - borderContainer: { - borderColor: theme.Form.ToggleButton.toggleButtonBorderColor, - }, - pressedBorderContainer: { - borderColor: theme.Form.ToggleButton.toggleButtonHoverBg, - }, - checkedBorderContainer: { - borderColor: theme.Form.ToggleButton.toggleButtonActiveBorderColor, - }, - checkedPressedBorderContainer: { - borderColor: theme.Form.ToggleButton.toggleButtonActiveHoverBorderColor, - }, - disabledBorderContainer: { - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - opacity: 0.6, - }, - - contentContainer: { backgroundColor: theme.Form.ToggleButton.toggleButtonBg }, - pressedContentContainer: { - backgroundColor: theme.Form.ToggleButton.toggleButtonHoverBg, - }, - checkedContentContainer: { - backgroundColor: theme.Form.ToggleButton.toggleButtonActiveBg, - }, - checkedPressedContentContainer: { - backgroundColor: theme.Form.ToggleButton.toggleButtonActiveHoverBg, - }, - disabledContentContainer: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - }, - - label: { color: theme.Form.ToggleButton.toggleButtonTextColor }, - pressedLabel: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, - checkedLabel: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, - checkedPressedLabel: { - color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, - }, - disabledLabel: { color: theme.Button.Disabled.disabledButtonTextColor }, -})) diff --git a/src/components/Typography/Anchor.tsx b/src/components/Typography/Anchor.tsx index 9d193ce..c6f1e8e 100644 --- a/src/components/Typography/Anchor.tsx +++ b/src/components/Typography/Anchor.tsx @@ -8,8 +8,8 @@ import { View, } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' const WORD_JOINER = '\u2060' // символ невидимого пробела, чтобы избежать разрыва строки между текстом и иконкой @@ -50,8 +50,6 @@ export const Anchor = memo( style, ...other }: AnchorProps) => { - const styles = useStyles() - const [pressed, setPressed] = useState(false) const onPressIn = useCallback(() => setPressed(true), []) const onPressOut = useCallback(() => setPressed(false), []) @@ -63,11 +61,11 @@ export const Anchor = memo( } return { style: styles.container, testID: testID || AnchorTestId.root } - }, [noWrapper, styles.container, testID]) + }, [noWrapper, testID]) const iconColor = useMemo( () => (visited ? styles.visited.color : styles.text.color), - [styles.text.color, styles.visited.color, visited] + [visited] ) return ( @@ -131,7 +129,7 @@ export const Anchor = memo( } ) -const useStyles = makeStyles(({ spacing, typography, fonts }) => ({ +const styles = StyleSheet.create(({ spacing, typography, fonts }) => ({ container: { flexDirection: 'row', alignItems: 'center' }, text: { flexShrink: 1, diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index 9d311e3..11dab59 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -1,6 +1,6 @@ import { Text, type TextProps } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' export interface BodyProps extends TextProps { readonly base?: boolean @@ -19,8 +19,6 @@ export const Body = ({ style, ...other }: BodyProps) => { - const styles = useStyles() - return ( ({ +const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ text: { fontSize: typography.Size['text-lg'], includeFontPadding: false, diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index edffa2b..74457a6 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -1,7 +1,7 @@ import { Text, type TextProps, View } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' export interface CaptionProps extends TextProps { readonly color?: 'default' | 'secondary' | 'primary' @@ -17,7 +17,6 @@ export const Caption = ({ Icon, ...other }: CaptionProps) => { - const styles = useStyles() const text = ( ({ +const styles = StyleSheet.create(({ theme, spacing, typography, fonts }) => ({ text: { fontSize: typography.Size['text-sm'], includeFontPadding: false, diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index 1a0addf..b7e1b8a 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -8,8 +8,8 @@ import { import { useMemo } from 'react' import { Text, View, type TextProps } from 'react-native' +import { StyleSheet } from '../../utils' import { type SvgSource, SvgUniversal } from '../../utils/SvgUniversal' -import { makeStyles } from '../../utils/makeStyles' export interface ServiceProps extends TextProps { /** @@ -41,8 +41,6 @@ export const Service = ({ Icon: IconFromProps, ...other }: ServiceProps) => { - const styles = useStyles() - const { Icon, variantStyle, iconSize, textStyles, containerStyle } = useMemo(() => { const iconMap = { @@ -64,7 +62,7 @@ export const Service = ({ ], containerStyle: base ? styles.containerBase : styles.container, } - }, [variant, base, styles, IconFromProps]) + }, [variant, base, IconFromProps]) return ( @@ -81,7 +79,7 @@ export const Service = ({ ) } -const useStyles = makeStyles(({ typography, spacing, fonts }) => ({ +const styles = StyleSheet.create(({ typography, spacing, fonts }) => ({ iconBase: { width: typography.Size['text-xl'], height: typography.Size['text-xl'], diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index 5fd2542..e0847f2 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -1,7 +1,7 @@ import { memo } from 'react' import { Text, type TextProps } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' export interface SubtitleProps extends TextProps { /** @@ -21,19 +21,15 @@ export interface SubtitleProps extends TextProps { * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=1-245 */ export const Subtitle = memo( - ({ base = false, color = 'default', style, ...other }) => { - const styles = useStyles() - - return ( - - ) - } + ({ base = false, color = 'default', style, ...other }) => ( + + ) ) -const useStyles = makeStyles(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ text: { fontSize: typography.Size['text-sm'], fontWeight: 700, diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx index a144f9e..657ac98 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -1,18 +1,16 @@ import { Text, type TextProps } from 'react-native' -import { makeStyles } from '../../utils/makeStyles' +import { StyleSheet } from '../../utils' export interface TitleProps extends TextProps { readonly level: 'd1' | 'd2' | 'd3' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' } -export const Title = ({ level, style, ...other }: TitleProps) => { - const styles = useStyles() +export const Title = ({ level, style, ...other }: TitleProps) => ( + +) - return -} - -const useStyles = makeStyles(({ theme, typography, fonts }) => ({ +const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ text: { color: theme.General.textColor, fontFamily: fonts.primary, diff --git a/src/hooks/__tests__/useChangeTheme.test.ts b/src/hooks/__tests__/useChangeTheme.test.ts index 8f24423..d312a7f 100644 --- a/src/hooks/__tests__/useChangeTheme.test.ts +++ b/src/hooks/__tests__/useChangeTheme.test.ts @@ -1,8 +1,9 @@ /* eslint-disable @typescript-eslint/no-deprecated -- Проверяем deprecated API на обратную совместимость. */ import { act, renderHook } from '@testing-library/react-native' -import { UnistylesRuntime } from 'react-native-unistyles' import { ThemeVariant } from '../../theme' +import { UnistylesRuntime } from '../../utils' + import { useChangeTheme } from '../useChangeTheme' describe('useChangeTheme', () => { diff --git a/src/hooks/__tests__/useTheme.test.ts b/src/hooks/__tests__/useTheme.test.ts index c4cd598..c03c94b 100644 --- a/src/hooks/__tests__/useTheme.test.ts +++ b/src/hooks/__tests__/useTheme.test.ts @@ -1,8 +1,9 @@ /* eslint-disable @typescript-eslint/no-deprecated -- Проверяем deprecated API на обратную совместимость. */ import { renderHook } from '@testing-library/react-native' -import { UnistylesRuntime } from 'react-native-unistyles' import { ThemeVariant } from '../../theme' +import { UnistylesRuntime } from '../../utils' + import { useTheme } from '../useTheme' const setThemeName = (themeName: 'light' | 'dark') => { diff --git a/src/hooks/useChangeTheme.ts b/src/hooks/useChangeTheme.ts index f0f889d..0922493 100644 --- a/src/hooks/useChangeTheme.ts +++ b/src/hooks/useChangeTheme.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react' -import { UnistylesRuntime } from 'react-native-unistyles' import { ThemeVariant } from '../theme' +import { UnistylesRuntime } from '../utils' const THEME_MAP: Record = { [ThemeVariant.Light]: 'light', diff --git a/src/hooks/useFonts.ts b/src/hooks/useFonts.ts index 5c70ec8..1c8cadc 100644 --- a/src/hooks/useFonts.ts +++ b/src/hooks/useFonts.ts @@ -1,6 +1,5 @@ -import { useUnistyles } from 'react-native-unistyles' - import type { FontsConfig } from '../theme' +import { useUnistyles } from '../utils' /** * Возвращает конфигурацию шрифтов. diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts index 3e8b5ab..c2d8b2b 100644 --- a/src/hooks/useTheme.ts +++ b/src/hooks/useTheme.ts @@ -1,6 +1,5 @@ -import { UnistylesRuntime } from 'react-native-unistyles' - import { ThemeVariant } from '../theme' +import { UnistylesRuntime } from '../utils' /** * Возвращает текущую тему. diff --git a/src/index.ts b/src/index.ts index 0f3f9a6..9b4b939 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ +import './theme' export * from './components' /* eslint-disable @typescript-eslint/no-deprecated -- Deprecated API сохраняем в публичном интерфейсе для обратной совместимости. */ export { useChangeTheme } from './hooks/useChangeTheme' @@ -14,7 +15,7 @@ export { UnistylesRuntime, useUnistyles, withUnistyles, -} from 'react-native-unistyles' +} from './utils' export { useFonts } from './hooks/useFonts' export { makeStyles } from './utils/makeStyles' export { useTheme } from './hooks/useTheme' diff --git a/src/theme/index.ts b/src/theme/index.ts index 2420961..53fcb19 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,4 +1,4 @@ -import { StyleSheet } from 'react-native-unistyles' +import { StyleSheet } from '../utils' import { darkTheme } from './darkTheme' import { lightTheme } from './lightTheme' diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..246238e --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,6 @@ +export { + StyleSheet, + UnistylesRuntime, + useUnistyles, + withUnistyles, +} from 'react-native-unistyles' diff --git a/src/utils/makeStyles.ts b/src/utils/makeStyles.ts index cf9ac78..d0bbe3e 100644 --- a/src/utils/makeStyles.ts +++ b/src/utils/makeStyles.ts @@ -1,9 +1,10 @@ import { useMemo } from 'react' import type { ImageStyle, TextStyle, ViewStyle } from 'react-native' -import { useUnistyles } from 'react-native-unistyles' import type { ThemeType } from '../theme' +import { useUnistyles } from './index' + /** * @deprecated Используйте `StyleSheet.create(...)` из SDK. * From 1456a1b023d7d4b7d8dc9854b568f3e6332c6475 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Tue, 14 Apr 2026 11:50:11 +0500 Subject: [PATCH 08/13] =?UTF-8?q?build:=20=D1=84=D0=B8=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D1=8F=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D1=85=20=D0=B7=D0=B0=D0=B2=D0=B8=D1=81=D0=B8?= =?UTF-8?q?=D0=BC=D0=BE=D1=81=D1=82=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 10 ++- yarn.lock | 236 ++++++++++++++++++++++++++++++++++----------------- 2 files changed, 165 insertions(+), 81 deletions(-) diff --git a/package.json b/package.json index d925a41..b1ee3af 100644 --- a/package.json +++ b/package.json @@ -108,10 +108,10 @@ "react-native-advanced-input-mask": "1.4.6", "react-native-gesture-handler": "2.29.1", "react-native-nitro-modules": "0.35.2", - "react-native-reanimated": "4.1.1", + "react-native-reanimated": "4.2.1", "react-native-safe-area-context": "5.6.2", "react-native-svg": "15.15.1", - "react-native-worklets": "0.5.1", + "react-native-worklets": "0.7.1", "release-it": "19.1.0", "standard-version": "9.5.0", "storybook": "10.1.10", @@ -125,8 +125,10 @@ "expo": ">=54.x.x", "react": ">=19.1", "react-native": ">=0.81.5", - "react-native-reanimated": ">=4.1.1", - "react-native-svg": ">=15.15.1" + "react-native-reanimated": ">=4.2.1", + "react-native-svg": ">=15.15.1", + "react-native-unistyles": ">=3.2.3", + "react-native-worklets": ">=0.7.0" }, "peerDependenciesMeta": { "expo": { diff --git a/yarn.lock b/yarn.lock index 4bb2e48..7f1b1f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -97,6 +97,17 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0": + version: 7.29.0 + resolution: "@babel/code-frame@npm:7.29.0" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.28.5" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.1.1" + checksum: 10/199e15ff89007dd30675655eec52481cb245c9fdf4f81e4dc1f866603b0217b57aff25f5ffa0a95bbc8e31eb861695330cd7869ad52cc211aa63016320ef72c5 + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.7": version: 7.25.8 resolution: "@babel/compat-data@npm:7.25.8" @@ -264,6 +275,19 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.29.0": + version: 7.29.1 + resolution: "@babel/generator@npm:7.29.1" + dependencies: + "@babel/parser": "npm:^7.29.0" + "@babel/types": "npm:^7.29.0" + "@jridgewell/gen-mapping": "npm:^0.3.12" + "@jridgewell/trace-mapping": "npm:^0.3.28" + jsesc: "npm:^3.0.2" + checksum: 10/61fe4ddd6e817aa312a14963ccdbb5c9a8c57e8b97b98d19a8a99ccab2215fda1a5f52bc8dd8d2e3c064497ddeb3ab8ceb55c76fa0f58f8169c34679d2256fe0 + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-annotate-as-pure@npm:7.25.9" @@ -368,20 +392,20 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.28.5": - version: 7.28.5 - resolution: "@babel/helper-create-class-features-plugin@npm:7.28.5" +"@babel/helper-create-class-features-plugin@npm:^7.28.6": + version: 7.28.6 + resolution: "@babel/helper-create-class-features-plugin@npm:7.28.6" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.27.3" "@babel/helper-member-expression-to-functions": "npm:^7.28.5" "@babel/helper-optimise-call-expression": "npm:^7.27.1" - "@babel/helper-replace-supers": "npm:^7.27.1" + "@babel/helper-replace-supers": "npm:^7.28.6" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1" - "@babel/traverse": "npm:^7.28.5" + "@babel/traverse": "npm:^7.28.6" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/0bbf3dfe91875f642fe7ef38f60647f0df8eb9994d4350b19a4d1a9bdc32629e49e56e9a80afb12eeb6f6bcc6666392b37f32231b7c054fc91a0d5251cd67d5b + checksum: 10/11f55607fcf66827ade745c0616aa3c6086aa655c0fab665dd3c4961829752e4c94c942262db30c4831ef9bce37ad444722e85ef1b7136587e28c6b1ef8ad43c languageName: node linkType: hard @@ -608,6 +632,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.28.6": + version: 7.28.6 + resolution: "@babel/helper-plugin-utils@npm:7.28.6" + checksum: 10/21c853bbc13dbdddf03309c9a0477270124ad48989e1ad6524b83e83a77524b333f92edd2caae645c5a7ecf264ec6d04a9ebe15aeb54c7f33c037b71ec521e4a + languageName: node + linkType: hard + "@babel/helper-remap-async-to-generator@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-remap-async-to-generator@npm:7.25.9" @@ -660,6 +691,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-replace-supers@npm:^7.28.6": + version: 7.28.6 + resolution: "@babel/helper-replace-supers@npm:7.28.6" + dependencies: + "@babel/helper-member-expression-to-functions": "npm:^7.28.5" + "@babel/helper-optimise-call-expression": "npm:^7.27.1" + "@babel/traverse": "npm:^7.28.6" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/ad2724713a4d983208f509e9607e8f950855f11bd97518a700057eb8bec69d687a8f90dc2da0c3c47281d2e3b79cf1d14ecf1fe3e1ee0a8e90b61aee6759c9a7 + languageName: node + linkType: hard + "@babel/helper-simple-access@npm:^7.25.7": version: 7.25.7 resolution: "@babel/helper-simple-access@npm:7.25.7" @@ -901,6 +945,17 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.28.6, @babel/parser@npm:^7.29.0": + version: 7.29.2 + resolution: "@babel/parser@npm:7.29.2" + dependencies: + "@babel/types": "npm:^7.29.0" + bin: + parser: ./bin/babel-parser.js + checksum: 10/45d050bf75aa5194b3255f156173e8553d615ff5a2434674cc4a10cdc7c261931befb8618c996a1c449b87f0ef32a3407879af2ac967d95dc7b4fdbae7037efa + languageName: node + linkType: hard + "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.28.5": version: 7.28.5 resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.28.5" @@ -1279,14 +1334,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-typescript@npm:^7.27.1": - version: 7.27.1 - resolution: "@babel/plugin-syntax-typescript@npm:7.27.1" +"@babel/plugin-syntax-typescript@npm:^7.28.6": + version: 7.28.6 + resolution: "@babel/plugin-syntax-typescript@npm:7.28.6" dependencies: - "@babel/helper-plugin-utils": "npm:^7.27.1" + "@babel/helper-plugin-utils": "npm:^7.28.6" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/87836f7e32af624c2914c73cd6b9803cf324e07d43f61dbb973c6a86f75df725e12540d91fac7141c14b697aa9268fd064220998daced156e96ac3062d7afb41 + checksum: 10/5c55f9c63bd36cf3d7e8db892294c8f85000f9c1526c3a1cc310d47d1e174f5c6f6605e5cc902c4636d885faba7a9f3d5e5edc6b35e4f3b1fd4c2d58d0304fa5 languageName: node linkType: hard @@ -1313,7 +1368,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.27.1": +"@babel/plugin-transform-arrow-functions@npm:7.27.1, @babel/plugin-transform-arrow-functions@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-arrow-functions@npm:7.27.1" dependencies: @@ -1420,7 +1475,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.0.0-0, @babel/plugin-transform-class-properties@npm:^7.27.1": +"@babel/plugin-transform-class-properties@npm:7.27.1, @babel/plugin-transform-class-properties@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-class-properties@npm:7.27.1" dependencies: @@ -1456,7 +1511,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.0.0-0, @babel/plugin-transform-classes@npm:^7.28.4": +"@babel/plugin-transform-classes@npm:7.28.4, @babel/plugin-transform-classes@npm:^7.28.4": version: 7.28.4 resolution: "@babel/plugin-transform-classes@npm:7.28.4" dependencies: @@ -1865,7 +1920,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1": +"@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1" dependencies: @@ -1971,15 +2026,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.28.5": - version: 7.28.5 - resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.5" +"@babel/plugin-transform-optional-chaining@npm:7.27.1, @babel/plugin-transform-optional-chaining@npm:^7.27.1": + version: 7.27.1 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1" dependencies: "@babel/helper-plugin-utils": "npm:^7.27.1" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/0bc900bff66d5acc13b057107eaeb6084b4cb0b124654d35b103f71f292d33dba5beac444ab4f92528583585b6e0cf34d64ce9cbb473b15d22375a4a6ed3cbac + checksum: 10/34b0f96400c259a2722740d17a001fe45f78d8ff052c40e29db2e79173be72c1cfe8d9681067e3f5da3989e4a557402df5c982c024c18257587a41e022f95640 languageName: node linkType: hard @@ -1995,15 +2050,15 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.27.1": - version: 7.27.1 - resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1" +"@babel/plugin-transform-optional-chaining@npm:^7.28.5": + version: 7.28.5 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.28.5" dependencies: "@babel/helper-plugin-utils": "npm:^7.27.1" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/34b0f96400c259a2722740d17a001fe45f78d8ff052c40e29db2e79173be72c1cfe8d9681067e3f5da3989e4a557402df5c982c024c18257587a41e022f95640 + checksum: 10/0bc900bff66d5acc13b057107eaeb6084b4cb0b124654d35b103f71f292d33dba5beac444ab4f92528583585b6e0cf34d64ce9cbb473b15d22375a4a6ed3cbac languageName: node linkType: hard @@ -2223,7 +2278,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.27.1": +"@babel/plugin-transform-shorthand-properties@npm:7.27.1, @babel/plugin-transform-shorthand-properties@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-shorthand-properties@npm:7.27.1" dependencies: @@ -2291,7 +2346,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.27.1": +"@babel/plugin-transform-template-literals@npm:7.27.1, @babel/plugin-transform-template-literals@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-template-literals@npm:7.27.1" dependencies: @@ -2343,18 +2398,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-typescript@npm:^7.28.5": - version: 7.28.5 - resolution: "@babel/plugin-transform-typescript@npm:7.28.5" +"@babel/plugin-transform-typescript@npm:^7.27.1": + version: 7.28.6 + resolution: "@babel/plugin-transform-typescript@npm:7.28.6" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.27.3" - "@babel/helper-create-class-features-plugin": "npm:^7.28.5" - "@babel/helper-plugin-utils": "npm:^7.27.1" + "@babel/helper-create-class-features-plugin": "npm:^7.28.6" + "@babel/helper-plugin-utils": "npm:^7.28.6" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.27.1" - "@babel/plugin-syntax-typescript": "npm:^7.27.1" + "@babel/plugin-syntax-typescript": "npm:^7.28.6" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e4706379df70c2de9d3d3f573ff74a160e05221620a22dd0a64899ab45fddad9e4530fbba33014c75906f13aa78d8044fed80dba85068e11d84ed1f033dea445 + checksum: 10/a0bccc531fa8710a45b0b593140273741e0e4a0721b1ef6ef9dfefae0bbe61528440d65aab7936929551fd76793272257d74f60cf66891352f793294930a4b67 languageName: node linkType: hard @@ -2381,7 +2436,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.0.0-0, @babel/plugin-transform-unicode-regex@npm:^7.27.1": +"@babel/plugin-transform-unicode-regex@npm:7.27.1, @babel/plugin-transform-unicode-regex@npm:^7.27.1": version: 7.27.1 resolution: "@babel/plugin-transform-unicode-regex@npm:7.27.1" dependencies: @@ -2526,18 +2581,18 @@ __metadata: languageName: node linkType: hard -"@babel/preset-typescript@npm:^7.16.7": - version: 7.28.5 - resolution: "@babel/preset-typescript@npm:7.28.5" +"@babel/preset-typescript@npm:7.27.1": + version: 7.27.1 + resolution: "@babel/preset-typescript@npm:7.27.1" dependencies: "@babel/helper-plugin-utils": "npm:^7.27.1" "@babel/helper-validator-option": "npm:^7.27.1" "@babel/plugin-syntax-jsx": "npm:^7.27.1" "@babel/plugin-transform-modules-commonjs": "npm:^7.27.1" - "@babel/plugin-transform-typescript": "npm:^7.28.5" + "@babel/plugin-transform-typescript": "npm:^7.27.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/72c03e01c34906041b1813542761a283c52da1751e7ddf63191bc5fb2a0354eca30a00537c5a92951688bec3975bdc0e50ef4516b5e94cfd6d4cf947f2125bdc + checksum: 10/9d8e75326b3c93fa016ba7aada652800fc77bc05fcc181888700a049935e8cf1284b549de18a5d62ef3591d02f097ea6de1111f7d71a991aaf36ba74657bd145 languageName: node linkType: hard @@ -2607,6 +2662,17 @@ __metadata: languageName: node linkType: hard +"@babel/template@npm:^7.28.6": + version: 7.28.6 + resolution: "@babel/template@npm:7.28.6" + dependencies: + "@babel/code-frame": "npm:^7.28.6" + "@babel/parser": "npm:^7.28.6" + "@babel/types": "npm:^7.28.6" + checksum: 10/0ad6e32bf1e7e31bf6b52c20d15391f541ddd645cbd488a77fe537a15b280ee91acd3a777062c52e03eedbc2e1f41548791f6a3697c02476ec5daf49faa38533 + languageName: node + linkType: hard + "@babel/traverse--for-generate-function-map@npm:@babel/traverse@^7.25.3, @babel/traverse@npm:^7.25.3, @babel/traverse@npm:^7.26.7": version: 7.26.7 resolution: "@babel/traverse@npm:7.26.7" @@ -2682,7 +2748,22 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:7.29.0": +"@babel/traverse@npm:^7.28.6": + version: 7.29.0 + resolution: "@babel/traverse@npm:7.29.0" + dependencies: + "@babel/code-frame": "npm:^7.29.0" + "@babel/generator": "npm:^7.29.0" + "@babel/helper-globals": "npm:^7.28.0" + "@babel/parser": "npm:^7.29.0" + "@babel/template": "npm:^7.28.6" + "@babel/types": "npm:^7.29.0" + debug: "npm:^4.3.1" + checksum: 10/3a0d0438f1ba9fed4fbe1706ea598a865f9af655a16ca9517ab57bda526e224569ca1b980b473fb68feea5e08deafbbf2cf9febb941f92f2d2533310c3fc4abc + languageName: node + linkType: hard + +"@babel/types@npm:7.29.0, @babel/types@npm:^7.28.6, @babel/types@npm:^7.29.0": version: 7.29.0 resolution: "@babel/types@npm:7.29.0" dependencies: @@ -2831,11 +2912,11 @@ __metadata: react-native-advanced-input-mask: "npm:1.4.6" react-native-gesture-handler: "npm:2.29.1" react-native-nitro-modules: "npm:0.35.2" - react-native-reanimated: "npm:4.1.1" + react-native-reanimated: "npm:4.2.1" react-native-safe-area-context: "npm:5.6.2" react-native-svg: "npm:15.15.1" react-native-unistyles: "npm:3.2.3" - react-native-worklets: "npm:0.5.1" + react-native-worklets: "npm:0.7.1" release-it: "npm:19.1.0" standard-version: "npm:9.5.0" storybook: "npm:10.1.10" @@ -2850,6 +2931,8 @@ __metadata: react-native: ">=0.81.5" react-native-reanimated: ">=4.1.1" react-native-svg: ">=15.15.1" + react-native-unistyles: ">=3.2.3" + react-native-worklets: ">=0.7.0" peerDependenciesMeta: expo: optional: true @@ -8517,7 +8600,7 @@ __metadata: languageName: node linkType: hard -"convert-source-map@npm:^2.0.0": +"convert-source-map@npm:2.0.0, convert-source-map@npm:^2.0.0": version: 2.0.0 resolution: "convert-source-map@npm:2.0.0" checksum: 10/c987be3ec061348cdb3c2bfb924bec86dea1eacad10550a85ca23edb0fe3556c3a61c7399114f3331ccb3499d7fd0285ab24566e5745929412983494c3926e15 @@ -16103,7 +16186,7 @@ __metadata: languageName: node linkType: hard -"react-native-is-edge-to-edge@npm:^1.2.1": +"react-native-is-edge-to-edge@npm:1.2.1, react-native-is-edge-to-edge@npm:^1.2.1": version: 1.2.1 resolution: "react-native-is-edge-to-edge@npm:1.2.1" peerDependencies: @@ -16135,18 +16218,17 @@ __metadata: languageName: node linkType: hard -"react-native-reanimated@npm:4.1.1": - version: 4.1.1 - resolution: "react-native-reanimated@npm:4.1.1" +"react-native-reanimated@npm:4.2.1": + version: 4.2.1 + resolution: "react-native-reanimated@npm:4.2.1" dependencies: - react-native-is-edge-to-edge: "npm:^1.2.1" - semver: "npm:7.7.2" + react-native-is-edge-to-edge: "npm:1.2.1" + semver: "npm:7.7.3" peerDependencies: - "@babel/core": ^7.0.0-0 react: "*" react-native: "*" - react-native-worklets: ">=0.5.0" - checksum: 10/09b088d6a927e8139b0265822fd525d5bfd97ef3c654888d4ecafdf20c449d67a813de5edb3c132595ddb895a085474bcf093d080c2ed1bfa9b14df600eee112 + react-native-worklets: ">=0.7.0" + checksum: 10/869eb4c90b5464ac616bf048f77a309fd2c793020a662b80b874022f90256b7c955f43d7e7c4751c15f2f767c306e52c624cc37f3edff4fe0bbf26c2c3f955b7 languageName: node linkType: hard @@ -16206,26 +16288,26 @@ __metadata: languageName: node linkType: hard -"react-native-worklets@npm:0.5.1": - version: 0.5.1 - resolution: "react-native-worklets@npm:0.5.1" - dependencies: - "@babel/plugin-transform-arrow-functions": "npm:^7.0.0-0" - "@babel/plugin-transform-class-properties": "npm:^7.0.0-0" - "@babel/plugin-transform-classes": "npm:^7.0.0-0" - "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.0.0-0" - "@babel/plugin-transform-optional-chaining": "npm:^7.0.0-0" - "@babel/plugin-transform-shorthand-properties": "npm:^7.0.0-0" - "@babel/plugin-transform-template-literals": "npm:^7.0.0-0" - "@babel/plugin-transform-unicode-regex": "npm:^7.0.0-0" - "@babel/preset-typescript": "npm:^7.16.7" - convert-source-map: "npm:^2.0.0" - semver: "npm:7.7.2" +"react-native-worklets@npm:0.7.1": + version: 0.7.1 + resolution: "react-native-worklets@npm:0.7.1" + dependencies: + "@babel/plugin-transform-arrow-functions": "npm:7.27.1" + "@babel/plugin-transform-class-properties": "npm:7.27.1" + "@babel/plugin-transform-classes": "npm:7.28.4" + "@babel/plugin-transform-nullish-coalescing-operator": "npm:7.27.1" + "@babel/plugin-transform-optional-chaining": "npm:7.27.1" + "@babel/plugin-transform-shorthand-properties": "npm:7.27.1" + "@babel/plugin-transform-template-literals": "npm:7.27.1" + "@babel/plugin-transform-unicode-regex": "npm:7.27.1" + "@babel/preset-typescript": "npm:7.27.1" + convert-source-map: "npm:2.0.0" + semver: "npm:7.7.3" peerDependencies: - "@babel/core": ^7.0.0-0 + "@babel/core": "*" react: "*" react-native: "*" - checksum: 10/39e70b64560cc4b031ac329bfbd0686b744b6940bbe1d1768a227bb9e142a0e2bad5ef16752003e83374db49d8d6396c72236b9c279e1465a7177f887ae12d48 + checksum: 10/10015cbfc2c2eeb60d3a10a8f381efbbad9751dda403d5342c68c92960149d18977b230416f14592662941552173c9d4862012622401f1745e5af041248f07b4 languageName: node linkType: hard @@ -17072,6 +17154,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:7.7.3, semver@npm:^7.5.2, semver@npm:^7.6.3, semver@npm:^7.7.2, semver@npm:^7.7.3": + version: 7.7.3 + resolution: "semver@npm:7.7.3" + bin: + semver: bin/semver.js + checksum: 10/8dbc3168e057a38fc322af909c7f5617483c50caddba135439ff09a754b20bdd6482a5123ff543dad4affa488ecf46ec5fb56d61312ad20bb140199b88dfaea9 + languageName: node + linkType: hard + "semver@npm:^6.0.0, semver@npm:^6.3.0, semver@npm:^6.3.1": version: 6.3.1 resolution: "semver@npm:6.3.1" @@ -17099,15 +17190,6 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.5.2, semver@npm:^7.6.3, semver@npm:^7.7.2, semver@npm:^7.7.3": - version: 7.7.3 - resolution: "semver@npm:7.7.3" - bin: - semver: bin/semver.js - checksum: 10/8dbc3168e057a38fc322af909c7f5617483c50caddba135439ff09a754b20bdd6482a5123ff543dad4affa488ecf46ec5fb56d61312ad20bb140199b88dfaea9 - languageName: node - linkType: hard - "semver@npm:^7.7.1": version: 7.7.1 resolution: "semver@npm:7.7.1" From 41c6e20d04dbc049ea85ca8dbe8a59e8b38f65e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Tue, 14 Apr 2026 12:23:11 +0500 Subject: [PATCH 09/13] =?UTF-8?q?build:=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B7=D0=B0=D0=B2=D0=B8=D1=81?= =?UTF-8?q?=D0=B8=D0=BC=D0=BE=D1=81=D1=82=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- yarn.lock | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index b1ee3af..3115e47 100644 --- a/package.json +++ b/package.json @@ -42,8 +42,7 @@ "pod-install": "bundle exec pod install --project-directory=ios" }, "dependencies": { - "@tabler/icons-react-native": "3.36.1", - "react-native-unistyles": "3.2.3" + "@tabler/icons-react-native": "3.36.1" }, "devDependencies": { "@babel/core": "7.28.5", @@ -111,6 +110,7 @@ "react-native-reanimated": "4.2.1", "react-native-safe-area-context": "5.6.2", "react-native-svg": "15.15.1", + "react-native-unistyles": "3.2.3", "react-native-worklets": "0.7.1", "release-it": "19.1.0", "standard-version": "9.5.0", diff --git a/yarn.lock b/yarn.lock index 7f1b1f7..6e0b9d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2929,7 +2929,7 @@ __metadata: expo: ">=54.x.x" react: ">=19.1" react-native: ">=0.81.5" - react-native-reanimated: ">=4.1.1" + react-native-reanimated: ">=4.2.1" react-native-svg: ">=15.15.1" react-native-unistyles: ">=3.2.3" react-native-worklets: ">=0.7.0" From bf4aac72ac1e7fbf257e73910b3ed0745ea89f49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Wed, 15 Apr 2026 10:47:04 +0500 Subject: [PATCH 10/13] =?UTF-8?q?fix:=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BF=D1=80=D0=BE=D0=B1=D0=BB?= =?UTF-8?q?=D0=B5=D0=BC=D1=8B=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D0=BB?= =?UTF-8?q?=D0=BE=D0=BA=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=82?= =?UTF-8?q?=D0=B5=D1=81=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/storybook.requires.ts | 49 ++-- MIGRATION.md | 67 +++++ configs/eslint/index.ts | 2 + configs/eslint/rules/index.ts | 1 + configs/eslint/rules/unistyles.ts | 8 + configs/eslint/rules/unistyles/README.md | 261 ++++++++++++++++++ configs/eslint/rules/unistyles/index.ts | 218 +++++++++++++++ configs/eslint/rules/unistyles/types.ts | 10 + ios/CDEKUI.xcodeproj/project.pbxproj | 8 +- src/components/Accordion/Accordion.tsx | 10 +- .../Button/utils/ButtonContainer.tsx | 2 +- src/components/Button/utils/ButtonIcon.tsx | 2 +- src/components/Dialog/DialogHeader.tsx | 14 +- .../InputSwitch/styles/useHandleStyles.ts | 17 +- .../InputSwitch/styles/useSliderStyles.ts | 29 +- .../Input/InputTextBase/InputTextBase.tsx | 47 ++-- .../Input/InputTextBase/useInputStyles.ts | 8 +- src/components/List/Base/ListBase.tsx | 31 +-- src/components/MenuItem/MenuItemAccessory.tsx | 7 +- .../MenuItem/Template/MenuItemTemplate.tsx | 6 +- .../SelectButton/SelectButtonItem.tsx | 50 ++-- src/components/ToggleButton/ToggleButton.tsx | 49 ++-- src/components/Typography/Anchor.tsx | 14 +- src/components/Typography/Caption.tsx | 7 +- 24 files changed, 759 insertions(+), 158 deletions(-) create mode 100644 configs/eslint/rules/unistyles.ts create mode 100644 configs/eslint/rules/unistyles/README.md create mode 100644 configs/eslint/rules/unistyles/index.ts create mode 100644 configs/eslint/rules/unistyles/types.ts diff --git a/.storybook/storybook.requires.ts b/.storybook/storybook.requires.ts index 00985b4..21bd048 100644 --- a/.storybook/storybook.requires.ts +++ b/.storybook/storybook.requires.ts @@ -1,52 +1,47 @@ /* do not change this file, it is auto generated by storybook. */ -import { start, updateView, View } from '@storybook/react-native'; -import "@storybook/addon-ondevice-notes/register"; -import "@storybook/addon-ondevice-controls/register"; -import "@storybook/addon-ondevice-actions/register"; +import { start, updateView } from '@storybook/react-native' + +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)?)$/, // @ts-ignore req: require.context( '../src', true, /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/ ), - } -]; - + }, +] declare global { - var view: View; - var STORIES: typeof normalizedStories; + var view: ReturnType + var STORIES: typeof normalizedStories } - const annotations = [ require('./preview'), - require("@storybook/react-native/preview") -]; + require('@storybook/react-native/dist/preview'), + require('@storybook/addon-actions/preview'), +] -global.STORIES = normalizedStories; +global.STORIES = normalizedStories // @ts-ignore -module?.hot?.accept?.(); - - +module?.hot?.accept?.() if (!global.view) { - global.view = start({ - annotations, - storyEntries: normalizedStories, - - }); + global.view = start({ annotations, storyEntries: normalizedStories }) } else { - updateView(global.view, annotations, normalizedStories); + updateView(global.view, annotations, normalizedStories) } -export const view: View = global.view; +export const view: ReturnType = global.view diff --git a/MIGRATION.md b/MIGRATION.md index bf31224..eb42988 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -65,6 +65,73 @@ import { UnistylesRuntime } from '@cdek-it/react-native-ui-kit' UnistylesRuntime.setTheme('dark') ``` +## ESLint Правила для Unistyles + +Три обязательных ESLint правила защищают от потери скрытого `unistyles` payload: + +### ⛔ `unistyles/no-spread-unistyles` (error) + +**Проблема**: Spread оператор теряет скрытый payload unistyles, что приводит к потере темы и реактивности при её смене. + +```typescript +// ❌ Неправильно — payload теряется +const myStyle = { ...styles.button } +const btn = { ...styles.button, marginTop: 10 } +Object.assign({}, styles.button) +const { button, text } = styles + +// ✅ Правильно — payload сохранится +const myStyle = styles.button +style={[styles.button, { marginTop: 10 }]} +style={[styles.button, isActive && styles.buttonActive]} +``` + +### ⛔ `unistyles/no-unistyles-in-worklet` (error) + +**Проблема**: Worklet функции (`useAnimatedStyle`, `runOnJS`, `withSpring`) передаются в native код и не могут захватить весь unistyles объект. Нужно вытащить примитивы. + +```typescript +// ❌ Неправильно — styles целиком в worklet +const animStyle = useAnimatedStyle(() => ({ + color: styles.text.color, +})) + +// ✅ Правильно — примитив вытащен перед worklet +const color = styles.text.color +const animStyle = useAnimatedStyle(() => ({ + color, // Теперь это просто строка +})) +``` + +### ⚠️ `unistyles/no-spread-icon-styles` (warn) + +Рекомендуется передавать явные props для Icon компонентов вместо spread. + +```typescript +// ❌ Не рекомендуется + + +// ✅ Рекомендуется +const color = styles.icon.color +const width = styles.icon.width + +``` + +### Почему это важно + +`react-native-unistyles` добавляет скрытый payload в каждый объект из `StyleSheet.create()`. Этот payload содержит информацию о: + +- **Активной теме** (light/dark) +- **Responsive breakpoint** (размер экрана) +- **Unistyles runtime configuration** + +Если потерять payload, нативная часть больше не сможет: +- Применить правильную тему +- Обновить стиль при смене темы/breakpoint +- Корректно интерпретировать значения + +Подробнее: [ESLint Rules for Unistyles](./configs/eslint/rules/unistyles/README.md) + ## Babel конфигурация Для получения нативного обновления стилей без React-ререндеров: diff --git a/configs/eslint/index.ts b/configs/eslint/index.ts index 52274ad..b909dcf 100644 --- a/configs/eslint/index.ts +++ b/configs/eslint/index.ts @@ -9,6 +9,7 @@ import { reactConfig, reactNativeConfig, prettierConfig, + unistylesConfig, } from './rules' export const MobileConfig = defineConfig([ @@ -20,6 +21,7 @@ export const MobileConfig = defineConfig([ ...importConfig, ...reactConfig, ...reactNativeConfig, + ...unistylesConfig, globalIgnores([ 'dist/', '.yarn/', diff --git a/configs/eslint/rules/index.ts b/configs/eslint/rules/index.ts index ab304c6..75a60b2 100644 --- a/configs/eslint/rules/index.ts +++ b/configs/eslint/rules/index.ts @@ -6,3 +6,4 @@ export { reactConfig } from './react' export { reactNativeConfig } from './reactNative' export { stylisticConfig } from './stylistic' export { prettierConfig } from './prettier' +export { unistylesConfig } from './unistyles' diff --git a/configs/eslint/rules/unistyles.ts b/configs/eslint/rules/unistyles.ts new file mode 100644 index 0000000..93af5e9 --- /dev/null +++ b/configs/eslint/rules/unistyles.ts @@ -0,0 +1,8 @@ +/** + * ESLint правила для unistyles + * + * Этот файл переиспортирует конфиг из папки unistyles/. + * Полная документация и реализация в configs/eslint/rules/unistyles/ + */ + +export { unistylesConfig } from './unistyles/index' diff --git a/configs/eslint/rules/unistyles/README.md b/configs/eslint/rules/unistyles/README.md new file mode 100644 index 0000000..bd7f091 --- /dev/null +++ b/configs/eslint/rules/unistyles/README.md @@ -0,0 +1,261 @@ +# ESLint Rules for Unistyles + +Custom ESLint rules для защиты от потери скрытого `unistyles_*` payload при +работе со стилями из `StyleSheet.create()`. + +## Проблема + +`react-native-unistyles` добавляет скрытый payload в каждый объект из +`StyleSheet.create()`. Этот payload содержит информацию о: + +- **Теме** (light/dark и т.д.) +- **Responsive breakpoint** (текущий размер экрана) +- **Unistyles runtime configuration** + +Когда ты распаковываешь объект через spread или деструктуризируешь его, этот +payload **теряется**. Нативная часть больше не может: + +- Применить правильную тему +- Обновить стиль при смене темы/breakpoint +- Корректно интерпретировать значения + +## Правила + +### 1. `unistyles/no-spread-unistyles` (error) + +**Запрещает** распаковывать объекты из `StyleSheet.create()` через spread +оператор. + +#### ❌ Неправильно + +```typescript +const styles = StyleSheet.create({ button: { padding: 12 } }) + +// Spread теряет скрытый payload +const myStyle = { ...styles.button } +const btn = { ...styles.button, marginTop: 10 } + +// Object.assign тоже теряет payload +Object.assign({}, styles.button) +``` + +#### ✅ Правильно + +```typescript +const styles = StyleSheet.create({ button: { padding: 12 } }) + +// Передавай массив стилей (самый безопасный способ) +style={[styles.button, extraStyle]} + +// Или используй напрямую +style={styles.button} + +// Для динамических стилей — массив +style={[ + styles.button, + isActive && styles.buttonActive, +]} +``` + +--- + +### 2. `unistyles/no-unistyles-in-worklet` (error) + +**Запрещает** захватывать переменную `styles` в worklet closures +(`useAnimatedStyle`, `runOnJS` и т.д.). + +Причина: worklet функции передаются в native код, и весь unistyles объект +потеряет скрытый payload при этой передаче. + +#### ❌ Неправильно + +```typescript +const styles = useStyles() + +// ❌ styles захвачена целиком в worklet +const animStyle = useAnimatedStyle(() => ({ color: styles.text.color })) + +// ❌ styles передана в worklet +withSpring(styles.animConfig) + +// ❌ styles в runOnJS +runOnJS(() => console.log(styles.debug)) +``` + +#### ✅ Правильно + +```typescript +const styles = useStyles() + +// ✅ Вытащи примитив ДО worklet +const color = styles.text.color as string +const animConfig = styles.animConfig + +const animStyle = useAnimatedStyle(() => ({ + color, // Теперь это просто строка +})) + +withSpring(animConfig) // Примитив передан + +// Если нужны разные типы — распакуй явно +const { width, height } = styles.icon +runOnJS(() => { + console.log(width, height) // Примитивы +}) +``` + +--- + +### 3. `unistyles/no-spread-icon-styles` (warn) + +**Предупреждает** о spread unistyles объектов при передаче в Icon компоненты. + +Лучше передавать явные props для понимаемости и безопасности. + +#### ❌ Не рекомендуется + +```typescript +const styles = StyleSheet.create({ + icon: { width: 24, height: 24, color: 'red' } +}) + +// Spread скрывает, какие props передаются + + +``` + +#### ✅ Рекомендуется + +```typescript +const styles = StyleSheet.create({ + icon: { width: 24, height: 24, color: 'red' } +}) + +// Явные props — лучше видна структура + + +// Или если нужны переменные +const color = styles.icon.color +const width = styles.icon.width + +``` + +--- + +## Пример потери payload + +```typescript +const styles = StyleSheet.create({ + text: useColorScheme() === 'dark' + ? { color: '#fff' } + : { color: '#000' } +}) + +// ❌ Потеря payload при spread +const myStyle = { ...styles.text } // payload потерян, цвет не обновится при смене темы + +// ✅ Payload сохранён +const myStyle = styles.text // нет payload потерь +style={styles.text} // payload сохранён +``` + +--- + +## Как исправить существующий код + +### 1. Spread в объектах → используй массив + +```typescript +// ❌ Было +{ ...styles.button, marginTop: 10 } + +// ✅ Стало +[styles.button, { marginTop: 10 }] +``` + +### 2. Worklets → вытащи примитив перед worklet + +```typescript +// ❌ Было +useAnimatedStyle(() => ({ color: styles.text.color })) + +// ✅ Стало +const color = styles.text.color +useAnimatedStyle(() => ({ color })) +``` + +### 3. Icon spreads → явные props + +```typescript +// ❌ Было + + +// ✅ Стало + +``` + +--- + +## Использование + +Правила автоматически включены в конфиг ESLint для всех файлов в +`src/**/*.{ts,tsx}`. + +### Конфигурация + +```typescript +rules: { + 'unistyles/no-spread-unistyles': 'error', // ⛔ Критичная ошибка + 'unistyles/no-unistyles-in-worklet': 'error', // ⛔ Критичная ошибка + 'unistyles/no-spread-icon-styles': 'warn', // ⚠️ Рекомендация +} +``` + +### Проверить нарушения + +```bash +npm run lint:check +``` + +### Автоматическое исправление + +```bash +npm run lint:fix +``` + +--- + +## Как это работает + +Правила используют **ESLint AST (Abstract Syntax Tree)** для отслеживания: + +1. **SpreadElement** — ловит `{ ...styles.foo }` +2. **CallExpression** — ловит `Object.assign({}, styles.foo)` +3. **Identifier / MemberExpression** — проверяет захват `styles` в worklet + closures +4. **JSXSpreadAttribute** — ловит `{...styles}` в JSX + +Это гарантирует, что скрытый `unistyles_*` payload не будет случайно потерян при +refactoring или во время разработки. + +--- + +## Структура + +``` +configs/eslint/rules/unistyles/ +├── index.ts - Все правила и конфиг +├── types.ts - Типы для AST узлов +└── README.md - Эта документация +``` + +--- + +## Ссылки + +- [Unistyles Documentation](https://www.unistyl.es) +- [ESLint Custom Rules Guide](https://eslint.org/docs/developer-guide/working-with-rules) diff --git a/configs/eslint/rules/unistyles/index.ts b/configs/eslint/rules/unistyles/index.ts new file mode 100644 index 0000000..a13523f --- /dev/null +++ b/configs/eslint/rules/unistyles/index.ts @@ -0,0 +1,218 @@ +import { defineConfig } from 'eslint/config' + +import type { ASTNode, RuleContext } from './types' + +/** + * Правило: не распаковывать стили из unistyles + * ❌ { ...styles.button } + * ❌ const btn = { ...styles.button, marginTop: 10 } + * ✅ [styles.button, customStyle] + */ +const noSpreadUnistyles = { + meta: { + type: 'problem' as const, + docs: { + description: + 'Запретить spread операции на стилях из StyleSheet.create() — теряется unistyles metadata', + category: 'Best Practices', + recommended: 'error' as const, + }, + messages: { + noSpread: + 'Не распаковывай стили через spread ({...styles}). Это теряет unistyles metadata. Используй массив: [styles.button, customStyle]', + }, + }, + create(context: RuleContext) { + return { + SpreadElement(node: ASTNode) { + // Проверяем: { ...styles.foo } + const arg = node.argument + + if ( + arg?.type === 'MemberExpression' && + arg.object?.type === 'Identifier' && + arg.object.name?.includes('styles') + ) { + context.report({ node, messageId: 'noSpread' }) + } + }, + + CallExpression(node: ASTNode) { + // Проверяем Object.assign({}, styles.foo) + if ( + node.callee?.object?.name === 'Object' && + node.callee?.property?.name === 'assign' + ) { + for (const arg of node.arguments || []) { + if ( + arg?.type === 'MemberExpression' && + arg.object?.name?.includes('styles') + ) { + context.report({ node, messageId: 'noSpread' }) + + return + } + } + } + }, + } + }, +} + +/** + * Правило: не захватывать styles в worklet closures + * ❌ useAnimatedStyle(() => ({ color: styles.text.color })) + */ +const noUnistylesInWorklet = { + meta: { + type: 'problem' as const, + docs: { + description: 'Запретить захват styles переменных в worklet closures', + category: 'Best Practices', + recommended: 'error' as const, + }, + messages: { + noCapture: + 'Не захватывай styles переменную в worklet. Вытащи примитив перед: const color = styles.text.color', + }, + }, + create(context: RuleContext) { + const workletNames = new Set([ + 'useAnimatedStyle', + 'useAnimatedReaction', + 'runOnJS', + 'runOnUIThread', + 'withTiming', + 'withSpring', + 'withDecay', + 'withDelay', + 'withSequence', + 'withRepeat', + ]) + + const skipKeys = new Set(['parent', 'loc', 'range', 'start', 'end']) + + const hasStylesReference = (node: ASTNode): boolean => { + if (!node) return false + + if (node.type === 'Identifier' && node.name && node.name === 'styles') { + return true + } + + if ( + node.type === 'MemberExpression' && + node.object?.type === 'Identifier' && + node.object.name === 'styles' + ) { + return true + } + + for (const key of Object.keys(node)) { + if (skipKeys.has(key)) { + // eslint-disable-next-line no-continue + continue + } + + const child = node[key] + + if (Array.isArray(child)) { + if (child.some(hasStylesReference)) return true + } else if (child && typeof child === 'object') { + if (hasStylesReference(child)) return true + } + } + + return false + } + + return { + CallExpression(node: ASTNode) { + const funcName = node.callee?.name + + if (!funcName || !workletNames.has(funcName)) return + + const fn = node.arguments?.[0] + + if ( + !fn || + (fn.type !== 'ArrowFunctionExpression' && + fn.type !== 'FunctionExpression') + ) { + return + } + + if (hasStylesReference(fn.body)) { + context.report({ node: fn, messageId: 'noCapture' }) + } + }, + } + }, +} + +/** + * Правило: не спредить styles в Icon компонентах + * ❌ + * ✅ + */ +const noSpreadIconStyles = { + meta: { + type: 'suggestion' as const, + docs: { + description: 'Передавай явные props для Icon вместо spread', + category: 'Best Practices', + recommended: 'warn' as const, + }, + messages: { + noSpread: + 'Не спредь styles в Icon. Передавай явные props: width, height, color', + }, + }, + create(context: RuleContext) { + return { + JSXSpreadAttribute(node: ASTNode) { + // Проверяем, что это styles.something + const arg = node.argument + + if ( + arg?.type === 'MemberExpression' && + arg.object?.name && + arg.object.name.includes('styles') + ) { + // Проверяем, что мы в Icon компоненте + const parent = node.parent + + if (parent?.type === 'JSXOpeningElement') { + const tagName = parent.name?.name || '' + + if (tagName.includes('Icon')) { + context.report({ node, messageId: 'noSpread' }) + } + } + } + }, + } + }, +} + +/** + * Интегрируем все правила в конфиг + */ +export const unistylesConfig = defineConfig([ + { + files: ['src/**/*.{ts,tsx}'], + plugins: { + unistyles: { + rules: { + 'no-spread-unistyles': noSpreadUnistyles, + 'no-unistyles-in-worklet': noUnistylesInWorklet, + 'no-spread-icon-styles': noSpreadIconStyles, + }, + }, + }, + rules: { + 'unistyles/no-spread-unistyles': 'error', + 'unistyles/no-unistyles-in-worklet': 'error', + 'unistyles/no-spread-icon-styles': 'warn', + }, + }, +]) diff --git a/configs/eslint/rules/unistyles/types.ts b/configs/eslint/rules/unistyles/types.ts new file mode 100644 index 0000000..31f4a7a --- /dev/null +++ b/configs/eslint/rules/unistyles/types.ts @@ -0,0 +1,10 @@ +import type { Rule } from 'eslint' + +export type RuleContext = Rule.RuleContext + +/** + * ESLint AST узлы имеют сложную типизацию с дискриминированными типами. + * Используем more practical подход с type guards и indexed access. + */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type ASTNode = any diff --git a/ios/CDEKUI.xcodeproj/project.pbxproj b/ios/CDEKUI.xcodeproj/project.pbxproj index 07cbe84..61e5b27 100644 --- a/ios/CDEKUI.xcodeproj/project.pbxproj +++ b/ios/CDEKUI.xcodeproj/project.pbxproj @@ -362,11 +362,11 @@ ); OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG"; PRODUCT_BUNDLE_IDENTIFIER = ru.cdek.uikit.prime; - PRODUCT_NAME = CDEKUI; + PRODUCT_NAME = "CDEKUI"; SWIFT_OBJC_BRIDGING_HEADER = "CDEKUI/CDEKUI-Bridging-Header.h"; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = 1; + TARGETED_DEVICE_FAMILY = "1"; VERSIONING_SYSTEM = "apple-generic"; }; name = Debug; @@ -393,10 +393,10 @@ ); OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE"; PRODUCT_BUNDLE_IDENTIFIER = ru.cdek.uikit.prime; - PRODUCT_NAME = CDEKUI; + PRODUCT_NAME = "CDEKUI"; SWIFT_OBJC_BRIDGING_HEADER = "CDEKUI/CDEKUI-Bridging-Header.h"; SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = 1; + TARGETED_DEVICE_FAMILY = "1"; VERSIONING_SYSTEM = "apple-generic"; }; name = Release; diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 1b2ff85..276afbc 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -105,13 +105,19 @@ export const Accordion: React.FC = ({ style={arrowAnimatedStyle} testID={AccordionTestIds.arrow} > - + {Icon ? ( ) : null} {title} diff --git a/src/components/Button/utils/ButtonContainer.tsx b/src/components/Button/utils/ButtonContainer.tsx index 1d39d71..53aad54 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -61,7 +61,7 @@ const ButtonContainerComponent = ({ : [ buttonContainerStyles.container, isIconOnly && buttonContainerStyles.iconOnly, - style, + ...(style ? [style] : []), ] return ( diff --git a/src/components/Button/utils/ButtonIcon.tsx b/src/components/Button/utils/ButtonIcon.tsx index 3137aaa..cd66566 100644 --- a/src/components/Button/utils/ButtonIcon.tsx +++ b/src/components/Button/utils/ButtonIcon.tsx @@ -38,9 +38,9 @@ const ButtonIconComponent = ({ return ( diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index 8e8e683..b8d4023 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -41,7 +41,13 @@ export const DialogHeader = ({ const Icon = iconsMap[severity] - return + return ( + + ) }, [severity]) return ( @@ -57,7 +63,11 @@ export const DialogHeader = ({ testID={tids.closeButton} onPress={onClose} > - + ) : null} diff --git a/src/components/Input/InputSwitch/styles/useHandleStyles.ts b/src/components/Input/InputSwitch/styles/useHandleStyles.ts index e6358a1..6fb5af9 100644 --- a/src/components/Input/InputSwitch/styles/useHandleStyles.ts +++ b/src/components/Input/InputSwitch/styles/useHandleStyles.ts @@ -6,11 +6,12 @@ import { StyleSheet } from '../../../../utils' export const useHandleStyles = (checked: boolean) => { const styles = handleStyles + const handleOnLeft = styles.handleOn.left + const handleOffLeft = styles.handleOff.left const calculateHandleLeftPosition = useCallback( - (checked: boolean) => - checked ? styles.handleOn.left : styles.handleOff.left, - [styles.handleOff.left, styles.handleOn.left] + (checked: boolean) => (checked ? handleOnLeft : handleOffLeft), + [handleOffLeft, handleOnLeft] ) const calculateHandleBackground = useCallback( @@ -22,26 +23,26 @@ export const useHandleStyles = (checked: boolean) => { const handleLeftPosition = useSharedValue( calculateHandleLeftPosition(checked) ) - const handlerBackgrouind = useSharedValue(calculateHandleBackground(checked)) + const handleBackground = useSharedValue(calculateHandleBackground(checked)) useEffect(() => { handleLeftPosition.value = withTiming(calculateHandleLeftPosition(checked)) - handlerBackgrouind.value = withTiming(calculateHandleBackground(checked)) + handleBackground.value = withTiming(calculateHandleBackground(checked)) }, [ calculateHandleBackground, calculateHandleLeftPosition, checked, handleLeftPosition, - handlerBackgrouind, + handleBackground, ]) const handleStyle = useMemo( () => RNStyleSheet.flatten([ styles.handle, - { left: handleLeftPosition, backgroundColor: handlerBackgrouind }, + { left: handleLeftPosition, backgroundColor: handleBackground }, ]), - [handleLeftPosition, handlerBackgrouind, styles.handle] + [handleLeftPosition, handleBackground, styles.handle] ) return { handleStyle } diff --git a/src/components/Input/InputSwitch/styles/useSliderStyles.ts b/src/components/Input/InputSwitch/styles/useSliderStyles.ts index d2922a0..2a85a60 100644 --- a/src/components/Input/InputSwitch/styles/useSliderStyles.ts +++ b/src/components/Input/InputSwitch/styles/useSliderStyles.ts @@ -12,38 +12,37 @@ export const useSliderStyles = ( const styles = switchStyles const [pressed, setPressed] = useState(false) + const sliderDisabledBg = styles.sliderDisabled.backgroundColor + const sliderOffBg = styles.sliderOff.backgroundColor + const sliderOnBg = styles.sliderOn.backgroundColor + const sliderOnDisabledBg = styles.sliderOnDisabled.backgroundColor + const sliderOnPressedBg = styles.sliderOnPressed.backgroundColor + const sliderPressedBg = styles.sliderPressed.backgroundColor const calculateSliderBackground = useCallback( - (checked: boolean, disabled: boolean, pressed: boolean) => { + (checked: boolean, disabled: boolean, pressed: boolean): string => { if (disabled) { if (checked) { - return styles.sliderOnDisabled.backgroundColor + return sliderOnDisabledBg } - return styles.sliderDisabled.backgroundColor + return sliderDisabledBg } if (pressed) { if (checked) { - return styles.sliderOnPressed.backgroundColor + return sliderOnPressedBg } - return styles.sliderPressed.backgroundColor + return sliderPressedBg } if (checked) { - return styles.sliderOn.backgroundColor + return sliderOnBg } - return styles.sliderOff.backgroundColor + return sliderOffBg }, - [ - styles.sliderDisabled.backgroundColor, - styles.sliderOff.backgroundColor, - styles.sliderOn.backgroundColor, - styles.sliderOnDisabled.backgroundColor, - styles.sliderOnPressed.backgroundColor, - styles.sliderPressed.backgroundColor, - ] + [] ) const calculateSliderBorderColor = useCallback( diff --git a/src/components/Input/InputTextBase/InputTextBase.tsx b/src/components/Input/InputTextBase/InputTextBase.tsx index 55b13b2..1509108 100644 --- a/src/components/Input/InputTextBase/InputTextBase.tsx +++ b/src/components/Input/InputTextBase/InputTextBase.tsx @@ -38,7 +38,7 @@ import { useMakeTestId } from '../../../hooks/useMakeTestId' import { InputTextBaseTestId } from './testIds' import type { InputTextBaseProps, RenderTextInputArgs } from './types' -import { useInputStyle } from './useInputStyles' +import { inputStyles, useInputContainerMinHeight } from './useInputStyles' interface PrivateInputTextBaseProps { loading?: boolean @@ -71,35 +71,40 @@ export const InputTextBase = memo< // TODO: разделить float label и обычный инпут -> добавить во float label поддержку font scale // eslint-disable-next-line complexity }) => { - const styles = useInputStyle(size) + const styles = inputStyles + const containerMinHeightStyle = useInputContainerMinHeight(size) const inputRef = useRef(null) const [valueState, setValueState] = useState('') const [isFocused, setIsFocused] = useState(otherProps.autoFocus || false) const labelAnimation = useSharedValue(0) + const propsOnFocus = otherProps.onFocus + const propsOnBlur = otherProps.onBlur + const propsOnChangeText = otherProps.onChangeText + const onFocus = useCallback( (e: FocusEvent) => { setIsFocused(true) - otherProps.onFocus?.(e) + propsOnFocus?.(e) }, - [otherProps] + [propsOnFocus] ) const onBlur = useCallback( (e: BlurEvent) => { setIsFocused(false) - otherProps.onBlur?.(e) + propsOnBlur?.(e) }, - [otherProps] + [propsOnBlur] ) const onChangeText = useCallback( (nextValue: string) => { - otherProps.onChangeText?.(nextValue) + propsOnChangeText?.(nextValue) setValueState(nextValue) }, - [otherProps] + [propsOnChangeText] ) const clear = useCallback(() => { @@ -122,26 +127,35 @@ export const InputTextBase = memo< const loadingAnimatedStyle = useLoadingRotationAnimation(loading) + // Extract primitive values before the worklet closure to avoid + // capturing the unistyles HostObject (non-serializable) in the worklet. + const labelTop = styles.label.top + const labelReducedTop = styles.labelReducedSize.top + const labelPaddingVertical = styles.label.paddingVertical + const labelReducedPaddingVertical = styles.labelReducedSize.paddingVertical + const labelFontSize = styles.label.fontSize + const labelReducedFontSize = styles.labelReducedSize.fontSize + const labelFontFamily = styles.label.fontFamily + const labelReducedFontFamily = styles.labelReducedSize.fontFamily + const labelAnimatedStyle = useAnimatedStyle(() => ({ top: interpolate( labelAnimation.value, [0, 1], - [styles.label.top, styles.labelReducedSize.top] + [labelTop, labelReducedTop] ), paddingVertical: interpolate( labelAnimation.value, [0, 1], - [styles.label.paddingVertical, styles.labelReducedSize.paddingVertical] + [labelPaddingVertical, labelReducedPaddingVertical] ), fontSize: interpolate( labelAnimation.value, [0, 1], - [styles.label.fontSize, styles.labelReducedSize.fontSize] + [labelFontSize, labelReducedFontSize] ), fontFamily: - labelAnimation.value > 0.5 - ? styles.labelReducedSize.fontFamily - : styles.label.fontFamily, + labelAnimation.value > 0.5 ? labelReducedFontFamily : labelFontFamily, })) useEffect(() => { @@ -235,10 +249,6 @@ export const InputTextBase = memo< disabled, editable, secureTextEntry, - styles.inputFont, - styles.floatLabelInput, - styles.input, - styles.inputWithRightContent, hasRightContent, value, onBlur, @@ -263,6 +273,7 @@ export const InputTextBase = memo< disabled={disabled} style={[ styles.container, + containerMinHeightStyle, floatLabel && styles.containerFloatLabel, isFocused && styles.containerFocused, containerStyle, diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 19c0923..c2fc257 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -4,7 +4,9 @@ import { StyleSheet } from '../../../utils' import type { InputTextBaseProps } from './types' -export const useInputStyle = (size: InputTextBaseProps['size'] = 'base') => { +export const useInputContainerMinHeight = ( + size: InputTextBaseProps['size'] = 'base' +) => { const minHeight = useMemo(() => { if (typeof size === 'number') { return Math.max(size, containerMinHeight.base.minHeight) @@ -13,7 +15,7 @@ export const useInputStyle = (size: InputTextBaseProps['size'] = 'base') => { return containerMinHeight[size].minHeight }, [size]) - return { ...inputStyles, container: { ...inputStyles.container, minHeight } } + return { minHeight } } const containerMinHeight = StyleSheet.create(({ theme }) => ({ @@ -22,7 +24,7 @@ const containerMinHeight = StyleSheet.create(({ theme }) => ({ xlarge: { minHeight: theme.InputSize.xlarge['min-height'] }, })) -const inputStyles = StyleSheet.create( +export const inputStyles = StyleSheet.create( ({ theme, border, typography, spacing, fonts }) => ({ container: { flexDirection: 'row', diff --git a/src/components/List/Base/ListBase.tsx b/src/components/List/Base/ListBase.tsx index bf5c4ed..f781785 100644 --- a/src/components/List/Base/ListBase.tsx +++ b/src/components/List/Base/ListBase.tsx @@ -1,11 +1,5 @@ import React, { memo, useMemo } from 'react' -import { - View, - type ViewStyle, - type ViewProps, - Pressable, - type ColorValue, -} from 'react-native' +import { View, type ViewProps, Pressable, type ColorValue } from 'react-native' import { StyleSheet } from '../../../utils' import { type SvgSource, SvgUniversal } from '../../../utils/SvgUniversal' @@ -58,12 +52,13 @@ export const ListBase = memo( testID, ...rest }) => { - const leftIconStyle: ViewStyle = useMemo(() => { - return { - ...styles.leftIcon, - alignSelf: iconAlignment === 'top' ? 'flex-start' : undefined, - } - }, [iconAlignment]) + const leftIconStyle = useMemo( + () => [ + styles.leftIcon, + iconAlignment === 'top' ? { alignSelf: 'flex-start' as const } : null, + ], + [iconAlignment] + ) const fullDivider = divider === 'full' ? styles.divider : {} const contentDivider = divider === 'content' ? styles.divider : {} @@ -96,9 +91,10 @@ export const ListBase = memo( {LeftIcon ? ( ) : null} @@ -120,9 +116,10 @@ export const ListBase = memo( ) : null} {RightIcon ? ( ) : null} diff --git a/src/components/MenuItem/MenuItemAccessory.tsx b/src/components/MenuItem/MenuItemAccessory.tsx index 58b9b07..0a9434f 100644 --- a/src/components/MenuItem/MenuItemAccessory.tsx +++ b/src/components/MenuItem/MenuItemAccessory.tsx @@ -25,7 +25,12 @@ export const MenuItemAccessory = memo( return ( - + ) } diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index 2ee1b05..aa0b8d0 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -72,7 +72,11 @@ export const MenuItemTemplate = memo( ...rest }) => { const iconStyle = useMemo( - () => ({ ...styles.icon, color: iconColor || styles.icon.color }), + () => ({ + width: styles.icon.width, + height: styles.icon.height, + color: iconColor || styles.icon.color, + }), [iconColor] ) diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index aa35a5a..09f828f 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -66,48 +66,30 @@ export const SelectButtonItem = memo( showIcon = true, Icon, }) => { - const iconSize = useMemo(() => { - switch (size) { - case 'small': - return styles.iconSmall - - case 'base': - return styles.iconBase - - case 'large': - return styles.iconLarge - - case 'xlarge': - return styles.iconXLarge - } - }, [size]) - - const labelFontSize = useMemo(() => { - switch (size) { - case 'small': - return styles.labelSmall - - case 'base': - return styles.labelBase + const sizeMap = useMemo( + () => ({ + small: { icon: styles.iconSmall, label: styles.labelSmall }, + base: { icon: styles.iconBase, label: styles.labelBase }, + large: { icon: styles.iconLarge, label: styles.labelLarge }, + xlarge: { icon: styles.iconXLarge, label: styles.labelXLarge }, + }), + [] + ) - case 'large': - return styles.labelLarge + const iconSize = sizeMap[size].icon + const labelFontSize = sizeMap[size].label - case 'xlarge': - return styles.labelXLarge - } - }, [size]) + // Extract primitive color values before the worklet closure to avoid + // capturing the unistyles HostObject (non-serializable) in the worklet. + const textColor = styles.textColor.color + const checkedTextColor = styles.checkedTextColor.color const animatedColorStyle = useAnimatedStyle(() => { return { color: interpolateColor( position.value, [index - 1, index, index + 1], - [ - styles.textColor.color, - styles.checkedTextColor.color, - styles.textColor.color, - ] + [textColor, checkedTextColor, textColor] ), } }) diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index 3fd997e..4f1b53a 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -78,21 +78,15 @@ export const ToggleButton = memo( [iconOnlyProp, label] ) - const icon = useMemo(() => { - if (!Icon) { - return null - } - - return ( - - ) - }, [Icon]) + const icon = Icon ? ( + + ) : null const onPressIn = useCallback(() => setPressed(true), []) const onPressOut = useCallback(() => setPressed(false), []) @@ -100,7 +94,7 @@ export const ToggleButton = memo( return ( @@ -246,7 +240,28 @@ const toggleStyles = StyleSheet.create( height: typography.Size['text-base'], }, }, + checked: { + true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, + false: { color: theme.Form.ToggleButton.toggleButtonTextColor }, + }, + pressed: { + true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, + false: {}, + }, + disabled: { + true: { color: theme.Button.Disabled.disabledButtonTextColor }, + false: {}, + }, }, + compoundVariants: [ + { + checked: 'true', + pressed: 'true', + styles: { + color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, + }, + }, + ], }, label: { flexShrink: 1, diff --git a/src/components/Typography/Anchor.tsx b/src/components/Typography/Anchor.tsx index c6f1e8e..e2b3bdc 100644 --- a/src/components/Typography/Anchor.tsx +++ b/src/components/Typography/Anchor.tsx @@ -67,6 +67,8 @@ export const Anchor = memo( () => (visited ? styles.visited.color : styles.text.color), [visited] ) + const iconWidth = base ? styles.iconBase.width : styles.icon.width + const iconHeight = base ? styles.iconBase.height : styles.icon.height return ( @@ -79,11 +81,11 @@ export const Anchor = memo( onPressOut={onPressOut} > ) : null} @@ -116,11 +118,11 @@ export const Anchor = memo( onPressOut={onPressOut} > ) : null} diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 74457a6..5b2471c 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -33,7 +33,12 @@ export const Caption = ({ if (Icon) { return ( - + {text} ) From 69bbb528d5e3f7f9d2decff7ad3427f8fb81e51a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Wed, 15 Apr 2026 12:43:52 +0500 Subject: [PATCH 11/13] =?UTF-8?q?fix:=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=BE=20=D0=BD=D0=B5=D1=80=D0=B5=D0=B0?= =?UTF-8?q?=D0=BA=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D0=B5=20=D0=BF=D0=BE=D0=B2?= =?UTF-8?q?=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8=D0=B5=20Svg=20=D0=B0=D1=81=D1=81?= =?UTF-8?q?=D0=B5=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.tsx | 6 +- .storybook/storybook.requires.ts | 49 +- MIGRATION.md | 18 +- configs/eslint/rules/unistyles/README.md | 5 +- ios/Podfile.lock | 24 +- jest.config.ts | 5 +- src/components/Accordion/Accordion.tsx | 3 +- .../__snapshots__/Accordion.test.tsx.snap | 4 + .../__snapshots__/Button.test.tsx.snap | 14799 ++++++---------- .../__snapshots__/ButtonBadge.test.tsx.snap | 2 - .../ButtonSeverity.test.tsx.snap | 4 - src/components/Checkbox/Checkbox.tsx | 5 +- .../__snapshots__/Checkbox.test.tsx.snap | 12 + src/components/Chip/Chip.tsx | 3 +- .../__snapshots__/Chip.test.tsx.snap | 24 + src/components/Dialog/DialogHeader.tsx | 13 +- .../__snapshots__/DialogHeader.test.tsx.snap | 54 + .../Input/InputTextBase/InputTextBase.tsx | 33 +- .../__snapshots__/ListBase.test.tsx.snap | 32 +- .../__snapshots__/Message.test.tsx.snap | 21 +- src/components/Rating/RatingClear.tsx | 5 +- src/components/Rating/RatingItem.tsx | 5 +- .../__snapshots__/Rating.test.tsx.snap | 39 + .../__snapshots__/RatingClear.test.tsx.snap | 24 + .../__snapshots__/RatingItem.test.tsx.snap | 32 + .../__snapshots__/ToggleButton.test.tsx.snap | 187 +- src/utils/SvgUniversal.tsx | 42 +- src/utils/__tests__/SvgUniversal.test.tsx | 22 +- src/utils/index.ts | 5 + 29 files changed, 5788 insertions(+), 9689 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index c621cff..146026b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,9 +1,5 @@ import type { Preview } from '@storybook/react' -import { - makeStyles, - ThemeVariant, - useChangeTheme, -} from '../src' +import { makeStyles, ThemeVariant, useChangeTheme } from '../src' import { View } from 'react-native' import React, { type FunctionComponent, type ReactNode, useEffect } from 'react' diff --git a/.storybook/storybook.requires.ts b/.storybook/storybook.requires.ts index 21bd048..00985b4 100644 --- a/.storybook/storybook.requires.ts +++ b/.storybook/storybook.requires.ts @@ -1,47 +1,52 @@ /* do not change this file, it is auto generated by storybook. */ +import { start, updateView, View } from '@storybook/react-native'; -import { start, updateView } 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)?)$/, // @ts-ignore req: require.context( '../src', true, /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/ ), - }, -] + } +]; + declare global { - var view: ReturnType - var STORIES: typeof normalizedStories + var view: View; + var STORIES: typeof normalizedStories; } + const annotations = [ require('./preview'), - require('@storybook/react-native/dist/preview'), - require('@storybook/addon-actions/preview'), -] + require("@storybook/react-native/preview") +]; -global.STORIES = normalizedStories +global.STORIES = normalizedStories; // @ts-ignore -module?.hot?.accept?.() +module?.hot?.accept?.(); + + if (!global.view) { - global.view = start({ annotations, storyEntries: normalizedStories }) + global.view = start({ + annotations, + storyEntries: normalizedStories, + + }); } else { - updateView(global.view, annotations, normalizedStories) + updateView(global.view, annotations, normalizedStories); } -export const view: ReturnType = global.view +export const view: View = global.view; diff --git a/MIGRATION.md b/MIGRATION.md index eb42988..be96cdb 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -71,7 +71,8 @@ UnistylesRuntime.setTheme('dark') ### ⛔ `unistyles/no-spread-unistyles` (error) -**Проблема**: Spread оператор теряет скрытый payload unistyles, что приводит к потере темы и реактивности при её смене. +**Проблема**: Spread оператор теряет скрытый payload unistyles, что приводит к +потере темы и реактивности при её смене. ```typescript // ❌ Неправильно — payload теряется @@ -88,13 +89,13 @@ style={[styles.button, isActive && styles.buttonActive]} ### ⛔ `unistyles/no-unistyles-in-worklet` (error) -**Проблема**: Worklet функции (`useAnimatedStyle`, `runOnJS`, `withSpring`) передаются в native код и не могут захватить весь unistyles объект. Нужно вытащить примитивы. +**Проблема**: Worklet функции (`useAnimatedStyle`, `runOnJS`, `withSpring`) +передаются в native код и не могут захватить весь unistyles объект. Нужно +вытащить примитивы. ```typescript // ❌ Неправильно — styles целиком в worklet -const animStyle = useAnimatedStyle(() => ({ - color: styles.text.color, -})) +const animStyle = useAnimatedStyle(() => ({ color: styles.text.color })) // ✅ Правильно — примитив вытащен перед worklet const color = styles.text.color @@ -119,18 +120,21 @@ const width = styles.icon.width ### Почему это важно -`react-native-unistyles` добавляет скрытый payload в каждый объект из `StyleSheet.create()`. Этот payload содержит информацию о: +`react-native-unistyles` добавляет скрытый payload в каждый объект из +`StyleSheet.create()`. Этот payload содержит информацию о: - **Активной теме** (light/dark) - **Responsive breakpoint** (размер экрана) - **Unistyles runtime configuration** Если потерять payload, нативная часть больше не сможет: + - Применить правильную тему - Обновить стиль при смене темы/breakpoint - Корректно интерпретировать значения -Подробнее: [ESLint Rules for Unistyles](./configs/eslint/rules/unistyles/README.md) +Подробнее: +[ESLint Rules for Unistyles](./configs/eslint/rules/unistyles/README.md) ## Babel конфигурация diff --git a/configs/eslint/rules/unistyles/README.md b/configs/eslint/rules/unistyles/README.md index bd7f091..4247478 100644 --- a/configs/eslint/rules/unistyles/README.md +++ b/configs/eslint/rules/unistyles/README.md @@ -150,7 +150,7 @@ const width = styles.icon.width ```typescript const styles = StyleSheet.create({ - text: useColorScheme() === 'dark' + text: useColorScheme() === 'dark' ? { color: '#fff' } : { color: '#000' } }) @@ -194,7 +194,7 @@ useAnimatedStyle(() => ({ color })) // ❌ Было -// ✅ Стало +// ✅ Стало ``` @@ -259,3 +259,4 @@ configs/eslint/rules/unistyles/ - [Unistyles Documentation](https://www.unistyl.es) - [ESLint Custom Rules Guide](https://eslint.org/docs/developer-guide/working-with-rules) +- [Unistyles with Reanimated](https://www.unistyl.es/v3/guides/reanimated/) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 3b89007..69c230d 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1919,7 +1919,7 @@ PODS: - ReactCommon/turbomodule/core - ReactNativeDependencies - Yoga - - RNReanimated (4.1.1): + - RNReanimated (4.2.1): - hermes-engine - RCTRequired - RCTTypeSafety @@ -1941,10 +1941,10 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - ReactNativeDependencies - - RNReanimated/reanimated (= 4.1.1) + - RNReanimated/reanimated (= 4.2.1) - RNWorklets - Yoga - - RNReanimated/reanimated (4.1.1): + - RNReanimated/reanimated (4.2.1): - hermes-engine - RCTRequired - RCTTypeSafety @@ -1966,10 +1966,10 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - ReactNativeDependencies - - RNReanimated/reanimated/apple (= 4.1.1) + - RNReanimated/reanimated/apple (= 4.2.1) - RNWorklets - Yoga - - RNReanimated/reanimated/apple (4.1.1): + - RNReanimated/reanimated/apple (4.2.1): - hermes-engine - RCTRequired - RCTTypeSafety @@ -2038,7 +2038,7 @@ PODS: - ReactCommon/turbomodule/core - ReactNativeDependencies - Yoga - - RNWorklets (0.5.1): + - RNWorklets (0.7.1): - hermes-engine - RCTRequired - RCTTypeSafety @@ -2060,9 +2060,9 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - ReactNativeDependencies - - RNWorklets/worklets (= 0.5.1) + - RNWorklets/worklets (= 0.7.1) - Yoga - - RNWorklets/worklets (0.5.1): + - RNWorklets/worklets (0.7.1): - hermes-engine - RCTRequired - RCTTypeSafety @@ -2084,9 +2084,9 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - ReactNativeDependencies - - RNWorklets/worklets/apple (= 0.5.1) + - RNWorklets/worklets/apple (= 0.7.1) - Yoga - - RNWorklets/worklets/apple (0.5.1): + - RNWorklets/worklets/apple (0.7.1): - hermes-engine - RCTRequired - RCTTypeSafety @@ -2485,9 +2485,9 @@ SPEC CHECKSUMS: RNCAsyncStorage: 3a4f5e2777dae1688b781a487923a08569e27fe4 RNDateTimePicker: 19ffa303c4524ec0a2dfdee2658198451c16b7f1 RNGestureHandler: 723f29dac55e25f109d263ed65cecc4b9c4bd46a - RNReanimated: 6e0147e13f8906f63703143f40237f84347e6ca1 + RNReanimated: 8a7182314bb7afc01041a529e409a9112c007a50 RNSVG: cf9ae78f2edf2988242c71a6392d15ff7dd62522 - RNWorklets: 76fce72926e28e304afb44f0da23b2d24f2c1fa0 + RNWorklets: 9eb6d567fa43984e96b6924a6df504b8a15980cd Unistyles: 6bb7e273c90d75b4f6bcb68fd1b94fb7b246145b Yoga: 5934998fbeaef7845dbf698f698518695ab4cd1a diff --git a/jest.config.ts b/jest.config.ts index f070054..4a42d61 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -16,7 +16,10 @@ const config: Config.InitialOptions = { testRunner: 'jest-circus', maxWorkers: '100%', rootDir: '.', - moduleNameMapper: { '\\.svg': '/__mocks__/svgMock.js' }, + moduleNameMapper: { + '\\.svg': '/__mocks__/svgMock.js', + '^react-native-worklets$': 'react-native-worklets/lib/module/mock', + }, setupFiles: ['/jest.setup.ts'], setupFilesAfterEnv: ['jest-extended/all'], } diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 276afbc..f596b0d 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -105,9 +105,10 @@ export const Accordion: React.FC = ({ style={arrowAnimatedStyle} testID={AccordionTestIds.arrow} > - diff --git a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index f17b7d8..88883a2 100644 --- a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +++ b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap @@ -121,6 +121,7 @@ exports[`Accordion Header elements maximal 1`] = ` }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -168,6 +169,7 @@ exports[`Accordion Header elements maximal 1`] = ` strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -651,6 +653,7 @@ exports[`Accordion Header elements minimal 1`] = ` }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -698,6 +701,7 @@ exports[`Accordion Header elements minimal 1`] = ` strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> diff --git a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index e166941..cc40367 100644 --- a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -50,7 +50,6 @@ exports[`Button component tests Button default props 1`] = ` "paddingVertical": 0, }, false, - undefined, ] } > @@ -270,7 +269,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -284,7 +282,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -294,11 +292,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -313,7 +306,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -463,7 +455,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -473,11 +465,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -492,7 +479,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -642,7 +628,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -652,11 +638,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -671,7 +652,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -821,7 +801,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -831,11 +811,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -850,7 +825,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -1063,7 +1037,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -1140,7 +1113,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -1154,7 +1126,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1164,11 +1136,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -1183,7 +1150,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -1333,7 +1299,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1343,11 +1309,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -1362,7 +1323,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -1512,7 +1472,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1522,11 +1482,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -1541,7 +1496,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -1691,7 +1645,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1701,11 +1655,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -1720,7 +1669,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -1870,7 +1818,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -1880,11 +1828,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -1899,7 +1842,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -2049,7 +1991,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2059,11 +2001,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -2078,7 +2015,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -2291,7 +2227,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 0, }, false, - undefined, ] } > @@ -2368,7 +2303,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 0, }, false, - undefined, ] } > @@ -2382,7 +2316,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2392,11 +2326,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -2411,7 +2340,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -2561,7 +2489,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2571,11 +2499,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -2590,7 +2513,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -2740,7 +2662,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2750,11 +2672,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -2769,7 +2686,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -2919,7 +2835,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -2929,11 +2845,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -2948,7 +2859,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -3098,7 +3008,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3108,11 +3018,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -3127,7 +3032,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -3277,7 +3181,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3287,11 +3191,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -3306,7 +3205,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -3519,7 +3417,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 0, }, false, - undefined, ] } > @@ -3596,7 +3493,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 0, }, false, - undefined, ] } > @@ -3610,7 +3506,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3620,11 +3516,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -3639,7 +3530,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -3789,7 +3679,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3799,11 +3689,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -3818,7 +3703,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -3968,7 +3852,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -3978,11 +3862,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -3997,7 +3876,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -4147,7 +4025,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -4157,11 +4035,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -4176,7 +4049,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -4326,7 +4198,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -4336,11 +4208,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -4355,7 +4222,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -4505,7 +4371,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -4515,11 +4381,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -4534,7 +4395,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -4747,7 +4607,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 0, }, false, - undefined, ] } > @@ -4824,7 +4683,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 0, }, false, - undefined, ] } > @@ -4838,7 +4696,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -4848,11 +4706,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -4867,7 +4720,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -5017,7 +4869,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -5027,11 +4879,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -5046,7 +4893,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -5196,7 +5042,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -5206,11 +5052,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -5225,7 +5066,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -5375,7 +5215,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -5385,11 +5225,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -5404,7 +5239,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -5554,7 +5388,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -5564,11 +5398,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -5583,7 +5412,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -5733,7 +5561,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -5743,11 +5571,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -5762,7 +5585,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -5975,7 +5797,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 0, }, false, - undefined, ] } > @@ -6052,7 +5873,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "paddingVertical": 0, }, false, - undefined, ] } > @@ -6066,7 +5886,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -6076,11 +5896,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -6095,7 +5910,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -6245,7 +6059,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - c meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -6255,11 +6069,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -6274,7 +6083,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - c xmlns="http://www.w3.org/2000/svg" > @@ -6424,7 +6232,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -6434,11 +6242,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -6453,7 +6256,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -6603,7 +6405,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -6613,11 +6415,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -6632,7 +6429,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -6782,7 +6578,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -6792,11 +6588,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -6811,7 +6602,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -6961,7 +6751,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -6971,11 +6761,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -6990,7 +6775,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -7203,7 +6987,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -7280,7 +7063,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -7294,7 +7076,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -7304,11 +7086,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -7323,7 +7100,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -7473,7 +7249,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -7483,11 +7259,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -7502,7 +7273,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -7652,7 +7422,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -7662,11 +7432,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -7681,7 +7446,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -7831,7 +7595,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -7841,11 +7605,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -7860,7 +7619,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -8010,7 +7768,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -8020,11 +7778,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -8039,7 +7792,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -8189,7 +7941,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -8199,11 +7951,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -8218,7 +7965,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -8431,7 +8177,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 0, }, false, - undefined, ] } > @@ -8508,7 +8253,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 0, }, false, - undefined, ] } > @@ -8522,7 +8266,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -8532,11 +8276,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -8551,7 +8290,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -8701,7 +8439,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -8711,11 +8449,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -8730,7 +8463,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -8880,7 +8612,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -8890,11 +8622,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -8909,7 +8636,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -9059,7 +8785,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -9069,11 +8795,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -9088,7 +8809,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -9238,7 +8958,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -9248,11 +8968,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -9267,7 +8982,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -9417,7 +9131,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -9427,11 +9141,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -9446,7 +9155,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -9659,7 +9367,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 0, }, false, - undefined, ] } > @@ -9736,7 +9443,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 0, }, false, - undefined, ] } > @@ -9750,7 +9456,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -9760,11 +9466,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -9779,7 +9480,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -9929,7 +9629,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -9940,9 +9640,177 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "borderWidth": 0, }, { - "color": "#85888e", - "height": 17.5, - "width": 17.5, + "flex": 0, + "height": 17, + "width": 17, + }, + ] + } + testID="Button_Icon" + vbHeight={24} + vbWidth={24} + width={17.5} + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + Button + + +`; + +exports[`Button component tests Button with icon on left, size - base, shape - square, variant - tertiary, loading - false, disabled - false 1`] = ` + + - - - - Button - - -`; - -exports[`Button component tests Button with icon on left, size - base, shape - square, variant - tertiary, loading - false, disabled - false 1`] = ` - - - - - @@ -10287,7 +9975,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -10297,11 +9985,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -10316,7 +9999,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -10466,7 +10148,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -10476,11 +10158,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -10495,7 +10172,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -10645,7 +10321,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -10655,11 +10331,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -10674,7 +10345,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -10887,7 +10557,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 0, }, false, - undefined, ] } > @@ -10964,7 +10633,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 0, }, false, - undefined, ] } > @@ -10978,7 +10646,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -10988,11 +10656,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -11007,7 +10670,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -11157,7 +10819,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -11167,11 +10829,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -11186,7 +10843,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -11336,7 +10992,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -11346,11 +11002,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -11365,7 +11016,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -11515,7 +11165,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -11525,11 +11175,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -11544,7 +11189,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -11694,7 +11338,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -11704,11 +11348,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -11723,7 +11362,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -11873,7 +11511,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -11883,11 +11521,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -11902,7 +11535,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -12115,7 +11747,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 0, }, false, - undefined, ] } > @@ -12192,7 +11823,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "paddingVertical": 0, }, false, - undefined, ] } > @@ -12206,7 +11836,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -12216,11 +11846,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -12235,7 +11860,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -12385,7 +12009,7 @@ exports[`Button component tests Button with icon on left, size - base, shape - s meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -12395,11 +12019,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -12414,7 +12033,6 @@ exports[`Button component tests Button with icon on left, size - base, shape - s xmlns="http://www.w3.org/2000/svg" > @@ -12564,7 +12182,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -12574,11 +12192,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -12593,7 +12206,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -12743,7 +12355,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -12753,11 +12365,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -12772,7 +12379,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -12922,7 +12528,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -12932,11 +12538,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -12951,7 +12552,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -13101,7 +12701,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -13111,11 +12711,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -13130,7 +12725,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -13343,7 +12937,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -13420,7 +13013,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -13434,7 +13026,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -13444,11 +13036,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -13463,7 +13050,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -13613,7 +13199,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -13623,11 +13209,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -13642,7 +13223,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -13792,7 +13372,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -13802,11 +13382,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -13821,7 +13396,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -13971,7 +13545,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -13981,11 +13555,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -14000,7 +13569,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -14150,7 +13718,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -14160,11 +13728,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -14179,7 +13742,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -14329,7 +13891,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -14339,11 +13901,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -14358,7 +13915,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -14571,7 +14127,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -14648,7 +14203,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -14662,7 +14216,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -14672,11 +14226,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -14691,7 +14240,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -14841,7 +14389,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -14851,11 +14399,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -14870,7 +14413,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -15020,7 +14562,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -15030,11 +14572,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -15049,7 +14586,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -15199,7 +14735,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -15209,11 +14745,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -15228,7 +14759,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -15378,7 +14908,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -15388,11 +14918,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -15407,7 +14932,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -15557,7 +15081,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -15567,11 +15091,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -15586,7 +15105,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -15799,7 +15317,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -15876,7 +15393,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -15890,7 +15406,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -15900,11 +15416,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -15919,7 +15430,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -16069,7 +15579,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -16079,11 +15589,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -16098,7 +15603,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -16248,7 +15752,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -16258,11 +15762,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -16277,7 +15776,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -16427,7 +15925,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -16437,11 +15935,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -16456,7 +15949,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -16606,7 +16098,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -16616,11 +16108,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -16635,7 +16122,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -16785,7 +16271,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -16795,11 +16281,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -16814,7 +16295,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -17027,7 +16507,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -17104,7 +16583,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -17118,7 +16596,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -17128,11 +16606,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -17147,7 +16620,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -17297,7 +16769,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -17307,11 +16779,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -17326,7 +16793,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -17476,7 +16942,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -17486,11 +16952,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -17505,7 +16966,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -17655,7 +17115,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -17665,11 +17125,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -17684,7 +17139,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -17834,7 +17288,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -17844,11 +17298,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -17863,7 +17312,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -18013,7 +17461,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -18023,11 +17471,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -18042,7 +17485,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -18255,7 +17697,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -18332,7 +17773,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -18346,7 +17786,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -18356,11 +17796,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -18375,7 +17810,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -18525,7 +17959,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -18535,11 +17969,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -18554,7 +17983,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -18704,7 +18132,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -18714,11 +18142,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -18733,7 +18156,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -18883,7 +18305,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -18893,11 +18315,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -18912,7 +18329,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -19062,7 +18478,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -19072,11 +18488,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -19091,7 +18502,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -19241,7 +18651,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -19251,11 +18661,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -19270,7 +18675,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -19483,7 +18887,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -19560,7 +18963,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -19574,7 +18976,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -19584,11 +18986,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -19603,7 +19000,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -19753,7 +19149,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -19763,11 +19159,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -19782,7 +19173,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -19932,7 +19322,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -19942,11 +19332,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -19961,7 +19346,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -20111,7 +19495,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -20121,11 +19505,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -20140,7 +19519,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -20290,7 +19668,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -20300,11 +19678,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -20319,7 +19692,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -20469,7 +19841,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -20479,11 +19851,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -20498,7 +19865,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -20711,7 +20077,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -20788,7 +20153,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -20802,7 +20166,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -20812,11 +20176,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -20831,7 +20190,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -20981,7 +20339,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -20992,10 +20350,178 @@ exports[`Button component tests Button with icon on left, size - large, shape - "borderWidth": 0, }, { - "color": "#85888e", + "flex": 0, "height": 21, "width": 21, }, + ] + } + testID="Button_Icon" + vbHeight={24} + vbWidth={24} + width={21} + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + Button + + +`; + +exports[`Button component tests Button with icon on left, size - large, shape - square, variant - secondary, loading - false, disabled - false 1`] = ` + + - - - - Button - - -`; - -exports[`Button component tests Button with icon on left, size - large, shape - square, variant - secondary, loading - false, disabled - false 1`] = ` - - - - - @@ -21339,7 +20685,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -21349,11 +20695,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -21368,7 +20709,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -21518,7 +20858,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -21528,11 +20868,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -21547,7 +20882,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -21697,7 +21031,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -21707,11 +21041,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -21726,7 +21055,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -21939,7 +21267,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -22016,7 +21343,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -22030,7 +21356,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -22040,11 +21366,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -22059,7 +21380,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -22209,7 +21529,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -22219,11 +21539,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -22238,7 +21553,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -22388,7 +21702,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -22398,11 +21712,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -22417,7 +21726,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -22567,7 +21875,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -22577,11 +21885,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -22596,7 +21899,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -22746,7 +22048,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -22756,11 +22058,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -22775,7 +22072,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -22925,7 +22221,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -22935,11 +22231,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -22954,7 +22245,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -23167,7 +22457,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -23244,7 +22533,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -23258,7 +22546,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -23268,11 +22556,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -23287,7 +22570,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -23437,7 +22719,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -23447,11 +22729,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -23466,7 +22743,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -23616,7 +22892,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -23626,11 +22902,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -23645,7 +22916,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -23795,7 +23065,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -23805,11 +23075,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -23824,7 +23089,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -23974,7 +23238,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -23984,11 +23248,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -24003,7 +23262,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -24153,7 +23411,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -24163,11 +23421,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -24182,7 +23435,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -24395,7 +23647,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -24472,7 +23723,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -24486,7 +23736,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -24496,11 +23746,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -24515,7 +23760,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -24665,7 +23909,7 @@ exports[`Button component tests Button with icon on left, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -24675,11 +23919,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -24694,7 +23933,6 @@ exports[`Button component tests Button with icon on left, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -24844,7 +24082,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -24854,11 +24092,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -24873,7 +24106,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -25023,7 +24255,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -25033,11 +24265,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -25052,7 +24279,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -25202,7 +24428,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -25212,11 +24438,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -25231,7 +24452,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -25381,7 +24601,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -25391,11 +24611,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -25410,7 +24625,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -25623,7 +24837,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -25700,7 +24913,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -25714,7 +24926,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -25724,11 +24936,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -25743,7 +24950,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -25893,7 +25099,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -25903,11 +25109,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -25922,7 +25123,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -26072,7 +25272,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -26082,11 +25282,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -26101,7 +25296,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -26251,7 +25445,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -26261,11 +25455,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -26280,7 +25469,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -26430,7 +25618,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -26440,11 +25628,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -26459,7 +25642,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -26609,7 +25791,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -26619,11 +25801,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -26638,7 +25815,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -26851,7 +26027,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -26928,7 +26103,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -26942,7 +26116,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -26952,11 +26126,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -26971,7 +26140,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -27121,7 +26289,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -27131,11 +26299,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -27150,7 +26313,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -27300,7 +26462,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -27310,11 +26472,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -27329,7 +26486,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -27479,7 +26635,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -27489,11 +26645,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -27508,7 +26659,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -27658,7 +26808,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -27668,11 +26818,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -27687,7 +26832,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -27837,7 +26981,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -27847,11 +26991,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -27866,7 +27005,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -28079,7 +27217,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -28156,7 +27293,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -28170,7 +27306,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -28180,11 +27316,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -28199,7 +27330,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -28349,7 +27479,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -28359,11 +27489,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -28378,7 +27503,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -28528,7 +27652,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -28538,11 +27662,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -28557,7 +27676,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -28707,7 +27825,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -28717,11 +27835,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -28736,7 +27849,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -28886,7 +27998,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -28896,11 +28008,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -28915,7 +28022,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -29065,7 +28171,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -29075,11 +28181,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -29094,7 +28195,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -29307,7 +28407,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -29384,7 +28483,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -29398,7 +28496,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -29408,11 +28506,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -29427,7 +28520,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -29577,7 +28669,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -29587,11 +28679,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -29606,7 +28693,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -29756,7 +28842,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -29766,11 +28852,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -29785,7 +28866,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -29935,7 +29015,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -29945,11 +29025,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -29964,7 +29039,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -30114,7 +29188,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -30124,11 +29198,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -30143,7 +29212,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -30293,7 +29361,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -30303,11 +29371,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -30322,7 +29385,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -30535,7 +29597,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -30612,7 +29673,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -30626,7 +29686,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -30636,11 +29696,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -30655,7 +29710,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -30805,7 +29859,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -30816,10 +29870,178 @@ exports[`Button component tests Button with icon on left, size - small, shape - "borderWidth": 0, }, { - "color": "#85888e", + "flex": 0, "height": 14, "width": 14, }, + ] + } + testID="Button_Icon" + vbHeight={24} + vbWidth={24} + width={14} + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + Button + + +`; + +exports[`Button component tests Button with icon on left, size - small, shape - square, variant - link, loading - false, disabled - false 1`] = ` + + - - - - Button - - -`; - -exports[`Button component tests Button with icon on left, size - small, shape - square, variant - link, loading - false, disabled - false 1`] = ` - - - - - @@ -31163,7 +30205,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -31173,11 +30215,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -31192,7 +30229,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -31342,7 +30378,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -31352,11 +30388,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -31371,7 +30402,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -31521,7 +30551,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -31531,11 +30561,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -31550,7 +30575,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -31763,7 +30787,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -31840,7 +30863,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -31854,7 +30876,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -31864,11 +30886,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -31883,7 +30900,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -32033,7 +31049,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -32043,11 +31059,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -32062,7 +31073,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -32212,7 +31222,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -32222,11 +31232,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -32241,7 +31246,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -32391,7 +31395,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -32401,11 +31405,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -32420,7 +31419,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -32570,7 +31568,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -32580,11 +31578,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -32599,7 +31592,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -32749,7 +31741,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -32759,11 +31751,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -32778,7 +31765,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -32991,7 +31977,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -33068,7 +32053,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -33082,7 +32066,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -33092,11 +32076,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -33111,7 +32090,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -33261,7 +32239,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -33271,11 +32249,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -33290,7 +32263,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -33440,7 +32412,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -33450,11 +32422,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -33469,7 +32436,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -33619,7 +32585,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -33629,11 +32595,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -33648,7 +32609,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -33798,7 +32758,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -33808,11 +32768,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -33827,7 +32782,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -33977,7 +32931,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -33987,11 +32941,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -34006,7 +32955,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -34219,7 +33167,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -34296,7 +33243,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -34310,7 +33256,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -34320,11 +33266,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -34339,7 +33280,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -34489,7 +33429,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -34499,11 +33439,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -34518,7 +33453,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -34668,7 +33602,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -34678,11 +33612,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -34697,7 +33626,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -34847,7 +33775,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -34857,11 +33785,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -34876,7 +33799,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -35026,7 +33948,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -35036,11 +33958,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -35055,7 +33972,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -35205,7 +34121,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -35215,11 +34131,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -35234,7 +34145,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -35447,7 +34357,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -35524,7 +34433,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -35538,7 +34446,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -35548,11 +34456,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -35567,7 +34470,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -35717,7 +34619,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -35727,11 +34629,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -35746,7 +34643,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -35896,7 +34792,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -35906,11 +34802,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -35925,7 +34816,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -36075,7 +34965,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -36085,11 +34975,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -36104,7 +34989,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -36254,7 +35138,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -36264,11 +35148,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -36283,7 +35162,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -36433,7 +35311,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -36443,11 +35321,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -36462,7 +35335,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -36675,7 +35547,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -36752,7 +35623,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -36766,7 +35636,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -36776,11 +35646,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -36795,7 +35660,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -36945,7 +35809,7 @@ exports[`Button component tests Button with icon on left, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -36955,11 +35819,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -36974,7 +35833,6 @@ exports[`Button component tests Button with icon on left, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -37124,7 +35982,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -37134,11 +35992,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -37153,7 +36006,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -37303,7 +36155,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -37313,11 +36165,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -37332,7 +36179,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -37482,7 +36328,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -37492,11 +36338,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -37511,7 +36352,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -37661,7 +36501,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -37671,11 +36511,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -37690,7 +36525,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -37903,7 +36737,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -37980,7 +36813,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -37994,7 +36826,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -38004,11 +36836,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -38023,7 +36850,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -38173,7 +36999,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -38183,11 +37009,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -38202,7 +37023,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -38352,7 +37172,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -38362,11 +37182,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -38381,7 +37196,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -38531,7 +37345,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -38541,11 +37355,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -38560,7 +37369,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -38710,7 +37518,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -38720,11 +37528,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -38739,7 +37542,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -38889,7 +37691,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -38899,11 +37701,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -38918,7 +37715,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -39131,7 +37927,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -39208,7 +38003,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -39222,7 +38016,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -39232,11 +38026,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -39251,7 +38040,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -39401,7 +38189,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -39411,11 +38199,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -39430,7 +38213,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -39580,7 +38362,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -39590,11 +38372,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -39609,7 +38386,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -39759,7 +38535,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -39769,11 +38545,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -39788,7 +38559,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -39938,7 +38708,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -39948,11 +38718,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -39967,7 +38732,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -40117,7 +38881,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -40127,11 +38891,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -40146,7 +38905,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -40359,7 +39117,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -40436,7 +39193,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -40450,7 +39206,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -40460,11 +39216,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -40479,7 +39230,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -40629,7 +39379,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -40640,10 +39390,178 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "borderWidth": 0, }, { - "color": "#85888e", + "flex": 0, "height": 21, "width": 21, }, + ] + } + testID="Button_Icon" + vbHeight={24} + vbWidth={24} + width={21} + xmlns="http://www.w3.org/2000/svg" + > + + + + + + + Button + + +`; + +exports[`Button component tests Button with icon on left, size - xlarge, shape - circle, variant - tertiary, loading - false, disabled - false 1`] = ` + + - - - - Button - - -`; - -exports[`Button component tests Button with icon on left, size - xlarge, shape - circle, variant - tertiary, loading - false, disabled - false 1`] = ` - - - - - @@ -40987,7 +39725,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -40997,11 +39735,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -41016,7 +39749,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -41166,7 +39898,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -41176,11 +39908,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -41195,7 +39922,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -41345,7 +40071,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -41355,11 +40081,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -41374,7 +40095,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -41587,7 +40307,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -41664,7 +40383,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -41678,7 +40396,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -41688,11 +40406,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -41707,7 +40420,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -41857,7 +40569,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -41867,11 +40579,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -41886,7 +40593,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -42036,7 +40742,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -42046,11 +40752,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -42065,7 +40766,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -42215,7 +40915,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -42225,11 +40925,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -42244,7 +40939,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -42394,7 +41088,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -42404,11 +41098,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -42423,7 +41112,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -42573,7 +41261,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -42583,11 +41271,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -42602,7 +41285,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -42815,7 +41497,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -42892,7 +41573,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -42906,7 +41586,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -42916,11 +41596,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -42935,7 +41610,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -43085,7 +41759,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -43095,11 +41769,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -43114,7 +41783,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -43264,7 +41932,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -43274,11 +41942,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -43293,7 +41956,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -43443,7 +42105,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -43453,11 +42115,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -43472,7 +42129,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -43622,7 +42278,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -43632,11 +42288,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -43651,7 +42302,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -43801,7 +42451,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -43811,11 +42461,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -43830,7 +42475,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -44043,7 +42687,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -44120,7 +42763,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -44134,7 +42776,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -44144,11 +42786,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -44163,7 +42800,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -44313,7 +42949,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -44323,11 +42959,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -44342,7 +42973,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -44492,7 +43122,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -44502,11 +43132,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -44521,7 +43146,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -44671,7 +43295,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -44681,11 +43305,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -44700,7 +43319,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -44850,7 +43468,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -44860,11 +43478,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -44879,7 +43492,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -45029,7 +43641,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -45039,11 +43651,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -45058,7 +43665,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -45271,7 +43877,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -45348,7 +43953,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -45362,7 +43966,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -45372,11 +43976,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -45391,7 +43990,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -45541,7 +44139,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -45551,11 +44149,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -45570,7 +44163,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -45720,7 +44312,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -45730,11 +44322,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -45749,7 +44336,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -45899,7 +44485,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -45909,11 +44495,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -45928,7 +44509,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -46078,7 +44658,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -46088,11 +44668,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -46107,7 +44682,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -46257,7 +44831,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -46267,11 +44841,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -46286,7 +44855,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -46499,7 +45067,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -46576,7 +45143,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -46590,7 +45156,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -46600,11 +45166,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -46619,7 +45180,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -46769,7 +45329,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -46779,11 +45339,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -46798,7 +45353,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -46948,7 +45502,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -46958,11 +45512,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -46977,7 +45526,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -47127,7 +45675,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -47137,11 +45685,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -47156,7 +45699,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -47306,7 +45848,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -47316,11 +45858,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -47335,7 +45872,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -47485,7 +46021,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -47495,11 +46031,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -47514,7 +46045,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -47727,7 +46257,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -47804,7 +46333,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -47818,7 +46346,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -47828,11 +46356,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -47847,7 +46370,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -47997,7 +46519,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -48007,11 +46529,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -48026,7 +46543,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -48176,7 +46692,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -48186,11 +46702,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -48205,7 +46716,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -48355,7 +46865,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -48365,11 +46875,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -48384,7 +46889,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -48534,7 +47038,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -48544,11 +47048,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -48563,7 +47062,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -48713,7 +47211,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -48723,11 +47221,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -48742,7 +47235,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -48955,7 +47447,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -49032,7 +47523,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -49046,7 +47536,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -49056,11 +47546,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -49075,7 +47560,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -49225,7 +47709,7 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -49235,11 +47719,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -49254,7 +47733,6 @@ exports[`Button component tests Button with icon on left, size - xlarge, shape - xmlns="http://www.w3.org/2000/svg" > @@ -49419,7 +47897,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -49429,11 +47907,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -49448,7 +47921,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -49598,7 +48070,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -49608,11 +48080,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -49627,7 +48094,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -49777,7 +48243,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -49787,11 +48253,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -49806,7 +48267,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -49956,7 +48416,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -49966,11 +48426,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -49985,7 +48440,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -50183,7 +48637,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -50260,7 +48713,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -50289,7 +48741,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -50299,11 +48751,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -50318,7 +48765,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -50468,7 +48914,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -50478,11 +48924,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -50497,7 +48938,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -50647,7 +49087,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -50657,11 +49097,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -50676,7 +49111,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -50826,7 +49260,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -50836,11 +49270,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -50855,7 +49284,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -51005,7 +49433,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -51016,9 +49444,177 @@ exports[`Button component tests Button with icon on right, size - base, shape - "borderWidth": 0, }, { - "color": "#85888e", - "height": 17.5, - "width": 17.5, + "flex": 0, + "height": 17, + "width": 17, + }, + ] + } + testID="Button_Icon" + vbHeight={24} + vbWidth={24} + width={17.5} + xmlns="http://www.w3.org/2000/svg" + > + + + + + + +`; + +exports[`Button component tests Button with icon on right, size - base, shape - circle, variant - primary, loading - false, disabled - true 2`] = ` + + + Button + + `; -exports[`Button component tests Button with icon on right, size - base, shape - circle, variant - primary, loading - false, disabled - true 2`] = ` +exports[`Button component tests Button with icon on right, size - base, shape - circle, variant - primary, loading - true, disabled - false 1`] = ` - - Button - - - - - - - - -`; - -exports[`Button component tests Button with icon on right, size - base, shape - circle, variant - primary, loading - true, disabled - false 1`] = ` - @@ -51411,7 +49827,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -51488,7 +49903,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -51517,7 +49931,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -51527,11 +49941,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -51546,7 +49955,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -51696,7 +50104,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -51706,11 +50114,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -51725,7 +50128,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -51875,7 +50277,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -51885,11 +50287,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -51904,7 +50301,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -52054,7 +50450,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -52064,11 +50460,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -52083,7 +50474,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -52233,7 +50623,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -52243,11 +50633,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -52262,7 +50647,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -52412,7 +50796,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -52422,11 +50806,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -52441,7 +50820,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -52639,7 +51017,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -52716,7 +51093,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -52745,7 +51121,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -52755,11 +51131,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -52774,7 +51145,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -52924,7 +51294,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -52934,11 +51304,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -52953,7 +51318,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -53103,7 +51467,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -53113,11 +51477,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -53132,7 +51491,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -53282,7 +51640,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -53292,11 +51650,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -53311,7 +51664,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -53461,7 +51813,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -53471,11 +51823,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -53490,7 +51837,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -53640,7 +51986,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -53650,11 +51996,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -53669,7 +52010,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -53867,7 +52207,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -53944,7 +52283,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -53973,7 +52311,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -53983,11 +52321,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -54002,7 +52335,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -54152,7 +52484,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -54162,11 +52494,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -54181,7 +52508,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -54331,7 +52657,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -54341,11 +52667,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -54360,7 +52681,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -54510,7 +52830,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -54520,11 +52840,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -54539,7 +52854,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -54689,7 +53003,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -54699,11 +53013,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -54718,7 +53027,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -54868,7 +53176,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -54878,11 +53186,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -54897,7 +53200,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -55095,7 +53397,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -55172,7 +53473,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -55201,7 +53501,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -55211,11 +53511,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -55230,7 +53525,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -55380,7 +53674,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -55390,11 +53684,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -55409,7 +53698,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -55559,7 +53847,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -55569,11 +53857,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -55588,7 +53871,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -55738,7 +54020,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -55748,11 +54030,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -55767,7 +54044,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -55917,7 +54193,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -55927,11 +54203,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -55946,7 +54217,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -56096,7 +54366,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -56106,11 +54376,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -56125,7 +54390,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -56323,7 +54587,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -56400,7 +54663,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -56429,7 +54691,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -56439,11 +54701,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -56458,7 +54715,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -56608,7 +54864,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -56618,11 +54874,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -56637,7 +54888,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -56787,7 +55037,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -56797,11 +55047,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -56816,7 +55061,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -56966,7 +55210,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -56976,11 +55220,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -56995,7 +55234,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -57145,7 +55383,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -57155,11 +55393,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -57174,7 +55407,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -57324,7 +55556,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -57334,11 +55566,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -57353,7 +55580,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -57551,7 +55777,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -57628,7 +55853,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -57657,7 +55881,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -57667,11 +55891,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -57686,7 +55905,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -57836,7 +56054,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -57846,11 +56064,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -57865,7 +56078,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -58015,7 +56227,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -58025,11 +56237,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -58044,7 +56251,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -58194,7 +56400,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -58204,11 +56410,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -58223,7 +56424,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -58373,7 +56573,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -58383,11 +56583,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -58402,7 +56597,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -58552,7 +56746,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -58562,11 +56756,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -58581,7 +56770,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -58779,7 +56967,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -58856,7 +57043,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -58885,7 +57071,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -58895,11 +57081,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -58914,7 +57095,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -59064,7 +57244,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -59074,11 +57254,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -59093,7 +57268,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -59243,7 +57417,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -59253,11 +57427,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -59272,7 +57441,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -59422,7 +57590,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -59432,11 +57600,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -59451,7 +57614,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -59601,7 +57763,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -59611,11 +57773,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -59630,7 +57787,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -59780,7 +57936,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -59790,11 +57946,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -59809,7 +57960,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -60007,7 +58157,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -60084,7 +58233,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -60113,7 +58261,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -60123,11 +58271,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -60142,7 +58285,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -60292,7 +58434,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -60302,11 +58444,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -60321,7 +58458,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -60471,7 +58607,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -60481,11 +58617,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -60500,7 +58631,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -60650,7 +58780,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -60660,11 +58790,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -60679,7 +58804,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -60829,7 +58953,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -60839,11 +58963,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -60858,7 +58977,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -61008,7 +59126,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -61018,11 +59136,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -61037,7 +59150,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -61235,7 +59347,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -61312,7 +59423,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -61341,7 +59451,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -61351,11 +59461,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -61370,7 +59475,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -61520,7 +59624,7 @@ exports[`Button component tests Button with icon on right, size - base, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -61530,11 +59634,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -61549,7 +59648,6 @@ exports[`Button component tests Button with icon on right, size - base, shape - xmlns="http://www.w3.org/2000/svg" > @@ -61699,7 +59797,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -61709,11 +59807,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -61728,7 +59821,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -61878,7 +59970,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -61888,11 +59980,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -61907,7 +59994,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -62057,7 +60143,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -62067,11 +60153,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -62086,7 +60167,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -62236,7 +60316,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -62246,11 +60326,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -62265,7 +60340,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -62463,7 +60537,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -62540,7 +60613,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -62569,7 +60641,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -62579,11 +60651,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -62598,7 +60665,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -62748,7 +60814,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -62758,11 +60824,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -62777,7 +60838,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -62927,7 +60987,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -62937,11 +60997,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -62956,7 +61011,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -63106,7 +61160,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -63116,11 +61170,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -63135,7 +61184,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -63285,7 +61333,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -63295,11 +61343,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -63314,7 +61357,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -63464,7 +61506,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -63474,11 +61516,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -63493,7 +61530,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -63691,7 +61727,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -63768,7 +61803,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -63797,7 +61831,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -63807,11 +61841,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -63826,7 +61855,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -63976,7 +62004,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -63986,11 +62014,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -64005,7 +62028,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -64155,7 +62177,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -64165,11 +62187,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -64184,7 +62201,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -64334,7 +62350,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -64344,11 +62360,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -64363,7 +62374,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -64513,7 +62523,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -64523,11 +62533,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -64542,7 +62547,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -64692,7 +62696,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -64702,11 +62706,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -64721,7 +62720,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -64919,7 +62917,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -64996,7 +62993,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -65025,7 +63021,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -65035,11 +63031,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -65054,7 +63045,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -65204,7 +63194,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -65214,11 +63204,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -65233,7 +63218,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -65383,7 +63367,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -65393,11 +63377,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -65412,7 +63391,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -65562,7 +63540,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -65572,11 +63550,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -65591,7 +63564,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -65741,7 +63713,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -65751,11 +63723,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -65770,7 +63737,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -65920,7 +63886,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -65930,11 +63896,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -65949,7 +63910,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -66147,7 +64107,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -66224,7 +64183,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -66253,7 +64211,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -66263,11 +64221,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -66282,7 +64235,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -66432,7 +64384,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -66442,11 +64394,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -66461,7 +64408,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -66611,7 +64557,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -66621,11 +64567,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -66640,7 +64581,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -66790,7 +64730,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -66800,11 +64740,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -66819,7 +64754,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -66969,7 +64903,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -66979,11 +64913,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -66998,7 +64927,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -67148,7 +65076,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -67158,11 +65086,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -67177,7 +65100,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -67375,7 +65297,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -67452,7 +65373,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -67481,7 +65401,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -67491,11 +65411,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -67510,7 +65425,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -67660,7 +65574,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -67670,11 +65584,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -67689,7 +65598,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -67839,7 +65747,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -67849,11 +65757,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -67868,7 +65771,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -68018,7 +65920,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -68028,11 +65930,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -68047,7 +65944,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -68197,7 +66093,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -68207,11 +66103,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -68226,7 +66117,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -68376,7 +66266,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -68386,11 +66276,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -68405,7 +66290,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -68603,7 +66487,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -68680,7 +66563,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -68709,7 +66591,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -68719,11 +66601,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -68738,7 +66615,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -68888,7 +66764,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -68898,11 +66774,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -68917,7 +66788,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -69067,7 +66937,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -69077,11 +66947,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -69096,7 +66961,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -69246,7 +67110,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -69256,11 +67120,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -69275,7 +67134,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -69425,7 +67283,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -69435,11 +67293,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -69454,7 +67307,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -69604,7 +67456,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -69614,11 +67466,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -69633,7 +67480,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -69831,7 +67677,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -69908,7 +67753,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -69937,7 +67781,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -69947,11 +67791,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -69966,7 +67805,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -70116,7 +67954,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -70126,11 +67964,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -70145,7 +67978,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -70295,7 +68127,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -70305,11 +68137,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -70324,7 +68151,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -70474,7 +68300,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -70484,11 +68310,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -70503,7 +68324,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -70653,7 +68473,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -70663,11 +68483,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -70682,7 +68497,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -70832,7 +68646,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -70842,11 +68656,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -70861,7 +68670,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -71059,7 +68867,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -71136,7 +68943,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -71165,7 +68971,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -71175,11 +68981,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -71194,7 +68995,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -71344,7 +69144,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -71354,11 +69154,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -71373,7 +69168,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -71523,7 +69317,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -71533,11 +69327,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -71552,7 +69341,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -71702,7 +69490,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -71712,11 +69500,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -71731,7 +69514,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -71881,7 +69663,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -71891,11 +69673,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -71910,7 +69687,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -72060,7 +69836,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -72070,11 +69846,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -72089,7 +69860,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -72287,7 +70057,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -72364,7 +70133,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -72393,7 +70161,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -72403,11 +70171,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -72422,7 +70185,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -72572,7 +70334,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -72582,11 +70344,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -72601,7 +70358,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -72751,7 +70507,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -72761,11 +70517,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -72780,7 +70531,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -72930,7 +70680,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -72940,11 +70690,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -72959,7 +70704,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -73109,7 +70853,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -73119,11 +70863,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -73138,7 +70877,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -73288,7 +71026,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -73298,11 +71036,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -73317,7 +71050,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -73515,7 +71247,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -73592,7 +71323,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -73621,7 +71351,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -73631,11 +71361,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -73650,7 +71375,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -73800,7 +71524,7 @@ exports[`Button component tests Button with icon on right, size - large, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -73810,11 +71534,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -73829,7 +71548,6 @@ exports[`Button component tests Button with icon on right, size - large, shape - xmlns="http://www.w3.org/2000/svg" > @@ -73979,7 +71697,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -73989,11 +71707,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -74008,7 +71721,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -74158,7 +71870,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -74168,11 +71880,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -74187,7 +71894,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -74337,7 +72043,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -74347,11 +72053,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -74366,7 +72067,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -74516,7 +72216,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -74526,11 +72226,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -74545,7 +72240,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -74743,7 +72437,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -74820,7 +72513,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -74849,7 +72541,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -74859,11 +72551,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -74878,7 +72565,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -75028,7 +72714,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -75038,11 +72724,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -75057,7 +72738,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -75207,7 +72887,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -75217,11 +72897,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -75236,7 +72911,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -75386,7 +73060,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -75396,11 +73070,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -75415,7 +73084,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -75565,7 +73233,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -75575,11 +73243,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -75594,7 +73257,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -75744,7 +73406,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -75754,11 +73416,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -75773,7 +73430,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -75971,7 +73627,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -76048,7 +73703,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -76077,7 +73731,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -76087,11 +73741,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -76106,7 +73755,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -76256,7 +73904,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -76266,11 +73914,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -76285,7 +73928,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -76435,7 +74077,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -76445,11 +74087,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -76464,7 +74101,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -76614,7 +74250,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -76624,11 +74260,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -76643,7 +74274,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -76793,7 +74423,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -76803,11 +74433,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -76822,7 +74447,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -76972,7 +74596,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -76982,11 +74606,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -77001,7 +74620,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -77199,7 +74817,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -77276,7 +74893,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -77305,7 +74921,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -77315,11 +74931,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -77334,7 +74945,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -77484,7 +75094,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -77494,11 +75104,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -77513,7 +75118,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -77663,7 +75267,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -77673,11 +75277,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -77692,7 +75291,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -77842,7 +75440,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -77852,11 +75450,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -77871,7 +75464,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -78021,7 +75613,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -78031,11 +75623,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -78050,7 +75637,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -78200,7 +75786,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -78210,11 +75796,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -78229,7 +75810,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -78427,7 +76007,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -78504,7 +76083,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -78533,7 +76111,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -78543,11 +76121,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -78562,7 +76135,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -78712,7 +76284,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -78722,11 +76294,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -78741,7 +76308,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -78891,7 +76457,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -78901,11 +76467,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -78920,7 +76481,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -79070,7 +76630,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -79080,11 +76640,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -79099,7 +76654,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -79249,7 +76803,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -79260,10 +76814,178 @@ exports[`Button component tests Button with icon on right, size - small, shape - "borderWidth": 0, }, { - "color": "#85888e", + "flex": 0, "height": 14, "width": 14, }, + ] + } + testID="Button_Icon" + vbHeight={24} + vbWidth={24} + width={14} + xmlns="http://www.w3.org/2000/svg" + > + + + + + + +`; + +exports[`Button component tests Button with icon on right, size - small, shape - circle, variant - text, loading - false, disabled - true 2`] = ` + + + Button + + - - - -`; - -exports[`Button component tests Button with icon on right, size - small, shape - circle, variant - text, loading - false, disabled - true 2`] = ` - - - Button - - - - - @@ -79655,7 +77197,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -79732,7 +77273,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -79761,7 +77301,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -79771,11 +77311,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -79790,7 +77325,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -79940,7 +77474,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -79950,11 +77484,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -79969,7 +77498,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -80119,7 +77647,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -80129,11 +77657,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -80148,7 +77671,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -80298,7 +77820,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -80308,11 +77830,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -80327,7 +77844,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -80477,7 +77993,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -80487,11 +78003,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -80506,7 +78017,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -80656,7 +78166,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -80666,11 +78176,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -80685,7 +78190,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -80883,7 +78387,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -80960,7 +78463,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -80989,7 +78491,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -80999,11 +78501,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -81018,7 +78515,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -81168,7 +78664,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -81178,11 +78674,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -81197,7 +78688,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -81347,7 +78837,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -81357,11 +78847,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -81376,7 +78861,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -81526,7 +79010,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -81536,11 +79020,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -81555,7 +79034,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -81705,7 +79183,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -81715,11 +79193,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -81734,7 +79207,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -81884,7 +79356,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -81894,11 +79366,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -81913,7 +79380,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -82111,7 +79577,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -82188,7 +79653,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -82217,7 +79681,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -82227,11 +79691,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -82246,7 +79705,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -82396,7 +79854,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -82406,11 +79864,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -82425,7 +79878,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -82575,7 +80027,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -82585,11 +80037,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -82604,7 +80051,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -82754,7 +80200,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -82764,11 +80210,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -82783,7 +80224,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -82933,7 +80373,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -82943,11 +80383,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -82962,7 +80397,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -83112,7 +80546,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -83122,11 +80556,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -83141,7 +80570,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -83339,7 +80767,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -83416,7 +80843,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -83445,7 +80871,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -83455,11 +80881,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -83474,7 +80895,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -83624,7 +81044,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -83634,11 +81054,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -83653,7 +81068,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -83803,7 +81217,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -83813,11 +81227,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -83832,7 +81241,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -83982,7 +81390,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -83992,11 +81400,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -84011,7 +81414,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -84161,7 +81563,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -84171,11 +81573,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -84190,7 +81587,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -84340,7 +81736,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -84350,11 +81746,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -84369,7 +81760,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -84567,7 +81957,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -84644,7 +82033,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -84673,7 +82061,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -84683,11 +82071,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -84702,7 +82085,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -84852,7 +82234,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -84862,11 +82244,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -84881,7 +82258,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -85031,7 +82407,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -85041,11 +82417,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -85060,7 +82431,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -85210,7 +82580,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -85220,11 +82590,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -85239,7 +82604,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -85389,7 +82753,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -85399,11 +82763,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -85418,7 +82777,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -85568,7 +82926,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -85578,11 +82936,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -85597,7 +82950,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -85795,7 +83147,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -85872,7 +83223,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "paddingVertical": 0, }, false, - undefined, ] } > @@ -85901,7 +83251,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -85911,11 +83261,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -85930,7 +83275,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -86080,7 +83424,7 @@ exports[`Button component tests Button with icon on right, size - small, shape - meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -86090,11 +83434,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -86109,7 +83448,6 @@ exports[`Button component tests Button with icon on right, size - small, shape - xmlns="http://www.w3.org/2000/svg" > @@ -86259,7 +83597,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -86269,11 +83607,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -86288,7 +83621,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -86438,7 +83770,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -86448,11 +83780,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -86467,7 +83794,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -86617,7 +83943,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -86627,11 +83953,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -86646,7 +83967,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -86796,7 +84116,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -86806,11 +84126,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -86825,7 +84140,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -87023,7 +84337,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -87100,7 +84413,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -87129,7 +84441,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -87139,11 +84451,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -87158,7 +84465,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -87308,7 +84614,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -87318,11 +84624,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -87337,7 +84638,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -87487,7 +84787,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -87497,11 +84797,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -87516,7 +84811,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -87666,7 +84960,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -87676,11 +84970,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -87695,7 +84984,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -87845,7 +85133,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -87855,11 +85143,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -87874,7 +85157,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -88024,7 +85306,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -88034,11 +85316,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -88053,7 +85330,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -88251,7 +85527,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -88328,7 +85603,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -88357,7 +85631,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -88367,11 +85641,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -88386,7 +85655,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -88536,7 +85804,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -88546,11 +85814,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -88565,7 +85828,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -88715,7 +85977,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -88725,11 +85987,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -88744,7 +86001,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -88894,7 +86150,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -88904,11 +86160,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -88923,7 +86174,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -89073,7 +86323,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -89084,10 +86334,178 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "borderWidth": 0, }, { - "color": "#85888e", + "flex": 0, "height": 21, "width": 21, }, + ] + } + testID="Button_Icon" + vbHeight={24} + vbWidth={24} + width={21} + xmlns="http://www.w3.org/2000/svg" + > + + + + + + +`; + +exports[`Button component tests Button with icon on right, size - xlarge, shape - circle, variant - secondary, loading - false, disabled - true 2`] = ` + + + Button + + - - - -`; - -exports[`Button component tests Button with icon on right, size - xlarge, shape - circle, variant - secondary, loading - false, disabled - true 2`] = ` - - - Button - - - - - @@ -89479,7 +86717,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -89556,7 +86793,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -89585,7 +86821,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -89595,11 +86831,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -89614,7 +86845,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -89764,7 +86994,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -89774,11 +87004,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -89793,7 +87018,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -89943,7 +87167,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -89953,11 +87177,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -89972,7 +87191,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -90122,7 +87340,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -90132,11 +87350,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -90151,7 +87364,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -90301,7 +87513,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -90311,11 +87523,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -90330,7 +87537,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -90480,7 +87686,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -90490,11 +87696,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -90509,7 +87710,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -90707,7 +87907,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -90784,7 +87983,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -90813,7 +88011,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -90823,11 +88021,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -90842,7 +88035,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -90992,7 +88184,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -91002,11 +88194,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -91021,7 +88208,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -91171,7 +88357,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -91181,11 +88367,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -91200,7 +88381,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -91350,7 +88530,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -91360,11 +88540,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -91379,7 +88554,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -91529,7 +88703,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -91539,11 +88713,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -91558,7 +88727,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -91708,7 +88876,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -91718,11 +88886,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -91737,7 +88900,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -91935,7 +89097,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -92012,7 +89173,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -92041,7 +89201,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -92051,11 +89211,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -92070,7 +89225,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -92220,7 +89374,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -92230,11 +89384,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -92249,7 +89398,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -92399,7 +89547,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -92409,11 +89557,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -92428,7 +89571,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -92578,7 +89720,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -92588,11 +89730,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -92607,7 +89744,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -92757,7 +89893,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -92767,11 +89903,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -92786,7 +89917,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -92936,7 +90066,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -92946,11 +90076,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -92965,7 +90090,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -93163,7 +90287,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -93240,7 +90363,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -93269,7 +90391,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -93279,11 +90401,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -93298,7 +90415,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -93448,7 +90564,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -93458,11 +90574,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -93477,7 +90588,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -93627,7 +90737,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -93637,11 +90747,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -93656,7 +90761,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -93806,7 +90910,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -93816,11 +90920,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -93835,7 +90934,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -93985,7 +91083,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -93995,11 +91093,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -94014,7 +91107,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -94164,7 +91256,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -94174,11 +91266,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -94193,7 +91280,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -94391,7 +91477,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -94468,7 +91553,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -94497,7 +91581,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -94507,11 +91591,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -94526,7 +91605,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -94676,7 +91754,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -94686,11 +91764,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -94705,7 +91778,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -94855,7 +91927,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -94865,11 +91937,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -94884,7 +91951,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -95034,7 +92100,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -95044,11 +92110,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -95063,7 +92124,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -95213,7 +92273,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -95223,11 +92283,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -95242,7 +92297,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -95392,7 +92446,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -95402,11 +92456,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -95421,7 +92470,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -95619,7 +92667,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -95696,7 +92743,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -95725,7 +92771,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -95735,11 +92781,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -95754,7 +92795,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -95904,7 +92944,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -95914,11 +92954,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -95933,7 +92968,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -96083,7 +93117,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -96093,11 +93127,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -96112,7 +93141,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -96262,7 +93290,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -96272,11 +93300,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -96291,7 +93314,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -96441,7 +93463,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -96451,11 +93473,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -96470,7 +93487,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -96620,7 +93636,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -96630,11 +93646,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -96649,7 +93660,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -96847,7 +93857,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -96924,7 +93933,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -96953,7 +93961,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -96963,11 +93971,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -96982,7 +93985,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -97132,7 +94134,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -97142,11 +94144,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -97161,7 +94158,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -97311,7 +94307,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -97321,11 +94317,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -97340,7 +94331,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -97490,7 +94480,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -97500,11 +94490,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -97519,7 +94504,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -97669,7 +94653,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -97679,11 +94663,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -97698,7 +94677,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -97848,7 +94826,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -97858,11 +94836,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -97877,7 +94850,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -98075,7 +95047,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -98152,7 +95123,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "paddingVertical": 0, }, false, - undefined, ] } > @@ -98181,7 +95151,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -98191,11 +95161,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -98210,7 +95175,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -98360,7 +95324,7 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -98370,11 +95334,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -98389,7 +95348,6 @@ exports[`Button component tests Button with icon on right, size - xlarge, shape xmlns="http://www.w3.org/2000/svg" > @@ -98526,7 +95484,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -98536,11 +95494,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -98555,7 +95508,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -98692,7 +95644,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -98702,11 +95654,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -98721,7 +95668,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -98908,7 +95854,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ { "aspectRatio": 1, }, - undefined, ] } > @@ -98922,7 +95867,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -98932,11 +95877,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -98951,7 +95891,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -99088,7 +96027,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -99098,11 +96037,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -99117,7 +96051,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -99254,7 +96187,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -99264,11 +96197,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -99283,7 +96211,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -99470,7 +96397,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ { "aspectRatio": 1, }, - undefined, ] } > @@ -99484,7 +96410,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -99494,11 +96420,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -99513,7 +96434,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -99650,7 +96570,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -99660,11 +96580,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -99679,7 +96594,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -99816,7 +96730,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -99826,11 +96740,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -99845,7 +96754,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -100032,7 +96940,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ { "aspectRatio": 1, }, - undefined, ] } > @@ -100046,7 +96953,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -100056,11 +96963,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -100075,7 +96977,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -100212,7 +97113,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -100222,11 +97123,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -100241,7 +97137,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -100378,7 +97273,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -100388,11 +97283,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -100407,7 +97297,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -100594,7 +97483,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ { "aspectRatio": 1, }, - undefined, ] } > @@ -100608,7 +97496,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -100618,11 +97506,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -100637,7 +97520,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -100774,7 +97656,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -100784,11 +97666,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -100803,7 +97680,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -100940,7 +97816,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -100950,11 +97826,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -100969,7 +97840,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -101156,7 +98026,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ { "aspectRatio": 1, }, - undefined, ] } > @@ -101170,7 +98039,7 @@ exports[`Button component tests Button with only icon, size - base, shape - circ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -101180,11 +98049,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -101199,7 +98063,6 @@ exports[`Button component tests Button with only icon, size - base, shape - circ xmlns="http://www.w3.org/2000/svg" > @@ -101336,7 +98199,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -101346,11 +98209,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -101365,7 +98223,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -101502,7 +98359,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -101512,11 +98369,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -101531,7 +98383,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -101718,7 +98569,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa { "aspectRatio": 1, }, - undefined, ] } > @@ -101732,7 +98582,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -101742,11 +98592,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -101761,7 +98606,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -101898,7 +98742,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -101908,11 +98752,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -101927,7 +98766,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -102064,7 +98902,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -102074,11 +98912,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -102093,7 +98926,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -102280,7 +99112,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa { "aspectRatio": 1, }, - undefined, ] } > @@ -102294,7 +99125,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -102304,11 +99135,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -102323,7 +99149,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -102460,7 +99285,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -102470,11 +99295,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -102489,7 +99309,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -102626,7 +99445,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -102636,11 +99455,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -102655,7 +99469,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -102842,7 +99655,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa { "aspectRatio": 1, }, - undefined, ] } > @@ -102856,7 +99668,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -102866,11 +99678,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -102885,7 +99692,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -103022,7 +99828,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -103032,11 +99838,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -103051,7 +99852,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -103188,7 +99988,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -103198,11 +99998,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -103217,7 +100012,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -103404,7 +100198,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa { "aspectRatio": 1, }, - undefined, ] } > @@ -103418,7 +100211,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -103428,11 +100221,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -103447,7 +100235,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -103584,7 +100371,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -103594,11 +100381,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -103613,7 +100395,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -103750,7 +100531,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -103760,11 +100541,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -103779,7 +100555,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -103966,7 +100741,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa { "aspectRatio": 1, }, - undefined, ] } > @@ -103980,7 +100754,7 @@ exports[`Button component tests Button with only icon, size - base, shape - squa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -103990,11 +100764,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -104009,7 +100778,6 @@ exports[`Button component tests Button with only icon, size - base, shape - squa xmlns="http://www.w3.org/2000/svg" > @@ -104146,7 +100914,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -104156,11 +100924,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -104175,7 +100938,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -104312,7 +101074,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -104322,11 +101084,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -104341,7 +101098,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -104528,7 +101284,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -104542,7 +101297,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -104552,11 +101307,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -104571,7 +101321,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -104708,7 +101457,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -104718,11 +101467,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -104737,7 +101481,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -104874,7 +101617,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -104884,11 +101627,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -104903,7 +101641,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -105090,7 +101827,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -105104,7 +101840,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -105114,11 +101850,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -105133,7 +101864,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -105270,7 +102000,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -105280,11 +102010,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -105299,7 +102024,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -105436,7 +102160,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -105446,11 +102170,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -105465,7 +102184,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -105652,7 +102370,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -105666,7 +102383,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -105676,11 +102393,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -105695,7 +102407,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -105832,7 +102543,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -105842,11 +102553,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -105861,7 +102567,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -105998,7 +102703,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -106008,11 +102713,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -106027,7 +102727,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -106214,7 +102913,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -106228,7 +102926,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -106238,11 +102936,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -106257,7 +102950,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -106394,7 +103086,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -106404,11 +103096,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -106423,7 +103110,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -106560,7 +103246,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -106570,11 +103256,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -106589,7 +103270,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -106776,7 +103456,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -106790,7 +103469,7 @@ exports[`Button component tests Button with only icon, size - large, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -106800,11 +103479,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -106819,7 +103493,6 @@ exports[`Button component tests Button with only icon, size - large, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -106956,7 +103629,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -106966,11 +103639,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -106985,7 +103653,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -107122,7 +103789,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -107132,11 +103799,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -107151,7 +103813,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -107338,7 +103999,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -107352,7 +104012,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -107362,11 +104022,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -107381,7 +104036,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -107518,7 +104172,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -107528,11 +104182,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -107547,7 +104196,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -107684,7 +104332,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -107694,11 +104342,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -107713,7 +104356,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -107900,7 +104542,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -107914,7 +104555,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -107924,11 +104565,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -107943,7 +104579,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -108080,7 +104715,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -108090,11 +104725,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -108109,7 +104739,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -108246,7 +104875,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -108256,11 +104885,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -108275,7 +104899,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -108462,7 +105085,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -108476,7 +105098,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -108486,11 +105108,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -108505,7 +105122,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -108642,7 +105258,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -108652,11 +105268,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -108671,7 +105282,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -108808,7 +105418,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -108818,11 +105428,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -108837,7 +105442,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -109024,7 +105628,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -109038,7 +105641,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -109048,11 +105651,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -109067,7 +105665,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -109204,7 +105801,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -109214,11 +105811,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -109233,7 +105825,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -109370,7 +105961,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -109380,11 +105971,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -109399,7 +105985,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -109586,7 +106171,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -109600,7 +106184,7 @@ exports[`Button component tests Button with only icon, size - large, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -109610,11 +106194,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -109629,7 +106208,6 @@ exports[`Button component tests Button with only icon, size - large, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -109766,7 +106344,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -109776,11 +106354,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -109795,7 +106368,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -109932,7 +106504,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -109942,11 +106514,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -109961,7 +106528,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -110148,7 +106714,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -110162,7 +106727,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -110172,11 +106737,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -110191,7 +106751,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -110328,7 +106887,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -110338,11 +106897,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -110357,7 +106911,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -110494,7 +107047,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -110504,11 +107057,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -110523,7 +107071,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -110710,7 +107257,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -110724,7 +107270,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -110734,11 +107280,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -110753,7 +107294,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -110890,7 +107430,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -110900,11 +107440,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -110919,7 +107454,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -111056,7 +107590,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -111066,11 +107600,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -111085,7 +107614,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -111272,7 +107800,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -111286,7 +107813,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -111296,11 +107823,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -111315,7 +107837,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -111452,7 +107973,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -111462,11 +107983,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -111481,7 +107997,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -111618,7 +108133,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -111628,11 +108143,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -111647,7 +108157,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -111834,7 +108343,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -111848,7 +108356,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -111858,11 +108366,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -111877,7 +108380,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -112014,7 +108516,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -112024,11 +108526,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -112043,7 +108540,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -112180,7 +108676,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -112190,11 +108686,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -112209,7 +108700,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -112396,7 +108886,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir { "aspectRatio": 1, }, - undefined, ] } > @@ -112410,7 +108899,7 @@ exports[`Button component tests Button with only icon, size - small, shape - cir meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -112420,11 +108909,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -112439,7 +108923,6 @@ exports[`Button component tests Button with only icon, size - small, shape - cir xmlns="http://www.w3.org/2000/svg" > @@ -112576,7 +109059,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -112586,11 +109069,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -112605,7 +109083,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -112742,7 +109219,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -112752,11 +109229,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -112771,7 +109243,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -112958,7 +109429,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -112972,7 +109442,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -112982,11 +109452,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -113001,7 +109466,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -113138,7 +109602,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -113148,11 +109612,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -113167,7 +109626,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -113304,7 +109762,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -113314,11 +109772,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -113333,7 +109786,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -113520,7 +109972,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -113534,7 +109985,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -113544,11 +109995,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -113563,7 +110009,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -113700,7 +110145,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -113710,11 +110155,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -113729,7 +110169,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -113866,7 +110305,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -113876,11 +110315,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -113895,7 +110329,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -114082,7 +110515,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -114096,7 +110528,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -114106,11 +110538,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -114125,7 +110552,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -114262,7 +110688,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -114272,11 +110698,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -114291,7 +110712,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -114428,7 +110848,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -114438,11 +110858,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -114457,7 +110872,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -114644,7 +111058,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -114658,7 +111071,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -114668,11 +111081,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -114687,7 +111095,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -114824,7 +111231,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -114834,11 +111241,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -114853,7 +111255,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -114990,7 +111391,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -115000,11 +111401,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -115019,7 +111415,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -115206,7 +111601,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ { "aspectRatio": 1, }, - undefined, ] } > @@ -115220,7 +111614,7 @@ exports[`Button component tests Button with only icon, size - small, shape - squ meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -115230,11 +111624,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -115249,7 +111638,6 @@ exports[`Button component tests Button with only icon, size - small, shape - squ xmlns="http://www.w3.org/2000/svg" > @@ -115386,7 +111774,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -115396,11 +111784,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -115415,7 +111798,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -115552,7 +111934,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -115562,11 +111944,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -115581,7 +111958,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -115768,7 +112144,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci { "aspectRatio": 1, }, - undefined, ] } > @@ -115782,7 +112157,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -115792,11 +112167,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -115811,7 +112181,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -115948,7 +112317,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -115958,11 +112327,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -115977,7 +112341,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -116114,7 +112477,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -116124,11 +112487,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -116143,7 +112501,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -116330,7 +112687,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci { "aspectRatio": 1, }, - undefined, ] } > @@ -116344,7 +112700,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -116354,11 +112710,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -116373,7 +112724,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -116510,7 +112860,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -116520,11 +112870,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -116539,7 +112884,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -116676,7 +113020,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -116686,11 +113030,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -116705,7 +113044,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -116892,7 +113230,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci { "aspectRatio": 1, }, - undefined, ] } > @@ -116906,7 +113243,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -116916,11 +113253,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -116935,7 +113267,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -117072,7 +113403,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -117082,11 +113413,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -117101,7 +113427,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -117238,7 +113563,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -117248,11 +113573,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -117267,7 +113587,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -117454,7 +113773,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci { "aspectRatio": 1, }, - undefined, ] } > @@ -117468,7 +113786,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -117478,11 +113796,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -117497,7 +113810,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -117634,7 +113946,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -117644,11 +113956,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -117663,7 +113970,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -117800,7 +114106,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -117810,11 +114116,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -117829,7 +114130,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -118016,7 +114316,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci { "aspectRatio": 1, }, - undefined, ] } > @@ -118030,7 +114329,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -118040,11 +114339,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -118059,7 +114353,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - ci xmlns="http://www.w3.org/2000/svg" > @@ -118196,7 +114489,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -118206,11 +114499,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -118225,7 +114513,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -118362,7 +114649,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -118372,11 +114659,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -118391,7 +114673,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -118578,7 +114859,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq { "aspectRatio": 1, }, - undefined, ] } > @@ -118592,7 +114872,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -118602,11 +114882,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -118621,7 +114896,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -118758,7 +115032,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -118768,11 +115042,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -118787,7 +115056,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -118924,7 +115192,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -118934,11 +115202,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -118953,7 +115216,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -119140,7 +115402,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq { "aspectRatio": 1, }, - undefined, ] } > @@ -119154,7 +115415,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -119164,11 +115425,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -119183,7 +115439,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -119320,7 +115575,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -119330,11 +115585,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#ffffff", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -119349,7 +115599,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -119486,7 +115735,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -119496,11 +115745,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -119515,7 +115759,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -119702,7 +115945,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq { "aspectRatio": 1, }, - undefined, ] } > @@ -119716,7 +115958,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -119726,11 +115968,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -119745,7 +115982,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -119882,7 +116118,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -119892,11 +116128,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#000000", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -119911,7 +116142,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -120048,7 +116278,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -120058,11 +116288,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -120077,7 +116302,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -120264,7 +116488,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq { "aspectRatio": 1, }, - undefined, ] } > @@ -120278,7 +116501,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -120288,11 +116511,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -120307,7 +116525,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -120444,7 +116661,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#2b2e33" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -120454,11 +116671,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#2b2e33", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -120473,7 +116685,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -120610,7 +116821,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -120620,11 +116831,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -120639,7 +116845,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -120826,7 +117031,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq { "aspectRatio": 1, }, - undefined, ] } > @@ -120840,7 +117044,7 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -120850,11 +117054,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq "backgroundColor": "transparent", "borderWidth": 0, }, - { - "color": "#85888e", - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -120869,7 +117068,6 @@ exports[`Button component tests Button with only icon, size - xlarge, shape - sq xmlns="http://www.w3.org/2000/svg" > @@ -121062,7 +117260,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -121134,7 +117331,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -121206,7 +117402,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -121278,7 +117473,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -121355,7 +117549,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -121432,7 +117625,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -121504,7 +117696,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -121576,7 +117767,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -121648,7 +117838,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -121720,7 +117909,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -121792,7 +117980,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -121864,7 +118051,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -121941,7 +118127,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122018,7 +118203,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122090,7 +118274,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122162,7 +118345,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122234,7 +118416,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122306,7 +118487,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122378,7 +118558,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122450,7 +118629,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122527,7 +118705,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122604,7 +118781,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122676,7 +118852,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122748,7 +118923,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122820,7 +118994,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122892,7 +119065,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -122964,7 +119136,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123036,7 +119207,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123113,7 +119283,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123190,7 +119359,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123262,7 +119430,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123334,7 +119501,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123406,7 +119572,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123478,7 +119643,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123550,7 +119714,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123622,7 +119785,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123699,7 +119861,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123776,7 +119937,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123848,7 +120008,6 @@ exports[`Button component tests Button with text, size - base, shape - circle, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -123920,7 +120079,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -123992,7 +120150,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -124064,7 +120221,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -124136,7 +120292,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -124208,7 +120363,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -124285,7 +120439,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -124362,7 +120515,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -124434,7 +120586,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -124506,7 +120657,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -124578,7 +120728,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -124650,7 +120799,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -124722,7 +120870,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -124794,7 +120941,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -124871,7 +121017,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -124948,7 +121093,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125020,7 +121164,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125092,7 +121235,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125164,7 +121306,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125236,7 +121377,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125308,7 +121448,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125380,7 +121519,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125457,7 +121595,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125534,7 +121671,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125606,7 +121742,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125678,7 +121813,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125750,7 +121884,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125822,7 +121955,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125894,7 +122026,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -125966,7 +122097,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126043,7 +122173,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126120,7 +122249,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126192,7 +122320,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126264,7 +122391,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126336,7 +122462,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126408,7 +122533,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126480,7 +122604,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126552,7 +122675,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126629,7 +122751,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126706,7 +122827,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126778,7 +122898,6 @@ exports[`Button component tests Button with text, size - base, shape - square, v "paddingVertical": 0, }, false, - undefined, ] } > @@ -126850,7 +122969,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -126922,7 +123040,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -126994,7 +123111,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -127066,7 +123182,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -127138,7 +123253,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -127215,7 +123329,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -127292,7 +123405,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -127364,7 +123476,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -127436,7 +123547,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -127508,7 +123618,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -127580,7 +123689,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -127652,7 +123760,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -127724,7 +123831,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -127801,7 +123907,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -127878,7 +123983,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -127950,7 +124054,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128022,7 +124125,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128094,7 +124196,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128166,7 +124267,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128238,7 +124338,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128310,7 +124409,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128387,7 +124485,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128464,7 +124561,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128536,7 +124632,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128608,7 +124703,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128680,7 +124774,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128752,7 +124845,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128824,7 +124916,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128896,7 +124987,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -128973,7 +125063,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129050,7 +125139,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129122,7 +125210,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129194,7 +125281,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129266,7 +125352,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129338,7 +125423,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129410,7 +125494,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129482,7 +125565,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129559,7 +125641,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129636,7 +125717,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129708,7 +125788,6 @@ exports[`Button component tests Button with text, size - large, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -129780,7 +125859,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -129852,7 +125930,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -129924,7 +126001,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -129996,7 +126072,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -130068,7 +126143,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -130145,7 +126219,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -130222,7 +126295,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -130294,7 +126366,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -130366,7 +126437,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -130438,7 +126508,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -130510,7 +126579,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -130582,7 +126650,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -130654,7 +126721,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -130731,7 +126797,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -130808,7 +126873,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -130880,7 +126944,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -130952,7 +127015,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131024,7 +127086,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131096,7 +127157,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131168,7 +127228,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131240,7 +127299,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131317,7 +127375,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131394,7 +127451,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131466,7 +127522,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131538,7 +127593,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131610,7 +127664,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131682,7 +127735,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131754,7 +127806,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131826,7 +127877,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131903,7 +127953,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -131980,7 +128029,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132052,7 +128100,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132124,7 +128171,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132196,7 +128242,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132268,7 +128313,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132340,7 +128384,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132412,7 +128455,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132489,7 +128531,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132566,7 +128607,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132638,7 +128678,6 @@ exports[`Button component tests Button with text, size - large, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -132710,7 +128749,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -132782,7 +128820,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -132854,7 +128891,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -132926,7 +128962,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -132998,7 +129033,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -133075,7 +129109,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -133152,7 +129185,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -133224,7 +129256,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -133296,7 +129327,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133368,7 +129398,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133440,7 +129469,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133512,7 +129540,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133584,7 +129611,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133661,7 +129687,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133738,7 +129763,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133810,7 +129834,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133882,7 +129905,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -133954,7 +129976,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134026,7 +130047,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134098,7 +130118,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134170,7 +130189,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134247,7 +130265,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134324,7 +130341,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134396,7 +130412,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134468,7 +130483,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134540,7 +130554,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134612,7 +130625,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134684,7 +130696,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134756,7 +130767,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134833,7 +130843,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134910,7 +130919,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -134982,7 +130990,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135054,7 +131061,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135126,7 +131132,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135198,7 +131203,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135270,7 +131274,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135342,7 +131345,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135419,7 +131421,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135496,7 +131497,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135568,7 +131568,6 @@ exports[`Button component tests Button with text, size - small, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -135640,7 +131639,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -135712,7 +131710,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -135784,7 +131781,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -135856,7 +131852,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -135928,7 +131923,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -136005,7 +131999,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -136082,7 +132075,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -136154,7 +132146,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -136226,7 +132217,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136298,7 +132288,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136370,7 +132359,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136442,7 +132430,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136514,7 +132501,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136591,7 +132577,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136668,7 +132653,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136740,7 +132724,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136812,7 +132795,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136884,7 +132866,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -136956,7 +132937,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137028,7 +133008,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137100,7 +133079,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137177,7 +133155,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137254,7 +133231,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137326,7 +133302,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137398,7 +133373,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137470,7 +133444,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137542,7 +133515,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137614,7 +133586,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137686,7 +133657,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137763,7 +133733,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137840,7 +133809,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137912,7 +133880,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -137984,7 +133951,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -138056,7 +134022,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -138128,7 +134093,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -138200,7 +134164,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -138272,7 +134235,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -138349,7 +134311,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -138426,7 +134387,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -138498,7 +134458,6 @@ exports[`Button component tests Button with text, size - small, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -138570,7 +134529,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -138642,7 +134600,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -138714,7 +134671,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -138786,7 +134742,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -138858,7 +134813,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -138935,7 +134889,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -139012,7 +134965,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -139084,7 +135036,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -139156,7 +135107,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139228,7 +135178,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139300,7 +135249,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139372,7 +135320,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139444,7 +135391,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139521,7 +135467,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139598,7 +135543,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139670,7 +135614,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139742,7 +135685,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139814,7 +135756,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139886,7 +135827,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -139958,7 +135898,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140030,7 +135969,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140107,7 +136045,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140184,7 +136121,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140256,7 +136192,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140328,7 +136263,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140400,7 +136334,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140472,7 +136405,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140544,7 +136476,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140616,7 +136547,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140693,7 +136623,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140770,7 +136699,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140842,7 +136770,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140914,7 +136841,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -140986,7 +136912,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -141058,7 +136983,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -141130,7 +137054,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -141202,7 +137125,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -141279,7 +137201,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -141356,7 +137277,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -141428,7 +137348,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - circle, "paddingVertical": 0, }, false, - undefined, ] } > @@ -141500,7 +137419,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -141572,7 +137490,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -141644,7 +137561,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -141716,7 +137632,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -141788,7 +137703,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -141865,7 +137779,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -141942,7 +137855,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -142014,7 +137926,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 3.5, }, false, - undefined, ] } > @@ -142086,7 +137997,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142158,7 +138068,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142230,7 +138139,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142302,7 +138210,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142374,7 +138281,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142451,7 +138357,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142528,7 +138433,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142600,7 +138504,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142672,7 +138575,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142744,7 +138646,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142816,7 +138717,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142888,7 +138788,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -142960,7 +138859,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143037,7 +138935,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143114,7 +139011,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143186,7 +139082,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143258,7 +139153,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143330,7 +139224,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143402,7 +139295,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143474,7 +139366,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143546,7 +139437,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143623,7 +139513,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143700,7 +139589,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143772,7 +139660,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143844,7 +139731,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143916,7 +139802,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -143988,7 +139873,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -144060,7 +139944,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -144132,7 +140015,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -144209,7 +140091,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -144286,7 +140167,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > @@ -144358,7 +140238,6 @@ exports[`Button component tests Button with text, size - xlarge, shape - square, "paddingVertical": 0, }, false, - undefined, ] } > diff --git a/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap index 1c0f2a9..c884e38 100644 --- a/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/ButtonBadge.test.tsx.snap @@ -67,7 +67,6 @@ exports[`ButtonSeverity component tests badge - basic 1`] = ` "paddingVertical": 0, }, false, - undefined, ] } > @@ -238,7 +237,6 @@ exports[`ButtonSeverity component tests badge - dot 1`] = ` "paddingVertical": 0, }, false, - undefined, ] } > diff --git a/src/components/Button/__tests__/__snapshots__/ButtonSeverity.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/ButtonSeverity.test.tsx.snap index faec5f7..57b1b5e 100644 --- a/src/components/Button/__tests__/__snapshots__/ButtonSeverity.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/ButtonSeverity.test.tsx.snap @@ -50,7 +50,6 @@ exports[`ButtonSeverity component tests severity - danger 1`] = ` "paddingVertical": 0, }, false, - undefined, ] } > @@ -122,7 +121,6 @@ exports[`ButtonSeverity component tests severity - info 1`] = ` "paddingVertical": 0, }, false, - undefined, ] } > @@ -194,7 +192,6 @@ exports[`ButtonSeverity component tests severity - success 1`] = ` "paddingVertical": 0, }, false, - undefined, ] } > @@ -266,7 +263,6 @@ exports[`ButtonSeverity component tests severity - warning 1`] = ` "paddingVertical": 0, }, false, - undefined, ] } > diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 1f9d87d..6f3acc3 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -8,7 +8,7 @@ import { } from 'react-native' import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils' -import { StyleSheet } from '../../utils' +import { StyleSheet, SvgUniversal } from '../../utils' type CheckboxState = 'default' | 'danger' @@ -92,8 +92,9 @@ export const Checkbox = memo( > {Icon ? ( - diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap index e4ca822..5cbb35b 100644 --- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap @@ -230,6 +230,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -277,6 +278,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -377,6 +379,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -424,6 +427,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -527,6 +531,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -574,6 +579,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -674,6 +680,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -721,6 +728,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -826,6 +834,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -873,6 +882,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -976,6 +986,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -1023,6 +1034,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 6af29c9..6280ca0 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -70,9 +70,10 @@ export const Chip = memo( onPress={onClose} > {({ pressed }) => ( - diff --git a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap index 3c03cc5..40c37e8 100644 --- a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap @@ -392,6 +392,7 @@ exports[`Chip component tests { }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -439,6 +440,7 @@ exports[`Chip component tests { strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -704,6 +707,7 @@ exports[`Chip component tests { }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -751,6 +755,7 @@ exports[`Chip component tests { strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1070,6 +1076,7 @@ exports[`Chip component tests { }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -1117,6 +1124,7 @@ exports[`Chip component tests { strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1280,6 +1289,7 @@ exports[`Chip component tests { }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -1327,6 +1337,7 @@ exports[`Chip component tests { strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1748,6 +1760,7 @@ exports[`Chip component tests { }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -1795,6 +1808,7 @@ exports[`Chip component tests { strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -2060,6 +2075,7 @@ exports[`Chip component tests { }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -2107,6 +2123,7 @@ exports[`Chip component tests { strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -2426,6 +2444,7 @@ exports[`Chip component tests { }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -2473,6 +2492,7 @@ exports[`Chip component tests { strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -2636,6 +2657,7 @@ exports[`Chip component tests { }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -2683,6 +2705,7 @@ exports[`Chip component tests { strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index b8d4023..3d25180 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -1,5 +1,4 @@ import { - type Icon, IconAlertTriangle, IconCircleCheck, IconCircleX, @@ -10,7 +9,7 @@ import { import { useMemo } from 'react' import { TouchableOpacity, View } from 'react-native' -import { StyleSheet } from '../../utils' +import { StyleSheet, SvgUniversal, type SvgSource } from '../../utils' import { Title } from '../Typography' type Severity = 'danger' | 'warning' | 'info' | 'success' | 'help' @@ -21,7 +20,7 @@ export interface DialogHeaderProps { readonly severity?: Severity } -const iconsMap: Record = { +const iconsMap: Record = { danger: IconCircleX, warning: IconAlertTriangle, info: IconInfoCircle, @@ -39,12 +38,13 @@ export const DialogHeader = ({ const icon = useMemo(() => { if (!severity) return null - const Icon = iconsMap[severity] + const source = iconsMap[severity] return ( - ) @@ -63,9 +63,10 @@ export const DialogHeader = ({ testID={tids.closeButton} onPress={onClose} > - diff --git a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap index add83a1..793348e 100644 --- a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap +++ b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap @@ -40,6 +40,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -87,6 +88,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -197,6 +200,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -244,6 +248,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -322,6 +328,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -369,6 +376,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -501,6 +511,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -548,6 +559,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "help" strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -626,6 +639,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -673,6 +687,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -805,6 +822,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -852,6 +870,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "info" strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -930,6 +950,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -977,6 +998,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1087,6 +1110,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -1134,6 +1158,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "succe strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1212,6 +1238,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -1259,6 +1286,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1391,6 +1421,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -1438,6 +1469,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "warni strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1574,6 +1607,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={14} @@ -1621,6 +1655,7 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1699,6 +1735,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "danger", "title": "Dia }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -1746,6 +1783,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "danger", "title": "Dia strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1845,6 +1884,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "help", "title": "Dialo }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -1892,6 +1932,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "help", "title": "Dialo strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -2013,6 +2056,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "info", "title": "Dialo }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -2060,6 +2104,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "info", "title": "Dialo strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -2181,6 +2228,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "success", "title": "Di }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -2228,6 +2276,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "success", "title": "Di strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -2327,6 +2377,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "warning", "title": "Di }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={21} @@ -2374,6 +2425,7 @@ exports[`DialogHeader {"onClose": undefined, "severity": "warning", "title": "Di strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> diff --git a/src/components/Input/InputTextBase/InputTextBase.tsx b/src/components/Input/InputTextBase/InputTextBase.tsx index 1509108..5c0962e 100644 --- a/src/components/Input/InputTextBase/InputTextBase.tsx +++ b/src/components/Input/InputTextBase/InputTextBase.tsx @@ -35,6 +35,7 @@ import Animated, { import { useLoadingRotationAnimation } from '../../../hooks/useLoadingRotationAnimation' import { useMakeTestId } from '../../../hooks/useMakeTestId' +import { SvgUniversal } from '../../../utils/SvgUniversal' import { InputTextBaseTestId } from './testIds' import type { InputTextBaseProps, RenderTextInputArgs } from './types' @@ -254,6 +255,10 @@ export const InputTextBase = memo< onBlur, onChangeText, onFocus, + styles.inputFont, + styles.floatLabelInput, + styles.input, + styles.inputWithRightContent, ] ) @@ -326,9 +331,10 @@ export const InputTextBase = memo< style={[styles.rightButtonContainer, loadingAnimatedStyle]} testID={makeTestId(InputTextBaseTestId.loading)} > - @@ -342,9 +348,10 @@ export const InputTextBase = memo< testID={makeTestId(InputTextBaseTestId.clearButton)} onPress={clear} > - @@ -357,26 +364,20 @@ export const InputTextBase = memo< testID={makeTestId(InputTextBaseTestId.secureInputButton)} onPress={toggleUserDefinedSecureTextEntry} > - {userDefinedSecureTextEntry ? ( - - ) : ( - - )} + ) : null} {disabled ? ( - diff --git a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap index ddeb7e7..4f2ceaa 100644 --- a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap +++ b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap @@ -56,10 +56,12 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` > (({ ...rest }) => { return ( {({ disabled, pressed }) => ( - (({ ...rest }) => { : styles.icon.color } height={styles.icon.height} + source={IconBan} width={styles.icon.width} /> )} diff --git a/src/components/Rating/RatingItem.tsx b/src/components/Rating/RatingItem.tsx index 671863e..54e967e 100644 --- a/src/components/Rating/RatingItem.tsx +++ b/src/components/Rating/RatingItem.tsx @@ -1,7 +1,7 @@ import { IconStar, IconStarFilled } from '@tabler/icons-react-native' import { memo, useMemo } from 'react' -import { StyleSheet } from '../../utils' +import { StyleSheet, SvgUniversal } from '../../utils' import { RatingItemContainer, @@ -35,7 +35,7 @@ export const RatingItem = memo(({ checked, ...rest }) => { return ( {({ pressed, disabled }) => ( - (({ checked, ...rest }) => { } fillOpacity={checked ? 1 : 0} height={styles.icon.height} + source={Icon} width={styles.icon.width} /> )} diff --git a/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap b/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap index 1847cef..9a97587 100644 --- a/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap +++ b/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap @@ -80,6 +80,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -127,6 +128,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -222,6 +225,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -265,6 +269,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -338,6 +343,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -381,6 +387,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -454,6 +461,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -497,6 +505,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -571,6 +580,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -630,6 +640,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -704,6 +715,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -763,6 +775,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -850,6 +863,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -897,6 +911,7 @@ exports[`Rating component tests renders the correct number of checked items - $r strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -992,6 +1008,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1035,6 +1052,7 @@ exports[`Rating component tests renders the correct number of checked items - $r } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1108,6 +1126,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1151,6 +1170,7 @@ exports[`Rating component tests renders the correct number of checked items - $r } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1224,6 +1244,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1267,6 +1288,7 @@ exports[`Rating component tests renders the correct number of checked items - $r } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1341,6 +1363,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1400,6 +1423,7 @@ exports[`Rating component tests renders the correct number of checked items - $r strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1474,6 +1498,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1533,6 +1558,7 @@ exports[`Rating component tests renders the correct number of checked items - $r strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1620,6 +1646,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1667,6 +1694,7 @@ exports[`Rating component tests renders the correct number of checked items - $r strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1762,6 +1791,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1805,6 +1835,7 @@ exports[`Rating component tests renders the correct number of checked items - $r } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1878,6 +1909,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1921,6 +1953,7 @@ exports[`Rating component tests renders the correct number of checked items - $r } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1994,6 +2027,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -2037,6 +2071,7 @@ exports[`Rating component tests renders the correct number of checked items - $r } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -2110,6 +2145,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -2153,6 +2189,7 @@ exports[`Rating component tests renders the correct number of checked items - $r } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -2227,6 +2264,7 @@ exports[`Rating component tests renders the correct number of checked items - $r }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -2286,6 +2324,7 @@ exports[`Rating component tests renders the correct number of checked items - $r strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> diff --git a/src/components/Rating/__tests__/__snapshots__/RatingClear.test.tsx.snap b/src/components/Rating/__tests__/__snapshots__/RatingClear.test.tsx.snap index e08b483..798f0ac 100644 --- a/src/components/Rating/__tests__/__snapshots__/RatingClear.test.tsx.snap +++ b/src/components/Rating/__tests__/__snapshots__/RatingClear.test.tsx.snap @@ -70,6 +70,7 @@ exports[`RatingItem component tests checked - $checked, disabled - false, presse }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -117,6 +118,7 @@ exports[`RatingItem component tests checked - $checked, disabled - false, presse strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -218,6 +221,7 @@ exports[`RatingItem component tests checked - $checked, disabled - false, presse }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -265,6 +269,7 @@ exports[`RatingItem component tests checked - $checked, disabled - false, presse strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -363,6 +369,7 @@ exports[`RatingItem component tests checked - $checked, disabled - false, presse }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -410,6 +417,7 @@ exports[`RatingItem component tests checked - $checked, disabled - false, presse strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -511,6 +520,7 @@ exports[`RatingItem component tests checked - $checked, disabled - false, presse }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -558,6 +568,7 @@ exports[`RatingItem component tests checked - $checked, disabled - false, presse strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -656,6 +668,7 @@ exports[`RatingItem component tests checked - $checked, disabled - true, pressed }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -703,6 +716,7 @@ exports[`RatingItem component tests checked - $checked, disabled - true, pressed strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -804,6 +819,7 @@ exports[`RatingItem component tests checked - $checked, disabled - true, pressed }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -851,6 +867,7 @@ exports[`RatingItem component tests checked - $checked, disabled - true, pressed strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -949,6 +967,7 @@ exports[`RatingItem component tests checked - $checked, disabled - true, pressed }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -996,6 +1015,7 @@ exports[`RatingItem component tests checked - $checked, disabled - true, pressed strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1097,6 +1118,7 @@ exports[`RatingItem component tests checked - $checked, disabled - true, pressed }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1144,6 +1166,7 @@ exports[`RatingItem component tests checked - $checked, disabled - true, pressed strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> diff --git a/src/components/Rating/__tests__/__snapshots__/RatingItem.test.tsx.snap b/src/components/Rating/__tests__/__snapshots__/RatingItem.test.tsx.snap index 58c1539..85b90c7 100644 --- a/src/components/Rating/__tests__/__snapshots__/RatingItem.test.tsx.snap +++ b/src/components/Rating/__tests__/__snapshots__/RatingItem.test.tsx.snap @@ -70,6 +70,7 @@ exports[`RatingItem component tests checked - false, disabled - false, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -129,6 +130,7 @@ exports[`RatingItem component tests checked - false, disabled - false, pressed - strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -208,6 +210,7 @@ exports[`RatingItem component tests checked - false, disabled - false, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -267,6 +270,7 @@ exports[`RatingItem component tests checked - false, disabled - false, pressed - strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -343,6 +347,7 @@ exports[`RatingItem component tests checked - false, disabled - false, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -402,6 +407,7 @@ exports[`RatingItem component tests checked - false, disabled - false, pressed - strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -481,6 +487,7 @@ exports[`RatingItem component tests checked - false, disabled - false, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -540,6 +547,7 @@ exports[`RatingItem component tests checked - false, disabled - false, pressed - strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -616,6 +624,7 @@ exports[`RatingItem component tests checked - false, disabled - true, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -675,6 +684,7 @@ exports[`RatingItem component tests checked - false, disabled - true, pressed - strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -754,6 +764,7 @@ exports[`RatingItem component tests checked - false, disabled - true, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -813,6 +824,7 @@ exports[`RatingItem component tests checked - false, disabled - true, pressed - strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -889,6 +901,7 @@ exports[`RatingItem component tests checked - false, disabled - true, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -948,6 +961,7 @@ exports[`RatingItem component tests checked - false, disabled - true, pressed - strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1027,6 +1041,7 @@ exports[`RatingItem component tests checked - false, disabled - true, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1086,6 +1101,7 @@ exports[`RatingItem component tests checked - false, disabled - true, pressed - strokeLinecap={1} strokeLinejoin={1} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1161,6 +1177,7 @@ exports[`RatingItem component tests checked - true, disabled - false, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1204,6 +1221,7 @@ exports[`RatingItem component tests checked - true, disabled - false, pressed - } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1282,6 +1300,7 @@ exports[`RatingItem component tests checked - true, disabled - false, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1325,6 +1344,7 @@ exports[`RatingItem component tests checked - true, disabled - false, pressed - } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1400,6 +1420,7 @@ exports[`RatingItem component tests checked - true, disabled - false, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1443,6 +1464,7 @@ exports[`RatingItem component tests checked - true, disabled - false, pressed - } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1521,6 +1543,7 @@ exports[`RatingItem component tests checked - true, disabled - false, pressed - }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1564,6 +1587,7 @@ exports[`RatingItem component tests checked - true, disabled - false, pressed - } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1639,6 +1663,7 @@ exports[`RatingItem component tests checked - true, disabled - true, pressed - f }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1682,6 +1707,7 @@ exports[`RatingItem component tests checked - true, disabled - true, pressed - f } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1760,6 +1786,7 @@ exports[`RatingItem component tests checked - true, disabled - true, pressed - f }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1803,6 +1830,7 @@ exports[`RatingItem component tests checked - true, disabled - true, pressed - f } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1878,6 +1906,7 @@ exports[`RatingItem component tests checked - true, disabled - true, pressed - t }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -1921,6 +1950,7 @@ exports[`RatingItem component tests checked - true, disabled - true, pressed - t } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> @@ -1999,6 +2029,7 @@ exports[`RatingItem component tests checked - true, disabled - true, pressed - t }, ] } + testID="SvgUniversalComponent" vbHeight={24} vbWidth={24} width={17.5} @@ -2042,6 +2073,7 @@ exports[`RatingItem component tests checked - true, disabled - true, pressed - t } stroke={null} strokeWidth={2} + testID="SvgUniversalComponent" /> diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index b3143d4..9c25a38 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -7,16 +7,13 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa onPressIn={[Function]} onPressOut={[Function]} style={ - [ - { - "alignSelf": "flex-start", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 100, - "borderWidth": 1, - "overflow": "hidden", - }, - undefined, - ] + { + "alignSelf": "flex-start", + "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderRadius": 100, + "borderWidth": 1, + "overflow": "hidden", + } } testID="ToggleButton" > @@ -34,7 +31,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "paddingHorizontal": 10.5, "paddingVertical": 0, }, - false, + {}, ] } testID="ToggleButton.container" @@ -49,7 +46,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#181a1f" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -59,10 +56,6 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -89,7 +82,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -110,7 +104,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -132,7 +127,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -169,16 +165,13 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa onPressIn={[Function]} onPressOut={[Function]} style={ - [ - { - "alignSelf": "flex-start", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 100, - "borderWidth": 1, - "overflow": "hidden", - }, - undefined, - ] + { + "alignSelf": "flex-start", + "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderRadius": 100, + "borderWidth": 1, + "overflow": "hidden", + } } testID="ToggleButton" > @@ -196,7 +189,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "paddingHorizontal": 10.5, "paddingVertical": 0, }, - false, + {}, ] } testID="ToggleButton.container" @@ -227,7 +220,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#181a1f" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -237,10 +230,6 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "backgroundColor": "transparent", "borderWidth": 0, }, - { - "height": 14, - "width": 14, - }, { "flex": 0, "height": 14, @@ -267,7 +256,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -288,7 +278,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -310,7 +301,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -331,16 +323,13 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr onPressIn={[Function]} onPressOut={[Function]} style={ - [ - { - "alignSelf": "flex-start", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 100, - "borderWidth": 1, - "overflow": "hidden", - }, - undefined, - ] + { + "alignSelf": "flex-start", + "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderRadius": 100, + "borderWidth": 1, + "overflow": "hidden", + } } testID="ToggleButton" > @@ -378,7 +367,7 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#181a1f" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -388,10 +377,6 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr "backgroundColor": "transparent", "borderWidth": 0, }, - { - "height": 17.5, - "width": 17.5, - }, { "flex": 0, "height": 17, @@ -418,7 +403,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -439,7 +425,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -461,7 +448,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = tr } stroke={ { - "type": 2, + "payload": 4279769631, + "type": 0, } } strokeLinecap={1} @@ -482,17 +470,14 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal onPressIn={[Function]} onPressOut={[Function]} style={ - [ - { - "alignSelf": "flex-start", - "borderColor": "#a2a5a9", - "borderRadius": 100, - "borderWidth": 1, - "opacity": 0.6, - "overflow": "hidden", - }, - undefined, - ] + { + "alignSelf": "flex-start", + "borderColor": "#a2a5a9", + "borderRadius": 100, + "borderWidth": 1, + "opacity": 0.6, + "overflow": "hidden", + } } testID="ToggleButton" > @@ -510,7 +495,7 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal "paddingHorizontal": 21, "paddingVertical": 0, }, - false, + {}, ] } testID="ToggleButton.container" @@ -525,7 +510,7 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#85888e" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -535,10 +520,6 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal "backgroundColor": "transparent", "borderWidth": 0, }, - { - "height": 21, - "width": 21, - }, { "flex": 0, "height": 21, @@ -565,7 +546,8 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal } stroke={ { - "type": 2, + "payload": 4286941326, + "type": 0, } } strokeLinecap={1} @@ -586,7 +568,8 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal } stroke={ { - "type": 2, + "payload": 4286941326, + "type": 0, } } strokeLinecap={1} @@ -608,7 +591,8 @@ exports[`ToggleButton snapshots checked = false, disabled = true, iconOnly = fal } stroke={ { - "type": 2, + "payload": 4286941326, + "type": 0, } } strokeLinecap={1} @@ -645,18 +629,13 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal onPressIn={[Function]} onPressOut={[Function]} style={ - [ - { - "alignSelf": "flex-start", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 100, - "borderWidth": 1, - "overflow": "hidden", - }, - { - "margin": 10, - }, - ] + { + "alignSelf": "flex-start", + "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderRadius": 100, + "borderWidth": 1, + "overflow": "hidden", + } } testID="ToggleButton" > @@ -694,7 +673,7 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal meetOrSlice={0} minX={0} minY={0} - stroke="currentColor" + stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} @@ -704,10 +683,6 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal "backgroundColor": "transparent", "borderWidth": 0, }, - { - "height": 31.5, - "width": 31.5, - }, { "flex": 0, "height": 31, @@ -734,7 +709,8 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal } stroke={ { - "type": 2, + "payload": 4294967295, + "type": 0, } } strokeLinecap={1} @@ -755,7 +731,8 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal } stroke={ { - "type": 2, + "payload": 4294967295, + "type": 0, } } strokeLinecap={1} @@ -777,7 +754,8 @@ exports[`ToggleButton snapshots checked = true, disabled = false, iconOnly = fal } stroke={ { - "type": 2, + "payload": 4294967295, + "type": 0, } } strokeLinecap={1} @@ -798,16 +776,13 @@ exports[`ToggleButton snapshots default 1`] = ` onPressIn={[Function]} onPressOut={[Function]} style={ - [ - { - "alignSelf": "flex-start", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 100, - "borderWidth": 1, - "overflow": "hidden", - }, - undefined, - ] + { + "alignSelf": "flex-start", + "borderColor": "rgba(255, 255, 255, 0.0001)", + "borderRadius": 100, + "borderWidth": 1, + "overflow": "hidden", + } } testID="ToggleButton" > diff --git a/src/utils/SvgUniversal.tsx b/src/utils/SvgUniversal.tsx index c270c0b..f91aab3 100644 --- a/src/utils/SvgUniversal.tsx +++ b/src/utils/SvgUniversal.tsx @@ -1,12 +1,25 @@ -import { type ComponentType, memo } from 'react' +import { + type ComponentType, + type ForwardRefExoticComponent, + type PropsWithoutRef, + type RefAttributes, + memo, +} from 'react' import { SvgUri, SvgXml, type SvgProps } from 'react-native-svg' +import { withUnistyles } from 'react-native-unistyles' + +/** Union type from UnistylesThemes - all possible theme types */ +type UnistylesTheme = unknown + +/** Minimal runtime object from Unistyles */ +type UnistylesMiniRuntime = unknown export type SvgSource = | { uri: string } | { xml: string } | ComponentType -interface SvgUniversalProps extends SvgProps { +export interface SvgUniversalProps extends SvgProps { /** Источник SVG */ source: SvgSource } @@ -17,12 +30,18 @@ interface SvgUniversalProps extends SvgProps { * - uri * - xml * - ComponentType + * + * Подписан на обновления темы Unistyles через uniProps * @example * * ' }} /> * + * ({ color: theme.colors.primary })} + * /> */ -export const SvgUniversal = memo(({ source, ...rest }) => { +const SvgUniversalRaw = memo(({ source, ...rest }) => { if ('uri' in source) { return } @@ -36,6 +55,23 @@ export const SvgUniversal = memo(({ source, ...rest }) => { return }) +type SvgUniversalWithUnistyles = ForwardRefExoticComponent< + PropsWithoutRef< + Partial & { + uniProps?: ( + theme: UnistylesTheme, + rt: UnistylesMiniRuntime + ) => Partial + } + > & + RefAttributes +> + +export const SvgUniversal = withUnistyles< + typeof SvgUniversalRaw, + SvgUniversalProps +>(SvgUniversalRaw) as unknown as SvgUniversalWithUnistyles + export const SvgUniversalTestId = { component: 'SvgUniversalComponent', uri: 'SvgUniversalUri', diff --git a/src/utils/__tests__/SvgUniversal.test.tsx b/src/utils/__tests__/SvgUniversal.test.tsx index b12337b..6ec53a7 100644 --- a/src/utils/__tests__/SvgUniversal.test.tsx +++ b/src/utils/__tests__/SvgUniversal.test.tsx @@ -4,6 +4,10 @@ import { render } from '@testing-library/react-native' import { SvgUniversal, SvgUniversalTestId } from '../SvgUniversal' describe('SvgUniversal', () => { + afterEach(() => { + jest.restoreAllMocks() + }) + describe('при передаче компонента в качестве источника', () => { test('должен отрендерить компонент', () => { const { getAllByTestId } = render() @@ -15,12 +19,18 @@ describe('SvgUniversal', () => { }) describe('при передаче uri в качестве источника', () => { - test('рендерит компонент SvgUri', () => { - const { getByTestId } = render( + test('рендерит компонент SvgUri', async () => { + jest.spyOn(global, 'fetch').mockImplementation().mockResolvedValue({ + ok: true, + text: async () => + '', + }) + + const { findByTestId } = render( ) - expect(getByTestId(SvgUniversalTestId.uri)).toBeOnTheScreen() + await findByTestId(SvgUniversalTestId.uri) }) }) @@ -34,9 +44,3 @@ describe('SvgUniversal', () => { }) }) }) - -jest.mock('react-native-svg', () => ({ - ...jest.requireActual('react-native-svg'), - SvgXml: 'SvgXml', - SvgUri: 'SvgUri', -})) diff --git a/src/utils/index.ts b/src/utils/index.ts index 246238e..6a34128 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -4,3 +4,8 @@ export { useUnistyles, withUnistyles, } from 'react-native-unistyles' +export { + SvgUniversal, + SvgUniversalTestId, + type SvgSource, +} from './SvgUniversal' From 165c5ff0667e91d6310765db47cb16e39864c119 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Wed, 15 Apr 2026 12:50:40 +0500 Subject: [PATCH 12/13] fix: eslint --- .../Input/InputSwitch/styles/useSliderStyles.ts | 9 ++++++++- src/utils/__tests__/SvgUniversal.test.tsx | 14 ++++++++------ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/Input/InputSwitch/styles/useSliderStyles.ts b/src/components/Input/InputSwitch/styles/useSliderStyles.ts index 2a85a60..abe7473 100644 --- a/src/components/Input/InputSwitch/styles/useSliderStyles.ts +++ b/src/components/Input/InputSwitch/styles/useSliderStyles.ts @@ -42,7 +42,14 @@ export const useSliderStyles = ( return sliderOffBg }, - [] + [ + sliderDisabledBg, + sliderOffBg, + sliderOnBg, + sliderOnDisabledBg, + sliderOnPressedBg, + sliderPressedBg, + ] ) const calculateSliderBorderColor = useCallback( diff --git a/src/utils/__tests__/SvgUniversal.test.tsx b/src/utils/__tests__/SvgUniversal.test.tsx index 6ec53a7..9604ad8 100644 --- a/src/utils/__tests__/SvgUniversal.test.tsx +++ b/src/utils/__tests__/SvgUniversal.test.tsx @@ -4,6 +4,8 @@ import { render } from '@testing-library/react-native' import { SvgUniversal, SvgUniversalTestId } from '../SvgUniversal' describe('SvgUniversal', () => { + const svgXmlMock = '' + afterEach(() => { jest.restoreAllMocks() }) @@ -20,17 +22,17 @@ describe('SvgUniversal', () => { describe('при передаче uri в качестве источника', () => { test('рендерит компонент SvgUri', async () => { - jest.spyOn(global, 'fetch').mockImplementation().mockResolvedValue({ - ok: true, - text: async () => - '', - }) + jest + .spyOn(global, 'fetch') + .mockResolvedValue(new Response(svgXmlMock, { status: 200 })) const { findByTestId } = render( ) - await findByTestId(SvgUniversalTestId.uri) + const svgUri = await findByTestId(SvgUniversalTestId.uri) + + expect(svgUri).toBeOnTheScreen() }) }) From 8247c6f5c67a4f55c613ea3bc765e2fb55dc3447 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D0=B3=D0=BE=D0=B7=D0=B8=D0=BD=20=D0=9D=D0=B8?= =?UTF-8?q?=D0=BA=D0=B8=D1=82=D0=B0=20=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0?= =?UTF-8?q?=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?= Date: Wed, 15 Apr 2026 15:29:57 +0500 Subject: [PATCH 13/13] =?UTF-8?q?fix:=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D1=8F=20skeleton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Skeleton/Skeleton.stories.tsx | 42 +++++++++++--------- src/components/Skeleton/Skeleton.tsx | 14 ++++--- 2 files changed, 32 insertions(+), 24 deletions(-) diff --git a/src/components/Skeleton/Skeleton.stories.tsx b/src/components/Skeleton/Skeleton.stories.tsx index ef1ade5..c3603c6 100644 --- a/src/components/Skeleton/Skeleton.stories.tsx +++ b/src/components/Skeleton/Skeleton.stories.tsx @@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react' import { StyleSheet, View } from 'react-native' +import { SkeletonContextProvider } from '../../utils/SkeletonContext' + import { Skeleton } from './Skeleton' const styles = StyleSheet.create({ @@ -13,27 +15,29 @@ const meta: Meta = { title: 'Misc/Skeleton', component: Skeleton, render: () => ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - + ), } diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx index 36ed750..7682d80 100644 --- a/src/components/Skeleton/Skeleton.tsx +++ b/src/components/Skeleton/Skeleton.tsx @@ -7,7 +7,7 @@ import Animated, { import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg' import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils' -import { StyleSheet } from '../../utils' +import { StyleSheet, useUnistyles } from '../../utils' import { SkeletonContext } from '../../utils/SkeletonContext' interface SkeletonProps extends ViewProps {} @@ -23,6 +23,11 @@ export const Skeleton = memo(({ style, testID, ...rest }) => { unregisterSkeleton, skeletonWidth, } = useContext(SkeletonContext) + const { + theme: { + theme: { Misc }, + }, + } = useUnistyles() const skeletonRef = useRef(null) const skeletonX = useSharedValue(0) @@ -64,17 +69,17 @@ export const Skeleton = memo(({ style, testID, ...rest }) => { @@ -93,7 +98,6 @@ const styles = StyleSheet.create(({ border, theme }) => ({ backgroundColor: theme.Misc.Skeleton.skeletonBg, }, gradientContainer: { position: 'absolute', height: '100%' }, - gradientColor: { backgroundColor: theme.Misc.Skeleton.skeletonAnimationBg }, })) export const SkeletonTestId = {