From 26d28ba62924c9f1d4ef7448a896fb7e8212f6f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Fri, 26 May 2023 08:56:40 +0300 Subject: [PATCH 01/22] feat(button): added mobile and responsive versions component --- packages/button/package.json | 1 + packages/button/src/Component.desktop.tsx | 22 ++ packages/button/src/Component.mobile.tsx | 22 ++ packages/button/src/Component.responsive.tsx | 28 ++ packages/button/src/Component.test.tsx | 3 +- .../base-button}/Component.tsx | 112 +------ .../src/components/base-button/index.ts | 1 + ....module.css => default.desktop.module.css} | 68 +--- packages/button/src/default.mobile.module.css | 145 +++++++++ .../{index.module.css => desktop.module.css} | 16 +- packages/button/src/desktop.ts | 1 + .../button/src/docs/Component.stories.mdx | 2 +- packages/button/src/docs/description.mdx | 129 +++++++- packages/button/src/docs/development.mdx | 12 +- packages/button/src/index.ts | 4 +- ...module.css => inverted.desktop.module.css} | 82 +---- .../button/src/inverted.mobile.module.css | 143 +++++++++ packages/button/src/mobile.module.css | 293 ++++++++++++++++++ packages/button/src/mobile.ts | 1 + packages/button/src/responsive.ts | 1 + packages/button/src/typings.ts | 149 +++++++++ packages/button/src/vars.css | 157 ++++++++++ packages/button/tsconfig.json | 4 +- packages/custom-button/src/Component.tsx | 4 +- packages/plate/src/Component.tsx | 2 +- 25 files changed, 1114 insertions(+), 288 deletions(-) create mode 100644 packages/button/src/Component.desktop.tsx create mode 100644 packages/button/src/Component.mobile.tsx create mode 100644 packages/button/src/Component.responsive.tsx rename packages/button/src/{ => components/base-button}/Component.tsx (70%) create mode 100644 packages/button/src/components/base-button/index.ts rename packages/button/src/{default.module.css => default.desktop.module.css} (64%) create mode 100644 packages/button/src/default.mobile.module.css rename packages/button/src/{index.module.css => desktop.module.css} (90%) create mode 100644 packages/button/src/desktop.ts rename packages/button/src/{inverted.module.css => inverted.desktop.module.css} (63%) create mode 100644 packages/button/src/inverted.mobile.module.css create mode 100644 packages/button/src/mobile.module.css create mode 100644 packages/button/src/mobile.ts create mode 100644 packages/button/src/responsive.ts create mode 100644 packages/button/src/typings.ts create mode 100644 packages/button/src/vars.css diff --git a/packages/button/package.json b/packages/button/package.json index b0d9c49c92..245c3cd72f 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -18,6 +18,7 @@ "react": "^16.9.0 || ^17.0.1 || ^18.0.0" }, "dependencies": { + "@alfalab/core-components-mq": "^4.1.4", "@alfalab/core-components-spinner": "^3.0.5", "@alfalab/hooks": "^1.4.1", "classnames": "^2.3.1", diff --git a/packages/button/src/Component.desktop.tsx b/packages/button/src/Component.desktop.tsx new file mode 100644 index 0000000000..f8f2ab7ff1 --- /dev/null +++ b/packages/button/src/Component.desktop.tsx @@ -0,0 +1,22 @@ +// TODO Вид кнопок зависит от порядка импорта стилей. Исправить!!!. +/* eslint-disable simple-import-sort/imports */ +import React, { forwardRef } from 'react'; + +import { BaseButton } from './components/base-button'; +import { ButtonDesktopProps } from './typings'; + +import styles from './desktop.module.css'; + +import defaultColors from './default.desktop.module.css'; +import invertedColors from './inverted.desktop.module.css'; + +const colorStyles = { + default: defaultColors, + inverted: invertedColors, +}; + +export const ButtonDesktop = forwardRef( + (restProps, ref) => ( + + ), +); diff --git a/packages/button/src/Component.mobile.tsx b/packages/button/src/Component.mobile.tsx new file mode 100644 index 0000000000..c399a5089c --- /dev/null +++ b/packages/button/src/Component.mobile.tsx @@ -0,0 +1,22 @@ +// TODO Вид кнопок зависит от порядка импорта стилей. Исправить!!!. +/* eslint-disable simple-import-sort/imports */ +import React, { forwardRef } from 'react'; + +import { BaseButton } from './components/base-button'; +import { ButtonMobileProps } from './typings'; + +import styles from './mobile.module.css'; + +import defaultColors from './default.mobile.module.css'; +import invertedColors from './inverted.mobile.module.css'; + +const colorStyles = { + default: defaultColors, + inverted: invertedColors, +}; + +export const ButtonMobile = forwardRef( + (restProps, ref) => ( + + ), +); diff --git a/packages/button/src/Component.responsive.tsx b/packages/button/src/Component.responsive.tsx new file mode 100644 index 0000000000..d3484681f0 --- /dev/null +++ b/packages/button/src/Component.responsive.tsx @@ -0,0 +1,28 @@ +import React, { forwardRef } from 'react'; + +import { useMatchMedia } from '@alfalab/core-components-mq'; + +import { isClient } from '../../utils'; + +import { ButtonDesktop } from './Component.desktop'; +import { ButtonMobile } from './Component.mobile'; +import { ButtonResponsiveProps } from './typings'; + +export const ButtonResponsive = forwardRef< + HTMLAnchorElement | HTMLButtonElement, + ButtonResponsiveProps +>(({ children, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => { + const query = `(min-width: ${breakpoint}px)`; + + const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false); + + const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue); + + const Component = isDesktop ? ButtonDesktop : ButtonMobile; + + return ( + + {children} + + ); +}); diff --git a/packages/button/src/Component.test.tsx b/packages/button/src/Component.test.tsx index 5730c216f2..b83c4bf7d9 100644 --- a/packages/button/src/Component.test.tsx +++ b/packages/button/src/Component.test.tsx @@ -7,7 +7,8 @@ import { waitForElementToBeRemoved, } from '@testing-library/react'; -import { Button, ButtonProps, LOADER_MIN_DISPLAY_INTERVAL } from './index'; +import { LOADER_MIN_DISPLAY_INTERVAL } from './components/base-button'; +import { Button, ButtonProps } from './index'; const dataTestId = 'test-id'; diff --git a/packages/button/src/Component.tsx b/packages/button/src/components/base-button/Component.tsx similarity index 70% rename from packages/button/src/Component.tsx rename to packages/button/src/components/base-button/Component.tsx index c3d91f57de..52acf3d8c9 100644 --- a/packages/button/src/Component.tsx +++ b/packages/button/src/components/base-button/Component.tsx @@ -1,10 +1,6 @@ -// TODO Вид кнопок зависит от порядка импорта стилей. Исправить!!!. -/* eslint-disable simple-import-sort/imports */ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, - ElementType, - ReactNode, useEffect, useRef, useState, @@ -15,95 +11,7 @@ import cn from 'classnames'; import { Spinner } from '@alfalab/core-components-spinner'; import { useFocus } from '@alfalab/hooks'; -import styles from './index.module.css'; -import defaultColors from './default.module.css'; -import invertedColors from './inverted.module.css'; - -const colorStyles = { - default: defaultColors, - inverted: invertedColors, -}; - -export type ComponentProps = { - /** - * Тип кнопки - */ - view?: - | 'accent' - | 'primary' - | 'secondary' - | 'tertiary' - | 'outlined' // deprecated - | 'filled' // deprecated - | 'transparent' // deprecated - | 'link' - | 'ghost'; - - /** - * Слот слева - */ - leftAddons?: ReactNode; - - /** - * Слот справа - */ - rightAddons?: ReactNode; - - /** - * Размер компонента - */ - size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl'; - - /** - * Растягивает компонент на ширину контейнера - */ - block?: boolean; - - /** - * Дополнительный класс - */ - className?: string; - - /** - * Выводит ссылку в виде кнопки - */ - href?: string; - - /** - * Позволяет использовать кастомный компонент для кнопки (например Link из роутера) - */ - Component?: ElementType; - - /** - * Идентификатор для систем автоматизированного тестирования - */ - dataTestId?: string; - - /** - * Показать лоадер - */ - loading?: boolean; - - /** - * Не переносить текст кнопки на новую строку - */ - nowrap?: boolean; - - /** - * Набор цветов для компонента - */ - colors?: 'default' | 'inverted'; - - /** - * Дочерние элементы. - */ - children?: ReactNode; -}; - -export type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes; -export type NativeButtonProps = ComponentProps & ButtonHTMLAttributes; - -export type ButtonProps = Partial; +import { BaseButtonProps, ComponentProps } from '../../typings'; /** * Минимальное время отображения лоадера - 500мс, @@ -131,7 +39,7 @@ const logWarning = (view: Required['view']) => { ); }; -export const Button = React.forwardRef( +export const BaseButton = React.forwardRef( ( { children, @@ -148,6 +56,11 @@ export const Button = React.forwardRef .loader { + color: var(--button-spinner-static-color); + } +} + +.primary { + color: var(--button-primary-color); + background-color: var(--button-primary-base-bg-color); + border: 1px solid transparent; + + &:active { + background-color: var(--button-primary-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-primary-color); + } +} + +.secondary { + color: var(--button-secondary-color); + background-color: var(--button-secondary-base-bg-color); + border: 1px solid var(--button-secondary-base-border-color); + + &:active { + background-color: var(--button-secondary-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-default-color); + } +} + +.tertiary { + color: var(--button-tertiary-color); + background-color: var(--button-tertiary-base-bg-color); + border: 1px solid var(--button-tertiary-base-border-color); + + &:active { + background-color: var(--button-tertiary-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-default-color); + } +} + +.link { + color: var(--button-link-base-color); + background-color: transparent; + border: 1px solid transparent; + + &:active { + background-color: var(--button-link-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-default-color); + } +} + +.ghost { + color: var(--button-ghost-base-color); + + &:active { + color: var(--button-ghost-active-color); + } + + & > .loader { + color: var(--button-spinner-default-color); + } +} + +/* Disabled */ + +.component[disabled] { + &.accent { + color: var(--button-accent-disabled-color); + background-color: var(--button-accent-disabled-bg-color); + + &.loading { + background-color: var(--button-accent-base-bg-color); + } + } + + &.primary { + color: var(--button-primary-disabled-color); + background-color: var(--button-primary-disabled-bg-color); + + &.loading { + background-color: var(--button-primary-base-bg-color); + } + } + + &.secondary { + color: var(--button-secondary-disabled-color); + background-color: var(--button-secondary-disabled-bg-color); + border-color: var(--button-secondary-disabled-border-color); + + &.loading { + color: var(--button-secondary-color); + background-color: var(--button-secondary-base-bg-color); + border-color: var(--button-secondary-base-border-color); + } + } + + &.tertiary { + color: var(--button-tertiary-disabled-color); + background-color: var(--button-tertiary-disabled-bg-color); + border-color: var(--button-tertiary-disabled-border-color); + + &.loading { + color: var(--button-tertiary-color); + border-color: var(--button-tertiary-base-border-color); + } + } + + &.link { + color: var(--button-link-disabled-color); + background-color: transparent; + + &.loading { + color: var(--button-link-base-color); + } + } + + &.ghost { + color: var(--button-ghost-disabled-color); + + &.loading { + color: var(--button-ghost-base-color); + } + } +} diff --git a/packages/button/src/index.module.css b/packages/button/src/desktop.module.css similarity index 90% rename from packages/button/src/index.module.css rename to packages/button/src/desktop.module.css index d85022317e..b42a9e53a1 100644 --- a/packages/button/src/index.module.css +++ b/packages/button/src/desktop.module.css @@ -1,18 +1,4 @@ -@import '../../themes/src/default.css'; - -:root { - /* misc */ - --button-font-family: var(--font-family); - --button-font-weight: 500; - - /* border-radius */ - --button-xxs-size-border-radius: 6px; - --button-xs-size-border-radius: var(--border-radius-m); - --button-s-size-border-radius: var(--border-radius-m); - --button-m-size-border-radius: var(--border-radius-l); - --button-l-size-border-radius: var(--border-radius-l); - --button-xl-size-border-radius: var(--border-radius-l); -} +@import './vars.css'; .component { position: relative; diff --git a/packages/button/src/desktop.ts b/packages/button/src/desktop.ts new file mode 100644 index 0000000000..12c7c2339e --- /dev/null +++ b/packages/button/src/desktop.ts @@ -0,0 +1 @@ +export * from './Component.desktop'; diff --git a/packages/button/src/docs/Component.stories.mdx b/packages/button/src/docs/Component.stories.mdx index afbb7e6ab9..3af1b66f20 100644 --- a/packages/button/src/docs/Component.stories.mdx +++ b/packages/button/src/docs/Component.stories.mdx @@ -61,7 +61,7 @@ export const SIZES = ['xxs', 'xs', 's', 'm', 'l', 'xl']; diff --git a/packages/button/src/docs/description.mdx b/packages/button/src/docs/description.mdx index c72f99bdcf..cab2146775 100644 --- a/packages/button/src/docs/description.mdx +++ b/packages/button/src/docs/description.mdx @@ -23,6 +23,20 @@ +//MOBILE + + Accent + + Primary + + Secondary + + Tertiary + + Link + + Ghost + ``` ## Размеры @@ -38,13 +52,28 @@ render( {SIZES.map((size) => ( ))} , ); +//MOBILE +const SIZES = ['xl', 'l', 'm', 's', 'xs', 'xxs']; + +render( + + {SIZES.map((size) => ( + <> + + {`${size.toUpperCase()}-size`} + + + + ))} + +); ``` ## Ширина @@ -56,18 +85,18 @@ render( - + 0 - + Очень длинный лейбл
- + ``` @@ -122,6 +151,50 @@ render(() => { ); }); +//MOBILE +render(() => { + const [label, setLabel] = React.useState(true); + const [leftAddons, setLeftAddonsl] = React.useState(false); + const [rightAddons, setRightAddons] = React.useState(false); + + const handleLabelChange = () => setLabel(!label); + const handleLeftAddonsChange = () => setLeftAddonsl(!leftAddons); + const handleRightAddonsChange = () => setRightAddons(!rightAddons); + + return ( + + + } + rightAddons={rightAddons && } + view='primary' + block={true} + > + {label && 'Label'} + + + + Label} checked={label} onChange={handleLabelChange} /> + + + + LeftAddons} + checked={leftAddons} + onChange={handleLeftAddonsChange} + /> + + + + RightAddons} + checked={rightAddons} + onChange={handleRightAddonsChange} + /> + + + ); +}); ``` ## Перенос текста внутри кнопки @@ -137,9 +210,9 @@ render(() => { return (
- +
{ ); }); +//MOBILE +render(() => { + const [loading, setLoading] = React.useState({ + primary: false, + secondary: false, + }); + + const handleClick = (buttonName, timeout) => { + setLoading({ ...loading, [buttonName]: true }); + setTimeout(() => { + setLoading({ ...loading, [buttonName]: false }); + }, timeout); + }; + + return ( + + handleClick('primary', 30)} + > + Быстрый запрос (30ms) + + + handleClick('secondary', 1500)} + > + Долгий запрос (1500ms) + + + ); +}); ``` ## Кнопка-ссылка @@ -213,6 +322,12 @@ render(() => { +//MOBILE + + + Кнопка-ссылка + + ``` ## Другие кнопки diff --git a/packages/button/src/docs/development.mdx b/packages/button/src/docs/development.mdx index d874f2cb40..b21994bbdb 100644 --- a/packages/button/src/docs/development.mdx +++ b/packages/button/src/docs/development.mdx @@ -1,13 +1,15 @@ import { ArgsTable } from '@storybook/addon-docs'; import { CssVars } from 'storybook/blocks'; -import { Button as ButtonTS } from '../Component'; -import styles from '!!raw-loader!../index.module.css'; -import colorsStyles from '!!raw-loader!../default.module.css'; +import { Button, ButtonResponsive } from '../index'; +import styles from '!!raw-loader!../vars.css'; ## Подключение ```jsx import { Button } from '@alfalab/core-components/button'; +import { ButtonResponsive } from '@alfalab/core-components/button/responsive'; +import { ButtonDesktop } from '@alfalab/core-components/button/desktop'; +import { ButtonMobile } from '@alfalab/core-components/button/mobile'; ``` ## Свойства @@ -17,8 +19,8 @@ import { Button } from '@alfalab/core-components/button'; ``` - + ## Переменные - + diff --git a/packages/button/src/index.ts b/packages/button/src/index.ts index e51a5d2440..ac94f8007c 100644 --- a/packages/button/src/index.ts +++ b/packages/button/src/index.ts @@ -1 +1,3 @@ -export * from './Component'; +export { ButtonDesktop as Button } from './Component.desktop'; +export { ButtonResponsive } from './Component.responsive'; +export type { ButtonDesktopProps as ButtonProps, ButtonResponsiveProps } from './typings'; diff --git a/packages/button/src/inverted.module.css b/packages/button/src/inverted.desktop.module.css similarity index 63% rename from packages/button/src/inverted.module.css rename to packages/button/src/inverted.desktop.module.css index 6b7d3d8701..bdacdd4a5e 100644 --- a/packages/button/src/inverted.module.css +++ b/packages/button/src/inverted.desktop.module.css @@ -1,84 +1,4 @@ -@import '../../themes/src/default.css'; - -:root { - /* primary */ - --button-inverted-primary-base-bg-color: var(--color-light-bg-secondary); - --button-inverted-primary-hover-bg-color: var(--color-light-bg-secondary-shade-7); - --button-inverted-primary-active-bg-color: var(--color-light-bg-secondary-shade-15); - --button-inverted-primary-disabled-bg-color: var( - --color-light-specialbg-secondary-transparent-inverted - ); - --button-inverted-primary-disabled-color: var(--color-light-text-tertiary-inverted); - --button-inverted-primary-color: var(--color-light-text-primary); - - /* accent */ - --button-inverted-accent-base-bg-color: var(--color-light-bg-accent); - --button-inverted-accent-hover-bg-color: var(--color-light-bg-accent-tint-15); - --button-inverted-accent-active-bg-color: var(--color-light-bg-accent-tint-20); - --button-inverted-accent-disabled-bg-color: var( - --color-light-specialbg-secondary-transparent-inverted - ); - --button-inverted-accent-disabled-color: var(--color-light-text-tertiary-inverted); - --button-inverted-accent-color: var(--color-static-text-primary-light); - - /* secondary */ - --button-inverted-secondary-base-bg-color: var( - --color-light-specialbg-tertiary-transparent-inverted - ); - --button-inverted-secondary-hover-bg-color: var( - --color-light-specialbg-tertiary-transparent-inverted-tint-15 - ); - --button-inverted-secondary-active-bg-color: var( - --color-light-specialbg-tertiary-transparent-inverted-tint-20 - ); - --button-inverted-secondary-disabled-bg-color: var( - --color-light-specialbg-secondary-transparent-inverted - ); - --button-inverted-secondary-base-border-color: transparent; - --button-inverted-secondary-disabled-border-color: transparent; - --button-inverted-secondary-color: var(--color-light-text-primary-inverted); - --button-inverted-secondary-disabled-color: var(--color-light-text-tertiary-inverted); - - /* tertiary */ - --button-inverted-tertiary-base-bg-color: transparent; - --button-inverted-tertiary-hover-bg-color: var(--color-light-bg-primary-alpha-15); - --button-inverted-tertiary-active-bg-color: var(--color-light-bg-primary-alpha-20); - --button-inverted-tertiary-hover-border-color: var(--color-light-border-underline); - --button-inverted-tertiary-disabled-bg-color: transparent; - --button-inverted-tertiary-base-border-color: var(--color-light-border-underline); - --button-inverted-tertiary-disabled-border-color: var(--color-light-graphic-tertiary-inverted); - --button-inverted-tertiary-color: var(--color-light-text-primary-inverted); - --button-inverted-tertiary-disabled-color: var(--color-light-text-tertiary-inverted); - - /* outlined */ - --button-inverted-outlined-base-bg-color: transparent; - --button-inverted-outlined-hover-bg-color: rgba(255, 255, 255, 0.15); - --button-inverted-outlined-active-bg-color: rgba(0, 0, 0, 0.15); - --button-inverted-outlined-disabled-bg-color: transparent; - --button-inverted-outlined-base-border-color: var(--color-light-border-underline-inverted); - --button-inverted-outlined-disabled-border-color: color-mod( - var(--color-dark-border-tertiary) alpha(30%) - ); - --button-inverted-outlined-color: var(--color-dark-text-primary); - --button-inverted-outlined-disabled-color: color-mod(var(--color-dark-text-primary) alpha(30%)); - - /* ghost */ - --button-inverted-ghost-base-color: var(--color-light-text-primary-inverted); - --button-inverted-ghost-hover-color: var(--color-light-text-primary-inverted-shade-24); - --button-inverted-ghost-active-color: var(--color-light-text-primary-inverted-shade-40); - --button-inverted-ghost-disabled-color: var(--color-light-text-tertiary-inverted); - - /* link */ - --button-inverted-link-base-color: var(--color-light-text-primary-inverted); - --button-inverted-link-hover-bg-color: var(--color-light-bg-primary-alpha-15); - --button-inverted-link-active-bg-color: var(--color-light-bg-primary-alpha-20); - --button-inverted-link-disabled-color: var(--color-light-text-tertiary-inverted); - - /* loader */ - --button-spinner-static-color: var(--color-static-graphic-light); - --button-spinner-inverted-color: var(--color-light-graphic-primary-inverted); - --button-spinner-inverted-primary-color: var(--color-light-graphic-primary); -} +@import './vars.css'; .accent { color: var(--button-inverted-accent-color); diff --git a/packages/button/src/inverted.mobile.module.css b/packages/button/src/inverted.mobile.module.css new file mode 100644 index 0000000000..1da389e525 --- /dev/null +++ b/packages/button/src/inverted.mobile.module.css @@ -0,0 +1,143 @@ +@import './vars.css'; + +.accent { + color: var(--button-inverted-accent-color); + background-color: var(--button-inverted-accent-base-bg-color); + border: 1px solid transparent; + + &:active { + background-color: var(--button-inverted-accent-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-static-color); + } +} + +.primary { + color: var(--button-inverted-primary-color); + background-color: var(--button-inverted-primary-base-bg-color); + border: 1px solid transparent; + + &:active { + background-color: var(--button-inverted-primary-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-inverted-primary-color); + } +} + +.secondary { + color: var(--button-inverted-secondary-color); + background-color: var(--button-inverted-secondary-base-bg-color); + border: 1px solid var(--button-inverted-secondary-base-border-color); + + &:active { + background-color: var(--button-inverted-secondary-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-inverted-color); + } +} + +.tertiary { + color: var(--button-inverted-tertiary-color); + background-color: var(--button-inverted-tertiary-base-bg-color); + border: 1px solid var(--button-inverted-tertiary-base-border-color); + + &:active { + background-color: var(--button-inverted-tertiary-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-inverted-color); + } +} + +.link { + color: var(--button-inverted-link-base-color); + background-color: transparent; + border: 1px solid transparent; + + &:active { + /* TODO: какой цвет? */ + background-color: var(--button-inverted-link-active-bg-color); + } + + & > .loader { + color: var(--button-spinner-inverted-color); + } +} + +.ghost { + color: var(--button-inverted-ghost-base-color); + + &:active { + color: var(--button-inverted-ghost-active-color); + } + + & > .loader { + color: var(--button-spinner-inverted-color); + } +} + +.component[disabled] { + &.accent { + color: var(--button-inverted-accent-disabled-color); + background-color: var(--button-inverted-accent-disabled-bg-color); + + &.loading { + background-color: var(--button-inverted-accent-base-bg-color); + } + } + + &.primary { + color: var(--button-inverted-primary-disabled-color); + background-color: var(--button-inverted-primary-disabled-bg-color); + + &.loading { + background-color: var(--button-inverted-primary-base-bg-color); + } + } + + &.secondary { + color: var(--button-inverted-secondary-disabled-color); + background-color: var(--button-inverted-secondary-disabled-bg-color); + border-color: var(--button-inverted-secondary-disabled-border-color); + + &.loading { + color: var(--button-inverted-secondary-color); + background-color: var(--button-inverted-secondary-base-bg-color); + border-color: var(--button-inverted-secondary-base-border-color); + } + } + + &.tertiary { + color: var(--button-inverted-tertiary-disabled-color); + background-color: var(--button-inverted-tertiary-disabled-bg-color); + border-color: var(--button-inverted-tertiary-disabled-border-color); + + &.loading { + color: var(--button-inverted-tertiary-color); + } + } + + &.link { + color: var(--button-inverted-link-disabled-color); + background-color: transparent; + + &.loading { + color: var(--button-inverted-link-base-color); + } + } + + &.ghost { + color: var(--button-inverted-ghost-disabled-color); + + &.loading { + color: var(--button-inverted-ghost-base-color); + } + } +} diff --git a/packages/button/src/mobile.module.css b/packages/button/src/mobile.module.css new file mode 100644 index 0000000000..5ed104f04f --- /dev/null +++ b/packages/button/src/mobile.module.css @@ -0,0 +1,293 @@ +@import './vars.css'; + +.component { + position: relative; + display: inline-flex; + vertical-align: middle; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-content: center; + align-items: center; + margin: 0; + padding: 0 23px; + line-height: 20px; + font-weight: var(--button-font-weight); + font-family: var(--font-family); + text-align: center; + text-decoration: none; + background-color: transparent; + border: 0; + outline: none; + box-shadow: none; + user-select: none; + cursor: pointer; + transition: background 0.2s ease, border 0.2s ease, color 0.2s ease, transform 0.12s ease; + box-sizing: border-box; + will-change: transform; +} + +.focused { + @mixin focus-outline; +} + +.loading .text, +.loading .addons { + opacity: 0; +} + +.stretchText { + flex-grow: 1; +} + +.loader { + position: absolute; + left: 0; + right: 0; + margin: 0 auto; +} + +/* Size */ + +/* За счет того, что у кнопок есть border 1px, +для полного соответствия макетам padding необходимо уменьшить на 1px (16px -> 15px) */ +.xxs { + min-width: 80px; + min-height: var(--size-xxs-height); + padding: 0 15px; + font-size: 14px; + border-radius: var(--border-radius-m); + + &.iconOnly { + min-width: var(--size-xxs-height); + } +} + +.xs { + min-width: 88px; + min-height: var(--size-xs-height); + padding: 0 19px; + font-size: 14px; + border-radius: var(--border-radius-l); + + &.iconOnly { + min-width: var(--size-xs-height); + } +} + +.s { + min-width: 104px; + min-height: var(--size-s-height); + font-size: 16px; + line-height: 24px; + border-radius: var(--border-radius-l); + + &.iconOnly { + min-width: var(--size-s-height); + } +} + +.m { + min-width: 128px; + min-height: var(--size-m-height); + padding: 0 27px; + font-size: 16px; + line-height: 24px; + border-radius: var(--border-radius-xl); + + &.iconOnly { + min-width: var(--size-m-height); + } +} + +.l { + min-width: 160px; + min-height: var(--size-l-height); + padding: 0 31px; + font-size: 18px; + line-height: 24px; + border-radius: var(--border-radius-xl); + + &.iconOnly { + min-width: var(--size-l-height); + } +} + +.xl { + min-width: 168px; + min-height: var(--size-xl-height); + padding: 0 35px; + font-size: 18px; + line-height: 24px; + border-radius: var(--border-radius-xl); + + &.iconOnly { + min-width: var(--size-xl-height); + } +} + +.withRightAddons { + &.xxs { + padding-right: 11px; + } + + &.xs { + padding-right: 15px; + } + + &.s { + padding-right: 19px; + } + + &.m { + padding-right: 23px; + } + + &.l { + padding-right: 27px; + } + + &.xl { + padding-right: 31px; + } + + &.ghost { + padding-right: 0; + } +} + +.withLeftAddons { + &.xxs { + padding-left: 11px; + } + + &.xs { + padding-left: 15px; + } + + &.s { + padding-left: 19px; + } + + &.m { + padding-left: 23px; + } + + &.l { + padding-left: 27px; + } + + &.xl { + padding-left: 31px; + } + + &.ghost { + padding-left: 0; + } +} + +.link { + min-width: 0; +} + +.ghost { + min-width: 0; + min-height: 0; + padding: 0; + border: none; + appearance: none; + + &.iconOnly { + min-width: 0; + } +} + +/* Disabled */ + +.component[disabled] { + cursor: var(--disabled-cursor); + + & * { + pointer-events: none; + } +} + +/* Addons */ + +.addons { + display: flex; + flex-shrink: 0; + align-items: center; + margin: 0; + + &:first-child { + margin-right: var(--gap-2xs); + } + + &:last-child { + margin-left: var(--gap-2xs); + } + + &:only-child { + margin: 0; + } +} + +.s, +.m { + & .addons:first-child { + margin-right: var(--gap-xs); + } + + & .addons:last-child { + margin-left: var(--gap-xs); + } + + & .addons:only-child { + margin: 0; + } +} + +.l, +.xl { + & .addons:first-child { + margin-right: var(--gap-s); + } + + & .addons:last-child { + margin-left: var(--gap-s); + } + + & .addons:only-child { + margin: 0; + } +} + +.iconOnly { + padding: 0; +} + +/* Block */ + +.block { + display: flex; + width: 100%; +} + +/* Nowrap */ + +.nowrap { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +/* IE min-height fix */ + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .component:after { + min-height: inherit; + font-size: 0; + content: ''; + } +} diff --git a/packages/button/src/mobile.ts b/packages/button/src/mobile.ts new file mode 100644 index 0000000000..b9fe097b67 --- /dev/null +++ b/packages/button/src/mobile.ts @@ -0,0 +1 @@ +export * from './Component.mobile'; diff --git a/packages/button/src/responsive.ts b/packages/button/src/responsive.ts new file mode 100644 index 0000000000..6e49866c64 --- /dev/null +++ b/packages/button/src/responsive.ts @@ -0,0 +1 @@ +export * from './Component.responsive'; diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts new file mode 100644 index 0000000000..6bf6c3d426 --- /dev/null +++ b/packages/button/src/typings.ts @@ -0,0 +1,149 @@ +import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react'; + +export type StyleColors = { + default: { + [key: string]: string; + }; + inverted: { + [key: string]: string; + }; +}; + +/** + * Для отображения в сторибуке + */ +// BaseButton.defaultProps = { + +// view: 'secondary', + +/* + * size: 'm', + * block: false, + * loading: false, + * nowrap: false, + * }; + */ + +export type ComponentProps = { + /** + * Тип кнопки + * @default secondary + */ + view?: + | 'accent' + | 'primary' + | 'secondary' + | 'tertiary' + | 'outlined' // deprecated + | 'filled' // deprecated + | 'transparent' // deprecated + | 'link' + | 'ghost'; + + /** + * Слот слева + */ + leftAddons?: ReactNode; + + /** + * Слот справа + */ + rightAddons?: ReactNode; + + /** + * Размер компонента + * @default m + */ + size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl'; + + /** + * Растягивает компонент на ширину контейнера + * @default false + */ + block?: boolean; + + /** + * Дополнительный класс + */ + className?: string; + + /** + * Выводит ссылку в виде кнопки + */ + href?: string; + + /** + * Позволяет использовать кастомный компонент для кнопки (например Link из роутера) + */ + Component?: ElementType; + + /** + * Идентификатор для систем автоматизированного тестирования + */ + dataTestId?: string; + + /** + * Показать лоадер + * @default false + */ + loading?: boolean; + + /** + * Не переносить текст кнопки на новую строку + * @default false + */ + nowrap?: boolean; + + /** + * Набор цветов для компонента + */ + colors?: 'default' | 'inverted'; + + /** + * Дочерние элементы. + */ + children?: ReactNode; + + /** + * Основные стили компонента. + */ + styles: { [key: string]: string }; + + /** + * Стили компонента для default и inverted режима. + */ + colorStyles: StyleColors; +}; + +export type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes; +export type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes; +export type BaseButtonProps = Partial; + +export type AnchorButtonProps = Omit & + AnchorHTMLAttributes; +export type NativeButtonProps = Omit & + ButtonHTMLAttributes; + +export type ButtonDesktopProps = Partial; +export type ButtonMobileProps = Partial; + +export type ComponentResponsiveProps = BaseButtonProps & { + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; +}; + +export type ButtonResponsiveProps = Partial & { + /** + * Контрольная точка, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; + + /** + * Значение по-умолчанию для хука useMatchMedia + */ + defaultMatchMediaValue?: boolean | (() => boolean); +}; diff --git a/packages/button/src/vars.css b/packages/button/src/vars.css new file mode 100644 index 0000000000..54b21a76d4 --- /dev/null +++ b/packages/button/src/vars.css @@ -0,0 +1,157 @@ +@import '../../themes/src/default.css'; + +:root { + /* misc */ + --button-font-family: var(--font-family); + --button-font-weight: 500; + + /* border-radius desktop */ + --button-xxs-size-border-radius: 6px; + --button-xs-size-border-radius: var(--border-radius-m); + --button-s-size-border-radius: var(--border-radius-m); + --button-m-size-border-radius: var(--border-radius-l); + --button-l-size-border-radius: var(--border-radius-l); + --button-xl-size-border-radius: var(--border-radius-l); + + /* primary */ + --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted); + --button-primary-hover-bg-color: var(--color-light-bg-secondary-inverted-tint-15); + --button-primary-active-bg-color: var(--color-light-bg-secondary-inverted-tint-20); + --button-primary-disabled-bg-color: var(--color-light-specialbg-secondary-transparent); + --button-primary-color: var(--color-light-text-primary-inverted); + --button-primary-disabled-color: var(--color-light-text-tertiary); + + /* accent */ + --button-accent-base-bg-color: var(--color-light-bg-accent); + --button-accent-hover-bg-color: var(--color-light-bg-accent-shade-7); + --button-accent-active-bg-color: var(--color-light-bg-accent-shade-15); + --button-accent-disabled-bg-color: var(--color-light-specialbg-secondary-transparent); + --button-accent-color: var(--color-static-text-primary-light); + --button-accent-disabled-color: var(--color-light-text-tertiary); + + /* secondary */ + --button-secondary-base-bg-color: var(--color-light-specialbg-tertiary-transparent); + --button-secondary-hover-bg-color: var(--color-light-specialbg-tertiary-transparent-shade-7); + --button-secondary-active-bg-color: var(--color-light-specialbg-tertiary-transparent-shade-15); + --button-secondary-disabled-bg-color: var(--color-light-specialbg-secondary-transparent); + --button-secondary-base-border-color: transparent; + --button-secondary-disabled-border-color: transparent; + --button-secondary-color: var(--color-light-text-primary); + --button-secondary-disabled-color: var(--color-light-text-tertiary); + + /* tertiary */ + --button-tertiary-base-bg-color: transparent; + --button-tertiary-hover-bg-color: var(--color-light-bg-primary-inverted-alpha-7); + --button-tertiary-active-bg-color: var(--color-light-bg-primary-inverted-alpha-15); + --button-tertiary-hover-border-color: var(--color-light-border-tertiary-inverted); + --button-tertiary-disabled-bg-color: transparent; + --button-tertiary-base-border-color: var(--color-light-border-underline-inverted); + --button-tertiary-disabled-border-color: var(--color-light-graphic-tertiary); + --button-tertiary-color: var(--color-light-text-primary); + --button-tertiary-disabled-color: var(--color-light-text-tertiary); + + /* outlined */ + --button-outlined-base-bg-color: transparent; + --button-outlined-hover-bg-color: rgba(0, 0, 0, 0.07); + --button-outlined-active-bg-color: rgba(0, 0, 0, 0.15); + --button-outlined-disabled-bg-color: transparent; + --button-outlined-base-border-color: var(--color-light-border-underline-inverted); + --button-outlined-disabled-border-color: var(--color-light-border-underline-inverted-alpha-30); + --button-outlined-color: var(--color-light-text-primary); + --button-outlined-disabled-color: var(--color-light-text-primary-alpha-30); + + /* ghost */ + --button-ghost-base-color: var(--color-light-text-primary); + --button-ghost-hover-color: var(--color-light-text-primary-tint-24); + --button-ghost-active-color: var(--color-light-text-primary-tint-40); + --button-ghost-disabled-color: var(--color-light-text-tertiary); + + /* link */ + --button-link-base-color: var(--color-light-text-primary); + --button-link-hover-bg-color: var(--color-light-bg-primary-inverted-alpha-7); + --button-link-active-bg-color: var(--color-light-bg-primary-inverted-alpha-15); + --button-link-disabled-color: var(--color-light-text-tertiary); + + /* loader */ + --button-spinner-static-color: var(--color-static-graphic-light); + --button-spinner-primary-color: var(--color-light-graphic-primary-inverted); + --button-spinner-default-color: var(--color-light-graphic-primary); + + /* primary inverted */ + --button-inverted-primary-base-bg-color: var(--color-light-bg-secondary); + --button-inverted-primary-hover-bg-color: var(--color-light-bg-secondary-shade-7); + --button-inverted-primary-active-bg-color: var(--color-light-bg-secondary-shade-15); + --button-inverted-primary-disabled-bg-color: var( + --color-light-specialbg-secondary-transparent-inverted + ); + --button-inverted-primary-disabled-color: var(--color-light-text-tertiary-inverted); + --button-inverted-primary-color: var(--color-light-text-primary); + + /* accent inverted */ + --button-inverted-accent-base-bg-color: var(--color-light-bg-accent); + --button-inverted-accent-hover-bg-color: var(--color-light-bg-accent-tint-15); + --button-inverted-accent-active-bg-color: var(--color-light-bg-accent-tint-20); + --button-inverted-accent-disabled-bg-color: var( + --color-light-specialbg-secondary-transparent-inverted + ); + --button-inverted-accent-disabled-color: var(--color-light-text-tertiary-inverted); + --button-inverted-accent-color: var(--color-static-text-primary-light); + + /* secondary inverted */ + --button-inverted-secondary-base-bg-color: var( + --color-light-specialbg-tertiary-transparent-inverted + ); + --button-inverted-secondary-hover-bg-color: var( + --color-light-specialbg-tertiary-transparent-inverted-tint-15 + ); + --button-inverted-secondary-active-bg-color: var( + --color-light-specialbg-tertiary-transparent-inverted-tint-20 + ); + --button-inverted-secondary-disabled-bg-color: var( + --color-light-specialbg-secondary-transparent-inverted + ); + --button-inverted-secondary-base-border-color: transparent; + --button-inverted-secondary-disabled-border-color: transparent; + --button-inverted-secondary-color: var(--color-light-text-primary-inverted); + --button-inverted-secondary-disabled-color: var(--color-light-text-tertiary-inverted); + + /* tertiary inverted */ + --button-inverted-tertiary-base-bg-color: transparent; + --button-inverted-tertiary-hover-bg-color: var(--color-light-bg-primary-alpha-15); + --button-inverted-tertiary-active-bg-color: var(--color-light-bg-primary-alpha-20); + --button-inverted-tertiary-hover-border-color: var(--color-light-border-underline); + --button-inverted-tertiary-disabled-bg-color: transparent; + --button-inverted-tertiary-base-border-color: var(--color-light-border-underline); + --button-inverted-tertiary-disabled-border-color: var(--color-light-graphic-tertiary-inverted); + --button-inverted-tertiary-color: var(--color-light-text-primary-inverted); + --button-inverted-tertiary-disabled-color: var(--color-light-text-tertiary-inverted); + + /* outlined inverted */ + --button-inverted-outlined-base-bg-color: transparent; + --button-inverted-outlined-hover-bg-color: rgba(255, 255, 255, 0.15); + --button-inverted-outlined-active-bg-color: rgba(0, 0, 0, 0.15); + --button-inverted-outlined-disabled-bg-color: transparent; + --button-inverted-outlined-base-border-color: var(--color-light-border-underline-inverted); + --button-inverted-outlined-disabled-border-color: color-mod( + var(--color-dark-border-tertiary) alpha(30%) + ); + --button-inverted-outlined-color: var(--color-dark-text-primary); + --button-inverted-outlined-disabled-color: color-mod(var(--color-dark-text-primary) alpha(30%)); + + /* ghost inverted */ + --button-inverted-ghost-base-color: var(--color-light-text-primary-inverted); + --button-inverted-ghost-hover-color: var(--color-light-text-primary-inverted-shade-24); + --button-inverted-ghost-active-color: var(--color-light-text-primary-inverted-shade-40); + --button-inverted-ghost-disabled-color: var(--color-light-text-tertiary-inverted); + + /* link inverted */ + --button-inverted-link-base-color: var(--color-light-text-primary-inverted); + --button-inverted-link-hover-bg-color: var(--color-light-bg-primary-alpha-15); + --button-inverted-link-active-bg-color: var(--color-light-bg-primary-alpha-20); + --button-inverted-link-disabled-color: var(--color-light-text-tertiary-inverted); + + /* loader inverted */ + --button-spinner-static-color: var(--color-static-graphic-light); + --button-spinner-inverted-color: var(--color-light-graphic-primary-inverted); + --button-spinner-inverted-primary-color: var(--color-light-graphic-primary); +} diff --git a/packages/button/tsconfig.json b/packages/button/tsconfig.json index 0c73f43535..34817d82a9 100644 --- a/packages/button/tsconfig.json +++ b/packages/button/tsconfig.json @@ -1,5 +1,5 @@ { - "include": ["src", "../../typings"], + "include": ["src", "../../typings", "../utils"], "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "dist", @@ -9,5 +9,5 @@ "@alfalab/core-components-*": ["../*/src"] } }, - "references": [{ "path": "../spinner" }] + "references": [{ "path": "../spinner" }, { "path": "../mq" }] } diff --git a/packages/custom-button/src/Component.tsx b/packages/custom-button/src/Component.tsx index 9388108752..290da844d1 100644 --- a/packages/custom-button/src/Component.tsx +++ b/packages/custom-button/src/Component.tsx @@ -1,14 +1,14 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'; import cn from 'classnames'; -import { Button, ComponentProps as ButtonComponentProps } from '@alfalab/core-components-button'; +import { Button, ButtonProps } from '@alfalab/core-components-button'; import styles from './index.module.css'; const DEFAULT_BUTTON_COLOR = '#FF45C3'; const DEFAULT_CONTENT_COLOR = 'white'; -export type ComponentProps = Omit & { +export type ComponentProps = Omit & { /** * Цвет кнопки */ diff --git a/packages/plate/src/Component.tsx b/packages/plate/src/Component.tsx index 9ade922a8d..b4da4dfd39 100644 --- a/packages/plate/src/Component.tsx +++ b/packages/plate/src/Component.tsx @@ -11,7 +11,7 @@ import React, { import mergeRefs from 'react-merge-refs'; import cn from 'classnames'; -import { ComponentProps as ButtonProps } from '@alfalab/core-components-button'; +import { ButtonProps } from '@alfalab/core-components-button'; import { IconButton } from '@alfalab/core-components-icon-button'; import { useFocus } from '@alfalab/hooks'; import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon'; From b5d5996d7a97dc9739b38c66fd66237d575f472f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Tue, 30 May 2023 11:36:06 +0300 Subject: [PATCH 02/22] feat(button): change files css --- .../src/__snapshots__/Component.test.tsx.snap | 2 +- packages/button/src/Component.desktop.tsx | 17 +- packages/button/src/Component.mobile.tsx | 9 +- packages/button/src/Component.responsive.tsx | 8 +- .../src/__snapshots__/Component.test.tsx.snap | 28 +- .../src/components/base-button/Component.tsx | 5 + .../button/src/default.desktop.module.css | 277 ---------- packages/button/src/default.mobile.module.css | 145 ------ packages/button/src/default.module.css | 279 ++++++++++ packages/button/src/desktop.module.css | 293 ----------- .../{mobile.module.css => index.module.css} | 24 + .../button/src/inverted.desktop.module.css | 278 ---------- .../button/src/inverted.mobile.module.css | 143 ------ packages/button/src/inverted.module.css | 280 ++++++++++ packages/button/src/typings.ts | 13 +- .../src/__snapshots__/Component.test.tsx.snap | 130 ++--- .../src/__snapshots__/Component.test.tsx.snap | 64 +-- .../src/__snapshots__/Component.test.tsx.snap | 484 +++++++++--------- .../src/__snapshots__/Component.test.tsx.snap | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 4 +- .../src/__snapshots__/Component.test.tsx.snap | 20 +- .../src/__snapshots__/Component.test.tsx.snap | 8 +- packages/icon-button/src/Component.tsx | 2 + .../src/__snapshots__/Component.test.tsx.snap | 8 +- packages/icon-button/src/default.module.css | 20 +- packages/icon-button/src/inverted.module.css | 20 +- .../src/__snapshots__/Component.test.tsx.snap | 6 +- .../src/__snapshots__/component.test.tsx.snap | 6 +- .../src/__snapshots__/Component.test.tsx.snap | 2 +- .../src/__snapshots__/component.test.tsx.snap | 62 +-- .../src/__snapshots__/component.test.tsx.snap | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 18 +- 32 files changed, 1054 insertions(+), 1605 deletions(-) delete mode 100644 packages/button/src/default.desktop.module.css delete mode 100644 packages/button/src/default.mobile.module.css create mode 100644 packages/button/src/default.module.css delete mode 100644 packages/button/src/desktop.module.css rename packages/button/src/{mobile.module.css => index.module.css} (89%) delete mode 100644 packages/button/src/inverted.desktop.module.css delete mode 100644 packages/button/src/inverted.mobile.module.css create mode 100644 packages/button/src/inverted.module.css diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap index 9d72e52a63..f8b743aa17 100644 --- a/packages/attach/src/__snapshots__/Component.test.tsx.snap +++ b/packages/attach/src/__snapshots__/Component.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Attach Snapshots tests should match snapshot 1`] = ` class="component s" > + ), ); diff --git a/packages/icon-button/tsconfig.json b/packages/icon-button/tsconfig.json index 7937ec309d..be37f49727 100644 --- a/packages/icon-button/tsconfig.json +++ b/packages/icon-button/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/input-autocomplete/src/Component.mobile.tsx b/packages/input-autocomplete/src/Component.mobile.tsx index 9116fa740d..46f2caf6ec 100644 --- a/packages/input-autocomplete/src/Component.mobile.tsx +++ b/packages/input-autocomplete/src/Component.mobile.tsx @@ -4,7 +4,10 @@ import cn from 'classnames'; import throttle from 'lodash.throttle'; import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet'; -import { Button, ButtonProps } from '@alfalab/core-components-button'; +import { + ButtonDesktop as Button, + ButtonDesktopProps as ButtonProps, +} from '@alfalab/core-components-button/desktop'; import { Input as CoreInput } from '@alfalab/core-components-input'; import { BaseSelectChangePayload, diff --git a/packages/input-autocomplete/src/Component.modal.mobile.tsx b/packages/input-autocomplete/src/Component.modal.mobile.tsx index 631d409e82..5102443379 100644 --- a/packages/input-autocomplete/src/Component.modal.mobile.tsx +++ b/packages/input-autocomplete/src/Component.modal.mobile.tsx @@ -3,7 +3,10 @@ import mergeRefs from 'react-merge-refs'; import cn from 'classnames'; import throttle from 'lodash.throttle'; -import { Button, ButtonProps } from '@alfalab/core-components-button'; +import { + ButtonDesktop as Button, + ButtonDesktopProps as ButtonProps, +} from '@alfalab/core-components-button/desktop'; import { Input as CoreInput } from '@alfalab/core-components-input'; import type { BaseSelectChangePayload, SelectMobileProps } from '@alfalab/core-components-select'; import { SelectModalMobile, SelectModalMobileProps } from '@alfalab/core-components-select/mobile'; diff --git a/packages/input-autocomplete/src/Component.responsive.tsx b/packages/input-autocomplete/src/Component.responsive.tsx index 8d796123c0..f953e83605 100644 --- a/packages/input-autocomplete/src/Component.responsive.tsx +++ b/packages/input-autocomplete/src/Component.responsive.tsx @@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet'; // eslint-disable-next-line @typescript-eslint/no-unused-vars -import { ButtonProps } from '@alfalab/core-components-button'; +import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { BaseSelectProps } from '@alfalab/core-components-select'; import { useMedia } from '@alfalab/hooks'; diff --git a/packages/input-autocomplete/tsconfig.json b/packages/input-autocomplete/tsconfig.json index 6ba661a0e9..cf0174c956 100644 --- a/packages/input-autocomplete/tsconfig.json +++ b/packages/input-autocomplete/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-modal/*": ["../modal/src/*"], "@alfalab/core-components-select/*": ["../select/src/*"], "@alfalab/core-components-*": ["../*/src"] diff --git a/packages/input/src/Component.tsx b/packages/input/src/Component.tsx index 84611cefaf..1ebcf4b3ca 100644 --- a/packages/input/src/Component.tsx +++ b/packages/input/src/Component.tsx @@ -13,7 +13,7 @@ import mergeRefs from 'react-merge-refs'; import cn from 'classnames'; import { Badge } from '@alfalab/core-components-badge'; -import { Button } from '@alfalab/core-components-button'; +import { ButtonDesktop } from '@alfalab/core-components-button/desktop'; import { FormControl } from '@alfalab/core-components-form-control'; import { useFocus } from '@alfalab/hooks'; import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'; @@ -317,7 +317,7 @@ export const Input = React.forwardRef( addonsVisible && ( {clearButtonVisible && ( - + )} {rightAddons} {error && ( diff --git a/packages/input/tsconfig.json b/packages/input/tsconfig.json index 650a3e18e0..b44e6ad660 100644 --- a/packages/input/tsconfig.json +++ b/packages/input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-button/*": ["../button/src/*"], + "@alfalab/core-components-*": ["../*/src"], } }, "references": [{ "path": "../button" }, { "path": "../form-control" }, { "path": "../loader" }, { "path": "../badge" }] diff --git a/packages/navigation-bar/src/components/back-arrow-addon/Component.tsx b/packages/navigation-bar/src/components/back-arrow-addon/Component.tsx index c8b94f9054..9d50b17809 100644 --- a/packages/navigation-bar/src/components/back-arrow-addon/Component.tsx +++ b/packages/navigation-bar/src/components/back-arrow-addon/Component.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cn from 'classnames'; -import { Button } from '@alfalab/core-components-button'; +import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; import { Typography } from '@alfalab/core-components-typography'; import { ArrowLeftMediumMIcon } from '@alfalab/icons-glyph/ArrowLeftMediumMIcon'; import { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon'; diff --git a/packages/navigation-bar/tsconfig.json b/packages/navigation-bar/tsconfig.json index d03f0402b8..1d05df3877 100644 --- a/packages/navigation-bar/tsconfig.json +++ b/packages/navigation-bar/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/notification/src/Component.test.tsx b/packages/notification/src/Component.test.tsx index 1d79215ac2..eb088703aa 100644 --- a/packages/notification/src/Component.test.tsx +++ b/packages/notification/src/Component.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import { Button } from '@alfalab/core-components-button'; +import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; import { Notification } from './index'; diff --git a/packages/notification/tsconfig.json b/packages/notification/tsconfig.json index 4e38e462b5..a6caf2cc8a 100644 --- a/packages/notification/tsconfig.json +++ b/packages/notification/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/pass-code/src/components/KeyPadButton/Component.tsx b/packages/pass-code/src/components/KeyPadButton/Component.tsx index a7b6206d90..851be27a7c 100644 --- a/packages/pass-code/src/components/KeyPadButton/Component.tsx +++ b/packages/pass-code/src/components/KeyPadButton/Component.tsx @@ -1,7 +1,10 @@ import React, { ReactNode } from 'react'; import cn from 'classnames'; -import { Button, ButtonProps } from '@alfalab/core-components-button'; +import { + ButtonDesktop as Button, + ButtonDesktopProps as ButtonProps, +} from '@alfalab/core-components-button/desktop'; import styles from './index.module.css'; diff --git a/packages/pass-code/tsconfig.json b/packages/pass-code/tsconfig.json index 9ae9126920..e393ab2664 100644 --- a/packages/pass-code/tsconfig.json +++ b/packages/pass-code/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/pattern-lock/src/Component.tsx b/packages/pattern-lock/src/Component.tsx index d5634f1035..b40d695711 100644 --- a/packages/pattern-lock/src/Component.tsx +++ b/packages/pattern-lock/src/Component.tsx @@ -3,7 +3,7 @@ import type { Theme, TPatternLockInstance } from 'react-canvas-pattern-lock'; import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock'; import cn from 'classnames'; -import { Button } from '@alfalab/core-components-button'; +import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; import { Gap } from '@alfalab/core-components-gap'; import { getDataTestId } from '../../utils'; diff --git a/packages/pattern-lock/tsconfig.json b/packages/pattern-lock/tsconfig.json index 04b667b639..c796ae4596 100644 --- a/packages/pattern-lock/tsconfig.json +++ b/packages/pattern-lock/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/picker-button/src/Component.responsive.tsx b/packages/picker-button/src/Component.responsive.tsx index 0fdb6c8fd1..87ac854417 100644 --- a/packages/picker-button/src/Component.responsive.tsx +++ b/packages/picker-button/src/Component.responsive.tsx @@ -1,7 +1,7 @@ import React, { forwardRef } from 'react'; // eslint-disable-next-line @typescript-eslint/no-unused-vars -import { ButtonProps } from '@alfalab/core-components-button'; +import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; import { AdditionalMobileProps } from '@alfalab/core-components-select'; import { useMedia } from '@alfalab/hooks'; diff --git a/packages/picker-button/src/Component.tsx b/packages/picker-button/src/Component.tsx index 076b20d8c3..0fea06d931 100644 --- a/packages/picker-button/src/Component.tsx +++ b/packages/picker-button/src/Component.tsx @@ -1,7 +1,7 @@ import React, { FC, forwardRef, SVGProps } from 'react'; import cn from 'classnames'; -import { ButtonProps } from '@alfalab/core-components-button'; +import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; import { BaseSelect, BaseSelectProps, diff --git a/packages/picker-button/src/field/Component.tsx b/packages/picker-button/src/field/Component.tsx index 1228ebbe16..f3b156228f 100644 --- a/packages/picker-button/src/field/Component.tsx +++ b/packages/picker-button/src/field/Component.tsx @@ -1,7 +1,10 @@ import React, { ButtonHTMLAttributes, FC, Fragment, SVGProps } from 'react'; import cn from 'classnames'; -import { Button, ButtonProps } from '@alfalab/core-components-button'; +import { + ButtonDesktop as Button, + ButtonDesktopProps as ButtonProps, +} from '@alfalab/core-components-button/desktop'; import { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/src/typings'; import { PickerButtonSize, PickerButtonVariant } from '../Component'; diff --git a/packages/picker-button/tsconfig.json b/packages/picker-button/tsconfig.json index 2fa1e9f778..d12237a024 100644 --- a/packages/picker-button/tsconfig.json +++ b/packages/picker-button/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-modal/*": ["../modal/src/*"], "@alfalab/core-components-*": ["../*/src"] } diff --git a/packages/plate/src/Component.test.tsx b/packages/plate/src/Component.test.tsx index 99697e5e2c..a910df7d4f 100644 --- a/packages/plate/src/Component.test.tsx +++ b/packages/plate/src/Component.test.tsx @@ -4,7 +4,7 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon' import userEvent from '@testing-library/user-event'; import { Plate, PlateProps } from './index'; -import { Button } from '../../button/src'; +import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; describe('Plate', () => { describe('Snapshots tests', () => { diff --git a/packages/plate/src/Component.tsx b/packages/plate/src/Component.tsx index b4da4dfd39..63947ca01c 100644 --- a/packages/plate/src/Component.tsx +++ b/packages/plate/src/Component.tsx @@ -11,7 +11,7 @@ import React, { import mergeRefs from 'react-merge-refs'; import cn from 'classnames'; -import { ButtonProps } from '@alfalab/core-components-button'; +import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; import { IconButton } from '@alfalab/core-components-icon-button'; import { useFocus } from '@alfalab/hooks'; import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon'; diff --git a/packages/plate/src/components/button-list/component.tsx b/packages/plate/src/components/button-list/component.tsx index 8ae1d8bffa..3303b3d851 100644 --- a/packages/plate/src/components/button-list/component.tsx +++ b/packages/plate/src/components/button-list/component.tsx @@ -1,7 +1,7 @@ import React, { FC, ReactElement, ReactNode } from 'react'; import cn from 'classnames'; -import { ButtonProps } from '@alfalab/core-components-button'; +import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; export type ButtonListProps = { /** diff --git a/packages/plate/tsconfig.json b/packages/plate/tsconfig.json index da34061249..cde5305140 100644 --- a/packages/plate/tsconfig.json +++ b/packages/plate/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/pure-cell/src/component.tsx b/packages/pure-cell/src/component.tsx index cb3af9283e..0f094660d5 100644 --- a/packages/pure-cell/src/component.tsx +++ b/packages/pure-cell/src/component.tsx @@ -11,7 +11,7 @@ import mergeRefs from 'react-merge-refs'; import cn from 'classnames'; // eslint-disable-next-line @typescript-eslint/no-unused-vars -import { ButtonProps } from '@alfalab/core-components-button'; +import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; import { Comment } from '@alfalab/core-components-comment'; import { useFocus } from '@alfalab/hooks'; diff --git a/packages/pure-cell/src/components/footer-button/component.tsx b/packages/pure-cell/src/components/footer-button/component.tsx index 6c6e5b9590..7e9c242d44 100644 --- a/packages/pure-cell/src/components/footer-button/component.tsx +++ b/packages/pure-cell/src/components/footer-button/component.tsx @@ -1,6 +1,9 @@ import React from 'react'; -import { Button, ButtonProps } from '@alfalab/core-components-button'; +import { + ButtonDesktop as Button, + ButtonDesktopProps as ButtonProps, +} from '@alfalab/core-components-button/desktop'; import { getDataTestId } from '../../../../utils/getDataTestId'; diff --git a/packages/pure-cell/tsconfig.json b/packages/pure-cell/tsconfig.json index 6759ba7257..601aebfde9 100644 --- a/packages/pure-cell/tsconfig.json +++ b/packages/pure-cell/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-icon-view/*": ["../icon-view/src/*"] } }, diff --git a/packages/select/src/components/base-select-mobile/footer/Component.tsx b/packages/select/src/components/base-select-mobile/footer/Component.tsx index e765f04d3e..55b953bb7e 100644 --- a/packages/select/src/components/base-select-mobile/footer/Component.tsx +++ b/packages/select/src/components/base-select-mobile/footer/Component.tsx @@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react'; import cn from 'classnames'; import { BaseModalContext } from '@alfalab/core-components-base-modal'; -import { Button } from '@alfalab/core-components-button'; +import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; import styles from './index.module.css'; diff --git a/packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx b/packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx index af0ff49dc4..a36b35c267 100644 --- a/packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx +++ b/packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Button } from '@alfalab/core-components-button'; +import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; import { OptionShape } from '../../../../typings'; diff --git a/packages/select/tsconfig.json b/packages/select/tsconfig.json index 05bd530c91..80201dd7a6 100644 --- a/packages/select/tsconfig.json +++ b/packages/select/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-modal/*": ["../modal/src/*"], "@alfalab/core-components-*": ["../*/src"] } diff --git a/packages/table/src/components/pagination/select-field/index.tsx b/packages/table/src/components/pagination/select-field/index.tsx index c09f9dbac7..6129dca230 100644 --- a/packages/table/src/components/pagination/select-field/index.tsx +++ b/packages/table/src/components/pagination/select-field/index.tsx @@ -1,7 +1,10 @@ import React from 'react'; import cn from 'classnames'; -import { Button, ButtonProps } from '@alfalab/core-components-button'; +import { + ButtonDesktop as Button, + ButtonDesktopProps as ButtonProps, +} from '@alfalab/core-components-button/desktop'; import { SelectProps } from '@alfalab/core-components-select'; import styles from './index.module.css'; diff --git a/packages/table/tsconfig.json b/packages/table/tsconfig.json index ae4625a2f1..91243fd1cb 100644 --- a/packages/table/tsconfig.json +++ b/packages/table/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-modal/*": ["../modal/src/*"], "@alfalab/core-components-*": ["../*/src"] } diff --git a/packages/tooltip/src/component.responsive.tsx b/packages/tooltip/src/component.responsive.tsx index 252c30e618..ba58038815 100644 --- a/packages/tooltip/src/component.responsive.tsx +++ b/packages/tooltip/src/component.responsive.tsx @@ -2,7 +2,7 @@ import React, { FC, Fragment } from 'react'; import cn from 'classnames'; import { BottomSheet, BottomSheetProps } from '@alfalab/core-components-bottom-sheet'; -import { Button } from '@alfalab/core-components-button'; +import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; import { useMedia } from '@alfalab/hooks'; import { TooltipDesktop, TooltipDesktopProps } from './desktop'; diff --git a/packages/tooltip/tsconfig.json b/packages/tooltip/tsconfig.json index ab53dd8b9d..e22cfdd690 100644 --- a/packages/tooltip/tsconfig.json +++ b/packages/tooltip/tsconfig.json @@ -6,6 +6,7 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/tsconfig.json b/tsconfig.json index f6f7b73c66..1f10249a30 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,7 +22,8 @@ "@alfalab/core-components-select/*": ["packages/select/src/*"], "@alfalab/core-components-*": ["packages/*/src"], "@alfalab/core-components-icon-view/*": ["packages/icon-view/src/*"], - "@alfalab/core-components-picker-button/*": ["packages/picker-button/src/*"] + "@alfalab/core-components-picker-button/*": ["packages/picker-button/src/*"], + "@alfalab/core-components-button/*": ["packages/button/src/*"] } }, "exclude": ["node_modules", "dist", "**/*.stories*", "**/*.test*"], From 861b9abfa9f387192bb1a1891a62c83fdb21a7d8 Mon Sep 17 00:00:00 2001 From: Vladimir Date: Wed, 31 May 2023 13:37:56 +0700 Subject: [PATCH 04/22] fix build --- packages/alert/tsconfig.json | 3 ++- packages/amount-input/tsconfig.json | 3 ++- packages/bank-card/tsconfig.json | 9 +++++++-- packages/bottom-sheet/tsconfig.json | 3 ++- packages/calendar-input/tsconfig.json | 1 + packages/calendar-range/tsconfig.json | 1 + packages/calendar-with-skeleton/tsconfig.json | 1 + packages/custom-picker-button/tsconfig.json | 3 ++- packages/date-input/tsconfig.json | 3 ++- packages/date-range-input/tsconfig.json | 3 ++- packages/date-time-input/tsconfig.json | 5 +++-- packages/file-upload-item/tsconfig.json | 9 +++------ packages/gallery/tsconfig.json | 3 ++- packages/intl-phone-input/tsconfig.json | 1 + packages/masked-input/tsconfig.json | 3 ++- packages/modal/tsconfig.json | 3 ++- packages/notification-manager/tsconfig.json | 3 ++- packages/number-input/tsconfig.json | 3 ++- packages/password-input/tsconfig.json | 3 ++- packages/phone-input/tsconfig.json | 3 ++- packages/select-with-tags/tsconfig.json | 3 ++- packages/side-panel/tsconfig.json | 3 ++- packages/slider-input/tsconfig.json | 3 ++- packages/tabs/tsconfig.json | 3 ++- packages/time-input/tsconfig.json | 5 +++-- packages/toast-plate/tsconfig.json | 3 ++- packages/toast/tsconfig.json | 3 ++- packages/with-suffix/tsconfig.json | 3 ++- 28 files changed, 60 insertions(+), 32 deletions(-) diff --git a/packages/alert/tsconfig.json b/packages/alert/tsconfig.json index ca6bc6cbc9..599760f68e 100644 --- a/packages/alert/tsconfig.json +++ b/packages/alert/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../plate" }] diff --git a/packages/amount-input/tsconfig.json b/packages/amount-input/tsconfig.json index 3bb4022bed..c089e448a3 100644 --- a/packages/amount-input/tsconfig.json +++ b/packages/amount-input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../input" }, { "path": "../with-suffix" }] diff --git a/packages/bank-card/tsconfig.json b/packages/bank-card/tsconfig.json index f600cdd05e..bc021efdb0 100644 --- a/packages/bank-card/tsconfig.json +++ b/packages/bank-card/tsconfig.json @@ -6,8 +6,13 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, - "references": [{ "path": "../form-control" }, { "path": "../input" }, { "path": "../masked-input" }] + "references": [ + { "path": "../form-control" }, + { "path": "../input" }, + { "path": "../masked-input" } + ] } diff --git a/packages/bottom-sheet/tsconfig.json b/packages/bottom-sheet/tsconfig.json index 1656a7db20..15585d4112 100644 --- a/packages/bottom-sheet/tsconfig.json +++ b/packages/bottom-sheet/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [ diff --git a/packages/calendar-input/tsconfig.json b/packages/calendar-input/tsconfig.json index 67b836072b..9697d20ea2 100644 --- a/packages/calendar-input/tsconfig.json +++ b/packages/calendar-input/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/calendar-range/tsconfig.json b/packages/calendar-range/tsconfig.json index 226e256023..75eae6a24b 100644 --- a/packages/calendar-range/tsconfig.json +++ b/packages/calendar-range/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/calendar-with-skeleton/tsconfig.json b/packages/calendar-with-skeleton/tsconfig.json index 8e806dcb3d..e2faad91fd 100644 --- a/packages/calendar-with-skeleton/tsconfig.json +++ b/packages/calendar-with-skeleton/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/custom-picker-button/tsconfig.json b/packages/custom-picker-button/tsconfig.json index 0ed50e1044..dfa32519f0 100644 --- a/packages/custom-picker-button/tsconfig.json +++ b/packages/custom-picker-button/tsconfig.json @@ -8,7 +8,8 @@ "paths": { "@alfalab/core-components-*": ["../*/src"], "@alfalab/core-components-modal/*": ["../modal/src/*"], - "@alfalab/core-components-picker-button/*": ["../picker-button/src/*"] + "@alfalab/core-components-picker-button/*": ["../picker-button/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [ diff --git a/packages/date-input/tsconfig.json b/packages/date-input/tsconfig.json index bf1d30fc0f..0512210b22 100644 --- a/packages/date-input/tsconfig.json +++ b/packages/date-input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../input" }] diff --git a/packages/date-range-input/tsconfig.json b/packages/date-range-input/tsconfig.json index 3481a84a8a..ddbd503458 100644 --- a/packages/date-range-input/tsconfig.json +++ b/packages/date-range-input/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, @@ -15,6 +16,6 @@ { "path": "../input" }, { "path": "../icon-button" }, { "path": "../popover" }, - { "path": "../modal" }, + { "path": "../modal" } ] } diff --git a/packages/date-time-input/tsconfig.json b/packages/date-time-input/tsconfig.json index e00669e4d1..bca3e827b2 100644 --- a/packages/date-time-input/tsconfig.json +++ b/packages/date-time-input/tsconfig.json @@ -7,14 +7,15 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, "references": [ - {"path": "../input" }, + { "path": "../input" }, { "path": "../icon-button" }, { "path": "../calendar" }, { "path": "../popover" }, - { "path": "../modal" }, + { "path": "../modal" } ] } diff --git a/packages/file-upload-item/tsconfig.json b/packages/file-upload-item/tsconfig.json index c97e994d37..a91a779a59 100644 --- a/packages/file-upload-item/tsconfig.json +++ b/packages/file-upload-item/tsconfig.json @@ -6,12 +6,9 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, - "references": [ - { "path": "../icon-button" }, - { "path": "../link" }, - { "path": "../spinner" } - ] + "references": [{ "path": "../icon-button" }, { "path": "../link" }, { "path": "../spinner" }] } diff --git a/packages/gallery/tsconfig.json b/packages/gallery/tsconfig.json index d54d858084..7d0d8841af 100644 --- a/packages/gallery/tsconfig.json +++ b/packages/gallery/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [ diff --git a/packages/intl-phone-input/tsconfig.json b/packages/intl-phone-input/tsconfig.json index 666e50b9c7..b0416a7812 100644 --- a/packages/intl-phone-input/tsconfig.json +++ b/packages/intl-phone-input/tsconfig.json @@ -7,6 +7,7 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, diff --git a/packages/masked-input/tsconfig.json b/packages/masked-input/tsconfig.json index bf1d30fc0f..0512210b22 100644 --- a/packages/masked-input/tsconfig.json +++ b/packages/masked-input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../input" }] diff --git a/packages/modal/tsconfig.json b/packages/modal/tsconfig.json index 2ddd289248..16f261d63c 100644 --- a/packages/modal/tsconfig.json +++ b/packages/modal/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [ diff --git a/packages/notification-manager/tsconfig.json b/packages/notification-manager/tsconfig.json index 642f96351a..4424478976 100644 --- a/packages/notification-manager/tsconfig.json +++ b/packages/notification-manager/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../notification" }, { "path": "../portal" }, { "path": "../stack" }] diff --git a/packages/number-input/tsconfig.json b/packages/number-input/tsconfig.json index bf1d30fc0f..0512210b22 100644 --- a/packages/number-input/tsconfig.json +++ b/packages/number-input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../input" }] diff --git a/packages/password-input/tsconfig.json b/packages/password-input/tsconfig.json index 3ce067c831..655eac24b6 100644 --- a/packages/password-input/tsconfig.json +++ b/packages/password-input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../input" }, { "path": "../icon-button" }] diff --git a/packages/phone-input/tsconfig.json b/packages/phone-input/tsconfig.json index c59c5a9db7..39f60d6d4a 100644 --- a/packages/phone-input/tsconfig.json +++ b/packages/phone-input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../masked-input" }] diff --git a/packages/select-with-tags/tsconfig.json b/packages/select-with-tags/tsconfig.json index 0faf646cd3..f900932d81 100644 --- a/packages/select-with-tags/tsconfig.json +++ b/packages/select-with-tags/tsconfig.json @@ -7,8 +7,9 @@ "baseUrl": ".", "paths": { "@alfalab/core-components-modal/*": ["../modal/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"], "@alfalab/core-components-*": ["../*/src"] } }, - "references": [{ "path": "../select" }, { "path": "../input" }, { "path": "../tag" }] + "references": [{ "path": "../select" }, { "path": "../input" }, { "path": "../tag" }] } diff --git a/packages/side-panel/tsconfig.json b/packages/side-panel/tsconfig.json index 99024c95a7..a3b86cb102 100644 --- a/packages/side-panel/tsconfig.json +++ b/packages/side-panel/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [ diff --git a/packages/slider-input/tsconfig.json b/packages/slider-input/tsconfig.json index 68050dc29a..d00629c9a7 100644 --- a/packages/slider-input/tsconfig.json +++ b/packages/slider-input/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../slider" }, { "path": "../input" }] diff --git a/packages/tabs/tsconfig.json b/packages/tabs/tsconfig.json index d6b0ebb9f4..19fbc75d8f 100644 --- a/packages/tabs/tsconfig.json +++ b/packages/tabs/tsconfig.json @@ -8,7 +8,8 @@ "paths": { "@alfalab/core-components-*": ["../*/src"], "@alfalab/core-components-modal/*": ["../modal/src/*"], - "@alfalab/core-components-picker-button/*": ["../picker-button/src/*"] + "@alfalab/core-components-picker-button/*": ["../picker-button/src/*"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [ diff --git a/packages/time-input/tsconfig.json b/packages/time-input/tsconfig.json index 3ce067c831..0512210b22 100644 --- a/packages/time-input/tsconfig.json +++ b/packages/time-input/tsconfig.json @@ -6,8 +6,9 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, - "references": [{ "path": "../input" }, { "path": "../icon-button" }] + "references": [{ "path": "../input" }] } diff --git a/packages/toast-plate/tsconfig.json b/packages/toast-plate/tsconfig.json index 3fc5ab851e..0567e80efc 100644 --- a/packages/toast-plate/tsconfig.json +++ b/packages/toast-plate/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../icon-button" }, { "path": "../badge" }] diff --git a/packages/toast/tsconfig.json b/packages/toast/tsconfig.json index 230ffb6b27..987ac27fb7 100644 --- a/packages/toast/tsconfig.json +++ b/packages/toast/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [ diff --git a/packages/with-suffix/tsconfig.json b/packages/with-suffix/tsconfig.json index 8dab876695..f3ce7e4cc0 100644 --- a/packages/with-suffix/tsconfig.json +++ b/packages/with-suffix/tsconfig.json @@ -6,7 +6,8 @@ "rootDirs": ["src"], "baseUrl": ".", "paths": { - "@alfalab/core-components-*": ["../*/src"] + "@alfalab/core-components-*": ["../*/src"], + "@alfalab/core-components-button/*": ["../button/src/*"] } }, "references": [{ "path": "../input" }, { "path": "../portal" }] From f7241f2f505b9934612ebc4e0f51f347237cb75e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Wed, 31 May 2023 17:41:46 +0300 Subject: [PATCH 05/22] feat(button): fix build picker-button --- .../button/src/component.screenshots.test.tsx | 5 ++- packages/button/src/docs/description.mdx | 32 +++++++++---------- packages/button/src/typings.ts | 8 ----- .../src/Component.responsive.tsx | 2 +- packages/picker-button/src/Component.tsx | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 12 +++---- .../picker-button/src/field/Component.tsx | 6 ++-- 7 files changed, 30 insertions(+), 37 deletions(-) diff --git a/packages/button/src/component.screenshots.test.tsx b/packages/button/src/component.screenshots.test.tsx index e409b20f41..12bbd3a004 100644 --- a/packages/button/src/component.screenshots.test.tsx +++ b/packages/button/src/component.screenshots.test.tsx @@ -26,7 +26,10 @@ describe('Button', () => size: 'xl', }, }, - 'transform:scale(2.3)', + 'paddingRight:98px;transform:scale(2.3)', + { + viewport: { width: 1024, height: 600 }, + }, )); describe( diff --git a/packages/button/src/docs/description.mdx b/packages/button/src/docs/description.mdx index cab2146775..2e51758ee8 100644 --- a/packages/button/src/docs/description.mdx +++ b/packages/button/src/docs/description.mdx @@ -4,22 +4,22 @@ - + Accent - + Primary - + Secondary - + Tertiary - + Link - + Ghost @@ -51,9 +51,9 @@ render( {SIZES.map((size) => ( - + ))} @@ -119,13 +119,13 @@ render(() => { - + @@ -249,22 +249,22 @@ render(() => { - + - + @@ -316,9 +316,9 @@ render(() => { - + diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts index cb1a8e1410..a018c16d76 100644 --- a/packages/button/src/typings.ts +++ b/packages/button/src/typings.ts @@ -121,14 +121,6 @@ export type NativeButtonProps = Omit; export type ButtonMobileProps = Partial; -export type ComponentResponsiveProps = BaseButtonProps & { - /** - * Контрольная точка, с нее начинается desktop версия - * @default 1024 - */ - breakpoint?: number; -}; - export type ButtonResponsiveProps = Partial & { /** * Контрольная точка, с нее начинается desktop версия diff --git a/packages/picker-button/src/Component.responsive.tsx b/packages/picker-button/src/Component.responsive.tsx index 87ac854417..0fdb6c8fd1 100644 --- a/packages/picker-button/src/Component.responsive.tsx +++ b/packages/picker-button/src/Component.responsive.tsx @@ -1,7 +1,7 @@ import React, { forwardRef } from 'react'; // eslint-disable-next-line @typescript-eslint/no-unused-vars -import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; +import { ButtonProps } from '@alfalab/core-components-button'; import { AdditionalMobileProps } from '@alfalab/core-components-select'; import { useMedia } from '@alfalab/hooks'; diff --git a/packages/picker-button/src/Component.tsx b/packages/picker-button/src/Component.tsx index 0fea06d931..076b20d8c3 100644 --- a/packages/picker-button/src/Component.tsx +++ b/packages/picker-button/src/Component.tsx @@ -1,7 +1,7 @@ import React, { FC, forwardRef, SVGProps } from 'react'; import cn from 'classnames'; -import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; +import { ButtonProps } from '@alfalab/core-components-button'; import { BaseSelect, BaseSelectProps, diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap index 38b60bdf97..5c6d3a6aef 100644 --- a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap @@ -13,7 +13,7 @@ exports[`Snapshots tests should display correctly 1`] = ` ); - })} - + }, +}; - - {React.createElement(() => { +export const button_mobile: Story = { + name: 'ButtonMobile', + render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); const sizel = select('size', SIZES, 'm'); const addons = sizel === 'xxs' ? : ; @@ -77,12 +80,12 @@ export const SIZES = ['xxs', 'xs', 's', 'm', 'l', 'xl']; bottom: 0, }} > - {text('label', 'Оплатить')} - + ); - })} - + }, +}; - - {React.createElement(() => { +export const button_desktop: Story = { + name: 'ButtonDesktop', + render: () => { const colors = select('colors', ['default', 'inverted'], 'default'); const sizel = select('size', SIZES, 'm'); const addons = sizel === 'xxs' ? : ; @@ -116,12 +120,12 @@ export const SIZES = ['xxs', 'xs', 's', 'm', 'l', 'xl']; bottom: 0, }} > - {text('label', 'Оплатить')} - + ); - })} - - -{/* Docs */} - - + }, +}; -} - development={} - changelog={{Changelog}} -/> +export default meta; diff --git a/packages/button/src/docs/description.mdx b/packages/button/src/docs/description.mdx index 2e51758ee8..fa33766542 100644 --- a/packages/button/src/docs/description.mdx +++ b/packages/button/src/docs/description.mdx @@ -85,18 +85,18 @@ render( - 0 + - Очень длинный лейбл +
- + ``` @@ -210,9 +210,9 @@ render(() => { return (
- +
Primary - ``` - + ## Переменные diff --git a/packages/button/src/index.ts b/packages/button/src/index.ts index 9314b3cf6c..7585a85718 100644 --- a/packages/button/src/index.ts +++ b/packages/button/src/index.ts @@ -1,2 +1,2 @@ -export { ButtonResponsive as Button } from './Component.responsive'; -export type { ButtonResponsiveProps as ButtonProps } from './typings'; +export { Button } from './Component.responsive'; +export type { ButtonProps } from './typings'; diff --git a/packages/button/src/mobile.module.css b/packages/button/src/mobile.module.css new file mode 100644 index 0000000000..609fae8063 --- /dev/null +++ b/packages/button/src/mobile.module.css @@ -0,0 +1,25 @@ +@import '../../themes/src/default.css'; + +.xxs { + border-radius: var(--border-radius-m); +} + +.xs { + border-radius: var(--border-radius-l); +} + +.s { + border-radius: var(--border-radius-l); +} + +.m { + border-radius: var(--border-radius-xl); +} + +.l { + border-radius: var(--border-radius-xl); +} + +.xl { + border-radius: var(--border-radius-xl); +} diff --git a/packages/button/src/responsive.ts b/packages/button/src/responsive.ts deleted file mode 100644 index 6e49866c64..0000000000 --- a/packages/button/src/responsive.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Component.responsive'; diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts index a018c16d76..b360aafd56 100644 --- a/packages/button/src/typings.ts +++ b/packages/button/src/typings.ts @@ -1,14 +1,5 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react'; -export type StyleColors = { - default: { - [key: string]: string; - }; - inverted: { - [key: string]: string; - }; -}; - export type ComponentProps = { /** * Тип кнопки @@ -98,30 +89,18 @@ export type ComponentProps = { * Основные стили компонента. */ styles: { [key: string]: string }; - - /** - * Стили компонента для default и inverted режима. - */ - colorStyles: StyleColors; - /** - * Вид компонента - */ - desktop: boolean; }; export type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes; export type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes; export type BaseButtonProps = Partial; -export type AnchorButtonProps = Omit & +export type AnchorButtonProps = Omit & AnchorHTMLAttributes; -export type NativeButtonProps = Omit & +export type NativeButtonProps = Omit & ButtonHTMLAttributes; -export type ButtonDesktopProps = Partial; -export type ButtonMobileProps = Partial; - -export type ButtonResponsiveProps = Partial & { +export type ButtonProps = Partial & { /** * Контрольная точка, с нее начинается desktop версия * @default 1024 diff --git a/packages/calendar-range/src/Component.test.tsx b/packages/calendar-range/src/Component.test.tsx index bedaab35f4..0f5dc24d0d 100644 --- a/packages/calendar-range/src/Component.test.tsx +++ b/packages/calendar-range/src/Component.test.tsx @@ -27,6 +27,20 @@ describe('CalendarRange', () => { jest.advanceTimersByTime(300); }); + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), + removeListener: jest.fn(), + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Display tests', () => { it('should match snapshot', () => { expect( @@ -215,7 +229,7 @@ describe('CalendarRange', () => { describe('isPopover', () => { it('should open empty input calendar with month from filled input', async () => { - const { queryAllByRole } = render( + const { queryAllByRole, container } = render( { const [inputFrom, inputTo] = queryAllByRole('textbox') as HTMLInputElement[]; await waitFor(() => { - fireEvent.focus(inputFrom); + fireEvent.click(inputFrom); + expect( - document.querySelector('.from-calendar .button.month .buttonContent'), + document.querySelector('.from-calendar .cc-button.month .buttonContent'), ).toHaveTextContent(currentMonthName); }); await waitFor(() => { - fireEvent.focus(inputTo); + fireEvent.click(inputTo); expect( document.querySelector('.to-calendar .button.month .buttonContent'), ).toHaveTextContent(currentMonthName); @@ -251,7 +266,7 @@ describe('CalendarRange', () => { const [inputFrom, inputTo] = queryAllByRole('textbox') as HTMLInputElement[]; await waitFor(() => { - fireEvent.focus(inputTo); + fireEvent.click(inputTo); expect(document.querySelector('.to-calendar')).toBeInTheDocument(); }); diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap index b667aeef55..2dd412bf1e 100644 --- a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap +++ b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap @@ -47,7 +47,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = ` > - + ); } if (value) { return ( - + ); } return ( - + ); }; diff --git a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap index ecc114dade..2eb30609f4 100644 --- a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap +++ b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap @@ -136,7 +136,7 @@ exports[`Confirmation Snapshot tests should match snapshot with fatal error 1`] Выполните операцию с самого начала diff --git a/packages/confirmation/src/components/screens/hint/component.tsx b/packages/confirmation/src/components/screens/hint/component.tsx index 71c8190627..83ef8079bb 100644 --- a/packages/confirmation/src/components/screens/hint/component.tsx +++ b/packages/confirmation/src/components/screens/hint/component.tsx @@ -1,7 +1,7 @@ import React, { FC, useContext } from 'react'; import cn from 'classnames'; -import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; +import { Button } from '@alfalab/core-components-button'; import { Link } from '@alfalab/core-components-link'; import { Typography } from '@alfalab/core-components-typography'; @@ -18,7 +18,15 @@ export type HintProps = { }; export const Hint: FC = ({ mobile }) => { - const { alignContent, texts, onChangeScreen, onChangeState } = useContext(ConfirmationContext); + const { + alignContent, + texts, + onChangeScreen, + onChangeState, + breakpoint: breakpointProps, + } = useContext(ConfirmationContext); + + const breakpoint = mobile ? breakpointProps : 1; const handleReturnButtonClick = () => { onChangeScreen('INITIAL'); @@ -84,6 +92,7 @@ export const Hint: FC = ({ mobile }) => { view='secondary' onClick={handleReturnButtonClick} className={styles.hintButton} + breakpoint={breakpoint} > {texts.hintButton} diff --git a/packages/confirmation/src/components/screens/initial/component.tsx b/packages/confirmation/src/components/screens/initial/component.tsx index 2254ede10e..8bc5c6788a 100644 --- a/packages/confirmation/src/components/screens/initial/component.tsx +++ b/packages/confirmation/src/components/screens/initial/component.tsx @@ -9,7 +9,7 @@ import React, { } from 'react'; import cn from 'classnames'; -import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; +import { ButtonMobile } from '@alfalab/core-components-button/mobile'; import { CodeInput, CodeInputProps, CustomInputRef } from '@alfalab/core-components-code-input'; import { Link } from '@alfalab/core-components-link'; import { Typography } from '@alfalab/core-components-typography'; @@ -168,9 +168,9 @@ export const Initial: FC = ({ mobile }) => { )} {mobile ? ( - + ) : ( = ({ mobile, handleSmsRetryClick, }) => { - const { state, texts, timeLeft, blockSmsRetry } = useContext(ConfirmationContext); + const { + state, + texts, + timeLeft, + blockSmsRetry, + breakpoint: breakpointProps, + } = useContext(ConfirmationContext); + + const breakpoint = mobile ? breakpointProps : 1; const renderText = (text?: string) => ( = ({ view='secondary' onClick={handleSmsRetryClick} className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })} + breakpoint={breakpoint} > {texts.buttonRetry} diff --git a/packages/confirmation/src/context.ts b/packages/confirmation/src/context.ts index 31b50ef7be..753ed635fe 100644 --- a/packages/confirmation/src/context.ts +++ b/packages/confirmation/src/context.ts @@ -16,6 +16,7 @@ export const ConfirmationContext = createContext({ tempBlockDuration: ONE_DAY, phone: '', hideCountdownSection: false, + breakpoint: 1024, onTempBlockFinished: mockFn, onInputFinished: mockFn, onChangeState: mockFn, diff --git a/packages/confirmation/src/types.ts b/packages/confirmation/src/types.ts index 3813d4b298..30138a8614 100644 --- a/packages/confirmation/src/types.ts +++ b/packages/confirmation/src/types.ts @@ -111,6 +111,12 @@ export type ConfirmationProps = { * @default false */ hideCountdownSection?: boolean; + + /** + * Контрольная точка для кнопки, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; }; export type TConfirmationContext = Required< @@ -136,6 +142,12 @@ export type TConfirmationContext = Required< 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' > & { timeLeft: number; + } & { + /** + * Контрольная точка для кнопки, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; }; export type ConfirmationTexts = { diff --git a/packages/custom-button/src/Component.test.tsx b/packages/custom-button/src/Component.test.tsx index 4c42c61ab2..ac0495f48e 100644 --- a/packages/custom-button/src/Component.test.tsx +++ b/packages/custom-button/src/Component.test.tsx @@ -6,6 +6,20 @@ import { CustomButton } from './index'; const dataTestId = 'test-id'; describe('CustomButton', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Snapshots tests', () => { it('should match snapshot', () => { expect(render()).toMatchSnapshot(); diff --git a/packages/custom-button/src/Component.tsx b/packages/custom-button/src/Component.tsx index 28c57fc26a..8102ef6769 100644 --- a/packages/custom-button/src/Component.tsx +++ b/packages/custom-button/src/Component.tsx @@ -1,10 +1,7 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'; import cn from 'classnames'; -import { - ButtonDesktop as Button, - ButtonDesktopProps as ButtonProps, -} from '@alfalab/core-components-button/desktop'; +import { Button, ButtonProps } from '@alfalab/core-components-button'; import styles from './index.module.css'; @@ -56,6 +53,7 @@ export const CustomButton = React.forwardRef< const buttonClassName = cn( styles.customButton, + styles.border, className, styles[contentColor], styles[stateType], diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap index b9d94eb52d..c7ccda47a0 100644 --- a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap @@ -6,7 +6,7 @@ Object { "baseElement":
@@ -78,7 +78,7 @@ Object { ), ); diff --git a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap index 4054b5b8aa..859d32dda3 100644 --- a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap @@ -6,7 +6,7 @@ Object { "baseElement":
@@ -36,7 +36,7 @@ Object { , "container":
@@ -123,7 +123,7 @@ Object { "baseElement":
- +
), title: label || placeholder, diff --git a/packages/input-autocomplete/src/Component.modal.mobile.tsx b/packages/input-autocomplete/src/Component.modal.mobile.tsx index 5102443379..397c2aab4c 100644 --- a/packages/input-autocomplete/src/Component.modal.mobile.tsx +++ b/packages/input-autocomplete/src/Component.modal.mobile.tsx @@ -3,10 +3,7 @@ import mergeRefs from 'react-merge-refs'; import cn from 'classnames'; import throttle from 'lodash.throttle'; -import { - ButtonDesktop as Button, - ButtonDesktopProps as ButtonProps, -} from '@alfalab/core-components-button/desktop'; +import { ButtonMobile, ButtonMobileProps } from '@alfalab/core-components-button/mobile'; import { Input as CoreInput } from '@alfalab/core-components-input'; import type { BaseSelectChangePayload, SelectMobileProps } from '@alfalab/core-components-select'; import { SelectModalMobile, SelectModalMobileProps } from '@alfalab/core-components-select/mobile'; @@ -57,12 +54,12 @@ export type InputAutocompleteModalMobileProps = Omit< /** * Дополнительные пропсы на кнопку "продолжить" */ - continueButtonProps?: ButtonProps; + continueButtonProps?: ButtonMobileProps; /** * Дополнительные пропсы на кнопку "отмена" */ - cancelButtonProps?: ButtonProps; + cancelButtonProps?: ButtonMobileProps; /** * Кастомный инпут @@ -168,7 +165,7 @@ export const InputAutocompleteModalMobile = React.forwardRef< const renderFooter = () => ( - - + ); diff --git a/packages/input-autocomplete/src/Component.responsive.tsx b/packages/input-autocomplete/src/Component.responsive.tsx index f953e83605..9052c00fb2 100644 --- a/packages/input-autocomplete/src/Component.responsive.tsx +++ b/packages/input-autocomplete/src/Component.responsive.tsx @@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { BottomSheetProps } from '@alfalab/core-components-bottom-sheet'; // eslint-disable-next-line @typescript-eslint/no-unused-vars -import { ButtonDesktopProps as ButtonProps } from '@alfalab/core-components-button/desktop'; +import { ButtonMobileProps } from '@alfalab/core-components-button/mobile'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { BaseSelectProps } from '@alfalab/core-components-select'; import { useMedia } from '@alfalab/hooks'; diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap index d799e0d9bf..fb27a3c4cc 100644 --- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap +++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap @@ -147,7 +147,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s > )} {rightAddons} {error && ( diff --git a/packages/intl-phone-input/src/component.test.tsx b/packages/intl-phone-input/src/component.test.tsx index 77f29ff1fa..e4380327d7 100644 --- a/packages/intl-phone-input/src/component.test.tsx +++ b/packages/intl-phone-input/src/component.test.tsx @@ -4,6 +4,20 @@ import userEvent from '@testing-library/user-event'; import { IntlPhoneInput } from './'; describe('IntlPhoneInput', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + const testId = 'intl-phone-input'; it('should match snapshot', () => { diff --git a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap index 27bf3998c0..6e031201cd 100644 --- a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap +++ b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap @@ -49,7 +49,7 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = ` > +
); } diff --git a/packages/password-input/src/__snapshots__/component.test.tsx.snap b/packages/password-input/src/__snapshots__/component.test.tsx.snap index 81a60d3eb2..67b32fa250 100644 --- a/packages/password-input/src/__snapshots__/component.test.tsx.snap +++ b/packages/password-input/src/__snapshots__/component.test.tsx.snap @@ -26,7 +26,7 @@ exports[`PasswordInput snapshots tests should match snapshot 1`] = ` class="addons rightAddons addons" > + ) : (
)} diff --git a/packages/picker-button/src/Component.mobile.tsx b/packages/picker-button/src/Component.mobile.tsx index 069cf65729..e1d6d46b2c 100644 --- a/packages/picker-button/src/Component.mobile.tsx +++ b/packages/picker-button/src/Component.mobile.tsx @@ -14,7 +14,13 @@ export type PickerButtonMobileProps = Omit< PickerButtonDesktopProps, 'OptionsList' | 'Checkmark' | 'onScroll' > & - AdditionalMobileProps; + AdditionalMobileProps & { + /** + * Контрольная точка для кнопки, с нее начинается desktop версия + * @default 1024 + */ + breakpoint?: number; + }; export const PickerButtonMobile = forwardRef( ( @@ -33,6 +39,7 @@ export const PickerButtonMobile = forwardRef ); diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap index 5c6d3a6aef..d82c438c2e 100644 --- a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap @@ -13,7 +13,7 @@ exports[`Snapshots tests should display correctly 1`] = ` + )} - +
); }; diff --git a/packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx b/packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx index a36b35c267..d3594829f9 100644 --- a/packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx +++ b/packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; +import { ButtonDesktop } from '@alfalab/core-components-button/desktop'; import { OptionShape } from '../../../../typings'; @@ -24,14 +24,14 @@ export const Footer = ({ tabIndex={0} className={styles.footer} > - + {showClear && selectedDraft.length > 0 && ( - + )}
); diff --git a/packages/table/src/components/pagination/select-field/index.tsx b/packages/table/src/components/pagination/select-field/index.tsx index 6129dca230..c09f9dbac7 100644 --- a/packages/table/src/components/pagination/select-field/index.tsx +++ b/packages/table/src/components/pagination/select-field/index.tsx @@ -1,10 +1,7 @@ import React from 'react'; import cn from 'classnames'; -import { - ButtonDesktop as Button, - ButtonDesktopProps as ButtonProps, -} from '@alfalab/core-components-button/desktop'; +import { Button, ButtonProps } from '@alfalab/core-components-button'; import { SelectProps } from '@alfalab/core-components-select'; import styles from './index.module.css'; diff --git a/packages/toast-plate/src/component.test.tsx b/packages/toast-plate/src/component.test.tsx index 126d8a9037..5746b5c6ac 100644 --- a/packages/toast-plate/src/component.test.tsx +++ b/packages/toast-plate/src/component.test.tsx @@ -6,6 +6,20 @@ import { ToastPlate } from './index'; jest.useFakeTimers(); describe('Notification', () => { + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), // Deprecated + removeListener: jest.fn(), // Deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); + describe('Snapshots tests', () => { it('should match snapshot', () => { const { baseElement } = render( diff --git a/packages/tooltip/src/component.responsive.tsx b/packages/tooltip/src/component.responsive.tsx index ba58038815..56e0588b0c 100644 --- a/packages/tooltip/src/component.responsive.tsx +++ b/packages/tooltip/src/component.responsive.tsx @@ -2,7 +2,7 @@ import React, { FC, Fragment } from 'react'; import cn from 'classnames'; import { BottomSheet, BottomSheetProps } from '@alfalab/core-components-bottom-sheet'; -import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop'; +import { ButtonMobile } from '@alfalab/core-components-button/mobile'; import { useMedia } from '@alfalab/hooks'; import { TooltipDesktop, TooltipDesktopProps } from './desktop'; @@ -102,9 +102,9 @@ export const TooltipResponsive: FC = ({ onClose={handleClose} hasCloser={hasCloser} actionButton={ - + } {...bottomSheetProps} > From 5c76a3c0832be9438a60df775d2c3c0bb73595b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Wed, 7 Jun 2023 22:29:33 +0300 Subject: [PATCH 07/22] feat(button): fix tests --- packages/attach/src/Component.test.tsx | 2 +- .../calendar-range/src/Component.test.tsx | 2 +- packages/calendar/src/Component.test.tsx | 2 +- packages/confirmation/src/Component.test.tsx | 2 +- packages/custom-button/src/Component.test.tsx | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 16 +- .../src/Component.desktop.tsx | 1 + .../src/Component.test.tsx | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 3222 ++++++----------- .../date-range-input/src/Component.test.tsx | 2 +- .../date-time-input/src/Component.test.tsx | 2 +- .../file-upload-item/src/Component.test.tsx | 2 +- packages/gallery/src/component.test.tsx | 2 +- packages/icon-button/src/Component.test.tsx | 2 +- packages/input/src/Component.test.tsx | 2 +- .../intl-phone-input/src/component.test.tsx | 2 +- .../src/component.test.tsx | 2 +- packages/notification/src/Component.test.tsx | 2 +- packages/number-input/src/Component.test.tsx | 2 +- .../password-input/src/component.test.tsx | 2 +- packages/picker-button/src/Component.tsx | 1 + .../picker-button/src/field/Component.tsx | 6 - packages/plate/src/Component.test.tsx | 2 +- ...tabs-tabs-desktop-view-0-size-1-2-snap.png | 4 +- ...tabs-tabs-desktop-view-0-size-2-2-snap.png | 4 +- packages/toast-plate/src/component.test.tsx | 2 +- 26 files changed, 1076 insertions(+), 2216 deletions(-) diff --git a/packages/attach/src/Component.test.tsx b/packages/attach/src/Component.test.tsx index 34539214b5..6e64159726 100644 --- a/packages/attach/src/Component.test.tsx +++ b/packages/attach/src/Component.test.tsx @@ -8,7 +8,7 @@ describe('Attach', () => { Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation((query) => ({ - matches: false, + matches: true, media: query, onchange: null, addListener: jest.fn(), // Deprecated diff --git a/packages/calendar-range/src/Component.test.tsx b/packages/calendar-range/src/Component.test.tsx index 0f5dc24d0d..5f4acdef29 100644 --- a/packages/calendar-range/src/Component.test.tsx +++ b/packages/calendar-range/src/Component.test.tsx @@ -30,7 +30,7 @@ describe('CalendarRange', () => { Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation((query) => ({ - matches: false, + matches: true, media: query, onchange: null, addListener: jest.fn(), diff --git a/packages/calendar/src/Component.test.tsx b/packages/calendar/src/Component.test.tsx index 7501561a14..7d18ae0f6f 100644 --- a/packages/calendar/src/Component.test.tsx +++ b/packages/calendar/src/Component.test.tsx @@ -21,7 +21,7 @@ describe('Calendar', () => { Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation((query) => ({ - matches: false, + matches: true, media: query, onchange: null, addListener: jest.fn(), // Deprecated diff --git a/packages/confirmation/src/Component.test.tsx b/packages/confirmation/src/Component.test.tsx index ce74927aaa..2f0aab79d1 100644 --- a/packages/confirmation/src/Component.test.tsx +++ b/packages/confirmation/src/Component.test.tsx @@ -10,7 +10,7 @@ describe('Confirmation', () => { Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation((query) => ({ - matches: false, + matches: true, media: query, onchange: null, addListener: jest.fn(), // Deprecated diff --git a/packages/custom-button/src/Component.test.tsx b/packages/custom-button/src/Component.test.tsx index ac0495f48e..a20e99859b 100644 --- a/packages/custom-button/src/Component.test.tsx +++ b/packages/custom-button/src/Component.test.tsx @@ -9,7 +9,7 @@ describe('CustomButton', () => { Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation((query) => ({ - matches: false, + matches: true, media: query, onchange: null, addListener: jest.fn(), // Deprecated diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap index c7ccda47a0..111855904d 100644 --- a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap @@ -311,7 +311,7 @@ Object { > { Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation((query) => ({ - matches: false, + matches: true, media: query, onchange: null, addListener: jest.fn(), diff --git a/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap index c454dcbadb..bc3fb60c52 100644 --- a/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap @@ -4,17 +4,16 @@ exports[`Snapshots tests should display correctly 1`] = `
+
+
+
+
+
+ Neptunium +
+
+
+
+
+
+
+
+ Plutonium +
+
+
+
+
+
+
+
+ Americium +
+
+
+
+
+
+
+
+ Curium +
+
+
+
+
+
+
+
+ Berkelium +
+
+
+
+
+
+
+
+ Californium +
+
+
+
+
+
+
+
+ Einsteinium +
+
+
+
+
+
+
+
+ Fermium +
+
+
+
+
+
+
+
+ Mendelevium +
+
+
+
+
+
+
+
+ Nobelium +
+
+
+
+
+
+
+
+ Lawrencium +
+
+
+
+
+
+
+
+ Rutherfordium +
+
+
+
+
+
+
+
+ Dubnium +
+
+
+
+
+
+
+
+ Seaborgium +
+
+
+
+
+
+
+
+ Bohrium +
+
+
+
+
+
+
+
+
+ `; @@ -266,17 +560,16 @@ exports[`Snapshots tests should display opened correctly 3`] = `
-
- + Seaborgium + +
-
-
-
-
-
-
-
-
-
-
-
- - - -
-
-
-
- Neptunium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Plutonium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Americium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Curium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Berkelium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Californium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Einsteinium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Fermium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Mendelevium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Nobelium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Lawrencium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Rutherfordium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Dubnium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Seaborgium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Bohrium -
-
-
-
- - - -
-
-
-
-
-
-
-
-
+
-
`; @@ -1367,17 +949,16 @@ exports[`Snapshots tests should display opened correctly 5`] = `
-
- + Fermium + +
+
+
+
+ Mendelevium +
+
+
+
+
+
+
+
+ Nobelium +
+
+
+
+
+
+
+
+ Lawrencium +
+
+
+
+
+
+
+
+ Rutherfordium +
+
+
+
+
+
+
+
+ Dubnium +
+
+
+
+
+
+
+
+ Seaborgium +
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- - - -
-
-
-
- Neptunium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Plutonium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Americium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Curium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Berkelium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Californium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Einsteinium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Fermium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Mendelevium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Nobelium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Lawrencium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Rutherfordium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Dubnium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Seaborgium -
-
-
-
- - - -
-
-
-
- - - -
-
-
-
- Bohrium -
-
-
-
- - - -
-
-
-
-
-
-
-
-
+
-
`; @@ -2467,20 +1337,22 @@ exports[`Snapshots tests should render black color content 1`] = ` Object { "asFragment": [Function], "baseElement": +
, "container":
, @@ -77,14 +77,14 @@ Object { "baseElement": , "container": , @@ -148,14 +148,14 @@ Object { "baseElement":
, "container":
, @@ -219,7 +219,7 @@ Object { "baseElement":
- ) : - (<> - )} + )} ); diff --git a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap index 6e031201cd..c3088eb91d 100644 --- a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap +++ b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap @@ -49,7 +49,7 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = ` > - ) : - (<> - )} + )} ); diff --git a/packages/system-message/src/Component.screenshots.test.tsx b/packages/system-message/src/Component.screenshots.test.tsx index 88b3a9a8b0..7f4727eb5c 100644 --- a/packages/system-message/src/Component.screenshots.test.tsx +++ b/packages/system-message/src/Component.screenshots.test.tsx @@ -83,7 +83,10 @@ describe('SystemMessage ', () => { breakpoint: 600, }, }, - 'transform:scale(0.9)', + 'paddingRight:249px;transform:scale(0.9)', + { + viewport: { width: 1024, height: 600 }, + }, ); describe('desktop', () => { diff --git a/packages/system-message/src/__image_snapshots__/system-message-mobile-column-footer-snap.png b/packages/system-message/src/__image_snapshots__/system-message-mobile-column-footer-snap.png index 7e3b3955df..4fd55a5bc9 100644 --- a/packages/system-message/src/__image_snapshots__/system-message-mobile-column-footer-snap.png +++ b/packages/system-message/src/__image_snapshots__/system-message-mobile-column-footer-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ad6e05c6ce9a08f2691e424fe4bfcff005e9d627f77c712109117d616c813dc8 -size 28168 +oid sha256:fa549ab802e6907333e64142f8687dc652d82c42d89fc80276d42f663a105bde +size 28429 diff --git a/packages/system-message/src/__image_snapshots__/system-message-mobile-full-height-snap.png b/packages/system-message/src/__image_snapshots__/system-message-mobile-full-height-snap.png index efd2baa161..9d2584fc85 100644 --- a/packages/system-message/src/__image_snapshots__/system-message-mobile-full-height-snap.png +++ b/packages/system-message/src/__image_snapshots__/system-message-mobile-full-height-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f5ca6057d81c0e99be258fb5637de4a1613884019fa3f3768978a0e42879c12f -size 28260 +oid sha256:073e66fde52ee67b248058bcb5157a344c500305013520deed900f08d4f423d4 +size 28519 diff --git a/packages/themes/src/dark.css b/packages/themes/src/dark.css index feb1dfb798..961dc726ef 100644 --- a/packages/themes/src/dark.css +++ b/packages/themes/src/dark.css @@ -255,6 +255,18 @@ --color-light-specialbg-component-inverted-tint-20: var( --color-dark-specialbg-component-inverted-shade-20 ); + --color-light-specialbg-secondary-transparent-shade-7: var( + --color-dark-specialbg-secondary-transparent-tint-7 + ); + --color-light-specialbg-secondary-transparent-shade-15: var( + --color-dark-specialbg-secondary-transparent-tint-15 + ); + --color-light-specialbg-secondary-transparent-inverted-tint-15: var( + --color-dark-specialbg-secondary-transparent-inverted-shade-15 + ); + --color-light-specialbg-secondary-transparent-inverted-tint-20: var( + --color-dark-specialbg-secondary-transparent-inverted-shade-20 + ); --color-light-specialbg-tertiary-transparent-shade-7: var( --color-dark-specialbg-tertiary-transparent-tint-7 ); diff --git a/packages/themes/src/mixins/button/click.css b/packages/themes/src/mixins/button/click.css new file mode 100644 index 0000000000..9a8c2d651c --- /dev/null +++ b/packages/themes/src/mixins/button/click.css @@ -0,0 +1,55 @@ +@define-mixin button-click { + /* primary mobile */ + --button-primary-mobile-disabled-color: var(--color-light-text-tertiary); + --button-primary-mobile-disabled-bg-color: var(--color-light-specialbg-secondary-transparent); + + /* primary inverted mobile */ + --button-inverted-primary-mobile-disabled-bg-color: var( + --color-light-specialbg-secondary-transparent-inverted + ); + --button-inverted-primary-mobile-disabled-color: var(--color-light-text-tertiary-inverted); + + /* secondary mobile */ + --button-secondary-mobile-base-bg-color: var(--color-light-specialbg-tertiary-transparent); + --button-secondary-mobile-active-bg-color: var( + --color-light-specialbg-tertiary-transparent-shade-15 + ); + --button-secondary-mobile-disabled-bg-color: var(--color-light-specialbg-secondary-transparent); + --button-secondary-mobile-disabled-color: var(--color-light-text-tertiary); + + /* secondary inverted mobile */ + --button-inverted-secondary-mobile-base-bg-color: var( + --color-light-specialbg-tertiary-transparent-inverted + ); + --button-inverted-secondary-mobile-active-bg-color: var( + --color-light-specialbg-tertiary-transparent-inverted-tint-20 + ); + --button-inverted-secondary-mobile-disabled-bg-color: var( + --color-light-specialbg-secondary-transparent-inverted + ); + --button-inverted-secondary-mobile-disabled-color: var(--color-light-text-tertiary-inverted); + + /* tertiary mobile */ + --button-tertiary-mobile-disabled-border-color: var(--color-light-graphic-tertiary); + --button-tertiary-mobile-disabled-color: var(--color-light-text-tertiary); + + /* tertiary inverted mobile */ + --button-inverted-tertiary-mobile-disabled-border-color: var( + --color-light-graphic-tertiary-inverted + ); + --button-inverted-tertiary-mobile-disabled-color: var(--color-light-text-tertiary-inverted); + + /* link mobile */ + --button-link-mobile-disabled-color: var(--color-light-text-tertiary); + + /* link inverted mobile */ + --button-inverted-link-mobile-disabled-color: var(--color-light-text-tertiary-inverted); + + /* ghost mobile */ + --button-ghost-mobile-active-color: var(--color-light-text-primary-tint-40); + --button-ghost-mobile-disabled-color: var(--color-light-text-tertiary); + + /* ghost mobile inverted */ + --button-inverted-ghost-mobile-active-color: var(--color-light-text-primary-inverted-shade-40); + --button-inverted-ghost-mobile-disabled-color: var(--color-light-text-tertiary-inverted); +} diff --git a/packages/themes/src/mixins/button/mobile.css b/packages/themes/src/mixins/button/mobile.css index 160e2a98e3..50accf91d0 100644 --- a/packages/themes/src/mixins/button/mobile.css +++ b/packages/themes/src/mixins/button/mobile.css @@ -19,17 +19,19 @@ --button-inverted-primary-disabled-color: var(--color-light-text-tertiary); /* secondary */ - --button-secondary-base-bg-color: var(--color-light-specialbg-component); - --button-secondary-hover-bg-color: var(--color-light-specialbg-component-shade-7); - --button-secondary-active-bg-color: var(--color-light-specialbg-component-shade-15); + --button-secondary-base-bg-color: var(--color-light-specialbg-secondary-transparent); + --button-secondary-hover-bg-color: var(--color-light-specialbg-secondary-transparent-shade-7); + --button-secondary-active-bg-color: var(--color-light-specialbg-secondary-transparent-shade-15); --button-secondary-disabled-bg-color: var(--color-light-bg-primary-inverted-alpha-5); --button-secondary-disabled-color: var(--color-light-text-primary-alpha-30); - --button-inverted-secondary-base-bg-color: var(--color-light-specialbg-component-inverted); + --button-inverted-secondary-base-bg-color: var( + --color-light-specialbg-secondary-transparent-inverted + ); --button-inverted-secondary-hover-bg-color: var( - --color-light-specialbg-component-inverted-tint-15 + --color-light-specialbg-secondary-transparent-inverted-tint-15 ); --button-inverted-secondary-active-bg-color: var( - --color-light-specialbg-component-inverted-tint-20 + --color-light-specialbg-secondary-transparent-inverted-tint-20 ); --button-inverted-secondary-disabled-bg-color: var(--color-light-bg-primary-alpha-8); --button-inverted-secondary-disabled-color: var(--color-light-text-primary-inverted-alpha-30); diff --git a/packages/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css index db4b4bba8a..59e583fd6a 100644 --- a/packages/themes/src/mixins/click.css +++ b/packages/themes/src/mixins/click.css @@ -22,6 +22,7 @@ @import './icon-view/click.css'; @import './system-message/click.css'; @import './side-panel/click.css'; +@import './button/click.css'; @define-mixin theme-click { --disabled-cursor: not-allowed; @@ -51,4 +52,5 @@ @mixin icon-view-click; @mixin system-message-click; @mixin side-panel-click; + @mixin button-click; } diff --git a/packages/themes/src/mixins/dark.css b/packages/themes/src/mixins/dark.css index f2e33b7774..adcb004b21 100644 --- a/packages/themes/src/mixins/dark.css +++ b/packages/themes/src/mixins/dark.css @@ -255,6 +255,18 @@ --color-light-specialbg-component-inverted-tint-20: var( --color-dark-specialbg-component-inverted-shade-20 ); + --color-light-specialbg-secondary-transparent-shade-7: var( + --color-dark-specialbg-secondary-transparent-tint-7 + ); + --color-light-specialbg-secondary-transparent-shade-15: var( + --color-dark-specialbg-secondary-transparent-tint-15 + ); + --color-light-specialbg-secondary-transparent-inverted-tint-15: var( + --color-dark-specialbg-secondary-transparent-inverted-shade-15 + ); + --color-light-specialbg-secondary-transparent-inverted-tint-20: var( + --color-dark-specialbg-secondary-transparent-inverted-shade-20 + ); --color-light-specialbg-tertiary-transparent-shade-7: var( --color-dark-specialbg-tertiary-transparent-tint-7 ); diff --git a/packages/vars/src/colors-bluetint.css b/packages/vars/src/colors-bluetint.css index 4dee3ad4f3..901536a307 100644 --- a/packages/vars/src/colors-bluetint.css +++ b/packages/vars/src/colors-bluetint.css @@ -310,6 +310,10 @@ --color-dark-specialbg-component-inverted-alpha-30: rgba(11, 31, 53, 0.3); --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095); --color-dark-specialbg-component-inverted-shade-20: rgba(9, 25, 42, 0.256); + --color-dark-specialbg-secondary-transparent-tint-7: rgba(255, 255, 255, 0.1258); + --color-dark-specialbg-secondary-transparent-tint-15: rgba(255, 255, 255, 0.201); + --color-dark-specialbg-secondary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.1925); + --color-dark-specialbg-secondary-transparent-inverted-shade-20: rgba(9, 25, 42, 0.24); --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.1723); --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.2435); --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.235); @@ -466,6 +470,10 @@ --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3); --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.235); --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.28); + --color-light-specialbg-secondary-transparent-shade-7: rgba(10, 29, 49, 0.1165); + --color-light-specialbg-secondary-transparent-shade-15: rgba(9, 26, 45, 0.1925); + --color-light-specialbg-secondary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.201); + --color-light-specialbg-secondary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.248); --color-light-specialbg-tertiary-transparent-shade-7: rgba(10, 29, 49, 0.163); --color-light-specialbg-tertiary-transparent-shade-15: rgba(9, 26, 45, 0.235); --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.2435); diff --git a/packages/vars/src/colors-indigo.css b/packages/vars/src/colors-indigo.css index 51d323a85c..559173b66b 100644 --- a/packages/vars/src/colors-indigo.css +++ b/packages/vars/src/colors-indigo.css @@ -310,6 +310,10 @@ --color-dark-specialbg-component-inverted-alpha-30: rgba(11, 31, 53, 0.3); --color-dark-specialbg-component-inverted-shade-15: rgba(9, 26, 45, 0.2095); --color-dark-specialbg-component-inverted-shade-20: rgba(9, 25, 42, 0.256); + --color-dark-specialbg-secondary-transparent-tint-7: rgba(255, 255, 255, 0.163); + --color-dark-specialbg-secondary-transparent-tint-15: rgba(255, 255, 255, 0.235); + --color-dark-specialbg-secondary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.1925); + --color-dark-specialbg-secondary-transparent-inverted-shade-20: rgba(9, 25, 42, 0.24); --color-dark-specialbg-tertiary-transparent-tint-7: rgba(255, 255, 255, 0.256); --color-dark-specialbg-tertiary-transparent-tint-15: rgba(255, 255, 255, 0.32); --color-dark-specialbg-tertiary-transparent-inverted-shade-15: rgba(9, 26, 45, 0.235); @@ -466,6 +470,10 @@ --color-light-specialbg-component-inverted-alpha-30: rgba(255, 255, 255, 0.3); --color-light-specialbg-component-inverted-tint-15: rgba(255, 255, 255, 0.2775); --color-light-specialbg-component-inverted-tint-20: rgba(255, 255, 255, 0.32); + --color-light-specialbg-secondary-transparent-shade-7: rgba(10, 29, 49, 0.1165); + --color-light-specialbg-secondary-transparent-shade-15: rgba(9, 26, 45, 0.1925); + --color-light-specialbg-secondary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.235); + --color-light-specialbg-secondary-transparent-inverted-tint-20: rgba(255, 255, 255, 0.28); --color-light-specialbg-tertiary-transparent-shade-7: rgba(10, 29, 49, 0.163); --color-light-specialbg-tertiary-transparent-shade-15: rgba(9, 26, 45, 0.235); --color-light-specialbg-tertiary-transparent-inverted-tint-15: rgba(255, 255, 255, 0.32); diff --git a/tools/color-mods.json b/tools/color-mods.json index a17e519bfc..24f6b45fbe 100644 --- a/tools/color-mods.json +++ b/tools/color-mods.json @@ -121,6 +121,12 @@ "light-text-secondary-inverted": { "tint": [20, 30] }, + "light-specialbg-secondary-transparent": { + "shade": [7, 15] + }, + "light-specialbg-secondary-transparent-inverted": { + "tint": [15, 20] + }, "light-specialbg-tertiary-transparent": { "shade": [7, 15] }, From 58f38838d0d859e45c978f4fb10490c17f1acb63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Thu, 15 Jun 2023 09:15:46 +0300 Subject: [PATCH 11/22] feat(button): fix screenshot test confirmation --- packages/confirmation/src/component.screenshots.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/confirmation/src/component.screenshots.test.tsx b/packages/confirmation/src/component.screenshots.test.tsx index 1f0a06068d..b3a5703893 100644 --- a/packages/confirmation/src/component.screenshots.test.tsx +++ b/packages/confirmation/src/component.screenshots.test.tsx @@ -46,6 +46,7 @@ describe( }), ], ], + evaluate: (page: Page) => page.waitForTimeout(300), screenshotOpts: { fullPage: true, }, From b8da83fe0efb7bd8758ce6d72706e085471495b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Tue, 20 Jun 2023 15:20:19 +0300 Subject: [PATCH 12/22] feat(button): fix review design --- .../bottom-sheet/src/docs/description.mdx | 32 ++++++------ packages/button/src/docs/description.mdx | 52 ++++++++++++++++--- packages/button/src/mobile.module.css | 12 ++--- packages/button/src/vars.css | 8 +++ .../components/calendar-mobile/Component.tsx | 8 +-- .../src/docs/description.mdx | 20 ++++++- .../src/Component.mobile.tsx | 4 +- .../src/Component.modal.mobile.tsx | 20 +++---- ...-mobile-interactions-fill-value-2-snap.png | 4 +- .../src/__snapshots__/Component.test.tsx.snap | 4 +- .../click-modal-mobile-2-snap.png | 4 +- .../default-modal-mobile-snap.png | 4 +- .../modal-mobile-content-snap.png | 4 +- ...dal-mobile-footer-footer-layout-0-snap.png | 4 +- ...dal-mobile-footer-footer-layout-1-snap.png | 4 +- ...dal-mobile-footer-footer-layout-2-snap.png | 4 +- ...dal-mobile-footer-footer-layout-3-snap.png | 4 +- .../modal-mobile-sticky-snap.png | 4 +- packages/modal/src/docs/Component.stories.mdx | 4 +- packages/modal/src/docs/description.mdx | 12 ++--- .../base-select-mobile/footer/Component.tsx | 4 +- .../default-side-panel-mobile-snap.png | 4 +- .../side-panel-mobile-content-snap.png | 4 +- ...nel-mobile-footer-footer-layout-0-snap.png | 4 +- ...nel-mobile-footer-footer-layout-1-snap.png | 4 +- ...nel-mobile-footer-footer-layout-2-snap.png | 4 +- ...nel-mobile-footer-footer-layout-3-snap.png | 4 +- .../side-panel/src/docs/Component.stories.mdx | 4 +- packages/side-panel/src/docs/description.mdx | 12 ++--- .../system-message/src/docs/description.mdx | 14 +++-- packages/themes/src/mixins/button/click.css | 8 +++ 31 files changed, 177 insertions(+), 101 deletions(-) diff --git a/packages/bottom-sheet/src/docs/description.mdx b/packages/bottom-sheet/src/docs/description.mdx index 99314f117e..b4c06c9d9f 100644 --- a/packages/bottom-sheet/src/docs/description.mdx +++ b/packages/bottom-sheet/src/docs/description.mdx @@ -82,9 +82,9 @@ render(() => { return ( - + { return ( - + @@ -371,14 +371,14 @@ render(() => { }} > {footerSettings.hasSecondaryButton && ( - + )} {footerSettings.hasPrimaryButton && @@ -387,9 +387,9 @@ render(() => { ) : null} {footerSettings.hasPrimaryButton && ( - + )}
) : undefined @@ -464,9 +464,9 @@ render(() => { return ( - + { title={item.title} onBack={() => setStep(step - 1)} actionButton={ - + } >
@@ -593,14 +593,14 @@ render(() => { : 'var(--color-light-bg-primary)', }} > - + diff --git a/packages/button/src/docs/description.mdx b/packages/button/src/docs/description.mdx index fa33766542..06ad4f3529 100644 --- a/packages/button/src/docs/description.mdx +++ b/packages/button/src/docs/description.mdx @@ -85,18 +85,35 @@ render( - + 0 - + Очень длинный лейбл
- + + +//MOBILE + + + + 0 + + + + + Очень длинный лейбл + + +
+ + Занимает всю ширину контейнера + ``` @@ -210,9 +227,32 @@ render(() => { return (
-
+ + Запретить перенос строки} + checked={checked} + onChange={handleChange} + /> + + + ); +}); +//MOBILE +render(() => { + const [checked, setChecked] = React.useState(true); + + const handleChange = () => setChecked(!checked); + + return ( + +
+ Пример длинного текста - +
( return ( - + Сбросить ( if (value) { return ( - + Выбрать ); } return ( - + Отмена ); diff --git a/packages/custom-picker-button/src/docs/description.mdx b/packages/custom-picker-button/src/docs/description.mdx index 03c9cbaa99..89b336f1f5 100644 --- a/packages/custom-picker-button/src/docs/description.mdx +++ b/packages/custom-picker-button/src/docs/description.mdx @@ -12,8 +12,24 @@ const optionsWithIcons = [ render( - - + + + , +); +//MOBILE +const options = [{ key: 'Car' }, { key: 'Star' }, { key: 'Flower' }, { key: 'Banknote' }]; + +const optionsWithIcons = [ + { key: 'Car', icon: CarMIcon }, + { key: 'Star', icon: StarMIcon }, + { key: 'Flower', icon: FlowerMMIcon }, + { key: 'Banknote', icon: BanknoteMIcon }, +]; + +render( + + + , ); ``` diff --git a/packages/input-autocomplete/src/Component.mobile.tsx b/packages/input-autocomplete/src/Component.mobile.tsx index 027719ccbc..44adb7531a 100644 --- a/packages/input-autocomplete/src/Component.mobile.tsx +++ b/packages/input-autocomplete/src/Component.mobile.tsx @@ -180,7 +180,7 @@ export const InputAutocompleteMobile = React.forwardRef( @@ -189,7 +189,7 @@ export const InputAutocompleteMobile = React.forwardRef( diff --git a/packages/input-autocomplete/src/Component.modal.mobile.tsx b/packages/input-autocomplete/src/Component.modal.mobile.tsx index c9a395741e..253698666e 100644 --- a/packages/input-autocomplete/src/Component.modal.mobile.tsx +++ b/packages/input-autocomplete/src/Component.modal.mobile.tsx @@ -165,24 +165,24 @@ export const InputAutocompleteModalMobile = React.forwardRef< const renderFooter = () => ( - - Продолжить - Отмена + + Продолжить + ); diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png index d52e8e0f8e..ecaf05f44d 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-modal-mobile-interactions-fill-value-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:605498d866432ff0b21486569210e8f2b18b06b35a9bc12064fbe4939225bbd5 -size 16929 +oid sha256:e425db59ee8480d3fa8b241b97e957478ccbe4648f2e892e7cd480374454e543 +size 17261 diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap index fa60b9a5b9..58a6887c9e 100644 --- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap +++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap @@ -385,7 +385,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s class="footer" > + )} {footerSettings.hasPrimaryButton && ( - + )} )} @@ -751,7 +751,7 @@ render(() => { return ( - @@ -775,7 +775,7 @@ render(() => {
diff --git a/packages/side-panel/src/__image_snapshots__/default-side-panel-mobile-snap.png b/packages/side-panel/src/__image_snapshots__/default-side-panel-mobile-snap.png index 0f7fb7d339..cb7c7733bd 100644 --- a/packages/side-panel/src/__image_snapshots__/default-side-panel-mobile-snap.png +++ b/packages/side-panel/src/__image_snapshots__/default-side-panel-mobile-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4f122600b29607a9f6bc87461df20f302fd3f17477384b5dd9965e2d007f8eed -size 50674 +oid sha256:9911e61f33b772a964f08f806f1e185a1122f446d493c5f93770f91f270dc3cc +size 51014 diff --git a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-content-snap.png b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-content-snap.png index 0f7fb7d339..cb7c7733bd 100644 --- a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-content-snap.png +++ b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-content-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4f122600b29607a9f6bc87461df20f302fd3f17477384b5dd9965e2d007f8eed -size 50674 +oid sha256:9911e61f33b772a964f08f806f1e185a1122f446d493c5f93770f91f270dc3cc +size 51014 diff --git a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-0-snap.png b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-0-snap.png index 0f7fb7d339..cb7c7733bd 100644 --- a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-0-snap.png +++ b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4f122600b29607a9f6bc87461df20f302fd3f17477384b5dd9965e2d007f8eed -size 50674 +oid sha256:9911e61f33b772a964f08f806f1e185a1122f446d493c5f93770f91f270dc3cc +size 51014 diff --git a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-1-snap.png b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-1-snap.png index a66476f5aa..952ed33180 100644 --- a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-1-snap.png +++ b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d693ec2bbfaee64368be9f286b1b87391a1ad05a33d635c925a996a3621244a2 -size 50666 +oid sha256:b4fbd3a467ce0a5680ecacea0216667056cf330ea1a8415bb946b17c3b101a36 +size 51011 diff --git a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-2-snap.png b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-2-snap.png index 4a1229d6bd..fb16f11118 100644 --- a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-2-snap.png +++ b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:50d418c28c3698e54521f37a631b3ac1446869a550d271990b567d05f3d07803 -size 50635 +oid sha256:7957531eaa58f47791546a45765047daeab2bc22382bc8bb669ff1a7ff2a85ed +size 50960 diff --git a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-3-snap.png b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-3-snap.png index 333be129d6..c06278a890 100644 --- a/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-3-snap.png +++ b/packages/side-panel/src/__image_snapshots__/side-panel-mobile-footer-footer-layout-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c7dfc4a65f98a5cabde44d11eaadf857cea1c3a8bd1b205fd5202c4ce4264737 -size 50672 +oid sha256:bff67077da563451dec839935a88680850f6cbe0e87166e585ec053372cca66e +size 50977 diff --git a/packages/side-panel/src/docs/Component.stories.mdx b/packages/side-panel/src/docs/Component.stories.mdx index 89e996b63c..b2f8bd83d9 100644 --- a/packages/side-panel/src/docs/Component.stories.mdx +++ b/packages/side-panel/src/docs/Component.stories.mdx @@ -38,10 +38,10 @@ export const Footer = ({ isPreview, isMobile }) => ( {isPreview ? 'Кнопка' : 'Отмена'} ) : - (<> + (<> {isPreview ? 'Кнопка' : 'Отмена'} - + {isPreview ? 'Кнопка' : 'Сохранить'} )} diff --git a/packages/side-panel/src/docs/description.mdx b/packages/side-panel/src/docs/description.mdx index 41e4347172..b6b84c2b35 100644 --- a/packages/side-panel/src/docs/description.mdx +++ b/packages/side-panel/src/docs/description.mdx @@ -704,14 +704,14 @@ render(() => { layout={footerViewSelected === 'vertical' ? 'column' : 'space-between'} > {footerSettings.hasSecondaryButton && ( - + )} {footerSettings.hasPrimaryButton && ( - + )} )} @@ -774,7 +774,7 @@ render(() => { return ( - @@ -798,7 +798,7 @@ render(() => { )} - {settings[SETTINGS_KEY.secondary] && } + {settings[SETTINGS_KEY.secondary] && } )} @@ -195,6 +197,8 @@ const SELECT_OPTIONS = [ }, ]; +const sizeButton = IS_MOBILE ? 'm' : 's'; + render(() => { const [graphic, setGraphic] = React.useState(SELECT_OPTIONS[0].key); const [open, setOpen] = React.useState(false); @@ -262,13 +266,13 @@ render(() => { direction={settings[SETTINGS_KEY.button_columns] ? 'column' : 'row'} > {settings[SETTINGS_KEY.primary] && ( - )} {settings[SETTINGS_KEY.secondary] && ( - )} diff --git a/packages/themes/src/mixins/button/click.css b/packages/themes/src/mixins/button/click.css index 9a8c2d651c..7726552e8c 100644 --- a/packages/themes/src/mixins/button/click.css +++ b/packages/themes/src/mixins/button/click.css @@ -1,4 +1,12 @@ @define-mixin button-click { + /* border-radius mobile */ + --button-xxs-size-mobile-border-radius: 6px; + --button-xs-size-mobile-border-radius: var(--border-radius-m); + --button-s-size-mobile-border-radius: var(--border-radius-m); + --button-m-size-mobile-border-radius: var(--border-radius-l); + --button-l-size-mobile-border-radius: var(--border-radius-l); + --button-xl-size-mobile-border-radius: var(--border-radius-l); + /* primary mobile */ --button-primary-mobile-disabled-color: var(--color-light-text-tertiary); --button-primary-mobile-disabled-bg-color: var(--color-light-specialbg-secondary-transparent); From a9968107013e4b6ad5a54db436c8ef3b4e0c223c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Tue, 20 Jun 2023 17:27:49 +0300 Subject: [PATCH 13/22] feat(button): fix import --- packages/button/src/mobile.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/button/src/mobile.module.css b/packages/button/src/mobile.module.css index 462c3514d1..28313dcd18 100644 --- a/packages/button/src/mobile.module.css +++ b/packages/button/src/mobile.module.css @@ -1,4 +1,4 @@ -@import '../../themes/src/default.css'; +@import './vars.css'; .xxs { border-radius: var(--button-xxs-size-mobile-border-radius); From 290964eb8123b5328d7aa9e8046782554fd03750 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Wed, 21 Jun 2023 11:59:52 +0300 Subject: [PATCH 14/22] feat(button): fix button size in tooltip --- packages/tooltip/src/component.responsive.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tooltip/src/component.responsive.tsx b/packages/tooltip/src/component.responsive.tsx index 56e0588b0c..ab9a2cecdb 100644 --- a/packages/tooltip/src/component.responsive.tsx +++ b/packages/tooltip/src/component.responsive.tsx @@ -102,7 +102,7 @@ export const TooltipResponsive: FC = ({ onClose={handleClose} hasCloser={hasCloser} actionButton={ - + {actionButtonTitle} } From 924275fb1bc5de9648139f0a37582b490a8b6ad9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Fri, 23 Jun 2023 11:45:52 +0300 Subject: [PATCH 15/22] feat(button): fix review --- jest.screenshots.config.js | 1 - .../src/__snapshots__/Component.test.tsx.snap | 2 +- packages/button/src/Component.mobile.tsx | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 28 +- .../src/components/base-button/Component.tsx | 6 +- .../components/base-button/default.module.css | 316 ++++++------ .../base-button/inverted.module.css | 320 ++++++------ .../button/src/default.desktop.module.css | 70 ++- packages/button/src/default.mobile.module.css | 62 ++- .../button/src/inverted.desktop.module.css | 70 ++- .../button/src/inverted.mobile.module.css | 62 ++- .../calendar-range/src/Component.test.tsx | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 130 ++--- .../src/__snapshots__/Component.test.tsx.snap | 64 +-- .../src/__snapshots__/Component.test.tsx.snap | 484 +++++++++--------- .../src/__snapshots__/Component.test.tsx.snap | 2 +- .../src/__snapshots__/Component.test.tsx.snap | 4 +- .../screens/fatal-error/component.tsx | 10 +- .../src/components/screens/hint/component.tsx | 11 +- .../screens/initial/countdown-section.tsx | 10 +- .../src/__snapshots__/Component.test.tsx.snap | 20 +- .../src/__snapshots__/Component.test.tsx.snap | 36 +- .../src/__snapshots__/Component.test.tsx.snap | 8 +- .../src/__snapshots__/Component.test.tsx.snap | 8 +- .../src/__snapshots__/Component.test.tsx.snap | 6 +- .../src/__snapshots__/component.test.tsx.snap | 6 +- .../src/__snapshots__/Component.test.tsx.snap | 2 +- .../src/__snapshots__/component.test.tsx.snap | 62 +-- .../src/__snapshots__/component.test.tsx.snap | 2 +- .../picker-button/src/Component.mobile.tsx | 1 - .../src/__snapshots__/Component.test.tsx.snap | 18 +- tools/storybook/findComponentPath.js | 45 +- 32 files changed, 914 insertions(+), 956 deletions(-) diff --git a/jest.screenshots.config.js b/jest.screenshots.config.js index 2e85a98b81..477b8c2891 100644 --- a/jest.screenshots.config.js +++ b/jest.screenshots.config.js @@ -14,7 +14,6 @@ module.exports = { }, }, moduleNameMapper: { - '@alfalab/core-components-(.*)/(.*)$': '/packages/$1/src/$2', '@alfalab/core-components-(.*)$': '/packages/$1/src', '\\.css$': 'identity-obj-proxy', }, diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap index 58cfdc3abb..3341609430 100644 --- a/packages/attach/src/__snapshots__/Component.test.tsx.snap +++ b/packages/attach/src/__snapshots__/Component.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Attach Snapshots tests should match snapshot 1`] = ` class="component s" >
, "container":
, @@ -77,14 +77,14 @@ Object { "baseElement": , "container": , @@ -148,14 +148,14 @@ Object { "baseElement":
, "container":
, @@ -219,7 +219,7 @@ Object { "baseElement":
)} - {showSecondaryButton && } + {showSecondaryButton && } )} From 32670221a2990fb164f2b43cc865076293077d30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D0=BB=D0=B5=D1=80=D0=B8=D1=8F=20=D0=A7=D1=83?= =?UTF-8?q?=D1=80=D0=B8=D1=87=D0=B5=D0=B2=D0=B0?= Date: Fri, 4 Aug 2023 09:27:57 +0300 Subject: [PATCH 22/22] fix(button): fix bugs --- packages/picker-button/src/Component.mobile.tsx | 4 ++-- packages/picker-button/src/Component.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/picker-button/src/Component.mobile.tsx b/packages/picker-button/src/Component.mobile.tsx index 4fba99d8b0..6ced1dfa2e 100644 --- a/packages/picker-button/src/Component.mobile.tsx +++ b/packages/picker-button/src/Component.mobile.tsx @@ -44,7 +44,7 @@ export const PickerButtonMobile = forwardRef { - const fieldDedaultProps = { + const fieldDefaultProps = { view, loading, /** size у select, button несовместимы */ @@ -71,7 +71,7 @@ export const PickerButtonMobile = forwardRef