From 03255f3671604d476a83fb206779fb6dcedeeb3e Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Tue, 19 Nov 2024 13:44:54 +0700 Subject: [PATCH 1/7] feat(custom-button): update docs, change colors --- .changeset/tender-ladybugs-clap.md | 5 ++ .../custom-button/src/docs/description.mdx | 66 +++++++++++++++++-- packages/custom-button/src/index.module.css | 12 +++- 3 files changed, 75 insertions(+), 8 deletions(-) create mode 100644 .changeset/tender-ladybugs-clap.md diff --git a/.changeset/tender-ladybugs-clap.md b/.changeset/tender-ladybugs-clap.md new file mode 100644 index 0000000000..79eb8ccda3 --- /dev/null +++ b/.changeset/tender-ladybugs-clap.md @@ -0,0 +1,5 @@ +--- +'@alfalab/core-components-custom-button': minor +--- + +Изменены цвета заблокированного состояния diff --git a/packages/custom-button/src/docs/description.mdx b/packages/custom-button/src/docs/description.mdx index 9291073bec..9120d91c6d 100644 --- a/packages/custom-button/src/docs/description.mdx +++ b/packages/custom-button/src/docs/description.mdx @@ -13,21 +13,25 @@ const VARIANTS = { stateType: 'static-lightening', contentColor: 'static-white', backgroundColor: '#EB58BF', + disabledBackgroundColor: 'var(--color-static-neutral-translucent-100)', }, Light: { stateType: 'lightening', contentColor: 'white', backgroundColor: '#EB58BF', + disabledBackgroundColor: 'var(--color-light-neutral-translucent-100)', }, StaticDark: { stateType: 'static-darkening', contentColor: 'static-black', backgroundColor: '#7FEFFA', + disabledBackgroundColor: 'var(--color-static-neutral-translucent-100-inverted)', }, Dark: { stateType: 'darkening', contentColor: 'black', backgroundColor: '#7FEFFA', + disabledBackgroundColor: 'var(--color-light-neutral-translucent-100-inverted)', }, }; render(() => { @@ -37,17 +41,25 @@ render(() => {
{Object.keys(VARIANTS).map((title) => ( - + {title} ))}
- setDisabled((prevState) => !prevState)} - label='Недоступна' - /> + setDisabled((prevState) => !prevState)} + label='Недоступна' + />
); }); @@ -89,3 +101,45 @@ render(() => { ); }); ``` + +## Анатомия + +С помощью слотов `leftAddons` и `rightAddons` можно кастомизировать кнопку. Например, добавить иконку. Переданный контент будет отрисован слева или справа от текста кнопки. Если текста нет — будет отрисована квадратная кнопка. В 56, 64 и 72 размерах доступна подпись под лейблом. + +```jsx live +render(() => { + const [label, setLabel] = React.useState(true); + const [hint, setHint] = React.useState(); + const [leftAddons, setLeftAddons] = React.useState(false); + const [rightAddons, setRightAddons] = React.useState(false); + + const handleLabelChange = () => setLabel(!label); + const handleHintChange = () => setHint((p) => (p ? undefined : 'Hint')); + const handleLeftAddonsChange = () => setLeftAddons(!leftAddons); + const handleRightAddonsChange = () => setRightAddons(!rightAddons); + + return ( +
+ } + rightAddons={rightAddons && } + hint={hint} + block={isMobile()} + backgroundColor={'var(--color-light-base-bg-secondary-inverted)'} + > + {label && 'Label'} + + + + + + + + + + + +
+ ); +}); +``` diff --git a/packages/custom-button/src/index.module.css b/packages/custom-button/src/index.module.css index a4e87ed7ad..c3790488f0 100644 --- a/packages/custom-button/src/index.module.css +++ b/packages/custom-button/src/index.module.css @@ -93,10 +93,18 @@ } &.white * { - color: var(--color-static-text-primary-inverted); + color: var(--color-light-text-tertiary); } &.black * { - color: var(--color-static-text-primary); + color: var(--color-light-text-tertiary-inverted); + } + + &.static-white * { + color: var(--color-static-text-tertiary); + } + + &.static-black * { + color: var(--color-static-text-tertiary-inverted); } } From 2b269f12d587dcb5ddcf103299d183af71e69f5c Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Tue, 19 Nov 2024 13:59:12 +0700 Subject: [PATCH 2/7] feat(custom-button): update screenshots --- ...tton-colors-disabled-state-and-themes-click-theme-snap.png | 4 ++-- ...utton-colors-disabled-state-and-themes-corp-theme-snap.png | 4 ++-- ...on-colors-disabled-state-and-themes-default-theme-snap.png | 4 ++-- ...n-colors-disabled-state-and-themes-intranet-theme-snap.png | 4 ++-- ...ton-colors-disabled-state-and-themes-mobile-theme-snap.png | 4 ++-- ...utton-colors-disabled-state-and-themes-site-theme-snap.png | 4 ++-- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-click-theme-snap.png b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-click-theme-snap.png index 37d77ed008..c17e017969 100644 --- a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-click-theme-snap.png +++ b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-click-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cdd3424f2bfca6a534ca027d71b647da6aec36cc21218e328753ea8372bf3094 -size 25642 +oid sha256:1b59787ba15a345f7e253bd3fb12f9ca47617e605edd405074410cd523f71ae9 +size 25298 diff --git a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-corp-theme-snap.png b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-corp-theme-snap.png index 8e440382bd..c17e017969 100644 --- a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-corp-theme-snap.png +++ b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-corp-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:25708aa47b3a05d12ecbbb82d6fb766e3abd79f793f916fd3d347dce8d8b9715 -size 25755 +oid sha256:1b59787ba15a345f7e253bd3fb12f9ca47617e605edd405074410cd523f71ae9 +size 25298 diff --git a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-default-theme-snap.png b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-default-theme-snap.png index 37d77ed008..c17e017969 100644 --- a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-default-theme-snap.png +++ b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-default-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cdd3424f2bfca6a534ca027d71b647da6aec36cc21218e328753ea8372bf3094 -size 25642 +oid sha256:1b59787ba15a345f7e253bd3fb12f9ca47617e605edd405074410cd523f71ae9 +size 25298 diff --git a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-intranet-theme-snap.png b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-intranet-theme-snap.png index 37d77ed008..c17e017969 100644 --- a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-intranet-theme-snap.png +++ b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-intranet-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cdd3424f2bfca6a534ca027d71b647da6aec36cc21218e328753ea8372bf3094 -size 25642 +oid sha256:1b59787ba15a345f7e253bd3fb12f9ca47617e605edd405074410cd523f71ae9 +size 25298 diff --git a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-mobile-theme-snap.png b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-mobile-theme-snap.png index 37d77ed008..c17e017969 100644 --- a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-mobile-theme-snap.png +++ b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-mobile-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cdd3424f2bfca6a534ca027d71b647da6aec36cc21218e328753ea8372bf3094 -size 25642 +oid sha256:1b59787ba15a345f7e253bd3fb12f9ca47617e605edd405074410cd523f71ae9 +size 25298 diff --git a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-site-theme-snap.png b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-site-theme-snap.png index 37d77ed008..c17e017969 100644 --- a/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-site-theme-snap.png +++ b/packages/custom-button/src/__image_snapshots__/custom-button-colors-disabled-state-and-themes-site-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cdd3424f2bfca6a534ca027d71b647da6aec36cc21218e328753ea8372bf3094 -size 25642 +oid sha256:1b59787ba15a345f7e253bd3fb12f9ca47617e605edd405074410cd523f71ae9 +size 25298 From 780e716dfbee032b4392b8cc10e9801b8f9a1036 Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Tue, 19 Nov 2024 21:29:48 +0700 Subject: [PATCH 3/7] feat(custom-button): update docs, change colors --- packages/custom-button/src/Component.tsx | 18 +- .../src/__snapshots__/Component.test.tsx.snap | 20 +-- .../custom-button/src/docs/description.mdx | 155 +++++++++++++++--- packages/custom-button/src/index.module.css | 34 ++-- .../src/__snapshots__/Component.test.tsx.snap | 36 ++-- 5 files changed, 195 insertions(+), 68 deletions(-) diff --git a/packages/custom-button/src/Component.tsx b/packages/custom-button/src/Component.tsx index 0ca342ded4..8c19a9ee3c 100644 --- a/packages/custom-button/src/Component.tsx +++ b/packages/custom-button/src/Component.tsx @@ -23,6 +23,16 @@ export type ComponentProps = Omit & { * Затемнение или осветление кнопки при hover и active */ stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening'; + + /** + * Блокировка кнопки + */ + disabled?: boolean; + + /** + * Тип цвета для заблокированного состояния + */ + disableType?: 'default' | 'static' | 'inverted' | 'static-inverted'; }; type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes; @@ -42,12 +52,15 @@ export const CustomButton = React.forwardRef< backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', + disableType = 'default', ...restProps }, ref, ) => { const buttonProps = { - style: { background: backgroundColor }, + style: { + ...(!restProps.disabled && { background: backgroundColor }), + }, ...restProps, }; @@ -57,8 +70,9 @@ export const CustomButton = React.forwardRef< className, styles[contentColor], styles[stateType], + styles[`disableType_${disableType}`], { - [styles.customLoading]: loading, + // [styles.customLoading]: loading, }, ); diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap index 4307879fa3..3527e82e29 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":