diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap index e6274801c6..acae61ae25 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 size-48" > @@ -169,7 +161,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = ` tabindex="0" > @@ -1090,7 +1074,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = ` tabindex="0" > @@ -3521,7 +3513,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot tabindex="-1" > @@ -83,31 +75,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps > diff --git a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap index 17ec893ba2..5c3bdc3c31 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`] Выполните операцию с самого начала @@ -151,58 +144,51 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = ` - - - - - + + diff --git a/packages/icon-button/src/Component.tsx b/packages/icon-button/src/Component.tsx index 72431fe947..6c9c187c43 100644 --- a/packages/icon-button/src/Component.tsx +++ b/packages/icon-button/src/Component.tsx @@ -7,7 +7,9 @@ import React, { } from 'react'; import cn from 'classnames'; -import { Button, type ButtonProps } from '@alfalab/core-components-button'; +import { type ButtonProps } from '@alfalab/core-components-button'; +import { BaseButtonCandidate } from '@alfalab/core-components-button/components/base-button-candidate'; +import { useLoading } from '@alfalab/core-components-button/shared'; import defaultColors from './default.module.css'; import styles from './index.module.css'; @@ -27,7 +29,7 @@ export type IconButtonProps = { /** * Тип кнопки */ - view?: 'primary' | 'secondary' | 'transparent' | 'tertiary' | 'negative'; + view?: 'primary' | 'secondary' | 'transparent' /* @deprecated */ | 'tertiary' | 'negative'; /** * Размер компонента @@ -75,41 +77,46 @@ export const IconButton = forwardRef( colors = 'default', alignIcon = 'center', transparentBg = false, + loading: loadingFromProps, ...restProps }, ref, - ) => ( - - ), + > + + {React.isValidElement(Icon) ? ( + React.cloneElement(Icon as ReactElement<{ className?: string }>, { + className: cn( + styles.icon, + (Icon as ReactElement<{ className?: string }>).props.className, + ), + }) + ) : ( + + )} + + + ); + }, ); IconButton.displayName = 'IconButton'; diff --git a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png index 55c90c17e8..33ff2c237a 100644 --- a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png +++ b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8e53491bfb3fc6f57e699eb2c415dbcb9f83afb4df39ca93933ba24df1fe97ac -size 746 +oid sha256:62097e0415d97675a2f7450354d02030659f8f27758cf13087b9c659efd39b6c +size 666 diff --git a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png index b6e213019c..47efd91ae2 100644 --- a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png +++ b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:67d0e1565e1e3c8b6453dfbe05895aee84aae9c28dd30fbc55eab831ab0a6d0b -size 623 +oid sha256:0fc8bbcebdb89d7e81c629a0d947c3fe8892af7bdc60225f8d0fd5a200ceae17 +size 711 diff --git a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap index a082420f3b..818600cae3 100644 --- a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap +++ b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap @@ -6,42 +6,10 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = ` "baseElement":
- - - - - - - - -
- , - "container":
- - + +
+ , + "container":
+ + + + +
, @@ -123,40 +117,8 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = ` "baseElement":
-
- , - "container":
- +
+ , + "container":
+
, diff --git a/packages/icon-button/src/default.module.css b/packages/icon-button/src/default.module.css index 231494d1f5..3620310b2c 100644 --- a/packages/icon-button/src/default.module.css +++ b/packages/icon-button/src/default.module.css @@ -36,60 +36,70 @@ &.primary { color: var(--icon-button-primary-base-color); - @mixin hover { - color: var(--icon-button-primary-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-primary-hover-color); + } - &:active { - color: var(--icon-button-primary-active-color); + &:active { + color: var(--icon-button-primary-active-color); + } } } &.secondary { color: var(--icon-button-secondary-base-color); - @mixin hover { - color: var(--icon-button-secondary-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-secondary-hover-color); + } - &:active { - color: var(--icon-button-secondary-active-color); + &:active { + color: var(--icon-button-secondary-active-color); + } } } &.transparent { color: var(--icon-button-transparent-base-color); - @mixin hover { - color: var(--icon-button-transparent-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-transparent-hover-color); + } - &:active { - color: var(--icon-button-transparent-active-color); + &:active { + color: var(--icon-button-transparent-active-color); + } } } &.negative { color: var(--icon-button-negative-base-color); - @mixin hover { - color: var(--icon-button-negative-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-negative-hover-color); + } - &:active { - color: var(--icon-button-negative-active-color); + &:active { + color: var(--icon-button-negative-active-color); + } } } &.tertiary { color: var(--icon-button-tertiary-base-color); - @mixin hover { - color: var(--icon-button-tertiary-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-tertiary-hover-color); + } - &:active { - color: var(--icon-button-tertiary-active-color); + &:active { + color: var(--icon-button-tertiary-active-color); + } } } @@ -97,87 +107,105 @@ &.primary { color: var(--color-light-text-primary); - @mixin hover { - background: var(--color-light-transparent-default-hover); - } + @mixin not-disabled { + @mixin hover { + background: var(--color-light-transparent-default-hover); + } - &:active { - background: var(--color-light-transparent-default-press); + &:active { + background: var(--color-light-transparent-default-press); + } } } &.secondary { color: var(--color-light-text-secondary); - @mixin hover { - background: var(--color-light-transparent-default-hover); - } + @mixin not-disabled { + @mixin hover { + background: var(--color-light-transparent-default-hover); + } - &:active { - background: var(--color-light-transparent-default-press); + &:active { + background: var(--color-light-transparent-default-press); + } } } &.negative { color: var(--color-light-text-negative); - @mixin hover { - background: var(--color-light-transparent-default-hover); - } + @mixin not-disabled { + @mixin hover { + background: var(--color-light-transparent-default-hover); + } - &:active { - background: var(--color-light-transparent-default-press); + &:active { + background: var(--color-light-transparent-default-press); + } } } &.tertiary { color: var(--color-light-text-tertiary); - @mixin hover { - background: var(--color-light-transparent-default-hover); - } + @mixin not-disabled { + @mixin hover { + background: var(--color-light-transparent-default-hover); + } - &:active { - background: var(--color-light-transparent-default-press); + &:active { + background: var(--color-light-transparent-default-press); + } } } } - &.component:disabled { - &.primary { - color: var(--icon-button-primary-disabled-color); + &.component { + @mixin disabled { + &.primary { + color: var(--icon-button-primary-disabled-color); - &.loader { - color: var(--icon-button-primary-base-color); + &.loader { + color: var(--icon-button-primary-base-color); + } } - } - &.secondary { - color: var(--icon-button-secondary-disabled-color); + &.secondary { + color: var(--icon-button-secondary-disabled-color); - &.loader { - color: var(--icon-button-secondary-base-color); + &.loader { + color: var(--icon-button-secondary-base-color); + } } - } - &.negative { - color: var(--icon-button-negative-disabled-color); + &.transparent { + color: var(--icon-button-transparent-disabled-color); - &.loader { - color: var(--icon-button-negative-base-color); + &.loader { + color: var(--icon-button-transparent-base-color); + } } - } - &.tertiary { - color: var(--icon-button-tertiary-disabled-color); + &.negative { + color: var(--icon-button-negative-disabled-color); - &.loader { - color: var(--icon-button-tertiary-base-color); + &.loader { + color: var(--icon-button-negative-base-color); + } } - } - &.transparentBg { - background: transparent; + &.tertiary { + color: var(--icon-button-tertiary-disabled-color); + + &.loader { + color: var(--icon-button-tertiary-base-color); + } + } + + &.transparentBg { + background: transparent; + } } } } diff --git a/packages/icon-button/src/inverted.module.css b/packages/icon-button/src/inverted.module.css index 0b6f20d65e..81727ecd37 100644 --- a/packages/icon-button/src/inverted.module.css +++ b/packages/icon-button/src/inverted.module.css @@ -66,60 +66,70 @@ &.primary { color: var(--icon-button-inverted-primary-base-color); - @mixin hover { - color: var(--icon-button-inverted-primary-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-inverted-primary-hover-color); + } - &:active { - color: var(--icon-button-inverted-primary-active-color); + &:active { + color: var(--icon-button-inverted-primary-active-color); + } } } &.secondary { color: var(--icon-button-inverted-secondary-base-color); - @mixin hover { - color: var(--icon-button-inverted-secondary-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-inverted-secondary-hover-color); + } - &:active { - color: var(--icon-button-inverted-secondary-active-color); + &:active { + color: var(--icon-button-inverted-secondary-active-color); + } } } &.transparent { color: var(--icon-button-inverted-transparent-base-color); - @mixin hover { - color: var(--icon-button-inverted-transparent-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-inverted-transparent-hover-color); + } - &:active { - color: var(--icon-button-inverted-transparent-active-color); + &:active { + color: var(--icon-button-inverted-transparent-active-color); + } } } &.negative { color: var(--icon-button-inverted-negative-base-color); - @mixin hover { - color: var(--icon-button-inverted-negative-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-inverted-negative-hover-color); + } - &:active { - color: var(--icon-button-inverted-negative-active-color); + &:active { + color: var(--icon-button-inverted-negative-active-color); + } } } &.tertiary { color: var(--icon-button-inverted-tertiary-base-color); - @mixin hover { - color: var(--icon-button-inverted-tertiary-hover-color); - } + @mixin not-disabled { + @mixin hover { + color: var(--icon-button-inverted-tertiary-hover-color); + } - &:active { - color: var(--icon-button-inverted-tertiary-active-color); + &:active { + color: var(--icon-button-inverted-tertiary-active-color); + } } } @@ -127,87 +137,105 @@ &.primary { color: var(--color-light-text-primary-inverted); - @mixin hover { - background: var(--color-light-transparent-default-inverted-hover); - } + @mixin not-disabled { + @mixin hover { + background: var(--color-light-transparent-default-inverted-hover); + } - &:active { - background: var(--color-light-transparent-default-inverted-press); + &:active { + background: var(--color-light-transparent-default-inverted-press); + } } } &.secondary { color: var(--color-light-text-secondary-inverted); - @mixin hover { - background: var(--color-light-transparent-default-inverted-hover); - } + @mixin not-disabled { + @mixin hover { + background: var(--color-light-transparent-default-inverted-hover); + } - &:active { - background: var(--color-light-transparent-default-inverted-press); + &:active { + background: var(--color-light-transparent-default-inverted-press); + } } } &.negative { color: var(--color-light-text-negative-inverted); - @mixin hover { - background: var(--color-light-transparent-default-inverted-hover); - } + @mixin not-disabled { + @mixin hover { + background: var(--color-light-transparent-default-inverted-hover); + } - &:active { - background: var(--color-light-transparent-default-inverted-press); + &:active { + background: var(--color-light-transparent-default-inverted-press); + } } } &.tertiary { color: var(--color-light-text-tertiary-inverted); - @mixin hover { - background: var(--color-light-transparent-default-inverted-hover); - } + @mixin not-disabled { + @mixin hover { + background: var(--color-light-transparent-default-inverted-hover); + } - &:active { - background: var(--color-light-transparent-default-inverted-press); + &:active { + background: var(--color-light-transparent-default-inverted-press); + } } } } - &.component:disabled { - &.primary { - color: var(--icon-button-inverted-primary-disabled-color); + &.component { + @mixin disabled { + &.primary { + color: var(--icon-button-inverted-primary-disabled-color); - &.loader { - color: var(--icon-button-inverted-primary-base-color); + &.loader { + color: var(--icon-button-inverted-primary-base-color); + } } - } - &.secondary { - color: var(--icon-button-inverted-secondary-disabled-color); + &.secondary { + color: var(--icon-button-inverted-secondary-disabled-color); - &.loader { - color: var(--icon-button-inverted-secondary-base-color); + &.loader { + color: var(--icon-button-inverted-secondary-base-color); + } } - } - &.negative { - color: var(--icon-button-inverted-negative-disabled-color); + &.transparent { + color: var(--icon-button-inverted-transparent-disabled-color); - &.loader { - color: var(--icon-button-inverted-negative-base-color); + &.loader { + color: var(--icon-button-inverted-transparent-base-color); + } } - } - &.tertiary { - color: var(--icon-button-inverted-tertiary-disabled-color); + &.negative { + color: var(--icon-button-inverted-negative-disabled-color); - &.loader { - color: var(--icon-button-inverted-tertiary-base-color); + &.loader { + color: var(--icon-button-inverted-negative-base-color); + } } - } - &.transparentBg { - background: transparent; + &.tertiary { + color: var(--icon-button-inverted-tertiary-disabled-color); + + &.loader { + color: var(--icon-button-inverted-tertiary-base-color); + } + } + + &.transparentBg { + background: transparent; + } } } } diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap index 1ef9414e9e..0be909384f 100644 --- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap +++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap @@ -140,29 +140,25 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s > @@ -380,7 +376,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s tabindex="0" > @@ -161,7 +157,7 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = ` > diff --git a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap index c8e51ee280..e310b1fdb8 100644 --- a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap +++ b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap @@ -18,7 +18,7 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = ` > diff --git a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap index fec0ad535e..917b30f52a 100644 --- a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap +++ b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap @@ -57,29 +57,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = ` > @@ -120,29 +116,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = ` > @@ -183,29 +175,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = ` > diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap index c7faafdfec..951c5c7b01 100644 --- a/packages/notification/src/__snapshots__/Component.test.tsx.snap +++ b/packages/notification/src/__snapshots__/Component.test.tsx.snap @@ -67,29 +67,25 @@ exports[`Notification Snapshots tests should match snapshot 1`] = ` > diff --git a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap index f2b2194062..eccff4798d 100644 --- a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap +++ b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap @@ -35,143 +35,67 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
-
- -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
+ 9 +
-
- -
+ 0 +
@@ -202,173 +126,89 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
-
- -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
+ 9 +
-
- -
-
+ -
+ + + +
@@ -396,143 +236,67 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
-
- -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
-
+ -
+ 9 +
-
- -
+ 0 +
diff --git a/packages/pass-code-v1/src/component.test.tsx b/packages/pass-code-v1/src/component.test.tsx index 697ce3c939..ce3f89adc7 100644 --- a/packages/pass-code-v1/src/component.test.tsx +++ b/packages/pass-code-v1/src/component.test.tsx @@ -39,7 +39,7 @@ describe('PassCodeV1', () => { const { getByText } = render(); - const button = getByText(pressedDigit).parentNode as HTMLButtonElement; + const button = getByText(pressedDigit) as HTMLButtonElement; fireEvent.click(button); diff --git a/packages/pass-code-v1/src/components/KeyPad/Component.tsx b/packages/pass-code-v1/src/components/KeyPad/Component.tsx index 3f0a5c6c3b..cbd8c5f5a5 100644 --- a/packages/pass-code-v1/src/components/KeyPad/Component.tsx +++ b/packages/pass-code-v1/src/components/KeyPad/Component.tsx @@ -81,10 +81,14 @@ export const KeyPad: React.FC = ({ return
; } + const handleDigitClick = () => { + onClick(digit); + }; + return ( = { +export type KeyPadButtonProps = { /** * Вид кнопки. */ - view: ButtonMobileProps['view']; + view: 'secondary' | 'text'; /** * Значение. */ - children: T; + children?: ReactNode; /** * Дополнительный класс. @@ -29,7 +29,7 @@ export type KeyPadButtonProps = { /** * Коллбэк нажатия на кнопку. */ - onClick?: (payload: T) => void; + onClick?: () => void; /** * Идентификатор для систем автоматизированного тестирования. @@ -37,24 +37,18 @@ export type KeyPadButtonProps = { dataTestId?: string; }; -export function KeyPadButton({ - children, - onClick, - className, +export const KeyPadButton: FC = ({ view = 'secondary', buttonClassName, + children, dataTestId, -}: KeyPadButtonProps) { - return ( -
- onClick?.(children)} - dataTestId={dataTestId} - > - {children} - -
- ); -} + onClick, +}) => ( + + {children} + +); diff --git a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css index 60277952b2..d246f2e4af 100644 --- a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css +++ b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css @@ -2,67 +2,41 @@ @import '../../vars.css'; .component { - display: flex; - justify-content: center; - align-items: center; - padding: var(--gap-0); -} - -.button.button { + font: var(--font-family); @mixin action_component_secondary; border-radius: var(--border-radius-circle); - padding: var(--gap-0); - min-width: 64px; width: 64px; height: 64px; - text-align: center; - - & > span { - vertical-align: middle; - & > * { - vertical-align: middle; - } - } -} - -.secondary.secondary { + justify-content: center; + align-items: center; color: var(--color-light-text-primary); - background: var(--button-bg-color); - &:hover { - color: var(--color-light-text-primary); - } + &.secondary { + background: var(--button-bg-color); - &:active { - background: var(--button-bg-color-active); + &:active { + background: var(--button-bg-color-active); + } } -} - -.ghost.ghost { - color: var(--color-light-text-primary); - &:hover { - color: var(--color-light-text-primary); - } + &.text { + @mixin hover { + color: var(--color-light-text-primary-hover); + } - &:active { - background: var(--button-bg-color-active); + &:active { + color: var(--color-light-text-primary-press); + } } -} -@media screen and (min-width: 360px) { - .button.button { - min-width: 76px; + @media screen and (min-width: 360px) { height: 76px; width: 76px; } -} -@media screen and (min-width: 390px) { - .button.button { - min-width: 86px; + @media screen and (min-width: 390px) { width: 86px; height: 86px; } diff --git a/packages/pass-code/src/__snapshots__/component.test.tsx.snap b/packages/pass-code/src/__snapshots__/component.test.tsx.snap index 0fdc1d4e03..800ae4abd7 100644 --- a/packages/pass-code/src/__snapshots__/component.test.tsx.snap +++ b/packages/pass-code/src/__snapshots__/component.test.tsx.snap @@ -53,98 +53,62 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = ` class="component" >
diff --git a/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap b/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap index 630991db6c..d92d76a7ad 100644 --- a/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap +++ b/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap @@ -9,7 +9,7 @@ exports[`PatternLockV1 test Snapshot tests should match snapshot 1`] = ` class="message" />
@@ -26,7 +26,7 @@ exports[`PatternLockV1 test Snapshot tests should match snapshot with error prop Error message
diff --git a/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx b/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx index ca07026e6e..b7830a5299 100644 --- a/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx +++ b/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx @@ -126,23 +126,24 @@ export const BasePatternLock = forwardRef< extraBounds={extraBounds} hover={hover} /> - - {showForgotCodeBtn ? ( - - {forgotCodeBtnText} - - ) : ( -
- )} +
+ {showForgotCodeBtn && ( + + {forgotCodeBtnText} + + )} +
); }, diff --git a/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css b/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css index a9b297ba41..e02b49b74d 100644 --- a/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css +++ b/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css @@ -28,7 +28,12 @@ color: var(--color-light-text-negative); } -.forgotBtn { - display: block; +.forgotBtnContainer { + display: flex; + justify-content: center; +} + +.forgotBtnContainer, +.forgotBtn.forgotBtn.forgotBtn { min-height: var(--size-xs-height); } diff --git a/packages/pattern-lock-v1/src/desktop/desktop.module.css b/packages/pattern-lock-v1/src/desktop/desktop.module.css index f9a14de1e5..d580c66f7e 100644 --- a/packages/pattern-lock-v1/src/desktop/desktop.module.css +++ b/packages/pattern-lock-v1/src/desktop/desktop.module.css @@ -6,7 +6,7 @@ margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0); } -.forgotBtn { +.forgotBtnContainer { margin: var(--gap-24) auto var(--gap-0); } diff --git a/packages/pattern-lock-v1/src/mobile/mobile.module.css b/packages/pattern-lock-v1/src/mobile/mobile.module.css index 771c91fc56..9caaaa80e1 100644 --- a/packages/pattern-lock-v1/src/mobile/mobile.module.css +++ b/packages/pattern-lock-v1/src/mobile/mobile.module.css @@ -6,13 +6,16 @@ margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0); } -.forgotBtn { +.forgotBtnContainer { margin: var(--gap-24) auto var(--gap-0); } @media screen and (min-width: 360px) { - .forgotBtn { + .forgotBtnContainer { margin-top: var(--gap-32); + } + .forgotBtnContainer, + .forgotBtn.forgotBtn.forgotBtn { min-height: var(--size-s-height); } @@ -22,7 +25,8 @@ } @media screen and (min-width: 390px) { - .forgotBtn { + .forgotBtnContainer, + .forgotBtn.forgotBtn.forgotBtn { min-height: var(--size-m-height); } diff --git a/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png b/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png index 678ec1c6d2..dc230a1366 100644 --- a/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png +++ b/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5a8cc30205a0fdb528b64a54dbbd964a50b854d6a090b50cea8d2386e56df0d0 -size 9019 +oid sha256:bc7add260dd67f0f0bc65e793dec0b4f5bc8d617ee1624f013d3cab03f07de79 +size 8754 diff --git a/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap b/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap index 575242d8d9..bf276cc7fa 100644 --- a/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap +++ b/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap @@ -3,7 +3,7 @@ exports[`PatternLock test Snapshot tests should match snapshot 1`] = `
{showForgotCodeBtn && ( - - {forgotCodeBtnText} - +
+ + {forgotCodeBtnText} + +
)}
); diff --git a/packages/pattern-lock/src/components/base-pattern-lock/index.module.css b/packages/pattern-lock/src/components/base-pattern-lock/index.module.css index 8afcb3af9c..38ff009988 100644 --- a/packages/pattern-lock/src/components/base-pattern-lock/index.module.css +++ b/packages/pattern-lock/src/components/base-pattern-lock/index.module.css @@ -35,7 +35,8 @@ min-height: var(--pattern-lock-with-forgot-btn-min-height); } -.forgotBtn { - display: block; - min-height: var(--size-xs-height); +.forgotBtnContainer { + display: flex; + justify-content: center; + margin: var(--gap-8) auto var(--gap-0); } diff --git a/packages/pattern-lock/src/desktop/Component.desktop.tsx b/packages/pattern-lock/src/desktop/Component.desktop.tsx index be765912c1..880305a092 100644 --- a/packages/pattern-lock/src/desktop/Component.desktop.tsx +++ b/packages/pattern-lock/src/desktop/Component.desktop.tsx @@ -5,10 +5,8 @@ import { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock'; import { BasePatternLock } from '../components/base-pattern-lock'; import { type CommonPatternLockProps } from '../typings'; -import styles from './desktop.module.css'; - export const PatternLockDesktop = forwardRef( - (restProps, ref) => , + (restProps, ref) => , ); PatternLockDesktop.displayName = 'PatternLockDesktop'; diff --git a/packages/pattern-lock/src/desktop/desktop.module.css b/packages/pattern-lock/src/desktop/desktop.module.css deleted file mode 100644 index 6c6b96266e..0000000000 --- a/packages/pattern-lock/src/desktop/desktop.module.css +++ /dev/null @@ -1,15 +0,0 @@ -@import '@alfalab/core-components-vars/src/no-typography-index.css'; -@import '../vars.css'; - -.component { - margin: var(--gap-0) auto; - min-width: var(--pattern-lock-min-width); -} - -.forgotBtn { - margin: var(--gap-8) auto var(--gap-0); -} - -.hiddenBtn { - display: none; -} diff --git a/packages/pattern-lock/src/mobile/Component.mobile.tsx b/packages/pattern-lock/src/mobile/Component.mobile.tsx index 98efd99c02..36735aab1d 100644 --- a/packages/pattern-lock/src/mobile/Component.mobile.tsx +++ b/packages/pattern-lock/src/mobile/Component.mobile.tsx @@ -5,10 +5,8 @@ import { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock'; import { BasePatternLock } from '../components/base-pattern-lock'; import { type CommonPatternLockProps } from '../typings'; -import styles from './mobile.module.css'; - export const PatternLockMobile = forwardRef( - (restProps, ref) => , + (restProps, ref) => , ); PatternLockMobile.displayName = 'PatternLockMobile'; diff --git a/packages/pattern-lock/src/mobile/mobile.module.css b/packages/pattern-lock/src/mobile/mobile.module.css deleted file mode 100644 index 57d3ff2840..0000000000 --- a/packages/pattern-lock/src/mobile/mobile.module.css +++ /dev/null @@ -1,11 +0,0 @@ -@import '@alfalab/core-components-vars/src/no-typography-index.css'; -@import '../vars.css'; - -.component { - margin: var(--gap-0) auto; - min-width: var(--pattern-lock-min-width); -} - -.forgotBtn { - margin: var(--gap-8) auto var(--gap-0); -} diff --git a/packages/pattern-lock/src/typings.ts b/packages/pattern-lock/src/typings.ts index e17ec2e02b..e8d6b1d102 100644 --- a/packages/pattern-lock/src/typings.ts +++ b/packages/pattern-lock/src/typings.ts @@ -75,10 +75,6 @@ export type PrivatePatternLockProps = { * Включает ховер-эффект */ hover?: boolean; - /** - * Стили компонента - */ - styles: { [key: string]: string }; }; export type PatternLockProps = CommonPatternLockProps & { diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap index 64ae768f93..844065e153 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`] = `
@@ -1382,7 +1378,7 @@ exports[`Snapshots tests should display opened correctly 5`] = ` diff --git a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap index 6e22302186..08057d231f 100644 --- a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap +++ b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap @@ -30,7 +30,7 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = ` > @@ -168,7 +164,7 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = ` > diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png index 143035f38b..b3b418e19e 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:36430c5f8bb9992a75386cfd79cd5bdf9d6e52913a4b1fe999e9827595eeb44b -size 6593 +oid sha256:b0a8bd828f30ae7bf0a13fec26d72979eae6925de9c7d4c8251fead5d6b2a2e5 +size 6579 diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png index 6cc1c46f8d..b75c5098c5 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e20d6ff21a16a231f1b463cb3d79d5cc8a4666a07087413fac8058f54ce73ff8 -size 6868 +oid sha256:9c77f5219ebce4542ff87cf5167a68e2cc36651f976fc8a6f8cc52c90ea093e2 +size 6841 diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png index 6cc1c46f8d..b75c5098c5 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e20d6ff21a16a231f1b463cb3d79d5cc8a4666a07087413fac8058f54ce73ff8 -size 6868 +oid sha256:9c77f5219ebce4542ff87cf5167a68e2cc36651f976fc8a6f8cc52c90ea093e2 +size 6841 diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png index 578ed625cc..39d24c8173 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e33a82912452b8838c5babf103b547bc5cc0d2730888c56820258aab890d14af -size 6838 +oid sha256:4013e498eef8d58cf6dccfdb0b33c6fafda311abd5e45f806f0bf844b1f03fa9 +size 6824 diff --git a/packages/vars/src/mixins.css b/packages/vars/src/mixins.css index 88b145fbe3..ff406eafc6 100644 --- a/packages/vars/src/mixins.css +++ b/packages/vars/src/mixins.css @@ -119,3 +119,16 @@ -webkit-box-orient: vertical; overflow: hidden; } + +@define-mixin disabled { + &:disabled, + &.disabled { + @mixin-content; + } +} + +@define-mixin not-disabled { + &:not(:disabled):not(.disabled) { + @mixin-content; + } +}