From ca1a79ecc8055af5a480e86e2f7a4eeda9c97dee Mon Sep 17 00:00:00 2001 From: Vadim Kalushko Date: Tue, 23 Jun 2026 09:29:32 +0300 Subject: [PATCH 1/4] =?UTF-8?q?feat(filter-tag,=20tag):=20=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D1=8B=D0=B5=20view=20=D0=B8=20=D0=BD=D0=BE=D0=B2=D1=8B?= =?UTF-8?q?=D0=B5=20=D0=BC=D0=B5=D1=85=D0=B0=D0=BD=D0=B8=D0=BA=D0=B8=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=BE?= =?UTF-8?q?=D0=B2=20[DS-17046]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/strong-donkeys-rush.md | 8 + .changeset/stupid-eels-talk.md | 8 + .../src/__snapshots__/Component.test.tsx.snap | 24 +- packages/filter-tag/src/Component.test.tsx | 155 ++++- .../src/__snapshots__/Component.test.tsx.snap | 16 +- .../src/component.screenshots.test.tsx | 100 ++++ .../components/base-filter-tag/Component.tsx | 24 +- .../base-filter-tag/default.module.css | 102 +++- .../base-filter-tag/index.module.css | 63 +- .../base-filter-tag/inverted.module.css | 102 +++- .../src/desktop/default.desktop.module.css | 18 + .../src/desktop/inverted.desktop.module.css | 18 + .../filter-tag/src/docs/Component.stories.tsx | 9 +- packages/filter-tag/src/docs/description.mdx | 536 +++++++++++------- .../src/mobile/default.mobile.module.css | 37 +- .../src/mobile/inverted.mobile.module.css | 39 +- .../src/types/base-filter-tag-props.ts | 9 +- packages/filter-tag/src/vars.css | 24 +- .../src/__snapshots__/Component.test.tsx.snap | 24 +- .../src/__snapshots__/component.test.tsx.snap | 12 +- .../__snapshots__/Component.test.tsx.snap | 60 +- packages/tag/package.json | 1 + packages/tag/src/Component.test.tsx | 143 ++++- .../src/__snapshots__/Component.test.tsx.snap | 32 +- .../tag/src/component.screenshots.test.tsx | 73 ++- .../components/indicator-tag/Component.tsx | 14 +- .../indicator-tag/default.module.css | 100 ++-- .../components/indicator-tag/index.module.css | 5 + .../indicator-tag/inverted.module.css | 100 ++-- .../tag/src/components/indicator-tag/paths.ts | 54 +- .../src/components/native-tag/Component.tsx | 58 +- .../components/native-tag/default.module.css | 74 ++- .../components/native-tag/index.module.css | 94 +-- .../components/native-tag/inverted.module.css | 74 ++- .../src/desktop/default.desktop.module.css | 19 + .../src/desktop/inverted.desktop.module.css | 18 + packages/tag/src/docs/Component.stories.tsx | 24 +- packages/tag/src/docs/description.mdx | 443 +++++++++------ packages/tag/src/helpers/is-keyboard-event.ts | 6 + .../tag/src/mobile/default.mobile.module.css | 52 +- .../tag/src/mobile/inverted.mobile.module.css | 54 +- packages/tag/src/typings.ts | 14 +- packages/tag/src/vars.css | 112 +++- yarn.lock | 1 + 44 files changed, 2260 insertions(+), 693 deletions(-) create mode 100644 .changeset/strong-donkeys-rush.md create mode 100644 .changeset/stupid-eels-talk.md create mode 100644 packages/tag/src/helpers/is-keyboard-event.ts diff --git a/.changeset/strong-donkeys-rush.md b/.changeset/strong-donkeys-rush.md new file mode 100644 index 0000000000..a1bea78c7e --- /dev/null +++ b/.changeset/strong-donkeys-rush.md @@ -0,0 +1,8 @@ +--- +'@alfalab/core-components-tag': minor +--- + +- Добавлены props `showClear` и `onClear` для сброса выбранного состояния +- Изменены отступы в компоненте +- Добавлен вариант `view='muted'` +- В `IndicatorTag` добавлен размер 48, prop `view` (`filled` | `muted`) и обновлены стили SVG-формы diff --git a/.changeset/stupid-eels-talk.md b/.changeset/stupid-eels-talk.md new file mode 100644 index 0000000000..ece62b795e --- /dev/null +++ b/.changeset/stupid-eels-talk.md @@ -0,0 +1,8 @@ +--- +'@alfalab/core-components-filter-tag': minor +--- + +- Добавлен prop `showArrow` для управления отображением шеврона в выбранном состоянии +- Изменены отступы в компоненте +- Шеврон отображается в невыбранном состоянии; крестик и шеврон можно показывать независимо друг от друга +- Добавлен вариант `view='muted'` diff --git a/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap b/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap index a95e04d0f3..c14fe8625e 100644 --- a/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap +++ b/packages/checkbox-group/src/__snapshots__/Component.test.tsx.snap @@ -582,7 +582,9 @@ exports[`Checkbox Display tests should display tag group correctly 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined my-tag" type="button" > - + Первый вариант @@ -600,7 +602,9 @@ exports[`Checkbox Display tests should display tag group correctly 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined" type="button" > - + Второй вариант @@ -618,7 +622,9 @@ exports[`Checkbox Display tests should display tag group correctly 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined" type="button" > - + Третий вариант @@ -652,7 +658,9 @@ exports[`Checkbox Display tests should display tag group correctly 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined my-tag" type="button" > - + Первый вариант @@ -670,7 +678,9 @@ exports[`Checkbox Display tests should display tag group correctly 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined" type="button" > - + Второй вариант @@ -688,7 +698,9 @@ exports[`Checkbox Display tests should display tag group correctly 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined" type="button" > - + Третий вариант diff --git a/packages/filter-tag/src/Component.test.tsx b/packages/filter-tag/src/Component.test.tsx index 904f4022d6..bd897ab680 100644 --- a/packages/filter-tag/src/Component.test.tsx +++ b/packages/filter-tag/src/Component.test.tsx @@ -86,13 +86,13 @@ describe('Attributes tests', () => { }); describe('Render tests', () => { - test('should unmount without errors', () => { + it('should unmount without errors', () => { const { unmount } = render(FilterTag); expect(unmount).not.toThrow(); }); - test('should contain children', () => { + it('should contain children', () => { const text = 'filter Tag text'; const { container, getByText } = render({text}); @@ -100,7 +100,7 @@ describe('Render tests', () => { expect(container.firstElementChild).toContainElement(getByText(text)); }); - test('should render leftAddons', () => { + it('should render leftAddons', () => { const leftAddonsTestId = 'leftAddonsTestId'; render(left addons} />); @@ -110,7 +110,7 @@ describe('Render tests', () => { expect(addon).toBeInTheDocument(); }); - test('should render leftAddons content', () => { + it('should render leftAddons content', () => { const leftAddonsTestId = 'leftAddonsTestId'; const content = 'left addons'; @@ -120,10 +120,70 @@ describe('Render tests', () => { expect(addon).toHaveTextContent(content); }); + + it('should render chevron when unchecked', () => { + const { container, getAllByRole } = render(FilterTag); + + expect(container.querySelector('.chevron')).toBeInTheDocument(); + expect(getAllByRole('button')).toHaveLength(1); + }); + + it('should render chevron and clear when checked', () => { + const { container, getAllByRole } = render(FilterTag); + + expect(container.querySelector('.chevron')).toBeInTheDocument(); + expect(container.querySelector('.clear')).toBeInTheDocument(); + expect(getAllByRole('button')).toHaveLength(2); + expect(container.querySelector('.valueButton')).toHaveClass('withChevronAndClear'); + }); + + it('should render chevron only when checked and showClear=false', () => { + const { container } = render( + + FilterTag + , + ); + + expect(container.querySelector('.chevron')).toBeInTheDocument(); + expect(container.querySelector('.clear')).not.toBeInTheDocument(); + }); + + it('should render clear only when checked and showArrow=false', () => { + const { container, getAllByRole } = render( + + FilterTag + , + ); + + expect(container.querySelector('.chevron')).not.toBeInTheDocument(); + expect(container.querySelector('.clear')).toBeInTheDocument(); + expect(container.querySelector('.clear')).toHaveClass('withClearOnly'); + expect(getAllByRole('button')).toHaveLength(2); + expect(container.querySelector('.valueButton')).toHaveClass('withClearOnly'); + expect(container.querySelector('.valueButton')).not.toHaveClass('withChevronAndClear'); + }); + + it('should not render chevron or clear when checked and both hidden', () => { + const { container, getAllByRole } = render( + + FilterTag + , + ); + + expect(container.querySelector('.chevron')).not.toBeInTheDocument(); + expect(container.querySelector('.clear')).not.toBeInTheDocument(); + expect(getAllByRole('button')).toHaveLength(1); + }); + + it('should not render clear when showClear=false and unchecked', () => { + const { container } = render(FilterTag); + + expect(container.querySelector('.clear')).not.toBeInTheDocument(); + }); }); describe('Interaction tests', () => { - test('should call `onClick` prop, if filterTag not disabled', () => { + it('should call `onClick` prop, if filterTag not disabled', () => { const cb = jest.fn(); const text = 'Press me!'; const { getByText } = render({text}); @@ -137,7 +197,7 @@ describe('Interaction tests', () => { expect(cb).toHaveBeenCalledTimes(1); }); - test('should call `onClear` prop, if filterTag checked and not disabled', () => { + it('should call `onClear` prop, if filterTag checked and not disabled', () => { const cb = jest.fn(); const text = 'Press me!'; const { getAllByRole } = render( @@ -155,7 +215,7 @@ describe('Interaction tests', () => { expect(cb).toHaveBeenCalledTimes(1); }); - test('should not call `onClick` prop, if tag is disabled', () => { + it('should not call `onClick` prop, if tag is disabled', () => { const cb = jest.fn(); const text = 'Press me!'; @@ -171,7 +231,7 @@ describe('Interaction tests', () => { expect(cb).toHaveBeenCalledTimes(0); }); - test('should not call `onClick` prop, if tag is disabled and checked', () => { + it('should not call `onClick` prop, if tag is disabled and checked', () => { const cb = jest.fn(); const text = 'Press me!'; const { getByText } = render( @@ -186,4 +246,83 @@ describe('Interaction tests', () => { expect(cb).toHaveBeenCalledTimes(0); }); + + it('should not call onClear when showClear=false', () => { + const onClear = jest.fn(); + const text = 'Press me!'; + + const { getAllByRole, getByText } = render( + + {text} + , + ); + + expect(getAllByRole('button')).toHaveLength(1); + + fireEvent.click(getByText(text)); + + expect(onClear).not.toHaveBeenCalled(); + }); + + it('should call onClear when showArrow=false', () => { + const onClear = jest.fn(); + const text = 'Press me!'; + + const { getAllByRole } = render( + + {text} + , + ); + + fireEvent.click(getAllByRole('button')[1]); + + expect(onClear).toHaveBeenCalledTimes(1); + }); + + it('should not call onClick when clear clicked', () => { + const onClick = jest.fn(); + const onClear = jest.fn(); + const text = 'Press me!'; + + const { getAllByRole } = render( + + {text} + , + ); + + fireEvent.click(getAllByRole('button')[1]); + + expect(onClear).toHaveBeenCalledTimes(1); + expect(onClick).not.toHaveBeenCalled(); + }); + + it('should call onClear on Enter keydown', () => { + const onClear = jest.fn(); + const text = 'Press me!'; + + const { getAllByRole } = render( + + {text} + , + ); + + fireEvent.keyDown(getAllByRole('button')[1], { key: 'Enter' }); + + expect(onClear).toHaveBeenCalledTimes(1); + }); + + it('should not call onClear on other keys', () => { + const onClear = jest.fn(); + const text = 'Press me!'; + + const { getAllByRole } = render( + + {text} + , + ); + + fireEvent.keyDown(getAllByRole('button')[1], { key: 'Space' }); + + expect(onClear).not.toHaveBeenCalled(); + }); }); diff --git a/packages/filter-tag/src/__snapshots__/Component.test.tsx.snap b/packages/filter-tag/src/__snapshots__/Component.test.tsx.snap index 0fe16544ef..974d915c9c 100644 --- a/packages/filter-tag/src/__snapshots__/Component.test.tsx.snap +++ b/packages/filter-tag/src/__snapshots__/Component.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Snapshots tests should match snapshot 1`] = ` "baseElement":
- {checked && !disabled && showClear && ( + {shouldShowClear && (
.chevron { + & .chevron { color: var(--filter-tag-chevron-disabled-color); } } @@ -74,13 +91,55 @@ } } - &.checked { + &.muted { + color: var(--tag-text-color); + border-color: var(--tag-muted-border-color); + + &:disabled { + color: var(--tag-text-color-disabled); + } + + &.checked { + color: var(--tag-text-color); + border-color: var(--tag-muted-border-color); + background-color: var(--tag-muted-background-color-checked); + + &:disabled { + color: var(--tag-text-color-disabled); + background-color: var(--tag-muted-background-color-checked-disabled); + } + + @media (hover: hover) { + &:hover:not(:disabled) { + background-color: var(--tag-muted-background-color-checked-hover); + } + } + + &:active:not(:disabled) { + background-color: var(--tag-muted-background-color-checked-active); + } + + @media (hover: hover) { + &:hover:not(:disabled) + .clear:before { + background-color: var(--filter-tag-inverted-separator-background-color-hover); + } + } + + &:active:not(:disabled) + .clear:before { + background-color: var(--filter-tag-inverted-separator-background-color-active); + } + } + } + + &.checked:not(.muted) { color: var(--tag-text-color-checked); background-color: var(--tag-background-color-checked); border-color: var(--tag-border-color-checked); - & > .chevron { - color: var(--filter-tag-inverted-chevron-color); + &:not(:disabled) { + & .chevron { + color: var(--filter-tag-inverted-chevron-color); + } } @media (hover: hover) { @@ -114,7 +173,38 @@ } } -.clear { +.valueButton.muted.checked + .clear { + color: var(--filter-tag-inverted-clear-color); + background-color: var(--tag-muted-background-color-checked); + + &:before { + background-color: var(--filter-tag-inverted-clear-before-background-color); + } + + @media (hover: hover) { + &:hover:before { + background-color: var(--filter-tag-inverted-separator-background-color-hover); + } + } + + &:active:before { + background-color: var(--filter-tag-inverted-separator-background-color-active); + } + + @media (hover: hover) { + &:hover { + color: var(--filter-tag-inverted-clear-color-hover); + background-color: var(--tag-muted-background-color-checked-hover); + } + } + + &:active { + color: var(--filter-tag-inverted-clear-color-active); + background-color: var(--tag-muted-background-color-checked-active); + } +} + +.valueButton.checked:not(.muted) + .clear { color: var(--filter-tag-clear-color); background-color: var(--tag-background-color-checked); diff --git a/packages/filter-tag/src/components/base-filter-tag/index.module.css b/packages/filter-tag/src/components/base-filter-tag/index.module.css index cad8c1dc5b..7f42fbd62b 100644 --- a/packages/filter-tag/src/components/base-filter-tag/index.module.css +++ b/packages/filter-tag/src/components/base-filter-tag/index.module.css @@ -25,20 +25,6 @@ border-radius: var(--tag-rounded-s-border-radius); } } - - &.checked { - &:not(.disabled).size-32 { - min-width: 80px; - } - - &:not(.disabled).size-40 { - min-width: 100px; - } - - &:not(.disabled).size-48 { - min-width: 112px; - } - } } .content { @@ -103,6 +89,10 @@ @mixin paragraph_primary_small; padding: 0 var(--gap-8); gap: var(--gap-2); + + &.withClearOnly { + padding-right: var(--gap-0); + } } &.size-40 { @@ -112,15 +102,27 @@ @mixin paragraph_primary_small; padding: 0 var(--gap-12); gap: var(--gap-2); + + &.withClearOnly { + padding-right: var(--gap-0); + } } &.size-48 { - min-width: 72px; + min-width: 64px; min-height: var(--size-s-height); @mixin paragraph_primary_medium; - padding: 0 var(--gap-16); + padding: 0 var(--gap-12); gap: var(--gap-4); + + &.withClearOnly { + padding-right: var(--gap-0); + } + + &.withChevronAndClear { + padding-right: var(--gap-8); + } } &.open .chevron { @@ -157,10 +159,6 @@ &:not(:disabled) { &.withClear { border-right-width: 0; - - &.size-48 { - padding-right: var(--gap-8); - } } } } @@ -206,8 +204,16 @@ transition: background-color 0.2s ease; } + &.withClearOnly:before { + display: none; + } + &.size-32 { - padding: var(--gap-0) var(--gap-8); + padding: 0 var(--gap-8); + + &.withClearOnly { + padding-left: var(--gap-2); + } &:before { height: 20px; @@ -215,16 +221,23 @@ } &.size-40 { - padding: var(--gap-0) var(--gap-12); + padding: 0 var(--gap-12); - &:before { - height: 24px; + &.withClearOnly { + padding-left: var(--gap-2); } } &.size-48 { - padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8); + padding: 0 var(--gap-12) 0 var(--gap-8); + &.withClearOnly { + padding-left: var(--gap-4); + } + } + + &.size-40, + &.size-48 { &:before { height: 24px; } diff --git a/packages/filter-tag/src/components/base-filter-tag/inverted.module.css b/packages/filter-tag/src/components/base-filter-tag/inverted.module.css index 3ad015c271..0e089e257c 100644 --- a/packages/filter-tag/src/components/base-filter-tag/inverted.module.css +++ b/packages/filter-tag/src/components/base-filter-tag/inverted.module.css @@ -1,3 +1,4 @@ +@import '@alfalab/core-components-vars/src/index.css'; @import '@alfalab/core-components-tag/src/vars.css'; @import '../../vars.css'; @@ -6,7 +7,23 @@ background-color: var(--tag-inverted-outlined-background-color-disabled); } - &.checked { + &.muted.checked { + &:not(.disabled) { + background-color: var(--tag-inverted-muted-background-color-checked); + } + + @media (hover: hover) { + &:not(.disabled):hover { + background-color: var(--tag-inverted-muted-background-color-checked-hover); + } + } + + &:not(.disabled):active { + background-color: var(--tag-inverted-muted-background-color-checked-active); + } + } + + &.checked:not(.muted) { &:not(.disabled) { background-color: var(--tag-inverted-background-color-checked); } @@ -33,7 +50,7 @@ border: var(--tag-border-width) solid var(--tag-inverted-border-color); &:disabled { - & > .chevron { + & .chevron { color: var(--filter-tag-inverted-chevron-disabled-color); } } @@ -74,13 +91,55 @@ } } - &.checked { + &.muted { + color: var(--tag-inverted-text-color); + border-color: var(--tag-inverted-muted-border-color); + + &:disabled { + color: var(--tag-inverted-text-color-disabled); + } + + &.checked { + color: var(--tag-inverted-text-color); + border-color: var(--tag-inverted-muted-border-color); + background-color: var(--tag-inverted-muted-background-color-checked); + + &:disabled { + color: var(--tag-inverted-text-color-disabled); + background-color: var(--tag-inverted-muted-background-color-checked-disabled); + } + + @media (hover: hover) { + &:hover:not(:disabled) { + background-color: var(--tag-inverted-muted-background-color-checked-hover); + } + } + + &:active:not(:disabled) { + background-color: var(--tag-inverted-muted-background-color-checked-active); + } + + @media (hover: hover) { + &:hover:not(:disabled) + .clear:before { + background-color: var(--filter-tag-separator-background-color-hover); + } + } + + &:active:not(:disabled) + .clear:before { + background-color: var(--filter-tag-separator-background-color-active); + } + } + } + + &.checked:not(.muted) { color: var(--tag-inverted-text-color-checked); background-color: var(--tag-inverted-background-color-checked); border-color: var(--tag-inverted-border-color-checked); - & > .chevron { - color: var(--filter-tag-chevron-color); + &:not(:disabled) { + & .chevron { + color: var(--filter-tag-chevron-color); + } } @media (hover: hover) { @@ -114,7 +173,38 @@ } } -.clear { +.valueButton.muted.checked + .clear { + color: var(--filter-tag-clear-color); + background-color: var(--tag-inverted-muted-background-color-checked); + + &:before { + background-color: var(--filter-tag-clear-before-background-color); + } + + @media (hover: hover) { + &:hover:before { + background-color: var(--filter-tag-separator-background-color-hover); + } + } + + &:active:before { + background-color: var(--filter-tag-separator-background-color-active); + } + + @media (hover: hover) { + &:hover { + color: var(--filter-tag-clear-color-hover); + background-color: var(--tag-inverted-muted-background-color-checked-hover); + } + } + + &:active { + color: var(--filter-tag-clear-color-active); + background-color: var(--tag-inverted-muted-background-color-checked-active); + } +} + +.valueButton.checked:not(.muted) + .clear { color: var(--filter-tag-inverted-clear-color); background-color: var(--tag-inverted-background-color-checked); diff --git a/packages/filter-tag/src/desktop/default.desktop.module.css b/packages/filter-tag/src/desktop/default.desktop.module.css index d783427ae5..63f20f83c4 100644 --- a/packages/filter-tag/src/desktop/default.desktop.module.css +++ b/packages/filter-tag/src/desktop/default.desktop.module.css @@ -19,4 +19,22 @@ background-color: var(--tag-filled-background-color-active); } } + + &.muted { + background-color: var(--tag-muted-background-color); + + &:disabled { + background-color: var(--tag-muted-background-color-disabled); + } + + @media (hover: hover) { + &:not(:disabled):hover { + background-color: var(--tag-muted-background-color-hover); + } + } + + &:not(:disabled):active { + background-color: var(--tag-muted-background-color-active); + } + } } diff --git a/packages/filter-tag/src/desktop/inverted.desktop.module.css b/packages/filter-tag/src/desktop/inverted.desktop.module.css index 8b5e264402..421acf5fa5 100644 --- a/packages/filter-tag/src/desktop/inverted.desktop.module.css +++ b/packages/filter-tag/src/desktop/inverted.desktop.module.css @@ -19,4 +19,22 @@ background-color: var(--tag-inverted-filled-background-color-active); } } + + &.muted { + background-color: var(--tag-inverted-muted-background-color); + + &:disabled { + background-color: var(--tag-inverted-muted-background-color-disabled); + } + + @media (hover: hover) { + &:not(:disabled):hover { + background-color: var(--tag-inverted-muted-background-color-hover); + } + } + + &:not(:disabled):active { + background-color: var(--tag-inverted-muted-background-color-active); + } + } } diff --git a/packages/filter-tag/src/docs/Component.stories.tsx b/packages/filter-tag/src/docs/Component.stories.tsx index 06c1921831..ee3b1b47cc 100644 --- a/packages/filter-tag/src/docs/Component.stories.tsx +++ b/packages/filter-tag/src/docs/Component.stories.tsx @@ -43,11 +43,12 @@ export const filter_tag: Story = { @@ -84,11 +85,12 @@ export const filter_tag_mobile: Story = { @@ -125,11 +127,12 @@ export const filter_tag_desktop: Story = { diff --git a/packages/filter-tag/src/docs/description.mdx b/packages/filter-tag/src/docs/description.mdx index e9fa63158a..484c7c55ee 100644 --- a/packages/filter-tag/src/docs/description.mdx +++ b/packages/filter-tag/src/docs/description.mdx @@ -1,6 +1,6 @@ ## Группа фильтров -Обычно фильтры объединяются в группу, в рамках группы используется один паттерн отображения лейбла. +Обычно фильтры объединяются в группу, в рамках группы рекомендуется использовать один паттерн отображения лейбла и контролов. У выбранного тега может отображаться шеврон, крестик или и то и другое. Лейбл в выбранном состоянии можно скрывать для экономии места. Но если выбрано несколько значений, лейбл нужно оставить. ```jsx live // Одиночный выбор @@ -13,8 +13,7 @@ const CustomField = ({ }) => { const checkedContent = ( - {!label && 'Одиночный выбор:'} - {selected && selected.content} + {!label && 'Одиночный выбор:'} {selected && selected.content} ); @@ -24,6 +23,7 @@ const CustomField = ({
setSelectedItems([])} + view='filled' checked={selected} {...restInnerProps} {...restProps} @@ -45,15 +45,14 @@ const CustomFieldMultiple = ({ }) => { const content = selected && selected.content; - const checkedContent = ( - - {!label && 'Множественный выбор:'} - - {' '} - {selectedMultiple.length !== 1 ? `Выбрано ${selectedMultiple.length}` : content} - - - ); + const checkedContent = + selectedMultiple.length > 1 ? ( + Множественный выбор ({selectedMultiple.length}) + ) : ( + + {!label && 'Множественный выбор:'} {content} + + ); const contentLabel = Множественный выбор; @@ -61,6 +60,7 @@ const CustomFieldMultiple = ({
setSelectedItems([])} + view='filled' checked={selected} {...restInnerProps} {...restProps} @@ -72,6 +72,15 @@ const CustomFieldMultiple = ({ }; render(() => { + const FIELD_SIZE = 40; + const FIELD_SHAPE = 'rectangular'; + + const controlMap = { + chevron: { showArrow: true, showClear: false }, + clear: { showArrow: false, showClear: true }, + both: { showArrow: true, showClear: true }, + }; + const options = React.useMemo( () => [ { key: '1', content: 'Aurum' }, @@ -83,7 +92,11 @@ render(() => { [], ); - const [label, setLabel] = React.useState(false); + const [controls, setControls] = React.useState('chevron'); + const [hideLabel, setHideLabel] = React.useState(false); + const { showArrow, showClear } = controlMap[controls]; + + const fieldProps = { size: FIELD_SIZE, shape: FIELD_SHAPE, showArrow, showClear }; const [selected, setSelected] = React.useState([]); @@ -97,56 +110,44 @@ render(() => { }; // Диапазон значений - const [filterTag, setFilterTag] = React.useState(null); const [open, setOpen] = React.useState(false); - const [value, setValue] = React.useState(); - const { selectedFrom, selectedTo, updatePeriod } = usePeriod(); + const { selectedFrom, selectedTo, updatePeriod, resetPeriod } = usePeriod(); + const calendarRef = React.useRef(null); + const anchorRef = React.useRef(null); const handleOpen = () => { - setOpen(!open); + setOpen(true); }; - const handleClear = () => { + const handleClose = () => { setOpen(false); - updatePeriod(null, null); }; - const handleUpdatePeriodr = (date) => { + const handleClear = () => { + handleClose(); + resetPeriod(); + }; + + const handleUpdatePeriod = (date) => { updatePeriod(date); if (selectedFrom) { - setOpen(false); + handleClose(); } }; - const handleFilterTagRef = (node) => { - setFilterTag(node); - }; + const handleWrapperBlur = (event) => { + const target = event.relatedTarget || document.activeElement; - const handleBlur = (ref, handleClick) => { - React.useEffect(() => { - const listener = (event) => { - if (ref.current && !ref.current.contains(event.target)) { - handleClick(event); - } - }; - - document.addEventListener('mousedown', listener); - document.addEventListener('touchstart', listener); - - return () => { - document.removeEventListener('mousedown', listener); - document.removeEventListener('touchstart', listener); - }; - }, [ref, handleClick]); - }; - const calendarRef = React.useRef(null); - - handleBlur(calendarRef, (event) => { - if (filterTag && !filterTag.contains(event.target)) { - handleOpen(); + if ( + (anchorRef.current && anchorRef.current.contains(target)) || + (calendarRef.current && calendarRef.current.contains(target)) + ) { + return; } - }); + + handleClose(); + }; const getDateString = React.useCallback((date) => { const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate(); @@ -167,20 +168,38 @@ render(() => { const checkedContent = ( - {!label && 'Диапазон значений:'} - {selectedRange && selectedRange} + {!hideLabel && 'Диапазон значений:'} {selectedRange && selectedRange} ); const content = Диапазон значений; - const css = ` - div { - border-radius: var(--border-radius-8); - } - `; - return ( <> + { onChange={handleChangeSelected} selected={selected} Option={BaseOption} - label={label} - fieldProps={{ size: 32 }} + label={hideLabel} + fieldProps={fieldProps} + optionsListClassName='filter-tag-options-list' /> { onChange={handleChangeMultiple} selected={selectedMultiple} multiple={true} - label={label} - fieldProps={{ size: 32 }} + label={hideLabel} + fieldProps={fieldProps} + optionsListClassName='filter-tag-options-list' /> - - - - +
+ + {selectedRange ? checkedContent : content} + + +
event.preventDefault()} + > + +
+ +
- + + setControls(payload.value)} + value={controls} > - {selectedRange ? checkedContent : content} - + + + + + - setLabel(!label)} - /> + + setHideLabel(payload.value === 'hide')} + value={hideLabel ? 'hide' : 'show'} + > + + + ); }); @@ -255,8 +308,7 @@ const CustomField = ({ }) => { const checkedContent = ( - {!label && 'Одиночный выбор:'} - {selected && selected.content} + {!label && 'Одиночный выбор:'} {selected && selected.content} ); @@ -266,6 +318,7 @@ const CustomField = ({
setSelectedItems([])} + view='filled' checked={selected} {...restInnerProps} {...restProps} @@ -287,15 +340,14 @@ const CustomFieldMultiple = ({ }) => { const content = selected && selected.content; - const checkedContent = ( - - {!label && 'Множественный выбор:'} - - {' '} - {selectedMultiple.length !== 1 ? `Выбрано ${selectedMultiple.length}` : content} - - - ); + const checkedContent = + selectedMultiple.length > 1 ? ( + Множественный выбор ({selectedMultiple.length}) + ) : ( + + {!label && 'Множественный выбор:'} {content} + + ); const contentLabel = Множественный выбор; @@ -303,6 +355,7 @@ const CustomFieldMultiple = ({
setSelectedItems([])} + view='filled' checked={selected} {...restInnerProps} {...restProps} @@ -314,6 +367,15 @@ const CustomFieldMultiple = ({ }; render(() => { + const FIELD_SIZE = 40; + const FIELD_SHAPE = 'rectangular'; + + const controlMap = { + chevron: { showArrow: true, showClear: false }, + clear: { showArrow: false, showClear: true }, + both: { showArrow: true, showClear: true }, + }; + const options = [ { key: '1', content: 'Aurum' }, { key: '2', content: 'Bercelium' }, @@ -322,7 +384,11 @@ render(() => { { key: '5', content: 'Plutonuim' }, ]; - const [label, setLabel] = React.useState(false); + const [controls, setControls] = React.useState('chevron'); + const [hideLabel, setHideLabel] = React.useState(false); + const { showArrow, showClear } = controlMap[controls]; + + const fieldProps = { size: FIELD_SIZE, shape: FIELD_SHAPE, showArrow, showClear }; const [selected, setSelected] = React.useState([]); @@ -337,19 +403,18 @@ render(() => { // Диапазон значений const [open, setOpen] = React.useState(false); - const [value, setValue] = React.useState(); - const { selectedFrom, selectedTo, updatePeriod } = usePeriod(); + const { selectedFrom, selectedTo, updatePeriod, resetPeriod } = usePeriod(); const handleOpen = () => { - setOpen(!open); + setOpen(true); }; const handleClear = () => { setOpen(false); - updatePeriod(null, null); + resetPeriod(); }; - const handleUpdatePeriodr = (date) => { + const handleUpdatePeriod = (date) => { updatePeriod(date); if (selectedFrom) { @@ -376,14 +441,21 @@ render(() => { const checkedContent = ( - {!label && 'Диапазон значений:'} - {selectedRange && selectedRange} + {!hideLabel && 'Диапазон значений:'} {selectedRange && selectedRange} ); const content = Диапазон значений; return ( <> + { Field={CustomField} onChange={handleChangeSelected} selected={selected} - label={label} - fieldProps={{ size: 32 }} + label={hideLabel} + fieldProps={fieldProps} + optionsListClassName='filter-tag-options-list' /> { onChange={handleChangeMultiple} selected={selectedMultiple} multiple={true} - label={label} - fieldProps={{ size: 32 }} + label={hideLabel} + fieldProps={fieldProps} + optionsListClassName='filter-tag-options-list' /> setOpen(false)} - value={value} selectedFrom={selectedFrom} selectedTo={selectedTo} - onChange={handleUpdatePeriodr} + onChange={handleUpdatePeriod} selectorView='month-only' /> - {selectedRange ? checkedContent : content} - + + + + + setControls(payload.value)} + value={controls} + > + + + + + - setLabel(!label)} - /> + + setHideLabel(payload.value === 'hide')} + value={hideLabel ? 'hide' : 'show'} + > + + + ); }); ``` -## Предзаполненное значение фильтра +## Предзаполненное значение -Компонент может иметь предзаполненное значение, в таком случае в заполненном состоянии у него не может быть крестика очистки. +Компонент может иметь предзаполненное значение, в таком случае, в заполненном состоянии у него не может быть крестика очистки. ```jsx live const CustomField = ({ @@ -453,7 +550,7 @@ const CustomField = ({ }) => (
- {selected.content} + {selected.content}
); @@ -473,15 +570,26 @@ render(() => { }; return ( - + <> + + + ); }); //MOBILE @@ -514,46 +622,92 @@ render(() => { }; return ( - + <> + + + ); }); ``` ## Состояния -Таб может находиться в активном и неактивном состоянии. Взаимодействие может быть ограничено с помощью свойства `disabled`. +Взаимодействие с тегом можно ограничить с помощью свойства [disabled]. Блокировать теги с выбранным значением не рекомендуется. ```jsx live render(() => { const [disabled, setDisabled] = React.useState(false); + const checkedContent = Label Value; + return ( - + Label - - {disabled ? ( - Label - ) : ( - - Label: Value - - )} + + {checkedContent} + + + + + + {checkedContent} + + + + + + {checkedContent} setDisabled((prevState) => !prevState)} /> @@ -562,25 +716,20 @@ render(() => { }); ``` -## Стиль - -Компонент наследует опции компонента [Tag](?path=/docs/tag--docs), отвечающие за внешний вид: - -- shape (форма) — овальные или прямоугольные. -- view (стиль) — залитые или бордерные. - ## Дополнительный слот С помощью слота leftAddons можно кастомизировать фильтртэг. ```jsx live -render(() => { - const [leftAddons, setLeftAddons] = React.useState(true); - const [selected, setSelected] = React.useState(false); - - const addon = () => { - if (leftAddons) { - return ( +render(() => ( + + { borderRadius: '4px', }} /> - ); - } + } + > + Label: Value + + +)); +``` - return null; - }; +## Стиль - return ( - - - {selected ? ( - - Label: Value - - ) : ( - Label - )} - - - setLeftAddons((prevState) => !prevState)} - /> - - setSelected((prevState) => !prevState)} - /> - - ); -}); -``` +Компонент наследует опции компонента [Tag](?path=/docs/tag--docs), отвечающие за внешний вид: + +- shape (форма) — овальные или прямоугольные. +- view (стиль) — залитые или бордерные. diff --git a/packages/filter-tag/src/mobile/default.mobile.module.css b/packages/filter-tag/src/mobile/default.mobile.module.css index ee4fd7b71c..77ae7aa069 100644 --- a/packages/filter-tag/src/mobile/default.mobile.module.css +++ b/packages/filter-tag/src/mobile/default.mobile.module.css @@ -3,20 +3,49 @@ .valueButton { &.filled { - background-color: var(--tag-filled-mobile-background-color); + background-color: var(--tag-mobile-filled-background-color); &:disabled { - background-color: var(--tag-filled-mobile-background-color-disabled); + background-color: var(--tag-mobile-filled-background-color-disabled); } @media (hover: hover) { &:not(:disabled):hover { - background-color: var(--tag-filled-mobile-background-color-hover); + background-color: var(--tag-mobile-filled-background-color-hover); } } &:not(:disabled):active { - background-color: var(--tag-filled-mobile-background-color-active); + background-color: var(--tag-mobile-filled-background-color-active); + } + } + + &.muted { + --tag-muted-background-color-checked: var(--tag-mobile-muted-checked-background-color); + --tag-muted-background-color-checked-hover: var( + --tag-mobile-muted-checked-background-color-hover + ); + --tag-muted-background-color-checked-active: var( + --tag-mobile-muted-checked-background-color-active + ); + --tag-muted-background-color-checked-disabled: var( + --tag-mobile-muted-checked-background-color-disabled + ); + + background-color: var(--tag-muted-background-color); + + &:disabled { + background-color: var(--tag-muted-background-color-disabled); + } + + @media (hover: hover) { + &:not(:disabled):hover { + background-color: var(--tag-muted-background-color-hover); + } + } + + &:not(:disabled):active { + background-color: var(--tag-muted-background-color-active); } } } diff --git a/packages/filter-tag/src/mobile/inverted.mobile.module.css b/packages/filter-tag/src/mobile/inverted.mobile.module.css index 0ba4aa3c14..a285ff81b7 100644 --- a/packages/filter-tag/src/mobile/inverted.mobile.module.css +++ b/packages/filter-tag/src/mobile/inverted.mobile.module.css @@ -3,20 +3,51 @@ .valueButton { &.filled { - background-color: var(--tag-inverted-filled-mobile-background-color); + background-color: var(--tag-mobile-filled-background-color-inverted); &:disabled { - background-color: var(--tag-inverted-filled-mobile-background-color-disabled); + background-color: var(--tag-mobile-filled-background-color-disabled-inverted); } @media (hover: hover) { &:not(:disabled):hover { - background-color: var(--tag-inverted-filled-mobile-background-color-hover); + background-color: var(--tag-mobile-filled-background-color-hover-inverted); } } &:not(:disabled):active { - background-color: var(--tag-inverted-filled-mobile-background-color-active); + background-color: var(--tag-mobile-filled-background-color-active-inverted); + } + } + + &.muted { + --tag-inverted-muted-background-color-checked: var( + --tag-mobile-muted-checked-background-color-inverted + ); + --tag-inverted-muted-background-color-checked-hover: var( + --tag-mobile-muted-checked-background-color-hover-inverted + ); + --tag-inverted-muted-background-color-checked-active: var( + --tag-mobile-muted-checked-background-color-active-inverted + ); + --tag-inverted-muted-background-color-checked-disabled: var( + --tag-mobile-muted-checked-background-color-disabled-inverted + ); + + background-color: var(--tag-inverted-muted-background-color); + + &:disabled { + background-color: var(--tag-inverted-muted-background-color-disabled); + } + + @media (hover: hover) { + &:not(:disabled):hover { + background-color: var(--tag-inverted-muted-background-color-hover); + } + } + + &:not(:disabled):active { + background-color: var(--tag-inverted-muted-background-color-active); } } } diff --git a/packages/filter-tag/src/types/base-filter-tag-props.ts b/packages/filter-tag/src/types/base-filter-tag-props.ts index 512445b457..757a212754 100644 --- a/packages/filter-tag/src/types/base-filter-tag-props.ts +++ b/packages/filter-tag/src/types/base-filter-tag-props.ts @@ -48,9 +48,16 @@ export type BaseFilterTagProps = { /** * Показывать крестик для очистки выбора + * @default true */ showClear?: boolean; + /** + * Показывать шеврон в выбранном состоянии + * @default true + */ + showArrow?: boolean; + /** * Растягивает компонент на ширину контейнера * @default false @@ -66,7 +73,7 @@ export type BaseFilterTagProps = { /** * Стиль тега */ - view?: 'outlined' | 'filled'; + view?: 'outlined' | 'filled' | 'muted'; /** * Набор цветов для компонента diff --git a/packages/filter-tag/src/vars.css b/packages/filter-tag/src/vars.css index 582af6bf9e..8edbb73955 100644 --- a/packages/filter-tag/src/vars.css +++ b/packages/filter-tag/src/vars.css @@ -2,12 +2,12 @@ :root { /* chevron */ - --filter-tag-chevron-color: var(--color-light-neutral-translucent-1300); - --filter-tag-chevron-disabled-color: var(--color-light-neutral-500); + --filter-tag-chevron-color: var(--color-light-neutral-translucent-700); + --filter-tag-chevron-disabled-color: var(--color-light-neutral-700); /* chevron inverted */ - --filter-tag-inverted-chevron-color: var(--color-light-neutral-translucent-1300-inverted); - --filter-tag-inverted-chevron-disabled-color: var(--color-light-neutral-500-inverted); + --filter-tag-inverted-chevron-color: var(--color-light-neutral-translucent-700-inverted); + --filter-tag-inverted-chevron-disabled-color: var(--color-light-neutral-700-inverted); /* separator */ --filter-tag-separator-background-color-hover: transparent; @@ -18,14 +18,14 @@ --filter-tag-inverted-separator-background-color-active: transparent; /* clear */ - --filter-tag-clear-color: var(--color-light-neutral-translucent-700-inverted); - --filter-tag-clear-color-hover: var(--color-light-neutral-translucent-700-inverted-hover); - --filter-tag-clear-color-active: var(--color-light-neutral-translucent-700-inverted-press); - --filter-tag-clear-before-background-color: var(--color-light-neutral-translucent-500-inverted); + --filter-tag-clear-color: var(--color-light-neutral-translucent-500-inverted); + --filter-tag-clear-color-hover: var(--color-light-neutral-translucent-500-inverted-hover); + --filter-tag-clear-color-active: var(--color-light-neutral-translucent-500-inverted-press); + --filter-tag-clear-before-background-color: var(--color-light-neutral-translucent-300-inverted); /* clear inverted */ - --filter-tag-inverted-clear-color: var(--color-light-neutral-translucent-700); - --filter-tag-inverted-clear-color-hover: var(--color-light-neutral-translucent-700-hover); - --filter-tag-inverted-clear-color-active: var(--color-light-neutral-translucent-700-press); - --filter-tag-inverted-clear-before-background-color: var(--color-light-neutral-translucent-500); + --filter-tag-inverted-clear-color: var(--color-light-neutral-translucent-500); + --filter-tag-inverted-clear-color-hover: var(--color-light-neutral-translucent-500-hover); + --filter-tag-inverted-clear-color-active: var(--color-light-neutral-translucent-500-press); + --filter-tag-inverted-clear-before-background-color: var(--color-light-neutral-translucent-300); } diff --git a/packages/radio-group/src/__snapshots__/Component.test.tsx.snap b/packages/radio-group/src/__snapshots__/Component.test.tsx.snap index fd2b87cc20..4af7a3ffb5 100644 --- a/packages/radio-group/src/__snapshots__/Component.test.tsx.snap +++ b/packages/radio-group/src/__snapshots__/Component.test.tsx.snap @@ -590,7 +590,9 @@ exports[`RadioGroup Display tests should display tag radio group correctly 1`] = type="button" value="one" > - + Первый вариант @@ -610,7 +612,9 @@ exports[`RadioGroup Display tests should display tag radio group correctly 1`] = type="button" value="two" > - + Второй вариант @@ -630,7 +634,9 @@ exports[`RadioGroup Display tests should display tag radio group correctly 1`] = type="button" value="three" > - + Третий вариант @@ -666,7 +672,9 @@ exports[`RadioGroup Display tests should display tag radio group correctly 1`] = type="button" value="one" > - + Первый вариант @@ -686,7 +694,9 @@ exports[`RadioGroup Display tests should display tag radio group correctly 1`] = type="button" value="two" > - + Второй вариант @@ -706,7 +716,9 @@ exports[`RadioGroup Display tests should display tag radio group correctly 1`] = type="button" value="three" > - + Третий вариант diff --git a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap index efee916e5f..9ec6411fd9 100644 --- a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap +++ b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap @@ -95,7 +95,9 @@ exports[`SelectWithTags Display tests should match snapshot with selected tags 1 class="component component component size-32 size-32 outlined outlined checked rectangular outlined tag" type="button" > - + @@ -125,7 +127,9 @@ exports[`SelectWithTags Display tests should match snapshot with selected tags 1 class="component component component size-32 size-32 outlined outlined checked rectangular outlined tag" type="button" > - + @@ -155,7 +159,9 @@ exports[`SelectWithTags Display tests should match snapshot with selected tags 1 class="component component component size-32 size-32 outlined outlined checked rectangular outlined tag" type="button" > - + diff --git a/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap b/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap index 5f328680bb..10fcd50a16 100644 --- a/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap +++ b/packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap @@ -118,7 +118,9 @@ exports[`Tabs Snapshots tests should match snapshot 2`] = ` tabindex="-1" type="button" > - + Таб 1 - + Таб 2 @@ -145,7 +149,9 @@ exports[`Tabs Snapshots tests should match snapshot 2`] = ` tabindex="-1" type="button" > - + Таб 3 @@ -156,7 +162,9 @@ exports[`Tabs Snapshots tests should match snapshot 2`] = ` tabindex="-1" type="button" > - + Таб 4 @@ -167,7 +175,9 @@ exports[`Tabs Snapshots tests should match snapshot 2`] = ` tabindex="-1" type="button" > - + Таб 5 @@ -307,7 +317,9 @@ exports[`Tabs Snapshots tests should match snapshot 4`] = ` tabindex="-1" type="button" > - + Таб 1 - + Таб 2 @@ -334,7 +348,9 @@ exports[`Tabs Snapshots tests should match snapshot 4`] = ` tabindex="-1" type="button" > - + Таб 3 @@ -345,7 +361,9 @@ exports[`Tabs Snapshots tests should match snapshot 4`] = ` tabindex="-1" type="button" > - + Таб 4 @@ -356,7 +374,9 @@ exports[`Tabs Snapshots tests should match snapshot 4`] = ` tabindex="-1" type="button" > - + Таб 5 @@ -492,7 +512,9 @@ exports[`Tabs Snapshots tests should match snapshot 6`] = ` tabindex="-1" type="button" > - + Таб 1 - + Таб 2 @@ -519,7 +543,9 @@ exports[`Tabs Snapshots tests should match snapshot 6`] = ` tabindex="-1" type="button" > - + Таб 3 @@ -530,7 +556,9 @@ exports[`Tabs Snapshots tests should match snapshot 6`] = ` tabindex="-1" type="button" > - + Таб 4 @@ -541,7 +569,9 @@ exports[`Tabs Snapshots tests should match snapshot 6`] = ` tabindex="-1" type="button" > - + Таб 5 diff --git a/packages/tag/package.json b/packages/tag/package.json index 257265984a..a3f8665b1e 100644 --- a/packages/tag/package.json +++ b/packages/tag/package.json @@ -16,6 +16,7 @@ "@alfalab/core-components-indicator": "^4.0.2", "@alfalab/core-components-mq": "^6.0.5", "@alfalab/hooks": "^1.17.0", + "@alfalab/icons-glyph": "^2.260.0", "classnames": "^2.5.1", "react-merge-refs": "^1.1.0", "tslib": "^2.4.0" diff --git a/packages/tag/src/Component.test.tsx b/packages/tag/src/Component.test.tsx index d3b9495636..e45952ae73 100644 --- a/packages/tag/src/Component.test.tsx +++ b/packages/tag/src/Component.test.tsx @@ -146,6 +146,73 @@ describe('Render tests', () => { expect(parseFloat(indicator.style.left)).toBeLessThanOrEqual(36); }, ); + + it('should render clear button', () => { + const { container, getAllByRole: getAllButtonsByRole } = render( + + Tag text + , + ); + + expect(getAllButtonsByRole('button')).toHaveLength(2); + expect(container.querySelector('.clear')).toBeInTheDocument(); + }); + + it('should not render clear when showClear=false', () => { + const { container, getAllByRole: getAllButtonsByRole } = render( + + Tag text + , + ); + + expect(getAllButtonsByRole('button')).toHaveLength(1); + expect(container.querySelector('.clear')).not.toBeInTheDocument(); + }); + + it('should not render clear when not checked', () => { + const { getAllByRole: getAllButtonsByRole } = render( + + Tag text + , + ); + + expect(getAllButtonsByRole('button')).toHaveLength(1); + }); + + it('should not render clear when no children', () => { + const { getAllByRole: getAllButtonsByRole } = render( + , + ); + + expect(getAllButtonsByRole('button')).toHaveLength(1); + }); + + it('should not render clear when disabled', () => { + const { getAllByRole: getAllButtonsByRole } = render( + + Tag text + , + ); + + expect(getAllButtonsByRole('button')).toHaveLength(1); + }); + + it('should hide rightAddons when clear is shown', () => { + const rightAddonText = 'Right addon text'; + + const { queryByText } = render( + {rightAddonText}} + > + Tag text + , + ); + + expect(queryByText(rightAddonText)).not.toBeInTheDocument(); + }); }); describe('Interaction its', () => { @@ -192,6 +259,80 @@ describe('Interaction its', () => { expect(cb).toHaveBeenCalledTimes(0); }); + + it('should call onClear on clear click', () => { + const onClear = jest.fn(); + + const { getAllByRole: getAllButtonsByRole } = render( + + Tag text + , + ); + + fireEvent.click(getAllButtonsByRole('button')[1]); + + expect(onClear).toHaveBeenCalledTimes(1); + }); + + it('should call onClear on Enter keydown', () => { + const onClear = jest.fn(); + + const { getAllByRole: getAllButtonsByRole } = render( + + Tag text + , + ); + + fireEvent.keyDown(getAllButtonsByRole('button')[1], { key: 'Enter' }); + + expect(onClear).toHaveBeenCalledTimes(1); + }); + + it('should not call onClear on other keys', () => { + const onClear = jest.fn(); + + const { getAllByRole: getAllButtonsByRole } = render( + + Tag text + , + ); + + fireEvent.keyDown(getAllButtonsByRole('button')[1], { key: 'Space' }); + + expect(onClear).not.toHaveBeenCalled(); + }); + + it('should not call onClick when clear clicked', () => { + const onClick = jest.fn(); + const onClear = jest.fn(); + + const { getAllByRole: getAllButtonsByRole } = render( + + Tag text + , + ); + + fireEvent.click(getAllButtonsByRole('button')[1]); + + expect(onClear).toHaveBeenCalledTimes(1); + expect(onClick).not.toHaveBeenCalled(); + }); + + it('should not call onClear when clear not rendered', () => { + const onClear = jest.fn(); + + const { container } = render( + + Tag text + , + ); + + if (container.firstElementChild) { + fireEvent.click(container.firstElementChild); + } + + expect(onClear).not.toHaveBeenCalled(); + }); }); describe('Indicator tag', () => { @@ -296,7 +437,7 @@ describe('Indicator tag', () => { const { container } = render( } />, diff --git a/packages/tag/src/__snapshots__/Component.test.tsx.snap b/packages/tag/src/__snapshots__/Component.test.tsx.snap index 952527fe39..e9164cbee6 100644 --- a/packages/tag/src/__snapshots__/Component.test.tsx.snap +++ b/packages/tag/src/__snapshots__/Component.test.tsx.snap @@ -9,7 +9,9 @@ exports[`Snapshots tests should match snapshot 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined" type="button" > - + Press me @@ -20,7 +22,9 @@ exports[`Snapshots tests should match snapshot 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined" type="button" > - + Press me @@ -88,7 +92,9 @@ exports[`Snapshots tests should match snapshot shape=rectangular 1`] = ` class="component component component size-48 size-48 outlined outlined rectangular outlined" type="button" > - + Press me @@ -99,7 +105,9 @@ exports[`Snapshots tests should match snapshot shape=rectangular 1`] = ` class="component component component size-48 size-48 outlined outlined rectangular outlined" type="button" > - + Press me @@ -174,7 +182,9 @@ exports[`Snapshots tests should match snapshot with left addons 1`] = ` 10 000 $ - + Press me @@ -192,7 +202,9 @@ exports[`Snapshots tests should match snapshot with left addons 1`] = ` 10 000 $ - + Press me @@ -260,7 +272,9 @@ exports[`Snapshots tests should match snapshot with right addons 1`] = ` class="component component component size-48 size-48 outlined outlined rounded outlined withRightAddons" type="button" > - + Press me - + Press me { + const testCase = (theme: string) => + screenshotTesting({ + cases: [ + [ + theme, + createSpriteStorybookUrl({ + componentName: 'Tag', + knobs: { + children: 'Тег', + size: 48, + showClear: true, + checked: true, + view: ['outlined', 'filled', 'transparent', 'muted'], + }, + size: { width: 180, height: 90 }, + }), + ], + [ + theme, + createSpriteStorybookUrl({ + componentName: 'Tag', + knobs: { + children: 'Тег', + size: 48, + showClear: true, + checked: true, + disabled: true, + view: ['outlined', 'filled', 'transparent', 'muted'], + }, + size: { width: 180, height: 90 }, + }), + ], + [ + theme, + createSpriteStorybookUrl({ + componentName: 'Tag', + knobs: { + children: 'Тег', + size: 48, + showClear: true, + checked: true, + colors: 'inverted', + view: ['outlined', 'filled', 'transparent', 'muted'], + }, + size: { width: 180, height: 90 }, + }), + ], + ], + screenshotOpts: { + fullPage: true, + }, + viewport: { width: 1024, height: 100 }, + theme, + })(); + + availableThemes.map(testCase); +}); + describe( 'Button | screenshots pressed state', screenshotTesting({ @@ -199,7 +258,7 @@ describe('Tag | view variants', () => { knobs: { children: 'Тег', size: 48, - view: ['outlined', 'filled', 'transparent'], + view: ['outlined', 'filled', 'transparent', 'muted'], checked: [false, true], }, size: { width: 160, height: 90 }, @@ -212,7 +271,7 @@ describe('Tag | view variants', () => { knobs: { children: 'Тег', size: 48, - view: ['outlined', 'filled', 'transparent'], + view: ['outlined', 'filled', 'transparent', 'muted'], disabled: true, checked: [false, true], }, @@ -226,7 +285,7 @@ describe('Tag | view variants', () => { knobs: { children: 'Тег', size: 48, - view: ['outlined', 'filled', 'transparent'], + view: ['outlined', 'filled', 'transparent', 'muted'], colors: 'inverted', checked: [false, true], }, @@ -256,11 +315,11 @@ describe('IndicatorTag | main props', () => { packageName: 'tag', componentName: 'IndicatorTag', knobs: { - size: [32, 40], + size: [32, 40, 48], shape: ['rounded', 'rectangular'], + view: ['filled', 'muted'], colors: 'default', checked: false, - disabled: false, leftAddons: true, dataTestId: 'indicator-ready-default', indicatorProps: [{ mode: 'dot' }, { mode: 'count', value: 7 }], @@ -274,11 +333,11 @@ describe('IndicatorTag | main props', () => { packageName: 'tag', componentName: 'IndicatorTag', knobs: { - size: [32, 40], + size: [32, 40, 48], shape: ['rounded', 'rectangular'], + view: ['filled', 'muted'], colors: 'inverted', checked: true, - disabled: false, leftAddons: true, dataTestId: 'indicator-ready-inverted', indicatorProps: [{ mode: 'dot' }, { mode: 'count', value: 7 }], diff --git a/packages/tag/src/components/indicator-tag/Component.tsx b/packages/tag/src/components/indicator-tag/Component.tsx index 453cb33f49..59e2e73ce5 100644 --- a/packages/tag/src/components/indicator-tag/Component.tsx +++ b/packages/tag/src/components/indicator-tag/Component.tsx @@ -17,7 +17,7 @@ const colorCommonStyles = { inverted: invertedColors, } as const; -const INDICATOR_TAG_SIZES = [32, 40] as const; +const INDICATOR_TAG_SIZES = [32, 40, 48] as const; export interface IndicatorTagProps extends Omit< @@ -32,7 +32,8 @@ export interface IndicatorTagProps | 'childrenRef' | 'size' > { - size?: 32 | 40; + size?: 32 | 40 | 48; + view?: 'filled' | 'muted'; colorStyles?: StyleColors['default']; styles?: BaseTagProps['styles']; onClick?: MouseEventHandler; @@ -48,6 +49,7 @@ export const IndicatorTag = forwardRef( className, childrenClassName, shape = 'rounded', + view = 'muted', checked, children, leftAddons, @@ -55,7 +57,7 @@ export const IndicatorTag = forwardRef( dataTestId, onClick, focused = false, - colorStyles, + colorStyles: _colorStyles = {}, style, styles = {}, ...restProps @@ -73,8 +75,10 @@ export const IndicatorTag = forwardRef( const pathMode = hasIndicator ? mode : 'none'; const colorStyle = colorCommonStyles?.[colors]; + const { width, height, indicatorX, indicatorY } = - indicatorTagGeometry[mode][indicatorTagSize]; + indicatorTagGeometry[shape][mode][indicatorTagSize]; + const shapePath = indicatorTagPaths[shape][pathMode][indicatorTagSize]; const buttonProps = { @@ -82,7 +86,7 @@ export const IndicatorTag = forwardRef( commonStyles.badgeIcon, commonStyles[`size-${indicatorTagSize}`], colorStyle.badgeIcon, - colorStyles?.indicatorFilled, + colorStyle[view], styles[shape], className, { diff --git a/packages/tag/src/components/indicator-tag/default.module.css b/packages/tag/src/components/indicator-tag/default.module.css index cefbdc606c..7f44a80867 100644 --- a/packages/tag/src/components/indicator-tag/default.module.css +++ b/packages/tag/src/components/indicator-tag/default.module.css @@ -1,55 +1,85 @@ @import '../../vars.css'; -.shapeInner { - color: inherit; +.badgeIcon { + color: var(--tag-text-color); - & svg { - fill: var(--color-light-text-primary); - } + .shapeInner { + color: inherit; - &:active:not(:disabled) svg { - fill: var(--color-light-text-primary-inverted); + & svg { + fill: var(--color-light-text-primary); + } + + &:active:not(:disabled) svg { + fill: var(--color-light-text-primary-inverted); + } } -} -.shapePath { - fill: var(--tag-filled-background-color); -} + &.filled { + .shapePath { + fill: var(--tag-filled-background-color); + } -.checkedShapePath { - fill: var(--tag-background-color-checked); -} + &:active:not(:disabled) .shapePath { + fill: var(--tag-filled-background-color-active); + } -.checkedInner { - & svg { - fill: var(--tag-text-color-checked); - } -} + @media (hover: hover) { + &:hover .shapePath { + fill: var(--tag-filled-background-color-hover); + } + } -.badgeIcon { - color: var(--tag-text-color); + &.checked { + .shapePath { + fill: var(--tag-background-color-checked); + } - &:active:not(:disabled) .shapePath { - fill: var(--tag-filled-background-color-active); - } + .shapeInner svg { + fill: var(--tag-text-color-checked); + } - &.checked .shapePath { - fill: var(--tag-background-color-checked); - } + @media (hover: hover) { + &:hover:not(:disabled) .shapePath { + fill: var(--tag-background-color-checked-hover); + } + } - &.checked .shapeInner { - & svg { - fill: var(--tag-text-color-checked); + &:active:not(:disabled) .shapePath { + fill: var(--tag-background-color-checked-active); + } } } - @media (hover: hover) { - &:hover .shapePath { - fill: var(--tag-filled-background-color-hover); + &.muted { + .shapePath { + fill: var(--tag-muted-background-color); } - &.checked:hover:not(:disabled) .shapePath { - fill: var(--tag-background-color-checked-hover); + &:active:not(:disabled) .shapePath { + fill: var(--tag-muted-background-color-active); + } + + @media (hover: hover) { + &:hover .shapePath { + fill: var(--tag-muted-background-color-hover); + } + } + + &.checked { + .shapePath { + fill: var(--tag-muted-background-color-checked); + } + + @media (hover: hover) { + &:hover:not(:disabled) .shapePath { + fill: var(--tag-muted-background-color-checked-hover); + } + } + + &:active:not(:disabled) .shapePath { + fill: var(--tag-muted-background-color-checked-active); + } } } } diff --git a/packages/tag/src/components/indicator-tag/index.module.css b/packages/tag/src/components/indicator-tag/index.module.css index fcf27e3b36..13032207f9 100644 --- a/packages/tag/src/components/indicator-tag/index.module.css +++ b/packages/tag/src/components/indicator-tag/index.module.css @@ -43,6 +43,11 @@ height: 40px; } +.size-48 { + width: 48px; + height: 48px; +} + .svg { display: block; width: 100%; diff --git a/packages/tag/src/components/indicator-tag/inverted.module.css b/packages/tag/src/components/indicator-tag/inverted.module.css index 81e76ba930..17799a52c5 100644 --- a/packages/tag/src/components/indicator-tag/inverted.module.css +++ b/packages/tag/src/components/indicator-tag/inverted.module.css @@ -1,55 +1,85 @@ @import '../../vars.css'; -.shapeInner { - color: inherit; +.badgeIcon { + color: var(--tag-inverted-text-color); - & svg { - fill: var(--color-light-text-primary-inverted); - } + .shapeInner { + color: inherit; - &:active:not(:disabled) svg { - fill: var(--color-light-text-primary-inverted); + & svg { + fill: var(--color-light-text-primary-inverted); + } + + &:active:not(:disabled) svg { + fill: var(--color-light-text-primary-inverted); + } } -} -.shapePath { - fill: var(--tag-inverted-filled-background-color); -} + &.filled { + .shapePath { + fill: var(--tag-inverted-filled-background-color); + } -.checkedShapePath { - fill: var(--tag-inverted-background-color-checked); -} + &:active:not(:disabled) .shapePath { + fill: var(--tag-inverted-filled-background-color-active); + } -.checkedInner { - & svg { - fill: var(--tag-inverted-text-color-checked); - } -} + @media (hover: hover) { + &:hover .shapePath { + fill: var(--tag-inverted-filled-background-color-hover); + } + } -.badgeIcon { - color: var(--tag-inverted-text-color); + &.checked { + .shapePath { + fill: var(--tag-inverted-background-color-checked); + } - &:active:not(:disabled) .shapePath { - fill: var(--tag-inverted-filled-background-color-active); - } + .shapeInner svg { + fill: var(--tag-inverted-text-color-checked); + } - &.checked .shapePath { - fill: var(--tag-inverted-background-color-checked); - } + @media (hover: hover) { + &:hover:not(:disabled) .shapePath { + fill: var(--tag-inverted-background-color-checked-hover); + } + } - &.checked .shapeInner { - & svg { - fill: var(--tag-inverted-text-color-checked); + &:active:not(:disabled) .shapePath { + fill: var(--tag-inverted-background-color-checked-active); + } } } - @media (hover: hover) { - &:hover .shapePath { - fill: var(--tag-inverted-filled-background-color-hover); + &.muted { + .shapePath { + fill: var(--tag-inverted-muted-background-color); } - &.checked:hover:not(:disabled) .shapePath { - fill: var(--tag-inverted-background-color-checked-hover); + &:active:not(:disabled) .shapePath { + fill: var(--tag-inverted-muted-background-color-active); + } + + @media (hover: hover) { + &:hover .shapePath { + fill: var(--tag-inverted-muted-background-color-hover); + } + } + + &.checked { + .shapePath { + fill: var(--tag-inverted-muted-background-color-checked); + } + + @media (hover: hover) { + &:hover:not(:disabled) .shapePath { + fill: var(--tag-inverted-muted-background-color-checked-hover); + } + } + + &:active:not(:disabled) .shapePath { + fill: var(--tag-inverted-muted-background-color-checked-active); + } } } } diff --git a/packages/tag/src/components/indicator-tag/paths.ts b/packages/tag/src/components/indicator-tag/paths.ts index 2f73813ccf..36e90b10a6 100644 --- a/packages/tag/src/components/indicator-tag/paths.ts +++ b/packages/tag/src/components/indicator-tag/paths.ts @@ -1,9 +1,14 @@ -type IndicatorTagSize = 32 | 40; +type IndicatorTagSize = 32 | 40 | 48; type IndicatorTagMode = 'none' | 'dot' | 'count'; type IndicatorWithBadgeMode = Exclude; type SizePaths = Record; type ModePaths = Record; +type IndicatorGeometryModePaths = Record< + IndicatorWithBadgeMode, + Record +>; +type ShapeGeometry = Record<'rounded' | 'rectangular', IndicatorGeometryModePaths>; type IndicatorGeometry = { width: number; @@ -15,50 +20,75 @@ type IndicatorGeometry = { const DOUBLE_INDICATOR_SHIFT_X = 3; const TRIPLE_INDICATOR_SHIFT_X = 6; +const ROUNDED_CIRCLE_48 = + 'M24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0Z'; + +const RECTANGULAR_NONE_48 = + 'M10 0H38C43.5228 0 48 4.47715 48 10V38C48 43.5228 43.5228 48 38 48H10C4.47715 48 0 43.5228 0 38V10C0 4.47715 4.47715 0 10 0Z'; + export const indicatorTagPaths = { rounded: { none: { 32: 'M40 16C40 24.8366 32.8366 32 24 32H16C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0H24C32.8366 0 40 7.16344 40 16Z', 40: 'M40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20Z', + 48: ROUNDED_CIRCLE_48, }, dot: { 32: 'M26 0a4 4 0 0 1 4 4 6 6 0 0 0 6 6 4 4 0 0 1 4 4v2c0 8.837-7.163 16-16 16h-8C7.163 32 0 24.837 0 16S7.163 0 16 0z', 40: 'M20 0c3.249 0 6.316.775 9.028 2.15.67.34.972 1.1.972 1.85a6 6 0 0 0 6 6c.75 0 1.51.301 1.849.97A19.9 19.9 0 0 1 40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0', + 48: ROUNDED_CIRCLE_48, }, count: { 32: 'M26 0a2 2 0 0 1 2 2c0 5.523 4.477 10 10 10a2 2 0 0 1 2 2v2c0 8.837-7.163 16-16 16h-8C7.163 32 0 24.837 0 16S7.163 0 16 0z', 40: 'M20 0c2.171 0 4.261.347 6.218.987.092.03.187.053.28.077a2 2 0 0 1 .468.184l.03.011a.01.01 0 0 1 .004.007l.003.006c.589.342.988.974.997 1.702 0 .014.012.026.026.026q.023.002.026.024a10 10 0 0 0 8.924 8.923.03.03 0 0 1 .024.026c0 .015.012.027.027.027.727.01 1.36.409 1.702.997l.005.003q.005 0 .006.004l.009.025.003.006q.12.22.184.468c.024.095.047.191.077.284A20 20 0 0 1 40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0', + 48: 'M24 0C24.2897 0 24.5781 0.006345 24.8652 0.0166016H27.2598C30.2567 0.0168292 32.7394 2.21626 33.1836 5.08887C34.051 10.0297 37.9393 13.9264 42.875 14.8086C45.773 15.2253 48 17.7181 48 20.7314V24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0Z', }, } satisfies ModePaths, rectangular: { none: { 32: 'M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V24C40 28.4183 36.4183 32 32 32H8C3.58172 32 0 28.4183 0 24V8Z', 40: 'M0 11C0 4.92487 4.92487 0 11 0H29C35.0751 0 40 4.92487 40 11V29C40 35.0751 35.0751 40 29 40H11C4.92487 40 0 35.0751 0 29V11Z', + 48: RECTANGULAR_NONE_48, }, dot: { 32: 'M26 0a4 4 0 0 1 4 4 6 6 0 0 0 6 6 4 4 0 0 1 4 4v10a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8a8 8 0 0 1 8-8z', 40: 'M26 0a4 4 0 0 1 4 4 6 6 0 0 0 6 6 4 4 0 0 1 4 4v16c0 5.523-4.477 10-10 10H10C4.477 40 0 35.523 0 30V10C0 4.477 4.477 0 10 0z', + 48: 'M36 0C37.6396 0 38.9704 1.31528 38.998 2.94824H39.001C39.0008 2.9658 39 2.98338 39 3.00098C39 6.30719 41.6742 8.98789 44.9775 9H45.0166C45.0277 8.99945 45.0387 8.99911 45.0498 8.99902L45.0488 9C46.6667 9.02582 47.972 10.3323 47.998 11.9502H48V37.999C48 43.5219 43.5228 47.999 38 47.999H10C4.47715 47.999 0 43.5219 0 37.999V10.0029C0 4.48008 4.47715 0.00292969 10 0.00292969H35.8848C35.923 0.00148503 35.9614 0 36 0Z', }, count: { 32: 'M26 0a2 2 0 0 1 2 2c0 5.523 4.477 10 10 10a2 2 0 0 1 2 2v10a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8a8 8 0 0 1 8-8z', 40: 'M26 0a2 2 0 0 1 2 2c0 5.523 4.477 10 10 10a2 2 0 0 1 2 2v16c0 5.523-4.477 10-10 10H10C4.477 40 0 35.523 0 30V10C0 4.477 4.477 0 10 0z', + 48: 'M30 0C31.6569 0 33 1.34315 33 3C33 9.62742 38.3726 15 45 15C46.6569 15 48 16.3431 48 18V38C48 43.5228 43.5228 48 38 48H10C4.47715 48 0 43.5228 0 38V10C0 4.47715 4.47715 0 10 0H30Z', }, } satisfies ModePaths, } as const; -export const indicatorTagGeometry: Record< - IndicatorWithBadgeMode, - Record -> = { - dot: { - 32: { width: 40, height: 32, indicatorX: 36, indicatorY: 4 }, - 40: { width: 40, height: 40, indicatorX: 36, indicatorY: 4 }, +export const indicatorTagGeometry = { + rounded: { + dot: { + 32: { width: 40, height: 32, indicatorX: 36, indicatorY: 4 }, + 40: { width: 40, height: 40, indicatorX: 36, indicatorY: 4 }, + 48: { width: 48, height: 48, indicatorX: 45, indicatorY: 3 }, + }, + count: { + 32: { width: 40, height: 32, indicatorX: 38, indicatorY: 2 }, + 40: { width: 40, height: 40, indicatorX: 38, indicatorY: 2 }, + 48: { width: 48, height: 48, indicatorX: 43.5, indicatorY: 4 }, + }, }, - count: { - 32: { width: 40, height: 32, indicatorX: 38, indicatorY: 2 }, - 40: { width: 40, height: 40, indicatorX: 38, indicatorY: 2 }, + rectangular: { + dot: { + 32: { width: 40, height: 32, indicatorX: 36, indicatorY: 4 }, + 40: { width: 40, height: 40, indicatorX: 36, indicatorY: 4 }, + 48: { width: 48, height: 48, indicatorX: 45, indicatorY: 3 }, + }, + count: { + 32: { width: 40, height: 32, indicatorX: 38, indicatorY: 2 }, + 40: { width: 40, height: 40, indicatorX: 38, indicatorY: 2 }, + 48: { width: 48, height: 48, indicatorX: 43.5, indicatorY: 4 }, + }, }, -}; +} satisfies ShapeGeometry; /** Сдвиг индикатора по X от числа цифр */ export const resolveValueToIndicatorShiftX = (value: number | undefined): number => { diff --git a/packages/tag/src/components/native-tag/Component.tsx b/packages/tag/src/components/native-tag/Component.tsx index 86c9b2d6fe..67d1fa2dd9 100644 --- a/packages/tag/src/components/native-tag/Component.tsx +++ b/packages/tag/src/components/native-tag/Component.tsx @@ -1,6 +1,15 @@ -import React, { forwardRef, type MouseEventHandler } from 'react'; +import React, { + forwardRef, + type KeyboardEvent, + type MouseEvent, + type MouseEventHandler, +} from 'react'; import cn from 'classnames'; +import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon'; +import { CrossCircleSIcon } from '@alfalab/icons-glyph/CrossCircleSIcon'; + +import { isKeyBoardEvent } from '../../helpers/is-keyboard-event'; import { type BaseTagProps, type StyleColors } from '../../typings'; import { Button as BaseButton } from '../button'; @@ -29,12 +38,14 @@ export const NativeTag = forwardRef( leftAddons, indicatorProps, children, - size, + size = 48, checked, className, dataTestId, colors = 'default', onClick, + onClear = () => null, + showClear = false, colorStyles, childrenClassName, childrenRef, @@ -49,6 +60,25 @@ export const NativeTag = forwardRef( ) => { const sizeClassName = `size-${size}`; + const showClearButton = Boolean(checked && showClear && children && !disabled); + const showRightAddons = Boolean(rightAddons) && !showClearButton; + + const hasRightSlot = showRightAddons || showClearButton; + + const handleClear = (event: MouseEvent | KeyboardEvent) => { + event.stopPropagation(); + + if (isKeyBoardEvent(event)) { + const clickSimilarKeys = ['Enter'].includes(event.key); + + if (clickSimilarKeys) onClear(); + + return; + } + + onClear(); + }; + const buttonProps = { className: cn( commonStyles.component, @@ -66,9 +96,9 @@ export const NativeTag = forwardRef( [colorCommonStyles[colors].checked]: checked, [colorStyles[view]]: Boolean(colorStyles[view]), [commonStyles.focused]: focused, - [commonStyles.withRightAddons]: Boolean(rightAddons), + [commonStyles.withRightAddons]: showRightAddons, [commonStyles.withLeftAddons]: Boolean(leftAddons), - [commonStyles.noContent]: Boolean((leftAddons || rightAddons) && !children), + [commonStyles.noContent]: Boolean((leftAddons || hasRightSlot) && !children), }, className, ), @@ -81,12 +111,28 @@ export const NativeTag = forwardRef( {leftAddons ? {leftAddons} : null} {children ? ( - + {children} ) : null} - {rightAddons ? {rightAddons} : null} + {showRightAddons && {rightAddons}} + + {hasRightSlot && !showRightAddons && ( +
+ {[32, 40].includes(size) ? : } +
+ )} ); }, diff --git a/packages/tag/src/components/native-tag/default.module.css b/packages/tag/src/components/native-tag/default.module.css index 7a32bf86b3..2f59ac5512 100644 --- a/packages/tag/src/components/native-tag/default.module.css +++ b/packages/tag/src/components/native-tag/default.module.css @@ -55,7 +55,51 @@ } } - &.checked { + &.muted { + color: var(--tag-text-color); + border-color: var(--tag-muted-border-color); + + &:disabled { + color: var(--tag-text-color-disabled); + } + + &.checked { + color: var(--tag-text-color); + border-color: var(--tag-muted-border-color); + background-color: var(--tag-muted-background-color-checked); + + &:disabled { + color: var(--tag-text-color-disabled); + background-color: var(--tag-muted-background-color-checked-disabled); + } + + @media (hover: hover) { + &:hover:not(:disabled) { + background-color: var(--tag-muted-background-color-checked-hover); + } + } + + &:active:not(:disabled) { + background-color: var(--tag-muted-background-color-checked-active); + } + + & .clear { + color: var(--tag-clear-color); + + @media (hover: hover) { + &:hover { + color: var(--tag-clear-color-hover); + } + } + + &:active { + color: var(--tag-clear-color-active); + } + } + } + } + + &.checked:not(.muted) { color: var(--tag-text-color-checked); border-color: var(--tag-border-color-checked); background-color: var(--tag-background-color-checked); @@ -77,5 +121,33 @@ background-color: var(--tag-background-color-checked-active); border-color: var(--tag-background-color-checked-active); } + + & .clear { + color: var(--tag-clear-color-checked); + + @media (hover: hover) { + &:hover { + color: var(--tag-clear-color-checked-hover); + } + } + + &:active { + color: var(--tag-clear-color-checked-active); + } + } + } +} + +.clear { + color: var(--tag-clear-color); + + @media (hover: hover) { + &:hover { + color: var(--tag-clear-color-hover); + } + } + + &:active { + color: var(--tag-clear-color-active); } } diff --git a/packages/tag/src/components/native-tag/index.module.css b/packages/tag/src/components/native-tag/index.module.css index b5da03fc5e..3dae3b50a1 100644 --- a/packages/tag/src/components/native-tag/index.module.css +++ b/packages/tag/src/components/native-tag/index.module.css @@ -37,11 +37,11 @@ align-items: center; &:first-child { - margin-right: var(--gap-6); + margin-right: var(--gap-2); } &:last-child { - margin-left: var(--gap-6); + margin-left: var(--gap-2); } &:only-child { @@ -57,6 +57,13 @@ } } +.clear { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + button.noContent { gap: 2px; } @@ -71,11 +78,11 @@ button.noContent { .size-48, .size-56 { & .addons:first-child { - margin-right: var(--gap-8); + margin-right: var(--gap-4); } & .addons:last-child { - margin-left: var(--gap-8); + margin-left: var(--gap-4); } } @@ -93,33 +100,49 @@ button.noContent { .size-32 { min-width: 52px; min-height: var(--size-xxs-height); - padding: var(--gap-0) var(--gap-12); + padding: var(--gap-0) var(--gap-8); @mixin paragraph_primary_small; + + & .content { + padding: 0 var(--gap-4); + } } .size-40 { min-width: 64px; min-height: var(--size-xs-height); - padding: var(--gap-0) var(--gap-16); + padding: var(--gap-0) var(--gap-12); @mixin paragraph_primary_small; + + & .content { + padding: 0 var(--gap-4); + } } .size-48 { - min-width: 72px; + min-width: 64px; min-height: var(--size-s-height); - padding: var(--gap-0) var(--gap-20); + padding: var(--gap-0) var(--gap-12); @mixin paragraph_component_primary; + + & .content { + padding: 0 var(--gap-4); + } } .size-56 { - min-width: 88px; + min-width: 80px; min-height: var(--size-m-height); - padding: var(--gap-0) var(--gap-24); + padding: var(--gap-0) var(--gap-16); @mixin paragraph_component_primary; + + & .content { + padding: 0 var(--gap-4); + } } .size-64 { @@ -128,6 +151,10 @@ button.noContent { padding: var(--gap-0) 28px; @mixin paragraph_primary_large; + + & .content { + padding: 0 var(--gap-4); + } } .size-72 { @@ -136,39 +163,27 @@ button.noContent { padding: var(--gap-0) var(--gap-32); @mixin paragraph_primary_large; + + & .content { + padding: 0 var(--gap-4); + } } .withRightAddons { &.size-32 { padding-right: var(--gap-8); - - &.noContent { - padding-right: var(--gap-12); - } } &.size-40 { padding-right: var(--gap-12); - - &.noContent { - padding-right: var(--gap-16); - } } &.size-48 { - padding-right: var(--gap-16); - - &.noContent { - padding-right: var(--gap-20); - } + padding-right: var(--gap-12); } &.size-56 { - padding-right: var(--gap-20); - - &.noContent { - padding-right: var(--gap-24); - } + padding-right: var(--gap-16); } &.size-64 { @@ -187,34 +202,18 @@ button.noContent { .withLeftAddons { &.size-32 { padding-left: var(--gap-8); - - &.noContent { - padding-left: var(--gap-12); - } } &.size-40 { padding-left: var(--gap-12); - - &.noContent { - padding-left: var(--gap-16); - } } &.size-48 { - padding-left: var(--gap-16); - - &.noContent { - padding-left: var(--gap-20); - } + padding-left: var(--gap-12); } &.size-56 { - padding-left: var(--gap-20); - - &.noContent { - padding-left: var(--gap-24); - } + padding-left: var(--gap-16); } &.size-64 { @@ -252,7 +251,8 @@ button.noContent { .allowBackdropBlur { &.outlined.checked[disabled], - &.filled { + &.filled, + &.muted { backdrop-filter: blur(80px); } } diff --git a/packages/tag/src/components/native-tag/inverted.module.css b/packages/tag/src/components/native-tag/inverted.module.css index 43712d97f9..b0e40e81b6 100644 --- a/packages/tag/src/components/native-tag/inverted.module.css +++ b/packages/tag/src/components/native-tag/inverted.module.css @@ -55,7 +55,51 @@ } } - &.checked { + &.muted { + color: var(--tag-inverted-text-color); + border-color: var(--tag-inverted-muted-border-color); + + &:disabled { + color: var(--tag-inverted-text-color-disabled); + } + + &.checked { + color: var(--tag-inverted-text-color); + border-color: var(--tag-inverted-muted-border-color); + background-color: var(--tag-inverted-muted-background-color-checked); + + &:disabled { + color: var(--tag-inverted-text-color-disabled); + background-color: var(--tag-inverted-muted-background-color-checked-disabled); + } + + @media (hover: hover) { + &:hover:not(:disabled) { + background-color: var(--tag-inverted-muted-background-color-checked-hover); + } + } + + &:active:not(:disabled) { + background-color: var(--tag-inverted-muted-background-color-checked-active); + } + + & .clear { + color: var(--tag-clear-color-inverted); + + @media (hover: hover) { + &:hover { + color: var(--tag-clear-color-hover-inverted); + } + } + + &:active { + color: var(--tag-clear-color-active-inverted); + } + } + } + } + + &.checked:not(.muted) { color: var(--tag-inverted-text-color-checked); border-color: var(--tag-inverted-border-color-checked); background-color: var(--tag-inverted-background-color-checked); @@ -77,5 +121,33 @@ background-color: var(--tag-inverted-background-color-checked-active); border-color: var(--tag-inverted-background-color-checked-active); } + + & .clear { + color: var(--tag-clear-color-checked-inverted); + + @media (hover: hover) { + &:hover { + color: var(--tag-clear-color-checked-hover-inverted); + } + } + + &:active { + color: var(--tag-clear-color-checked-active-inverted); + } + } + } +} + +.clear { + color: var(--tag-clear-color-inverted); + + @media (hover: hover) { + &:hover { + color: var(--tag-clear-color-hover-inverted); + } + } + + &:active { + color: var(--tag-clear-color-active-inverted); } } diff --git a/packages/tag/src/desktop/default.desktop.module.css b/packages/tag/src/desktop/default.desktop.module.css index 798f0be760..09790aa570 100644 --- a/packages/tag/src/desktop/default.desktop.module.css +++ b/packages/tag/src/desktop/default.desktop.module.css @@ -18,3 +18,22 @@ background-color: var(--tag-filled-background-color-active); } } + +.muted { + background-color: var(--tag-muted-background-color); + + &:disabled { + background-color: var(--tag-muted-background-color-disabled); + border-color: var(--tag-muted-border-color); + } + + @media (hover: hover) { + &:hover:not(:disabled) { + background-color: var(--tag-muted-background-color-hover); + } + } + + &:active:not(:disabled) { + background-color: var(--tag-muted-background-color-active); + } +} diff --git a/packages/tag/src/desktop/inverted.desktop.module.css b/packages/tag/src/desktop/inverted.desktop.module.css index 4a8e46b4ba..6c0ad605b1 100644 --- a/packages/tag/src/desktop/inverted.desktop.module.css +++ b/packages/tag/src/desktop/inverted.desktop.module.css @@ -17,3 +17,21 @@ background-color: var(--tag-inverted-filled-background-color-active); } } + +.muted { + background-color: var(--tag-inverted-muted-background-color); + + &:disabled { + background-color: var(--tag-inverted-muted-background-color-disabled); + } + + @media (hover: hover) { + &:hover:not(:disabled) { + background-color: var(--tag-inverted-muted-background-color-hover); + } + } + + &:active:not(:disabled) { + background-color: var(--tag-inverted-muted-background-color-active); + } +} diff --git a/packages/tag/src/docs/Component.stories.tsx b/packages/tag/src/docs/Component.stories.tsx index 1fb216b669..60015bfc83 100644 --- a/packages/tag/src/docs/Component.stories.tsx +++ b/packages/tag/src/docs/Component.stories.tsx @@ -42,9 +42,15 @@ export const tag: Story = { size={select('size', SIZES, 56)} variant={select('variant', ['default', 'alt'], 'default')} shape={select('shape', ['rounded', 'rectangular'], 'rounded')} - view={select('view', ['outlined', 'filled', 'transparent'], 'outlined')} + view={select( + 'view', + ['outlined', 'filled', 'transparent', 'muted'], + 'outlined', + )} disabled={boolean('disabled', false)} checked={checked || boolean('checked', false)} + showClear={boolean('showClear', false)} + onClear={() => setChecked(false)} rightAddons={boolean('rightAddons', false) && } onClick={handleClick} colors={colors} @@ -81,9 +87,15 @@ export const tag_mobile: Story = { size={select('size', SIZES, 56)} variant={select('variant', ['default', 'alt'], 'default')} shape={select('shape', ['rounded', 'rectangular'], 'rounded')} - view={select('view', ['outlined', 'filled', 'transparent'], 'outlined')} + view={select( + 'view', + ['outlined', 'filled', 'transparent', 'muted'], + 'outlined', + )} disabled={boolean('disabled', false)} checked={checked || boolean('checked', false)} + showClear={boolean('showClear', false)} + onClear={() => setChecked(false)} rightAddons={boolean('rightAddons', false) && } onClick={handleClick} colors={colors} @@ -120,9 +132,15 @@ export const tag_desktop: Story = { size={select('size', SIZES, 56)} variant={select('variant', ['default', 'alt'], 'default')} shape={select('shape', ['rounded', 'rectangular'], 'rounded')} - view={select('view', ['outlined', 'filled', 'transparent'], 'outlined')} + view={select( + 'view', + ['outlined', 'filled', 'transparent', 'muted'], + 'outlined', + )} disabled={boolean('disabled', false)} checked={checked || boolean('checked', false)} + showClear={boolean('showClear', false)} + onClear={() => setChecked(false)} rightAddons={boolean('rightAddons', false) && } onClick={handleClick} colors={colors} diff --git a/packages/tag/src/docs/description.mdx b/packages/tag/src/docs/description.mdx index 2325ee0441..2f92499343 100644 --- a/packages/tag/src/docs/description.mdx +++ b/packages/tag/src/docs/description.mdx @@ -1,6 +1,6 @@ ## Размеры -Рекомендуется использовать 48, 40 и 32 размеры. Размеры 72, 64, 56 — не рекомендованы к использованию. +Рекомендуется использовать 32, 40 и 48 размеры. Размеры 56, 64, 72 — не рекомендованы к использованию. ```jsx live render(() => { @@ -112,70 +112,70 @@ render(() => { `} - -
- - setCheckedMap((prev) => ({ ...prev, icon: nextChecked })) - } - {...defaultProps} - > - Label - -
-
- } - checked={checkedMap.badge} - onClick={(_, { checked: nextChecked }) => - setCheckedMap((prev) => ({ ...prev, badge: nextChecked })) - } - {...defaultProps} - > - Label - -
-
- } - checked={checkedMap.emptyBadge} - onClick={(_, { checked: nextChecked }) => - setCheckedMap((prev) => ({ ...prev, emptyBadge: nextChecked })) - } - {...defaultProps} - > - Label - -
-
- - setCheckedMap((prev) => ({ ...prev, amount: nextChecked })) - } - > - Label - -
-
- } - checked={checkedMap.indicator} - onClick={(_, { checked: nextChecked }) => - setCheckedMap((prev) => ({ ...prev, indicator: nextChecked })) - } - {...defaultProps} - /> -
- + +
+ + setCheckedMap((prev) => ({ ...prev, icon: nextChecked })) + } + {...defaultProps} + > + Label + +
+
+ } + checked={checkedMap.badge} + onClick={(_, { checked: nextChecked }) => + setCheckedMap((prev) => ({ ...prev, badge: nextChecked })) + } + {...defaultProps} + > + Label + +
+
+ } + checked={checkedMap.emptyBadge} + onClick={(_, { checked: nextChecked }) => + setCheckedMap((prev) => ({ ...prev, emptyBadge: nextChecked })) + } + {...defaultProps} + > + Label + +
+
+ + setCheckedMap((prev) => ({ ...prev, amount: nextChecked })) + } + > + Label + +
+
+ } + checked={checkedMap.indicator} + onClick={(_, { checked: nextChecked }) => + setCheckedMap((prev) => ({ ...prev, indicator: nextChecked })) + } + {...defaultProps} + /> +
+ ); @@ -255,77 +255,77 @@ render(() => { `} -
-
- - setCheckedMap((prev) => ({ ...prev, icon: nextChecked })) - } - {...defaultProps} - > - Label - -
-
- } - checked={checkedMap.badge} - onClick={(_, { checked: nextChecked }) => - setCheckedMap((prev) => ({ ...prev, badge: nextChecked })) - } - {...defaultProps} - > - Label - -
-
- } - checked={checkedMap.emptyBadge} - onClick={(_, { checked: nextChecked }) => - setCheckedMap((prev) => ({ ...prev, emptyBadge: nextChecked })) - } - {...defaultProps} - > - Label - -
-
- - setCheckedMap((prev) => ({ ...prev, amount: nextChecked })) - } - {...defaultProps} - > - Label - -
-
- } - checked={checkedMap.indicator} - onClick={(_, { checked: nextChecked }) => - setCheckedMap((prev) => ({ ...prev, indicator: nextChecked })) - } - {...defaultProps} - /> +
+
+ + setCheckedMap((prev) => ({ ...prev, icon: nextChecked })) + } + {...defaultProps} + > + Label + +
+
+ } + checked={checkedMap.badge} + onClick={(_, { checked: nextChecked }) => + setCheckedMap((prev) => ({ ...prev, badge: nextChecked })) + } + {...defaultProps} + > + Label + +
+
+ } + checked={checkedMap.emptyBadge} + onClick={(_, { checked: nextChecked }) => + setCheckedMap((prev) => ({ ...prev, emptyBadge: nextChecked })) + } + {...defaultProps} + > + Label + +
+
+ + setCheckedMap((prev) => ({ ...prev, amount: nextChecked })) + } + {...defaultProps} + > + Label + +
+
+ } + checked={checkedMap.indicator} + onClick={(_, { checked: nextChecked }) => + setCheckedMap((prev) => ({ ...prev, indicator: nextChecked })) + } + {...defaultProps} + /> +
-
); @@ -351,29 +351,39 @@ render(() => { disabled, }; + const tagBackdropStyle = { + display: 'inline-flex', + padding: 20, + alignItems: 'flex-start', + gap: 8, + borderRadius: 20, + border: '1px solid var(--color-light-neutral-300)', + background: + view === 'muted' + ? 'var(--color-light-base-bg-secondary)' + : 'var(--color-light-base-bg-primary)', + }; + return ( - -
- } - onClick={() => setCheckedWithAddon((v) => !v)} - > - Label - -
-
- setCheckedPlain((v) => !v)} - > - Label - -
- +
+ } + onClick={() => setCheckedWithAddon((v) => !v)} + > + Label + + + setCheckedPlain((v) => !v)} + > + Label + +
@@ -400,6 +410,7 @@ render(() => { + @@ -433,10 +444,23 @@ render(() => { disabled, }; + const tagBackdropStyle = { + display: 'inline-flex', + padding: 20, + alignItems: 'flex-start', + gap: 8, + borderRadius: 20, + border: '1px solid var(--color-light-neutral-300)', + background: + view === 'muted' + ? 'var(--color-light-base-bg-secondary)' + : 'var(--color-light-base-bg-primary)', + }; + return ( -
+
{ > Label -
-
+ { + @@ -502,6 +526,48 @@ render(() => { }); ``` +## Механики + +Если теги используются в составе фильтр-группы, рекомендуется включать крестик для выбранного состояния. +Крестик не нужен, если теги используются в качестве чекбоксов или радио-кнопок. + +```jsx live +render(() => { + const [showClear, setShowClear] = React.useState(false); + const [checked, setChecked] = React.useState(false); + + return ( + + setChecked(false)} + onClick={() => setChecked((v) => !v)} + > + Label + + + + +
+ +
+ + + + setShowClear((v) => !v)} + /> + + ); +}); +``` + ## Группа фильтров Тэг может использоваться в группы фильтров. При необходимости, у тэга с одной иконкой можно отрендерить индикатор, и использовать его как кнопку доступа к другим фильтрам. Такой вид доступен только для [Filled] тэгов 32 и 40 размеров. @@ -584,6 +650,12 @@ render(() => { })); }; + const clearDraftDynamic = (key) => + setDraft((p) => ({ ...p, dynamicKeys: p.dynamicKeys.filter((k) => k !== key) })); + + const clearAppliedDynamic = (key) => + setApplied((p) => ({ ...p, dynamicKeys: p.dynamicKeys.filter((k) => k !== key) })); + const [periodOpen, setPeriodOpen] = React.useState(false); const [accountsOpen, setAccountsOpen] = React.useState(false); const [periodAnchorEl, setPeriodAnchorEl] = React.useState(null); @@ -671,8 +743,10 @@ render(() => { size={DESKTOP_TAG_SIZE} view='filled' shape='rectangular' + showClear={true} checked={true} onClick={() => toggleAppliedDynamic(id)} + onClear={() => clearAppliedDynamic(id)} > {DYNAMIC_META[id]} @@ -681,8 +755,10 @@ render(() => { size={DESKTOP_TAG_SIZE} view='filled' shape='rectangular' + showClear={true} checked={applied.replenishment} onClick={() => setApplied((p) => ({ ...p, replenishment: !p.replenishment }))} + onClear={() => setApplied((p) => ({ ...p, replenishment: false }))} > Пополнения @@ -690,8 +766,10 @@ render(() => { size={DESKTOP_TAG_SIZE} view='filled' shape='rectangular' + showClear={true} checked={applied.writeoff} onClick={() => setApplied((p) => ({ ...p, writeoff: !p.writeoff }))} + onClear={() => setApplied((p) => ({ ...p, writeoff: false }))} > Списания @@ -737,7 +815,9 @@ render(() => { size={OPTIONS_LIST_ROW_SIZE} options={PERIOD_OPTIONS} open={periodOpen} - selectedItems={PERIOD_OPTIONS.filter((item) => item.key === applied.period)} + selectedItems={PERIOD_OPTIONS.filter( + (item) => item.key === applied.period, + )} getOptionProps={(option, index) => ({ option, index, @@ -924,10 +1004,12 @@ render(() => { size={32} view='filled' shape='rectangular' + showClear={true} checked={draft.replenishment} onClick={() => setDraft((p) => ({ ...p, replenishment: !p.replenishment })) } + onClear={() => setDraft((p) => ({ ...p, replenishment: false }))} > Пополнение @@ -935,10 +1017,12 @@ render(() => { size={32} view='filled' shape='rectangular' + showClear={true} checked={draft.writeoff} onClick={() => setDraft((p) => ({ ...p, writeoff: !p.writeoff })) } + onClear={() => setDraft((p) => ({ ...p, writeoff: false }))} > Списание @@ -946,8 +1030,10 @@ render(() => { size={32} view='filled' shape='rectangular' + showClear={true} checked={draft.dynamicKeys.includes('added_expenses')} onClick={() => toggleDraftDynamic('added_expenses')} + onClear={() => clearDraftDynamic('added_expenses')} > Добавленные расходы @@ -968,8 +1054,10 @@ render(() => { size={32} view='filled' shape='rectangular' + showClear={true} checked={draft.dynamicKeys.includes('to_client')} onClick={() => toggleDraftDynamic('to_client')} + onClear={() => clearDraftDynamic('to_client')} > Клиенту банка @@ -977,8 +1065,10 @@ render(() => { size={32} view='filled' shape='rectangular' + showClear={true} checked={draft.dynamicKeys.includes('between_accounts')} onClick={() => toggleDraftDynamic('between_accounts')} + onClear={() => clearDraftDynamic('between_accounts')} > Между счетами @@ -999,8 +1089,10 @@ render(() => { size={32} view='filled' shape='rectangular' + showClear={true} checked={draft.dynamicKeys.includes('templates')} onClick={() => toggleDraftDynamic('templates')} + onClear={() => clearDraftDynamic('templates')} > Шаблоны @@ -1008,8 +1100,10 @@ render(() => { size={32} view='filled' shape='rectangular' + showClear={true} checked={draft.dynamicKeys.includes('autopay')} onClick={() => toggleDraftDynamic('autopay')} + onClear={() => clearDraftDynamic('autopay')} > Автоплатежи @@ -1143,8 +1237,16 @@ const DYNAMIC_GROUPS = [ }, ]; -const FilterTagItem = ({ checked, onClick, size = MOBILE_ROW_TAG_SIZE, children }) => ( - +const FilterTagItem = ({ checked, onClick, onClear, showClear = false, size = MOBILE_ROW_TAG_SIZE, children }) => ( + {children} ); @@ -1222,6 +1324,9 @@ render(() => { dynamicKeys: toggleInArray(draft.dynamicKeys, key), }); + const clearAppliedDynamic = (key) => + setApplied((p) => ({ ...p, dynamicKeys: p.dynamicKeys.filter((k) => k !== key) })); + const appliedPeriodOption = React.useMemo( () => PERIOD_OPTIONS.find((o) => o.key === applied.period), [applied.period], @@ -1317,14 +1422,10 @@ render(() => { {applied.dynamicKeys.map((id) => (
- updateApplied({ - dynamicKeys: applied.dynamicKeys.filter( - (key) => key !== id, - ), - }) - } + onClick={() => clearAppliedDynamic(id)} + onClear={() => clearAppliedDynamic(id)} > {DYNAMIC_META[id]} @@ -1333,16 +1434,20 @@ render(() => {
updateApplied({ replenishment: !applied.replenishment })} + onClear={() => updateApplied({ replenishment: false })} > Пополнения
updateApplied({ writeoff: !applied.writeoff })} + onClear={() => updateApplied({ writeoff: false })} > Списания diff --git a/packages/tag/src/helpers/is-keyboard-event.ts b/packages/tag/src/helpers/is-keyboard-event.ts new file mode 100644 index 0000000000..32ef7d4a73 --- /dev/null +++ b/packages/tag/src/helpers/is-keyboard-event.ts @@ -0,0 +1,6 @@ +import { type KeyboardEvent, type MouseEvent } from 'react'; + +export const isKeyBoardEvent = ( + event: MouseEvent | KeyboardEvent, +): event is KeyboardEvent => + (event as KeyboardEvent).key !== undefined; diff --git a/packages/tag/src/mobile/default.mobile.module.css b/packages/tag/src/mobile/default.mobile.module.css index e13dff06c9..3e103a0032 100644 --- a/packages/tag/src/mobile/default.mobile.module.css +++ b/packages/tag/src/mobile/default.mobile.module.css @@ -1,40 +1,52 @@ @import '../vars.css'; -.filled, -.indicatorFilled { - --tag-filled-background-color: var(--tag-filled-mobile-background-color); - --tag-filled-background-color-hover: var(--tag-filled-mobile-background-color-hover); - --tag-filled-background-color-active: var(--tag-filled-mobile-background-color-active); -} +.filled { + --tag-filled-background-color: var(--tag-mobile-filled-background-color); + --tag-filled-background-color-hover: var(--tag-mobile-filled-background-color-hover); + --tag-filled-background-color-active: var(--tag-mobile-filled-background-color-active); -.indicatorFilled > svg > path { - fill: var(--tag-filled-mobile-background-color); -} + background-color: var(--tag-mobile-filled-background-color); -.indicatorFilled:active:not(:disabled) > svg > path { - fill: var(--tag-filled-mobile-background-color-active); -} + &:disabled { + background-color: var(--tag-mobile-filled-background-color-disabled); + } + + @media (hover: hover) { + &:hover:not(:disabled) { + background-color: var(--tag-mobile-filled-background-color-hover); + } + } -@media (hover: hover) { - .indicatorFilled:hover > svg > path { - fill: var(--tag-filled-mobile-background-color-hover); + &:active:not(:disabled) { + background-color: var(--tag-mobile-filled-background-color-active); } } -.filled { - background-color: var(--tag-filled-mobile-background-color); +.muted { + --tag-muted-background-color-checked: var(--tag-mobile-muted-checked-background-color); + --tag-muted-background-color-checked-hover: var( + --tag-mobile-muted-checked-background-color-hover + ); + --tag-muted-background-color-checked-active: var( + --tag-mobile-muted-checked-background-color-active + ); + --tag-muted-background-color-checked-disabled: var( + --tag-mobile-muted-checked-background-color-disabled + ); + + background-color: var(--tag-muted-background-color); &:disabled { - background-color: var(--tag-filled-mobile-background-color-disabled); + background-color: var(--tag-muted-background-color-disabled); } @media (hover: hover) { &:hover:not(:disabled) { - background-color: var(--tag-filled-mobile-background-color-hover); + background-color: var(--tag-muted-background-color-hover); } } &:active:not(:disabled) { - background-color: var(--tag-filled-mobile-background-color-active); + background-color: var(--tag-muted-background-color-active); } } diff --git a/packages/tag/src/mobile/inverted.mobile.module.css b/packages/tag/src/mobile/inverted.mobile.module.css index 518f5b671d..112eda60d5 100644 --- a/packages/tag/src/mobile/inverted.mobile.module.css +++ b/packages/tag/src/mobile/inverted.mobile.module.css @@ -1,44 +1,58 @@ @import '../vars.css'; -.filled, -.indicatorFilled { - --tag-inverted-filled-background-color: var(--tag-inverted-filled-mobile-background-color); +.filled { + --tag-inverted-filled-background-color: var(--tag-mobile-filled-background-color-inverted); --tag-inverted-filled-background-color-hover: var( - --tag-inverted-filled-mobile-background-color-hover + --tag-mobile-filled-background-color-hover-inverted ); --tag-inverted-filled-background-color-active: var( - --tag-inverted-filled-mobile-background-color-active + --tag-mobile-filled-background-color-active-inverted ); -} -.indicatorFilled > svg > path { - fill: var(--tag-inverted-filled-mobile-background-color); -} + background-color: var(--tag-mobile-filled-background-color-inverted); -.indicatorFilled:active:not(:disabled) > svg > path { - fill: var(--tag-inverted-filled-mobile-background-color-active); -} + &:disabled { + background-color: var(--tag-mobile-filled-background-color-disabled-inverted); + } + + @media (hover: hover) { + &:hover:not(:disabled) { + background-color: var(--tag-mobile-filled-background-color-hover-inverted); + } + } -@media (hover: hover) { - .indicatorFilled:hover > svg > path { - fill: var(--tag-inverted-filled-mobile-background-color-hover); + &:active:not(:disabled) { + background-color: var(--tag-mobile-filled-background-color-active-inverted); } } -.filled { - background-color: var(--tag-inverted-filled-mobile-background-color); +.muted { + --tag-inverted-muted-background-color-checked: var( + --tag-mobile-muted-checked-background-color-inverted + ); + --tag-inverted-muted-background-color-checked-hover: var( + --tag-mobile-muted-checked-background-color-hover-inverted + ); + --tag-inverted-muted-background-color-checked-active: var( + --tag-mobile-muted-checked-background-color-active-inverted + ); + --tag-inverted-muted-background-color-checked-disabled: var( + --tag-mobile-muted-checked-background-color-disabled-inverted + ); + + background-color: var(--tag-inverted-muted-background-color); &:disabled { - background-color: var(--tag-inverted-filled-mobile-background-color-disabled); + background-color: var(--tag-inverted-muted-background-color-disabled); } @media (hover: hover) { &:hover:not(:disabled) { - background-color: var(--tag-inverted-filled-mobile-background-color-hover); + background-color: var(--tag-inverted-muted-background-color-hover); } } &:active:not(:disabled) { - background-color: var(--tag-inverted-filled-mobile-background-color-active); + background-color: var(--tag-inverted-muted-background-color-active); } } diff --git a/packages/tag/src/typings.ts b/packages/tag/src/typings.ts index 580dbeffd9..78bdec13ba 100644 --- a/packages/tag/src/typings.ts +++ b/packages/tag/src/typings.ts @@ -64,9 +64,21 @@ export interface BaseTagProps extends Omit { /** * Слот справа + * @description Несовместим с `showClear`. При `showClear=true` игнорируется */ rightAddons?: ReactNode; + /** + * Показывать крестик для сброса выбора + * @default false + */ + showClear?: boolean; + + /** + * Обработчик нажатия на крестик + */ + onClear?: () => void; + /** * Идентификатор для систем автоматизированного тестирования */ @@ -109,7 +121,7 @@ export interface BaseTagProps extends Omit { * Стиль тега * @default outlined */ - view?: 'outlined' | 'filled' | 'transparent'; + view?: 'outlined' | 'filled' | 'transparent' | 'muted'; /** * Включает размытие фона для некоторых вариантов тега diff --git a/packages/tag/src/vars.css b/packages/tag/src/vars.css index 637d6d4d9b..c5e02fa0b7 100644 --- a/packages/tag/src/vars.css +++ b/packages/tag/src/vars.css @@ -46,6 +46,17 @@ --tag-filled-background-color-disabled: var(--color-light-neutral-translucent-100); --tag-filled-mask-positive-color: var(--color-static-neutral-0); + /* background-color muted */ + --tag-muted-border-color: transparent; + --tag-muted-background-color: var(--color-light-neutral-translucent-0); + --tag-muted-background-color-hover: var(--color-light-neutral-translucent-0-hover); + --tag-muted-background-color-active: var(--color-light-neutral-translucent-0-press); + --tag-muted-background-color-disabled: var(--color-light-neutral-translucent-100); + --tag-muted-background-color-checked-disabled: var(--color-light-neutral-translucent-100); + --tag-muted-background-color-checked: var(--color-light-neutral-translucent-200); + --tag-muted-background-color-checked-hover: var(--color-light-neutral-translucent-200-hover); + --tag-muted-background-color-checked-active: var(--color-light-neutral-translucent-200-press); + /* background-color checked */ --tag-background-color-checked: var(--color-light-accent-secondary); --tag-background-color-checked-hover: var(--color-light-accent-secondary-hover); @@ -58,6 +69,14 @@ --tag-text-color-disabled: var(--color-light-text-tertiary); --tag-text-color-checked-disabled: var(--color-light-text-tertiary); + /* clear */ + --tag-clear-color: var(--color-light-neutral-translucent-500); + --tag-clear-color-hover: var(--color-light-neutral-translucent-500-hover); + --tag-clear-color-active: var(--color-light-neutral-translucent-500-press); + --tag-clear-color-checked: var(--color-light-neutral-translucent-500-inverted); + --tag-clear-color-checked-hover: var(--color-light-neutral-translucent-500-inverted-hover); + --tag-clear-color-checked-active: var(--color-light-neutral-translucent-500-inverted-press); + /* inverted */ /* border */ @@ -115,33 +134,110 @@ --color-light-neutral-translucent-100-inverted ); + /* background-color muted inverted */ + --tag-inverted-muted-border-color: transparent; + --tag-inverted-muted-background-color: var(--color-light-neutral-translucent-0-inverted); + --tag-inverted-muted-background-color-hover: var( + --color-light-neutral-translucent-0-inverted-hover + ); + --tag-inverted-muted-background-color-active: var( + --color-light-neutral-translucent-0-inverted-press + ); + --tag-inverted-muted-background-color-disabled: var( + --color-light-neutral-translucent-100-inverted + ); + --tag-inverted-muted-background-color-checked-disabled: var( + --color-light-neutral-translucent-100-inverted + ); + --tag-inverted-muted-background-color-checked: var( + --color-light-neutral-translucent-200-inverted + ); + --tag-inverted-muted-background-color-checked-hover: var( + --color-light-neutral-translucent-200-inverted-hover + ); + --tag-inverted-muted-background-color-checked-active: var( + --color-light-neutral-translucent-200-inverted-press + ); + /* text color */ --tag-inverted-text-color: var(--color-light-text-primary-inverted); --tag-inverted-text-color-checked: var(--color-light-text-primary); --tag-inverted-text-color-disabled: var(--color-light-text-tertiary-inverted); --tag-inverted-text-color-checked-disabled: var(--color-light-text-tertiary-inverted); + /* clear inverted */ + --tag-clear-color-inverted: var(--color-light-neutral-translucent-500-inverted); + --tag-clear-color-hover-inverted: var(--color-light-neutral-translucent-500-inverted-hover); + --tag-clear-color-active-inverted: var(--color-light-neutral-translucent-500-inverted-press); + --tag-clear-color-checked-inverted: var(--color-light-neutral-translucent-500); + --tag-clear-color-checked-hover-inverted: var(--color-light-neutral-translucent-500-hover); + --tag-clear-color-checked-active-inverted: var(--color-light-neutral-translucent-500-press); + /* mobile */ --tag-alt-mobile-border-radius: var(--border-radius-16); --tag-rectangular-mobile-xxs-border-radius: var(--border-radius-8); --tag-rectangular-mobile-xs-border-radius: var(--border-radius-12); --tag-rectangular-mobile-s-border-radius: var(--border-radius-12); - --tag-filled-mobile-background-color: var(--color-light-neutral-translucent-100); - --tag-filled-mobile-background-color-hover: var(--color-light-neutral-translucent-100-hover); - --tag-filled-mobile-background-color-active: var(--color-light-neutral-translucent-100-press); - --tag-filled-mobile-background-color-disabled: var(--color-light-neutral-translucent-100); + + /* background-color filled mobile */ + --tag-mobile-filled-background-color: var(--color-light-neutral-translucent-100); + --tag-mobile-filled-background-color-hover: var(--color-light-neutral-translucent-100-hover); + --tag-mobile-filled-background-color-active: var(--color-light-neutral-translucent-100-press); + --tag-mobile-filled-background-color-disabled: var(--color-light-neutral-translucent-100); + + /* background-color muted mobile */ + --tag-mobile-muted-background-color: var(--color-light-neutral-translucent-0); + --tag-mobile-muted-background-color-hover: var(--color-light-neutral-translucent-0-hover); + --tag-mobile-muted-background-color-active: var(--color-light-neutral-translucent-0-press); + --tag-mobile-muted-background-color-disabled: var(--color-light-neutral-translucent-100); + --tag-mobile-muted-checked-background-color: var(--color-light-neutral-translucent-100); + --tag-mobile-muted-checked-background-color-hover: var( + --color-light-neutral-translucent-100-hover + ); + --tag-mobile-muted-checked-background-color-active: var( + --color-light-neutral-translucent-100-press + ); + --tag-mobile-muted-checked-background-color-disabled: var( + --color-light-neutral-translucent-100 + ); /* mobile inverted */ - --tag-inverted-filled-mobile-background-color: var( + + /* background-color filled mobile inverted */ + --tag-mobile-filled-background-color-inverted: var( --color-light-neutral-translucent-100-inverted ); - --tag-inverted-filled-mobile-background-color-hover: var( + --tag-mobile-filled-background-color-hover-inverted: var( --color-light-neutral-translucent-100-inverted-hover ); - --tag-inverted-filled-mobile-background-color-active: var( + --tag-mobile-filled-background-color-active-inverted: var( --color-light-neutral-translucent-100-inverted-press ); - --tag-inverted-filled-mobile-background-color-disabled: var( + --tag-mobile-filled-background-color-disabled-inverted: var( + --color-light-neutral-translucent-100-inverted + ); + + /* background-color muted mobile inverted */ + --tag-mobile-muted-background-color-inverted: var(--color-light-neutral-translucent-0-inverted); + --tag-mobile-muted-background-color-hover-inverted: var( + --color-light-neutral-translucent-0-inverted-hover + ); + --tag-mobile-muted-background-color-active-inverted: var( + --color-light-neutral-translucent-0-inverted-press + ); + --tag-mobile-muted-background-color-disabled-inverted: var( --color-light-neutral-translucent-100-inverted ); + --tag-mobile-muted-checked-background-color-disabled-inverted: var( + --color-light-neutral-translucent-100-inverted + ); + --tag-mobile-muted-checked-background-color-inverted: var( + --color-light-neutral-translucent-100-inverted + ); + --tag-mobile-muted-checked-background-color-hover-inverted: var( + --color-light-neutral-translucent-100-inverted-hover + ); + --tag-mobile-muted-checked-background-color-active-inverted: var( + --color-light-neutral-translucent-100-inverted-press + ); } diff --git a/yarn.lock b/yarn.lock index 4e617d72b6..e50f1c9f66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1987,6 +1987,7 @@ __metadata: "@alfalab/core-components-indicator": "npm:^4.0.2" "@alfalab/core-components-mq": "npm:^6.0.5" "@alfalab/hooks": "npm:^1.17.0" + "@alfalab/icons-glyph": "npm:^2.260.0" classnames: "npm:^2.5.1" react-merge-refs: "npm:^1.1.0" tslib: "npm:^2.4.0" From 9840b0331b4c537c79a6ec396d2025f6cd88f8e6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 23 Jun 2026 07:15:52 +0000 Subject: [PATCH 2/4] test: updated screenshots --- .../__image_snapshots__/checkbox-group-disabled-2-snap.png | 4 ++-- ...main-props-tag-direction-0-label-0-error-0-hint-0-snap.png | 2 +- ...main-props-tag-direction-0-label-0-error-0-hint-1-snap.png | 4 ++-- ...main-props-tag-direction-0-label-0-error-1-hint-0-snap.png | 4 ++-- ...main-props-tag-direction-0-label-0-error-1-hint-1-snap.png | 4 ++-- ...main-props-tag-direction-0-label-1-error-0-hint-0-snap.png | 4 ++-- ...main-props-tag-direction-0-label-1-error-0-hint-1-snap.png | 4 ++-- ...main-props-tag-direction-0-label-1-error-1-hint-0-snap.png | 4 ++-- ...main-props-tag-direction-0-label-1-error-1-hint-1-snap.png | 4 ++-- ...main-props-tag-direction-1-label-0-error-0-hint-0-snap.png | 4 ++-- ...main-props-tag-direction-1-label-0-error-0-hint-1-snap.png | 4 ++-- ...main-props-tag-direction-1-label-0-error-1-hint-0-snap.png | 4 ++-- ...main-props-tag-direction-1-label-0-error-1-hint-1-snap.png | 4 ++-- ...main-props-tag-direction-1-label-1-error-0-hint-0-snap.png | 4 ++-- ...main-props-tag-direction-1-label-1-error-0-hint-1-snap.png | 4 ++-- ...main-props-tag-direction-1-label-1-error-1-hint-0-snap.png | 4 ++-- ...main-props-tag-direction-1-label-1-error-1-hint-1-snap.png | 4 ++-- .../src/__image_snapshots__/filter-tag-dark-preview-snap.png | 4 ++-- .../filter-tag-main-props-click-2-snap.png | 4 ++-- .../filter-tag-main-props-click-3-snap.png | 4 ++-- .../filter-tag-main-props-click-4-snap.png | 4 ++-- .../filter-tag-main-props-click-5-snap.png | 4 ++-- .../filter-tag-main-props-click-6-snap.png | 4 ++-- .../__image_snapshots__/filter-tag-main-props-click-snap.png | 4 ++-- .../filter-tag-main-props-default-2-snap.png | 4 ++-- .../filter-tag-main-props-default-3-snap.png | 4 ++-- .../filter-tag-main-props-default-4-snap.png | 4 ++-- .../filter-tag-main-props-default-5-snap.png | 4 ++-- .../filter-tag-main-props-default-6-snap.png | 4 ++-- .../filter-tag-main-props-default-snap.png | 4 ++-- .../filter-tag-main-props-mobile-2-snap.png | 4 ++-- .../filter-tag-main-props-mobile-3-snap.png | 4 ++-- .../filter-tag-main-props-mobile-4-snap.png | 4 ++-- .../filter-tag-main-props-mobile-5-snap.png | 4 ++-- .../filter-tag-main-props-mobile-6-snap.png | 4 ++-- .../__image_snapshots__/filter-tag-main-props-mobile-snap.png | 4 ++-- .../src/__image_snapshots__/filter-tag-preview-snap.png | 4 ++-- .../filter-tag-show-clear-show-arrow-click-2-snap.png | 3 +++ .../filter-tag-show-clear-show-arrow-click-snap.png | 3 +++ .../filter-tag-show-clear-show-arrow-default-2-snap.png | 3 +++ .../filter-tag-show-clear-show-arrow-default-snap.png | 3 +++ .../filter-tag-show-clear-show-arrow-mobile-2-snap.png | 3 +++ .../filter-tag-show-clear-show-arrow-mobile-snap.png | 3 +++ .../filter-tag-view-variants-click-2-snap.png | 3 +++ .../filter-tag-view-variants-click-3-snap.png | 3 +++ .../filter-tag-view-variants-click-snap.png | 3 +++ .../filter-tag-view-variants-default-2-snap.png | 3 +++ .../filter-tag-view-variants-default-3-snap.png | 3 +++ .../filter-tag-view-variants-default-snap.png | 3 +++ .../filter-tag-view-variants-mobile-2-snap.png | 3 +++ .../filter-tag-view-variants-mobile-3-snap.png | 3 +++ .../filter-tag-view-variants-mobile-snap.png | 3 +++ ...-filer-tag-screenshots-hover-clear-state-colors-0-snap.png | 4 ++-- ...-filer-tag-screenshots-hover-clear-state-colors-1-snap.png | 4 ++-- .../hover-filer-tag-screenshots-hover-state-colors-0-snap.png | 4 ++-- .../hover-filer-tag-screenshots-hover-state-colors-1-snap.png | 4 ++-- ...ag-screenshots-pressed-state-checked-0-disabled-0-snap.png | 4 ++-- ...ag-screenshots-pressed-state-checked-0-disabled-1-snap.png | 4 ++-- ...ess-filer-tag-screenshots-pressed-state-checked-0-snap.png | 4 ++-- ...ag-screenshots-pressed-state-checked-1-disabled-0-snap.png | 4 ++-- ...ag-screenshots-pressed-state-checked-1-disabled-1-snap.png | 4 ++-- ...ess-filer-tag-screenshots-pressed-state-checked-1-snap.png | 4 ++-- .../src/__image_snapshots__/pagination-dark-preview-snap.png | 4 ++-- .../pagination-large-numbers-sprite-snap.png | 4 ++-- .../src/__image_snapshots__/pagination-preview-snap.png | 4 ++-- .../__image_snapshots__/radio-group-disabled-tags-snap.png | 4 ++-- ...ain-props-tags-direction-0-label-0-error-0-hint-0-snap.png | 4 ++-- ...ain-props-tags-direction-0-label-0-error-0-hint-1-snap.png | 4 ++-- ...ain-props-tags-direction-0-label-0-error-1-hint-0-snap.png | 4 ++-- ...ain-props-tags-direction-0-label-0-error-1-hint-1-snap.png | 4 ++-- ...ain-props-tags-direction-0-label-1-error-0-hint-0-snap.png | 4 ++-- ...ain-props-tags-direction-0-label-1-error-0-hint-1-snap.png | 4 ++-- ...ain-props-tags-direction-0-label-1-error-1-hint-0-snap.png | 4 ++-- ...ain-props-tags-direction-0-label-1-error-1-hint-1-snap.png | 4 ++-- ...ain-props-tags-direction-1-label-0-error-0-hint-0-snap.png | 4 ++-- ...ain-props-tags-direction-1-label-0-error-0-hint-1-snap.png | 4 ++-- ...ain-props-tags-direction-1-label-0-error-1-hint-0-snap.png | 4 ++-- ...ain-props-tags-direction-1-label-0-error-1-hint-1-snap.png | 4 ++-- ...ain-props-tags-direction-1-label-1-error-0-hint-0-snap.png | 4 ++-- ...ain-props-tags-direction-1-label-1-error-0-hint-1-snap.png | 4 ++-- ...ain-props-tags-direction-1-label-1-error-1-hint-0-snap.png | 4 ++-- ...ain-props-tags-direction-1-label-1-error-1-hint-1-snap.png | 4 ++-- .../select-with-tags-collapse-tag-list-desktop-snap.png | 4 ++-- .../select-with-tags-dark-preview-snap.png | 4 ++-- .../select-with-tags-hover-pressed-snap.png | 4 ++-- .../select-with-tags-main-scenario-desktop-2-snap.png | 4 ++-- .../select-with-tags-main-scenario-desktop-3-snap.png | 4 ++-- .../select-with-tags-main-scenario-desktop-4-snap.png | 4 ++-- .../select-with-tags-main-scenario-desktop-5-snap.png | 4 ++-- .../select-with-tags-main-scenario-desktop-6-snap.png | 4 ++-- .../select-with-tags-main-scenario-desktop-snap.png | 4 ++-- .../select-with-tags-main-scenario-mobile-5-snap.png | 4 ++-- .../select-with-tags-main-scenario-mobile-6-snap.png | 4 ++-- .../src/__image_snapshots__/select-with-tags-preview-snap.png | 4 ++-- .../select-with-tags-right-addons-desktop-size-48-snap.png | 4 ++-- .../select-with-tags-right-addons-desktop-size-56-snap.png | 4 ++-- .../select-with-tags-right-addons-desktop-size-64-snap.png | 4 ++-- .../select-with-tags-right-addons-desktop-size-72-snap.png | 4 ++-- .../click-tabs-tabs-desktop-view-1-size-2-2-snap.png | 4 ++-- .../click-tabs-tabs-desktop-view-1-size-3-2-snap.png | 4 ++-- .../click-tabs-tabs-desktop-view-1-size-4-2-snap.png | 4 ++-- .../click-tabs-tabs-desktop-view-1-size-5-2-snap.png | 4 ++-- .../corp-tabs-tabs-desktop-view-1-size-2-4-snap.png | 4 ++-- .../corp-tabs-tabs-desktop-view-1-size-3-4-snap.png | 4 ++-- .../corp-tabs-tabs-desktop-view-1-size-4-4-snap.png | 4 ++-- .../corp-tabs-tabs-desktop-view-1-size-5-4-snap.png | 4 ++-- .../default-tabs-tabs-desktop-view-1-size-2-snap.png | 4 ++-- .../default-tabs-tabs-desktop-view-1-size-3-snap.png | 4 ++-- .../default-tabs-tabs-desktop-view-1-size-4-snap.png | 4 ++-- .../default-tabs-tabs-desktop-view-1-size-5-snap.png | 4 ++-- .../site-tabs-tabs-desktop-view-1-size-2-3-snap.png | 4 ++-- .../site-tabs-tabs-desktop-view-1-size-3-3-snap.png | 4 ++-- .../site-tabs-tabs-desktop-view-1-size-4-3-snap.png | 4 ++-- .../site-tabs-tabs-desktop-view-1-size-5-3-snap.png | 4 ++-- .../tabs-desktop-scrollable-view-1-size-2-snap.png | 4 ++-- .../tabs-desktop-scrollable-view-1-size-3-snap.png | 4 ++-- .../tabs-desktop-scrollable-view-1-size-4-snap.png | 4 ++-- .../tabs-desktop-scrollable-view-1-size-5-snap.png | 4 ++-- .../tabs-show-skeleton-prop-view-1-snap.png | 4 ++-- .../click-tag-right-addons-checked-0-disabled-0-2-snap.png | 4 ++-- .../click-tag-right-addons-checked-0-disabled-1-2-snap.png | 4 ++-- .../click-tag-right-addons-checked-1-disabled-0-2-snap.png | 4 ++-- .../click-tag-right-addons-checked-1-disabled-1-2-snap.png | 4 ++-- .../default-tag-right-addons-checked-0-disabled-0-snap.png | 4 ++-- .../default-tag-right-addons-checked-0-disabled-1-snap.png | 4 ++-- .../default-tag-right-addons-checked-1-disabled-0-snap.png | 4 ++-- .../default-tag-right-addons-checked-1-disabled-1-snap.png | 4 ++-- ...on-screenshots-pressed-state-checked-0-disabled-0-snap.png | 4 ++-- ...on-screenshots-pressed-state-checked-0-disabled-1-snap.png | 2 +- ...on-screenshots-pressed-state-checked-1-disabled-0-snap.png | 2 +- ...on-screenshots-pressed-state-checked-1-disabled-1-snap.png | 4 ++-- .../hover-tag-screenshots-hover-state-disabled-0-snap.png | 4 ++-- .../hover-tag-screenshots-hover-state-disabled-1-snap.png | 2 +- .../indicator-tag-default-main-props-default-default-snap.png | 4 ++-- ...indicator-tag-default-main-props-default-inverted-snap.png | 4 ++-- .../indicator-tag-mobile-main-props-mobile-default-snap.png | 4 ++-- .../indicator-tag-mobile-main-props-mobile-inverted-snap.png | 4 ++-- .../mobile-tag-right-addons-checked-0-disabled-0-3-snap.png | 4 ++-- .../mobile-tag-right-addons-checked-0-disabled-1-3-snap.png | 4 ++-- .../mobile-tag-right-addons-checked-1-disabled-0-3-snap.png | 4 ++-- .../mobile-tag-right-addons-checked-1-disabled-1-3-snap.png | 4 ++-- .../src/__image_snapshots__/tag-clear-button-click-2-snap.png | 3 +++ .../src/__image_snapshots__/tag-clear-button-click-3-snap.png | 3 +++ .../src/__image_snapshots__/tag-clear-button-click-snap.png | 3 +++ .../__image_snapshots__/tag-clear-button-default-2-snap.png | 3 +++ .../__image_snapshots__/tag-clear-button-default-3-snap.png | 3 +++ .../src/__image_snapshots__/tag-clear-button-default-snap.png | 3 +++ .../__image_snapshots__/tag-clear-button-mobile-2-snap.png | 3 +++ .../__image_snapshots__/tag-clear-button-mobile-3-snap.png | 3 +++ .../src/__image_snapshots__/tag-clear-button-mobile-snap.png | 3 +++ .../tag/src/__image_snapshots__/tag-dark-preview-snap.png | 4 ++-- .../tag/src/__image_snapshots__/tag-inverted-click-2-snap.png | 4 ++-- .../tag/src/__image_snapshots__/tag-inverted-click-snap.png | 4 ++-- .../src/__image_snapshots__/tag-inverted-default-2-snap.png | 4 ++-- .../tag/src/__image_snapshots__/tag-inverted-default-snap.png | 4 ++-- .../src/__image_snapshots__/tag-inverted-mobile-2-snap.png | 4 ++-- .../tag/src/__image_snapshots__/tag-inverted-mobile-snap.png | 4 ++-- .../src/__image_snapshots__/tag-main-props-click-2-snap.png | 4 ++-- .../tag/src/__image_snapshots__/tag-main-props-click-snap.png | 4 ++-- .../src/__image_snapshots__/tag-main-props-default-2-snap.png | 4 ++-- .../src/__image_snapshots__/tag-main-props-default-snap.png | 4 ++-- .../src/__image_snapshots__/tag-main-props-mobile-2-snap.png | 4 ++-- .../src/__image_snapshots__/tag-main-props-mobile-snap.png | 4 ++-- packages/tag/src/__image_snapshots__/tag-preview-snap.png | 4 ++-- .../__image_snapshots__/tag-view-variants-click-2-snap.png | 4 ++-- .../__image_snapshots__/tag-view-variants-click-3-snap.png | 4 ++-- .../src/__image_snapshots__/tag-view-variants-click-snap.png | 4 ++-- .../__image_snapshots__/tag-view-variants-default-2-snap.png | 4 ++-- .../__image_snapshots__/tag-view-variants-default-3-snap.png | 4 ++-- .../__image_snapshots__/tag-view-variants-default-snap.png | 4 ++-- .../__image_snapshots__/tag-view-variants-mobile-2-snap.png | 4 ++-- .../__image_snapshots__/tag-view-variants-mobile-3-snap.png | 4 ++-- .../src/__image_snapshots__/tag-view-variants-mobile-snap.png | 4 ++-- 173 files changed, 366 insertions(+), 294 deletions(-) create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-2-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-2-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-2-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-2-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-3-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-2-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-3-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-2-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-3-snap.png create mode 100644 packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-click-2-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-click-3-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-click-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-default-2-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-default-3-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-default-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-mobile-2-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-mobile-3-snap.png create mode 100644 packages/tag/src/__image_snapshots__/tag-clear-button-mobile-snap.png diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-disabled-2-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-disabled-2-snap.png index a4d60e59d8..68eab6a7c2 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-disabled-2-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-disabled-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:02b7493d07859712bc1b31d8cada0250515a67b978c91374512291799fe1523d -size 13199 +oid sha256:51bf6abba80aa731966746fabf536bb94bc8146636276dcb6412c256465e6d82 +size 13154 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-0-hint-0-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-0-hint-0-snap.png index 820a8165e2..01e7cd9ad4 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-0-hint-0-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-0-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:db92accc8c6e1d7f9dab5d77fc0dc07157dceed263e8b478066f91ca97582e3d +oid sha256:65243e66f3cb57c265c6ef4445024a9643b37c747ad1376bed2def2391541d3f size 10571 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-0-hint-1-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-0-hint-1-snap.png index ab3b286d64..8951f2bb02 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-0-hint-1-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-0-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8cba44ce6776382b9d8d87bf5cb27286231f55dea313a72812ca5704c17fa70f -size 12183 +oid sha256:f470c84559641e69e86b79c2754f0ae86487b2fcf8100fe80a4c278093926fed +size 12185 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-1-hint-0-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-1-hint-0-snap.png index 59613f12c1..a3e0595b2f 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-1-hint-0-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-1-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b3f02b2d3843a3387bb3053aa49afb09d366b399929825609780f781d0236ab3 -size 11748 +oid sha256:cbe9a13018229adde33e01f1cf3f53cf6e55c7e7b711b4dc4c705187b2bad223 +size 11752 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-1-hint-1-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-1-hint-1-snap.png index 59613f12c1..a3e0595b2f 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-1-hint-1-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-0-error-1-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b3f02b2d3843a3387bb3053aa49afb09d366b399929825609780f781d0236ab3 -size 11748 +oid sha256:cbe9a13018229adde33e01f1cf3f53cf6e55c7e7b711b4dc4c705187b2bad223 +size 11752 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-0-hint-0-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-0-hint-0-snap.png index e672687c2e..7816c5ef7f 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-0-hint-0-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-0-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1cf70a8e7293a657ea11017327e406f6c3f6a07622f460821092937c9285bb6b -size 9722 +oid sha256:033fc8d1491da9fa93a859ba5b0bef53d063ae38abff013dfb02c2375b2590d7 +size 9725 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-0-hint-1-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-0-hint-1-snap.png index ccc44adce9..306d68f619 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-0-hint-1-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-0-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2e90df7b13bb5f2b9ffd60ae23b327303211aa85146f4d4cd48d92997e4ff856 -size 11332 +oid sha256:18ff63abdec17ef16bdbf08233837fc20182f8800211ff6b2656eb34e44c120d +size 11341 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-1-hint-0-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-1-hint-0-snap.png index 13c9e04b8b..2d5b259f92 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-1-hint-0-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-1-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ab1a7220d03676537108fcbcc1788fa5b3d247ef520770e98e2c424c52bc631c -size 10904 +oid sha256:c60d9ed1274712a8f0a8282e7e0c0646f5250d88f5eed35088c36e98dc7db086 +size 10917 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-1-hint-1-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-1-hint-1-snap.png index 13c9e04b8b..2d5b259f92 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-1-hint-1-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-0-label-1-error-1-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ab1a7220d03676537108fcbcc1788fa5b3d247ef520770e98e2c424c52bc631c -size 10904 +oid sha256:c60d9ed1274712a8f0a8282e7e0c0646f5250d88f5eed35088c36e98dc7db086 +size 10917 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-0-hint-0-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-0-hint-0-snap.png index 766027fb30..28cb24b77c 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-0-hint-0-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-0-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:206ddcb057ded195536a054508c8529dfc62e58c1f58966365c406946f6830fb -size 13576 +oid sha256:ae8839c401b28d8bea3abfc6f4a61d4c6feeac446f3128a24b1990bf0d1c2851 +size 13528 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-0-hint-1-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-0-hint-1-snap.png index 5d3a4d1472..71fbe6c2ee 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-0-hint-1-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-0-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0c83a4771f3f0f054be96b755b84c6d195a63cf55f4f21d06b025b59e45ace32 -size 15151 +oid sha256:aca1a44a1c4f626b64fb032bda9ded9a611b3c3382824f2b63afa65d1e7cf5a8 +size 15109 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-1-hint-0-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-1-hint-0-snap.png index d8a2a8ddde..7f3327e9f8 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-1-hint-0-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-1-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a1c243a9301efc0ed563dc8084c77c663c7077e711b27206ad16790e7029c73f -size 14990 +oid sha256:4375288b858393105decae1c07f8a9a1f0460e4c2973344ffca5df91d2747135 +size 14936 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-1-hint-1-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-1-hint-1-snap.png index d8a2a8ddde..7f3327e9f8 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-1-hint-1-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-0-error-1-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a1c243a9301efc0ed563dc8084c77c663c7077e711b27206ad16790e7029c73f -size 14990 +oid sha256:4375288b858393105decae1c07f8a9a1f0460e4c2973344ffca5df91d2747135 +size 14936 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-0-hint-0-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-0-hint-0-snap.png index 867adb6e34..5c62a3bc0f 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-0-hint-0-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-0-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fe466482af649a5ae0006e7a3ac7a757bd889f71964424d0af7442e17c3baf08 -size 12722 +oid sha256:3ac2ab0b9d42c8b26be9ad2889fdfcc8e8796ca2b88bddef5cf2782e02035e98 +size 12678 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-0-hint-1-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-0-hint-1-snap.png index 5dd759ea09..7ef962f9c6 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-0-hint-1-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-0-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7f5f60091ec9594226127081cdb5fa9c0a148266cc257b126853569155e01db4 -size 14317 +oid sha256:49861787ac03ee58d707c6278567a5a79b8ccea8f63c521bd4b1f79db194f3cb +size 14280 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-1-hint-0-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-1-hint-0-snap.png index 1652ce7b6d..b68396c937 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-1-hint-0-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-1-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d8a6da50a476a2214775cd5cc426dd9bd39740efbae26531a7cf10a92c7ee182 -size 14160 +oid sha256:71c2fbcfbaae9d008b7abac270f36fa00d35f0928dcc395d2b52e8f98138bfdd +size 14114 diff --git a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-1-hint-1-snap.png b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-1-hint-1-snap.png index 1652ce7b6d..b68396c937 100644 --- a/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-1-hint-1-snap.png +++ b/packages/checkbox-group/src/__image_snapshots__/checkbox-group-main-props-tag-direction-1-label-1-error-1-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d8a6da50a476a2214775cd5cc426dd9bd39740efbae26531a7cf10a92c7ee182 -size 14160 +oid sha256:71c2fbcfbaae9d008b7abac270f36fa00d35f0928dcc395d2b52e8f98138bfdd +size 14114 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-dark-preview-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-dark-preview-snap.png index 6b9b309a38..8c61b19d63 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-dark-preview-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ec3beb6190ffbc4dbcf5f863a44549dc190757e0a1fef754beec92565013e57e -size 13500 +oid sha256:9aacb151bb41d21d487d8ff75b6a67ca9e1c8ef14f7078f479644ac64456e913 +size 13225 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-2-snap.png index 626b0944e7..1df4a5aa67 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-2-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d79b66d00617552b7e01b246312fb35f18ecc0913b02165dfebebc7a5910be6d -size 17954 +oid sha256:93e62521bac58f840c2ba4b5f579cd6fd48f91903eb43b363c66997afd7a01f6 +size 17844 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-3-snap.png index 1b0ae1a60a..d1ab9c52bf 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-3-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5c11ddc66ae33bb08040f152ea9f9b36b2b0bdc2dfff9770da23c81127922d9d -size 11884 +oid sha256:18fc14eb86cfe79e75b2b68e8db72233c6499be932f0ffec096da1567829c155 +size 11674 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-4-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-4-snap.png index 2d7567cfda..27be5b3b4c 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-4-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:13177058e36c6b5be141479df006a85b9eb8c7c1aef62ca318bda11ba4e4b657 -size 22090 +oid sha256:81bcbc5f702480629538c67fdaa0997eae3a7ce1d54ad29f495d906d88d03da2 +size 21798 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-5-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-5-snap.png index 61749b3ba5..9bfa9dcb7f 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-5-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9dff2b994dd63902e88395f102f14b4645114b652d0989a368d9137d2bc6462c -size 22208 +oid sha256:911e03fa319ad24c23f482e3a352a7b71e70d79527fbe30d2e4b718854279b0a +size 22973 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-6-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-6-snap.png index 84d11c7f5e..cf295b5b6c 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-6-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-6-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5d2d00e18bcfb7231c5e996c7b03c3160981206fd3a81cf8223256acf9a84e6e -size 23801 +oid sha256:3e0b880ec83790af18ee9d972bcdda7832ef8567f10f6ea200d1a3fc5b862263 +size 23697 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-snap.png index 90c0501395..417e9229f2 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-click-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:043e1a26fcca77bbda6784da85f296fad23f368debe5c4c3e8cffd5571a5fe51 -size 17941 +oid sha256:e8944d4a1d9fa8a92a07b9801a4b1fda598c3c406c5b63e2ab94c7e1b6418d88 +size 17830 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-2-snap.png index 626b0944e7..1df4a5aa67 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-2-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d79b66d00617552b7e01b246312fb35f18ecc0913b02165dfebebc7a5910be6d -size 17954 +oid sha256:93e62521bac58f840c2ba4b5f579cd6fd48f91903eb43b363c66997afd7a01f6 +size 17844 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-3-snap.png index 1b0ae1a60a..d1ab9c52bf 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-3-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5c11ddc66ae33bb08040f152ea9f9b36b2b0bdc2dfff9770da23c81127922d9d -size 11884 +oid sha256:18fc14eb86cfe79e75b2b68e8db72233c6499be932f0ffec096da1567829c155 +size 11674 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-4-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-4-snap.png index 2d7567cfda..27be5b3b4c 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-4-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:13177058e36c6b5be141479df006a85b9eb8c7c1aef62ca318bda11ba4e4b657 -size 22090 +oid sha256:81bcbc5f702480629538c67fdaa0997eae3a7ce1d54ad29f495d906d88d03da2 +size 21798 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-5-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-5-snap.png index 61749b3ba5..9bfa9dcb7f 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-5-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9dff2b994dd63902e88395f102f14b4645114b652d0989a368d9137d2bc6462c -size 22208 +oid sha256:911e03fa319ad24c23f482e3a352a7b71e70d79527fbe30d2e4b718854279b0a +size 22973 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-6-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-6-snap.png index 84d11c7f5e..cf295b5b6c 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-6-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-6-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5d2d00e18bcfb7231c5e996c7b03c3160981206fd3a81cf8223256acf9a84e6e -size 23801 +oid sha256:3e0b880ec83790af18ee9d972bcdda7832ef8567f10f6ea200d1a3fc5b862263 +size 23697 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-snap.png index 90c0501395..417e9229f2 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:043e1a26fcca77bbda6784da85f296fad23f368debe5c4c3e8cffd5571a5fe51 -size 17941 +oid sha256:e8944d4a1d9fa8a92a07b9801a4b1fda598c3c406c5b63e2ab94c7e1b6418d88 +size 17830 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-2-snap.png index 626b0944e7..1df4a5aa67 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-2-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d79b66d00617552b7e01b246312fb35f18ecc0913b02165dfebebc7a5910be6d -size 17954 +oid sha256:93e62521bac58f840c2ba4b5f579cd6fd48f91903eb43b363c66997afd7a01f6 +size 17844 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-3-snap.png index 1b0ae1a60a..d1ab9c52bf 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-3-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5c11ddc66ae33bb08040f152ea9f9b36b2b0bdc2dfff9770da23c81127922d9d -size 11884 +oid sha256:18fc14eb86cfe79e75b2b68e8db72233c6499be932f0ffec096da1567829c155 +size 11674 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-4-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-4-snap.png index 2d7567cfda..27be5b3b4c 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-4-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:13177058e36c6b5be141479df006a85b9eb8c7c1aef62ca318bda11ba4e4b657 -size 22090 +oid sha256:81bcbc5f702480629538c67fdaa0997eae3a7ce1d54ad29f495d906d88d03da2 +size 21798 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-5-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-5-snap.png index 61749b3ba5..9bfa9dcb7f 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-5-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9dff2b994dd63902e88395f102f14b4645114b652d0989a368d9137d2bc6462c -size 22208 +oid sha256:911e03fa319ad24c23f482e3a352a7b71e70d79527fbe30d2e4b718854279b0a +size 22973 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-6-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-6-snap.png index 84d11c7f5e..cf295b5b6c 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-6-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-6-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5d2d00e18bcfb7231c5e996c7b03c3160981206fd3a81cf8223256acf9a84e6e -size 23801 +oid sha256:3e0b880ec83790af18ee9d972bcdda7832ef8567f10f6ea200d1a3fc5b862263 +size 23697 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-snap.png index 90c0501395..417e9229f2 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-main-props-mobile-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:043e1a26fcca77bbda6784da85f296fad23f368debe5c4c3e8cffd5571a5fe51 -size 17941 +oid sha256:e8944d4a1d9fa8a92a07b9801a4b1fda598c3c406c5b63e2ab94c7e1b6418d88 +size 17830 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-preview-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-preview-snap.png index 1def212199..31f1e344f2 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-preview-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:77e61a3146935e515faa8dbcda01976b9aa0d56bf1b0e0de64964b35e1a204ad -size 13124 +oid sha256:ffbc081a529b07f515a87e793b270e3896a3f4f6b5d96f69e4ec107a5b7d6191 +size 12930 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-2-snap.png new file mode 100644 index 0000000000..31b8e63693 --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3fd5c847bd5333b3de38bea489c82dda7b1630c031dcc32bf11c3b17325bc311 +size 11828 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-snap.png new file mode 100644 index 0000000000..cf70cd262a --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cde5f702241063cf81d3eb394cbf4c74031d643ad4a3109622f651f71e100683 +size 14795 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-2-snap.png new file mode 100644 index 0000000000..31b8e63693 --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3fd5c847bd5333b3de38bea489c82dda7b1630c031dcc32bf11c3b17325bc311 +size 11828 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-snap.png new file mode 100644 index 0000000000..cf70cd262a --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cde5f702241063cf81d3eb394cbf4c74031d643ad4a3109622f651f71e100683 +size 14795 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-2-snap.png new file mode 100644 index 0000000000..31b8e63693 --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3fd5c847bd5333b3de38bea489c82dda7b1630c031dcc32bf11c3b17325bc311 +size 11828 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-snap.png new file mode 100644 index 0000000000..cf70cd262a --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cde5f702241063cf81d3eb394cbf4c74031d643ad4a3109622f651f71e100683 +size 14795 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-2-snap.png new file mode 100644 index 0000000000..17532a39fc --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:371a4a0fb1266312a6d39103013752dab37bbf4ed3181e4a8cc4555d469e1946 +size 23138 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-3-snap.png new file mode 100644 index 0000000000..c978b60bcc --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-3-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:24df3051956450c6434561633bca0ee8aed4e365c3d04a15301f97dc57093750 +size 28498 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-snap.png new file mode 100644 index 0000000000..8b66c2452f --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2b7e807851d60a7e6e6c339d8772e2299d4db679c8b904cc7041e377f1b16b06 +size 15934 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-2-snap.png new file mode 100644 index 0000000000..17532a39fc --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:371a4a0fb1266312a6d39103013752dab37bbf4ed3181e4a8cc4555d469e1946 +size 23138 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-3-snap.png new file mode 100644 index 0000000000..c978b60bcc --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-3-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:24df3051956450c6434561633bca0ee8aed4e365c3d04a15301f97dc57093750 +size 28498 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-snap.png new file mode 100644 index 0000000000..8b66c2452f --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2b7e807851d60a7e6e6c339d8772e2299d4db679c8b904cc7041e377f1b16b06 +size 15934 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-2-snap.png new file mode 100644 index 0000000000..17532a39fc --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:371a4a0fb1266312a6d39103013752dab37bbf4ed3181e4a8cc4555d469e1946 +size 23138 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-3-snap.png new file mode 100644 index 0000000000..c978b60bcc --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-3-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:24df3051956450c6434561633bca0ee8aed4e365c3d04a15301f97dc57093750 +size 28498 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-snap.png new file mode 100644 index 0000000000..8b66c2452f --- /dev/null +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2b7e807851d60a7e6e6c339d8772e2299d4db679c8b904cc7041e377f1b16b06 +size 15934 diff --git a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-0-snap.png b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-0-snap.png index 68e4423533..96fc2426d4 100644 --- a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c373aea59681c1b3a898de3cedd7427c55e8f6a945c3f7eaa07e179fe3ea6645 -size 3409 +oid sha256:c90317216c23b1bc034c4a6199bdb6d4301b15f87b685fa665c0f5938d209183 +size 3393 diff --git a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-1-snap.png b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-1-snap.png index a6527b995f..af96e01984 100644 --- a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-1-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d99f7f4180c277f329328c7a8af03fe1192ecc18d1eb9a531dee4b3da964339b -size 3565 +oid sha256:5ccbcd99ab71c0ae57298cb8faaa2da2eb6a53e3a24ebf97f8fb8ff8b487757f +size 3524 diff --git a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-0-snap.png b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-0-snap.png index c4696da7b4..94a3040004 100644 --- a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0566bc4c7b2b2067ec350d19c80d73b58aef3126a6c14823e97c02d5a1d1dadf -size 3550 +oid sha256:bea8fd9cefe02adb35d923c9d28db07cc6e4824f603c7305379efc41daeaeef8 +size 3484 diff --git a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-1-snap.png b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-1-snap.png index d99bcf41f2..2529f4d4ff 100644 --- a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-1-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2c05ede53bdf2baf7677a836a1b14bc5554db7dd8a083923506a8c8b24306bed -size 3552 +oid sha256:104678cd09772081f6a62d31f07611c29c331eddaf75d2f538fad0140682f0a9 +size 3518 diff --git a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-0-snap.png b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-0-snap.png index 8c8ffb4555..7b7cc10a0a 100644 --- a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ded2c47bbe8dbaf848c0299e7239d74cdb96bc7a6f7910442814c5e196f9bfc7 -size 3553 +oid sha256:b0458cf4592fed55259e064b6a9fa61e08798c4c0148e4a7a45e47932ae79c92 +size 3510 diff --git a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-1-snap.png b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-1-snap.png index d7499f40cc..22fc29d1a4 100644 --- a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-1-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5768a8ee5bdb1b39b07e0d8354b4b0778414a2a10fe0253305df76a5dce83cba -size 2260 +oid sha256:fa56b3da8031353d4674d620e029acae35aea1ec4347cbc62206a6fe9b0bb7c5 +size 2264 diff --git a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-snap.png b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-snap.png index 160ac432af..5a65c665e5 100644 --- a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cdc40e4b4b53c363eae2f3e656aef60386502be60300037661827db1d5a806b6 -size 3579 +oid sha256:66fb097b1531f1dacde3128ab84fc877f7543e2e55180cb391c0830995789624 +size 3531 diff --git a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-disabled-0-snap.png b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-disabled-0-snap.png index e83f79fcda..261a7dc397 100644 --- a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-disabled-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-disabled-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2418af60fe2eaba7d1cab9254a1cccf20e34889956c4c8757cd8f78185a11b76 -size 3245 +oid sha256:4d72927430b33f76d1c14c1ebe553780edae0d530d80154583728c2ac40d7b47 +size 3206 diff --git a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-disabled-1-snap.png b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-disabled-1-snap.png index 2df81d8065..5792d92cd5 100644 --- a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-disabled-1-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-disabled-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cad1db2c05152f68c0c8e65eb58a33a46d43ae243c97a82ab0e144cbaea849ef -size 2806 +oid sha256:d9b43c613c224cbd6be28cca7621880cb8b404e2aeb32fa8a8e8ff2b5c66a303 +size 2816 diff --git a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-snap.png b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-snap.png index 0f103dd582..c6fdc54831 100644 --- a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ec4c0d09d1cdec1038d8aedcacaa34c2b0155c81676ee9462643821f418565e4 -size 3206 +oid sha256:78288082e0e1b6657ea4d3e982541553445672acdbbdba83c7a33bb2e5f5e259 +size 3214 diff --git a/packages/pagination/src/__image_snapshots__/pagination-dark-preview-snap.png b/packages/pagination/src/__image_snapshots__/pagination-dark-preview-snap.png index 1bb8172bdb..6977b50b1a 100644 --- a/packages/pagination/src/__image_snapshots__/pagination-dark-preview-snap.png +++ b/packages/pagination/src/__image_snapshots__/pagination-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ab33499cd6896d7f54d1863ab4c6cae7a085fd7de4ca0688684d7981cfab0a3e -size 6086 +oid sha256:9a472288ef090c9a0549b0ee19b7101006fc3516c40e4cf38f232d26f4421eb3 +size 5697 diff --git a/packages/pagination/src/__image_snapshots__/pagination-large-numbers-sprite-snap.png b/packages/pagination/src/__image_snapshots__/pagination-large-numbers-sprite-snap.png index befcc1b63c..6ba6be8145 100644 --- a/packages/pagination/src/__image_snapshots__/pagination-large-numbers-sprite-snap.png +++ b/packages/pagination/src/__image_snapshots__/pagination-large-numbers-sprite-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:328100df70e9abfa8023969bc3457296587cfb27137c552bb53378b03d280002 -size 40013 +oid sha256:30587a1b09fda92dcef0352ebd7335a2f2883b0ba81a5cbef4171690ffd3a4d5 +size 38409 diff --git a/packages/pagination/src/__image_snapshots__/pagination-preview-snap.png b/packages/pagination/src/__image_snapshots__/pagination-preview-snap.png index 750d0400e5..fb44891c80 100644 --- a/packages/pagination/src/__image_snapshots__/pagination-preview-snap.png +++ b/packages/pagination/src/__image_snapshots__/pagination-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:87136c3b519a32f4fe869f93a67010ecf68119886e3bdb4759f4d604fc5fd4ef -size 6075 +oid sha256:08d1696f5217a53290300f81c7d3d7f2e377ace524c06092fe10f29b973e37e6 +size 5609 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-disabled-tags-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-disabled-tags-snap.png index 9f97666eeb..725a1d2e8c 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-disabled-tags-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-disabled-tags-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e946cf6c9ac7d8e8559a3373665a9430bfbf2675e51588da137c09ec321abdb3 -size 12172 +oid sha256:c845874444fa8b5f6b0593be84b4ab6c5db75b191126bf60c4ddb92755404055 +size 12143 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-0-hint-0-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-0-hint-0-snap.png index 68eafbe125..db28a63f44 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-0-hint-0-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-0-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1db28bcbb3120af591661789e9edf8e69dc3c57b5dc9cc913b2e33e8fe8b6985 -size 11474 +oid sha256:35261e5c792914125f4e6cd1e2eaf9b62534e7bd8932d8ba4f6f73a36ab545e9 +size 11477 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-0-hint-1-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-0-hint-1-snap.png index 729f68037a..6f37792b1f 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-0-hint-1-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-0-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f872cc135aa75544fbb5f7be5367b885f02afcd7a1d332bde76d5bcea4a9c42d -size 13086 +oid sha256:2395781d5adaab2e2961dfe87733e2833c4c7499804611f00874bb9dd2d49918 +size 13088 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-1-hint-0-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-1-hint-0-snap.png index a04f2b91df..1a636604f9 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-1-hint-0-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-1-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c3e48047d1696789b2634ffee05f4e0372a58f77e94c4640c854d0568903724c -size 12744 +oid sha256:51591795ed8c0c36f1e1135883021ed8deedda30528fe34d4a6efde86c4a574a +size 12694 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-1-hint-1-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-1-hint-1-snap.png index a04f2b91df..1a636604f9 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-1-hint-1-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-0-error-1-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c3e48047d1696789b2634ffee05f4e0372a58f77e94c4640c854d0568903724c -size 12744 +oid sha256:51591795ed8c0c36f1e1135883021ed8deedda30528fe34d4a6efde86c4a574a +size 12694 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-0-hint-0-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-0-hint-0-snap.png index 34d1a685ba..fb85cd3064 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-0-hint-0-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-0-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:51045c1247c0a096e0626a5240538a17c4ee5729ba95ec7be28300e89992bdb6 -size 10634 +oid sha256:89e2ad4b26fc6f4b93f080b625513f0c52a008e5ad88a159fd96f4cdd0b08812 +size 10638 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-0-hint-1-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-0-hint-1-snap.png index df9f69c495..0b3b9c6c04 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-0-hint-1-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-0-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d620cff20f0181aaa1900a1ccd581459c2a22485acb579b89b6f7254416ad7be -size 12242 +oid sha256:2eb568d80204ea40f0b93912d6a561f315442dcaa222cd0c5cf7ad32003820a8 +size 12250 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-1-hint-0-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-1-hint-0-snap.png index b8d7463c09..0bd203a281 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-1-hint-0-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-1-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2486668a454e50d825aade0dfe1f52186df29aacc5563f607c5813f4af79e457 -size 11904 +oid sha256:22a80bc16b8f9bff7cb53c5c41742cf738ec8b02561080da7be2b53425313cd0 +size 11861 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-1-hint-1-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-1-hint-1-snap.png index b8d7463c09..0bd203a281 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-1-hint-1-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-0-label-1-error-1-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2486668a454e50d825aade0dfe1f52186df29aacc5563f607c5813f4af79e457 -size 11904 +oid sha256:22a80bc16b8f9bff7cb53c5c41742cf738ec8b02561080da7be2b53425313cd0 +size 11861 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-0-hint-0-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-0-hint-0-snap.png index f31100c618..5c0e19bb74 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-0-hint-0-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-0-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a213c540192198df53cad62cae3dfe92e430e84e1a21b0a425c9ca3d962d7f1a -size 13035 +oid sha256:4ec1576c468a4daaf8115f0a0fdd510a9ede3599a2ae34144894b99a828fae1c +size 13009 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-0-hint-1-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-0-hint-1-snap.png index cd5be3434b..f5f7e2484b 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-0-hint-1-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-0-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9d3cb02a27c361ab55b1afab0a64bb650a5d0d01e2c9b1fa7e9a5a01471d66b2 -size 14612 +oid sha256:3dfa90361987f2c6d481142d13bbce7ba6dbe87b950a30e2cb3c2f1bda80c51e +size 14589 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-1-hint-0-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-1-hint-0-snap.png index dbd20a36c5..6e04790d16 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-1-hint-0-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-1-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:08f75244f319e21bfa5ccc05e03af0edae23e1cb9d6f8e6ea4befb27ee03feeb -size 14349 +oid sha256:f2ee3d83d995f4c89a35126c8887bae6026d2267e91cece6bccdf6ad76a08ecd +size 14312 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-1-hint-1-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-1-hint-1-snap.png index dbd20a36c5..6e04790d16 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-1-hint-1-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-0-error-1-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:08f75244f319e21bfa5ccc05e03af0edae23e1cb9d6f8e6ea4befb27ee03feeb -size 14349 +oid sha256:f2ee3d83d995f4c89a35126c8887bae6026d2267e91cece6bccdf6ad76a08ecd +size 14312 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-0-hint-0-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-0-hint-0-snap.png index d3622ce4e3..30184ec029 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-0-hint-0-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-0-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:14041b6e133810abb8c47166bbd1b8b240d35988fc39347892b056e28c47dd39 -size 12193 +oid sha256:a73e4ba31c030531eabcceba7a789d9fcb2bf5da64642955766ed1eaf3f23d73 +size 12173 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-0-hint-1-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-0-hint-1-snap.png index 1e40ec0833..3d99993f76 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-0-hint-1-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-0-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:33adced184d2d4b69ec611419a919091b3f9566c4849a77e38af5297b5297a3c -size 13792 +oid sha256:50492a6227e08697b28ff7cfda139d024953114a8f0e9de4b90eccedda9cc4f3 +size 13772 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-1-hint-0-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-1-hint-0-snap.png index d692af81fb..61149e80f7 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-1-hint-0-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-1-hint-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:15cfa6b8d13b2ed737737e551936141503752eac6667092c1cffab3d53e1a780 -size 13531 +oid sha256:d6137eb4ec5d5b4dd50ccefe6e9b24a1008eaed96f1b1cd30f2cb9d39d181bde +size 13501 diff --git a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-1-hint-1-snap.png b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-1-hint-1-snap.png index d692af81fb..61149e80f7 100644 --- a/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-1-hint-1-snap.png +++ b/packages/radio-group/src/__image_snapshots__/radio-group-main-props-tags-direction-1-label-1-error-1-hint-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:15cfa6b8d13b2ed737737e551936141503752eac6667092c1cffab3d53e1a780 -size 13531 +oid sha256:d6137eb4ec5d5b4dd50ccefe6e9b24a1008eaed96f1b1cd30f2cb9d39d181bde +size 13501 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-collapse-tag-list-desktop-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-collapse-tag-list-desktop-snap.png index 6c691e5fa0..790684dded 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-collapse-tag-list-desktop-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-collapse-tag-list-desktop-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:57aa4f798e7a2f7610b82e5ff4b7543bc619c61df943a18741e61928e6113b6a -size 18547 +oid sha256:82121c65a2fabe7c1fa4b994fd87f04c23fdd78bf0a856181a4faa8a28cfc73f +size 18659 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-dark-preview-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-dark-preview-snap.png index 60369aa41a..cab6d6d63a 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-dark-preview-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:36970985aedd3f85a53548871a02854d7b0bdb9cdd1f2971832b33d4b6e4910a -size 11475 +oid sha256:73bd0dd2f165685a2d12d6236ed1b53ef113c1307cf9362a67c0743acd77b5ef +size 8849 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-hover-pressed-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-hover-pressed-snap.png index 14392f0cdc..85a1a4c28c 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-hover-pressed-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-hover-pressed-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d0b4b179cacce9a31a9de6b2b8df7ce0262e2fb44fe81ff16856d06c595120a8 -size 19650 +oid sha256:d75a8559e6c16dd3ee932f9aeb2c0214eb728415950137585b32b4445b6349c8 +size 21716 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-2-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-2-snap.png index 7c61f30c95..b83787969a 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-2-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:33a69c99c23fc7ad5344d7519c31f02d351b6220a201d5a3d98a390ab19728cf -size 14480 +oid sha256:881d6bb04a4f02891da30e81d96cde70731c4115491e7c623a9250e714ceb552 +size 15240 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-3-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-3-snap.png index a2184b62ad..26ac7e70fb 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-3-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24c81055799f55a906aa47e5884aa9aa49d922659b28c33291a8898e0926b953 -size 18633 +oid sha256:bbade05874c7eb60783529418d571f499255cce274dda39af02e07b721f3b0b1 +size 18570 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-4-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-4-snap.png index 098a873a89..0e8735ccb4 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-4-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e8310232f0ad275493b67c81c00b1d33ec3e755ce7e3e23cb304907907eb9c65 -size 19620 +oid sha256:b98d2f196a7fcf755accbb51f3266693f5b369033b746dde7cdd6deaf5f02679 +size 20031 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-5-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-5-snap.png index d41666d8b8..738c6b820b 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-5-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7c96ef7d57d0e5cbf68e06822f21c3d90a07d9a10fec0d2b67ae2bd1a9a4f93b -size 17530 +oid sha256:704ee468a2ea5521186a070625383ae2c7f722ef4a584c83be2449d294de526b +size 17032 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-6-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-6-snap.png index 87df690cc2..5779b72fb3 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-6-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-6-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4e65deafebee806138d5f0cc538de3762195cd7960a59ebd662c053ea59b6f45 -size 17709 +oid sha256:9924c160db9147af78bc0832d4e777821ca961fc93501568cbf352054fc46a90 +size 17682 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-snap.png index 691294312f..739c633912 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-desktop-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:872bcc6c2f5cceda86312995eb1fc107ce3bd4e259795b779407926a7caaefb0 -size 8207 +oid sha256:2be36bc19ac9962eb468556e1c0b98828aa5133414a07d58a8931ccc55833fd8 +size 8552 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-mobile-5-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-mobile-5-snap.png index 28df6d7b62..e2def74f9e 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-mobile-5-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-mobile-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1c405800d59d440dd608f91db44c59ef454432329de4af2f9d43a0600fa7b21a -size 11583 +oid sha256:31889232b466ec24aedec168ae437be2fcd3367c62c2a1d1a90c71f4f810da89 +size 12037 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-mobile-6-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-mobile-6-snap.png index 0822491d54..7b06ee4b5b 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-mobile-6-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-main-scenario-mobile-6-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:564a09591a98e2a9cddf23927602fb9b24d43d314b8fb506c06270c854091397 -size 8602 +oid sha256:a67a7ee49699168becec7addf335e7814fd1fcb6d6b9da17bd5e302b6055a564 +size 11903 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-preview-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-preview-snap.png index e4f8b8eaf5..93b5c5e9d0 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-preview-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b4ad6b5ecbca1c844da426e0f37d3dd8655fa09c44421792ceb8662b609e9a35 -size 11419 +oid sha256:3c1d87c31cb1748861a80d4abc8fcb3ddde59c2ef58676e354cea918d5229fb4 +size 8742 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-48-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-48-snap.png index 8188d2e762..cec4f251c0 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-48-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-48-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d7813bf5be5793d004352bca6358864de0d115365ead7aef86e6ac4dfd1beeb3 -size 2066 +oid sha256:b9945015ad0f85e603ba0f97f9b87b279ad5f9cfe6c6e554f7962a641fd55d0b +size 2037 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-56-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-56-snap.png index 8074fef9f6..e0a0dd700b 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-56-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-56-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d9b62b5781257ee1726cb0600f87d4d943daa609a5d7d680663162e99dbef3ad -size 2067 +oid sha256:c960c143076c0214b82eaf0852033dd964cf9305c05dbc89e5a52b52409071e0 +size 2039 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-64-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-64-snap.png index 0bc377849c..b443c41f41 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-64-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-64-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ac157bb6d6ca25ea63fa81ea1942c77a1b3cb7b05ff00330154df64c2a34c272 -size 2071 +oid sha256:6a3bbf0ea18a5daf8a408ce11e96d4cd4596c7902fea47a6735c5c3245b42f09 +size 2044 diff --git a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-72-snap.png b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-72-snap.png index 0a06ed537e..e36acc42c2 100644 --- a/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-72-snap.png +++ b/packages/select-with-tags/src/__image_snapshots__/select-with-tags-right-addons-desktop-size-72-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:106bdd8284876ee04141aa1878b954ec4aa47798abb34da88d13a266f6ceca38 -size 2194 +oid sha256:6c2cec7c6c6f828963f86b2081fb24ec3d9fa175be97983fc08ebe55d968f052 +size 2172 diff --git a/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-2-2-snap.png b/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-2-2-snap.png index 7effefe445..af61996d65 100644 --- a/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-2-2-snap.png +++ b/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-2-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6ecb51c62d78d388a6aa6ded4630670e17b4ce1db5391bc461782ce9cf1c8a4f -size 10658 +oid sha256:8aac808506e1588c940a77fcaaa29df07126298259df1707393cb2124619d81f +size 10885 diff --git a/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-3-2-snap.png b/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-3-2-snap.png index 0f29d22d6c..116c0b9632 100644 --- a/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-3-2-snap.png +++ b/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-3-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8fc3cefabc0956681e4787f3e30511f5a4d55cf21b33447cebfbc21bfa0308e0 -size 10623 +oid sha256:13c39d304c2b45ddbaa8ad583d3338b45ee32c22b12bde20c8df48669500aeb5 +size 11111 diff --git a/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-4-2-snap.png b/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-4-2-snap.png index b0b6c3226e..363209e841 100644 --- a/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-4-2-snap.png +++ b/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-4-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:af8d08f6306c2f4c615151a2a371e175bcb051f951d3981a464e1d99d5e98b48 -size 11441 +oid sha256:ce9fb0b411ee19de07034ad408c118936bd199c34851e8db81639b22054a2b4d +size 10993 diff --git a/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-5-2-snap.png b/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-5-2-snap.png index e3180ca1a6..f89c538fcf 100644 --- a/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-5-2-snap.png +++ b/packages/tabs/src/__image_snapshots__/click-tabs-tabs-desktop-view-1-size-5-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6fa785b870d4fecb8b8e12a796584424d796bdcb8de5a8150979f837b9f1a3ad -size 11554 +oid sha256:e02a70c6dbdbb854acf1bcbcbb22c5968ad1efc7d809730ce85fc5a9c7d877ec +size 11262 diff --git a/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-2-4-snap.png b/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-2-4-snap.png index 7effefe445..af61996d65 100644 --- a/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-2-4-snap.png +++ b/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-2-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6ecb51c62d78d388a6aa6ded4630670e17b4ce1db5391bc461782ce9cf1c8a4f -size 10658 +oid sha256:8aac808506e1588c940a77fcaaa29df07126298259df1707393cb2124619d81f +size 10885 diff --git a/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-3-4-snap.png b/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-3-4-snap.png index 0f29d22d6c..116c0b9632 100644 --- a/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-3-4-snap.png +++ b/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-3-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8fc3cefabc0956681e4787f3e30511f5a4d55cf21b33447cebfbc21bfa0308e0 -size 10623 +oid sha256:13c39d304c2b45ddbaa8ad583d3338b45ee32c22b12bde20c8df48669500aeb5 +size 11111 diff --git a/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-4-4-snap.png b/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-4-4-snap.png index b0b6c3226e..363209e841 100644 --- a/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-4-4-snap.png +++ b/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-4-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:af8d08f6306c2f4c615151a2a371e175bcb051f951d3981a464e1d99d5e98b48 -size 11441 +oid sha256:ce9fb0b411ee19de07034ad408c118936bd199c34851e8db81639b22054a2b4d +size 10993 diff --git a/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-5-4-snap.png b/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-5-4-snap.png index e3180ca1a6..f89c538fcf 100644 --- a/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-5-4-snap.png +++ b/packages/tabs/src/__image_snapshots__/corp-tabs-tabs-desktop-view-1-size-5-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6fa785b870d4fecb8b8e12a796584424d796bdcb8de5a8150979f837b9f1a3ad -size 11554 +oid sha256:e02a70c6dbdbb854acf1bcbcbb22c5968ad1efc7d809730ce85fc5a9c7d877ec +size 11262 diff --git a/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-2-snap.png b/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-2-snap.png index 7effefe445..af61996d65 100644 --- a/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-2-snap.png +++ b/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6ecb51c62d78d388a6aa6ded4630670e17b4ce1db5391bc461782ce9cf1c8a4f -size 10658 +oid sha256:8aac808506e1588c940a77fcaaa29df07126298259df1707393cb2124619d81f +size 10885 diff --git a/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-3-snap.png b/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-3-snap.png index 0f29d22d6c..116c0b9632 100644 --- a/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-3-snap.png +++ b/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8fc3cefabc0956681e4787f3e30511f5a4d55cf21b33447cebfbc21bfa0308e0 -size 10623 +oid sha256:13c39d304c2b45ddbaa8ad583d3338b45ee32c22b12bde20c8df48669500aeb5 +size 11111 diff --git a/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-4-snap.png b/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-4-snap.png index b0b6c3226e..363209e841 100644 --- a/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-4-snap.png +++ b/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:af8d08f6306c2f4c615151a2a371e175bcb051f951d3981a464e1d99d5e98b48 -size 11441 +oid sha256:ce9fb0b411ee19de07034ad408c118936bd199c34851e8db81639b22054a2b4d +size 10993 diff --git a/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-5-snap.png b/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-5-snap.png index e3180ca1a6..f89c538fcf 100644 --- a/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-5-snap.png +++ b/packages/tabs/src/__image_snapshots__/default-tabs-tabs-desktop-view-1-size-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6fa785b870d4fecb8b8e12a796584424d796bdcb8de5a8150979f837b9f1a3ad -size 11554 +oid sha256:e02a70c6dbdbb854acf1bcbcbb22c5968ad1efc7d809730ce85fc5a9c7d877ec +size 11262 diff --git a/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-2-3-snap.png b/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-2-3-snap.png index 7effefe445..af61996d65 100644 --- a/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-2-3-snap.png +++ b/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-2-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6ecb51c62d78d388a6aa6ded4630670e17b4ce1db5391bc461782ce9cf1c8a4f -size 10658 +oid sha256:8aac808506e1588c940a77fcaaa29df07126298259df1707393cb2124619d81f +size 10885 diff --git a/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-3-3-snap.png b/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-3-3-snap.png index 0f29d22d6c..116c0b9632 100644 --- a/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-3-3-snap.png +++ b/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-3-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8fc3cefabc0956681e4787f3e30511f5a4d55cf21b33447cebfbc21bfa0308e0 -size 10623 +oid sha256:13c39d304c2b45ddbaa8ad583d3338b45ee32c22b12bde20c8df48669500aeb5 +size 11111 diff --git a/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-4-3-snap.png b/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-4-3-snap.png index b0b6c3226e..363209e841 100644 --- a/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-4-3-snap.png +++ b/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-4-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:af8d08f6306c2f4c615151a2a371e175bcb051f951d3981a464e1d99d5e98b48 -size 11441 +oid sha256:ce9fb0b411ee19de07034ad408c118936bd199c34851e8db81639b22054a2b4d +size 10993 diff --git a/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-5-3-snap.png b/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-5-3-snap.png index e3180ca1a6..f89c538fcf 100644 --- a/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-5-3-snap.png +++ b/packages/tabs/src/__image_snapshots__/site-tabs-tabs-desktop-view-1-size-5-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6fa785b870d4fecb8b8e12a796584424d796bdcb8de5a8150979f837b9f1a3ad -size 11554 +oid sha256:e02a70c6dbdbb854acf1bcbcbb22c5968ad1efc7d809730ce85fc5a9c7d877ec +size 11262 diff --git a/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-2-snap.png b/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-2-snap.png index afde914786..6172e36853 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-2-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8e83b809633fe0b6bf3777b97546b9588f79fa8708818d80e29f2823f566ad0d -size 10095 +oid sha256:77a722dde5a1912d3d4b298e056e3cf0e5c22fa996d358ae7d872567c7d8aaec +size 10199 diff --git a/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-3-snap.png b/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-3-snap.png index 70d693ffec..cfc18ca325 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-3-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ecbcd8b02598907b389799afb2593154844f9e79aaab2c3ff40d71d406b89da4 -size 10500 +oid sha256:01880f1aeb09bc41e662ababd5826b5fb6017f740918c93f946d26fe42d8a402 +size 10597 diff --git a/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-4-snap.png b/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-4-snap.png index 9623e29c83..66df662e67 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-4-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b436ae98f451432cbb7efa8f882e169cbd42c267aeeff7577b3745302af21977 -size 10914 +oid sha256:e0a9b893b1b5c6dac32df9a11c47f9dfb1ae56194ca18bacec3bf315876a6dc8 +size 10834 diff --git a/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-5-snap.png b/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-5-snap.png index 94e01c5a01..d3991bde3d 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-5-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-desktop-scrollable-view-1-size-5-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:37296f00873d132d7ccef31380504776d7576d6d93f5a2073b3f0ca1230c642d -size 11388 +oid sha256:9c468077127862a3df12880ed9ae5e795a233ff68a38a5d1b7627ec0836d54e3 +size 11191 diff --git a/packages/tabs/src/__image_snapshots__/tabs-show-skeleton-prop-view-1-snap.png b/packages/tabs/src/__image_snapshots__/tabs-show-skeleton-prop-view-1-snap.png index 023c79d31c..7417ffc1ec 100644 --- a/packages/tabs/src/__image_snapshots__/tabs-show-skeleton-prop-view-1-snap.png +++ b/packages/tabs/src/__image_snapshots__/tabs-show-skeleton-prop-view-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a4c55105a18d7c650fb858ded0c6d50f77c6b51611ac43476d12b4673336638e -size 3048 +oid sha256:6e77872cef7ac4620ea199fa7a968f6af86f16541fd3688f567befce4df17d9c +size 3200 diff --git a/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-0-disabled-0-2-snap.png b/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-0-disabled-0-2-snap.png index 29d367c21d..b9c1ab62fd 100644 --- a/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-0-disabled-0-2-snap.png +++ b/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-0-disabled-0-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3162010b4067fc92b06f59bec96e159230d1ce9e8ec3d5cbbbd3c806d3ea4683 -size 3158 +oid sha256:cd2db673e6fc62c241e72d794fa3d98f59356d48ba73369fbec2eba02b234c68 +size 3167 diff --git a/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-0-disabled-1-2-snap.png b/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-0-disabled-1-2-snap.png index caf49d0a0a..ffdba2b847 100644 --- a/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-0-disabled-1-2-snap.png +++ b/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-0-disabled-1-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7f6c0123e8c33594c2d95d9f828f0a92f15e1635b54f008b60933d56971d529b -size 2944 +oid sha256:b008f7a4bc8122a09976df58d15149b37b04ecee438cdfb87f0a3a6cd64d258b +size 2948 diff --git a/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-1-disabled-0-2-snap.png b/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-1-disabled-0-2-snap.png index d702bd0b1c..dca921a786 100644 --- a/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-1-disabled-0-2-snap.png +++ b/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-1-disabled-0-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3ede00cdcbc867858b85868e3f9c8e6d1e5d65d454f51814d93f763b864efcb6 -size 2986 +oid sha256:f9c0c2f54ec38dafece38e7b9ba9a2f6d737d8ee9d87a38a3cf73ba5ba07ec0f +size 3008 diff --git a/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-1-disabled-1-2-snap.png b/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-1-disabled-1-2-snap.png index 044f87c80e..4a9e319bfd 100644 --- a/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-1-disabled-1-2-snap.png +++ b/packages/tag/src/__image_snapshots__/click-tag-right-addons-checked-1-disabled-1-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6e8e864ecf829bb7e9b7359534fc4992c146f26e0323e10c8ffcbe65eba1ffa1 -size 2329 +oid sha256:118d5232a563d4bddb1d00730155a77daf0bb13e4c05cb321eb1d0433fa15ef2 +size 2340 diff --git a/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-0-disabled-0-snap.png b/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-0-disabled-0-snap.png index 29d367c21d..b9c1ab62fd 100644 --- a/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-0-disabled-0-snap.png +++ b/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-0-disabled-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3162010b4067fc92b06f59bec96e159230d1ce9e8ec3d5cbbbd3c806d3ea4683 -size 3158 +oid sha256:cd2db673e6fc62c241e72d794fa3d98f59356d48ba73369fbec2eba02b234c68 +size 3167 diff --git a/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-0-disabled-1-snap.png b/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-0-disabled-1-snap.png index caf49d0a0a..ffdba2b847 100644 --- a/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-0-disabled-1-snap.png +++ b/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-0-disabled-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7f6c0123e8c33594c2d95d9f828f0a92f15e1635b54f008b60933d56971d529b -size 2944 +oid sha256:b008f7a4bc8122a09976df58d15149b37b04ecee438cdfb87f0a3a6cd64d258b +size 2948 diff --git a/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-1-disabled-0-snap.png b/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-1-disabled-0-snap.png index d702bd0b1c..dca921a786 100644 --- a/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-1-disabled-0-snap.png +++ b/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-1-disabled-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3ede00cdcbc867858b85868e3f9c8e6d1e5d65d454f51814d93f763b864efcb6 -size 2986 +oid sha256:f9c0c2f54ec38dafece38e7b9ba9a2f6d737d8ee9d87a38a3cf73ba5ba07ec0f +size 3008 diff --git a/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-1-disabled-1-snap.png b/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-1-disabled-1-snap.png index 044f87c80e..4a9e319bfd 100644 --- a/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-1-disabled-1-snap.png +++ b/packages/tag/src/__image_snapshots__/default-tag-right-addons-checked-1-disabled-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6e8e864ecf829bb7e9b7359534fc4992c146f26e0323e10c8ffcbe65eba1ffa1 -size 2329 +oid sha256:118d5232a563d4bddb1d00730155a77daf0bb13e4c05cb321eb1d0433fa15ef2 +size 2340 diff --git a/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-0-disabled-0-snap.png b/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-0-disabled-0-snap.png index 8d43e4bbff..cb18a5e644 100644 --- a/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-0-disabled-0-snap.png +++ b/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-0-disabled-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0fbb5ff9903a347e7c3bbf7d6b1f12417e27527295a447d600a3335c9cecd916 -size 2922 +oid sha256:76ff12a139a83562303f3b627d6a71f2f6609ed3e5238a652a4dc1b5978d1813 +size 2918 diff --git a/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-0-disabled-1-snap.png b/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-0-disabled-1-snap.png index cde178f251..81d04000d2 100644 --- a/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-0-disabled-1-snap.png +++ b/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-0-disabled-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:015f1d408a4753a74e4d88e11bee17a2abcef34221be01eccf6f0e4e3caaf3b2 +oid sha256:45d193df0afd6f4242cbee54029bcc2c068b63c626fce66ab7b2dd83c46a9ae5 size 2232 diff --git a/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-1-disabled-0-snap.png b/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-1-disabled-0-snap.png index 353f45772d..bf666ce2b2 100644 --- a/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-1-disabled-0-snap.png +++ b/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-1-disabled-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4b5d80084d8092d114521b078aa7379980a02525754dbd00e8b07cddefc84e0a +oid sha256:60768dfbf9f2bd4a6f6409059f98048c021a77b05ad1714c88525484acb88533 size 3227 diff --git a/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-1-disabled-1-snap.png b/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-1-disabled-1-snap.png index 9a13fc4a28..d5642ac2de 100644 --- a/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-1-disabled-1-snap.png +++ b/packages/tag/src/__image_snapshots__/hover-button-screenshots-pressed-state-checked-1-disabled-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4e0b8ae915fba4084064412c8c81a0b8461cb54c85a579a8dcd2e6ee9e9a2c2e -size 2780 +oid sha256:2f752536a5c7bb21cac9a4f910b3651167ab3c8cc023afad5610965653e0ad71 +size 2776 diff --git a/packages/tag/src/__image_snapshots__/hover-tag-screenshots-hover-state-disabled-0-snap.png b/packages/tag/src/__image_snapshots__/hover-tag-screenshots-hover-state-disabled-0-snap.png index c27bce66ec..ff40b6ce74 100644 --- a/packages/tag/src/__image_snapshots__/hover-tag-screenshots-hover-state-disabled-0-snap.png +++ b/packages/tag/src/__image_snapshots__/hover-tag-screenshots-hover-state-disabled-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b3efd17b12be4daf190cc757c67a0312afc94809272db2a454b64c0b3397fe20 -size 2921 +oid sha256:811d20eddd1040706da2cd191281206ce85b11512aff8a46f6293c33cc378989 +size 2922 diff --git a/packages/tag/src/__image_snapshots__/hover-tag-screenshots-hover-state-disabled-1-snap.png b/packages/tag/src/__image_snapshots__/hover-tag-screenshots-hover-state-disabled-1-snap.png index cde178f251..81d04000d2 100644 --- a/packages/tag/src/__image_snapshots__/hover-tag-screenshots-hover-state-disabled-1-snap.png +++ b/packages/tag/src/__image_snapshots__/hover-tag-screenshots-hover-state-disabled-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:015f1d408a4753a74e4d88e11bee17a2abcef34221be01eccf6f0e4e3caaf3b2 +oid sha256:45d193df0afd6f4242cbee54029bcc2c068b63c626fce66ab7b2dd83c46a9ae5 size 2232 diff --git a/packages/tag/src/__image_snapshots__/indicator-tag-default-main-props-default-default-snap.png b/packages/tag/src/__image_snapshots__/indicator-tag-default-main-props-default-default-snap.png index a73f93eb4d..eaf7b05741 100644 --- a/packages/tag/src/__image_snapshots__/indicator-tag-default-main-props-default-default-snap.png +++ b/packages/tag/src/__image_snapshots__/indicator-tag-default-main-props-default-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3867a655e2af412fb42e063aebb69a4acc2106013565f83247df7cd2f4d14612 -size 37107 +oid sha256:13aeeada89a97ea504927cad46b6e162c159ad831ba21216248c5ce16f354e3e +size 78225 diff --git a/packages/tag/src/__image_snapshots__/indicator-tag-default-main-props-default-inverted-snap.png b/packages/tag/src/__image_snapshots__/indicator-tag-default-main-props-default-inverted-snap.png index 081064963f..05507b022e 100644 --- a/packages/tag/src/__image_snapshots__/indicator-tag-default-main-props-default-inverted-snap.png +++ b/packages/tag/src/__image_snapshots__/indicator-tag-default-main-props-default-inverted-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a5d53bbabb1bc9bd1b142b75fc402cc0a15de7008a92940090d80681655bd9ed -size 39014 +oid sha256:77be19e9c8614371f72612bd9fb9ecfd8fe2e54bdcad19b4b18f9769b9fc0433 +size 83575 diff --git a/packages/tag/src/__image_snapshots__/indicator-tag-mobile-main-props-mobile-default-snap.png b/packages/tag/src/__image_snapshots__/indicator-tag-mobile-main-props-mobile-default-snap.png index a73f93eb4d..eaf7b05741 100644 --- a/packages/tag/src/__image_snapshots__/indicator-tag-mobile-main-props-mobile-default-snap.png +++ b/packages/tag/src/__image_snapshots__/indicator-tag-mobile-main-props-mobile-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3867a655e2af412fb42e063aebb69a4acc2106013565f83247df7cd2f4d14612 -size 37107 +oid sha256:13aeeada89a97ea504927cad46b6e162c159ad831ba21216248c5ce16f354e3e +size 78225 diff --git a/packages/tag/src/__image_snapshots__/indicator-tag-mobile-main-props-mobile-inverted-snap.png b/packages/tag/src/__image_snapshots__/indicator-tag-mobile-main-props-mobile-inverted-snap.png index 081064963f..05507b022e 100644 --- a/packages/tag/src/__image_snapshots__/indicator-tag-mobile-main-props-mobile-inverted-snap.png +++ b/packages/tag/src/__image_snapshots__/indicator-tag-mobile-main-props-mobile-inverted-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a5d53bbabb1bc9bd1b142b75fc402cc0a15de7008a92940090d80681655bd9ed -size 39014 +oid sha256:77be19e9c8614371f72612bd9fb9ecfd8fe2e54bdcad19b4b18f9769b9fc0433 +size 83575 diff --git a/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-0-disabled-0-3-snap.png b/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-0-disabled-0-3-snap.png index 29d367c21d..b9c1ab62fd 100644 --- a/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-0-disabled-0-3-snap.png +++ b/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-0-disabled-0-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3162010b4067fc92b06f59bec96e159230d1ce9e8ec3d5cbbbd3c806d3ea4683 -size 3158 +oid sha256:cd2db673e6fc62c241e72d794fa3d98f59356d48ba73369fbec2eba02b234c68 +size 3167 diff --git a/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-0-disabled-1-3-snap.png b/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-0-disabled-1-3-snap.png index caf49d0a0a..ffdba2b847 100644 --- a/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-0-disabled-1-3-snap.png +++ b/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-0-disabled-1-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7f6c0123e8c33594c2d95d9f828f0a92f15e1635b54f008b60933d56971d529b -size 2944 +oid sha256:b008f7a4bc8122a09976df58d15149b37b04ecee438cdfb87f0a3a6cd64d258b +size 2948 diff --git a/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-1-disabled-0-3-snap.png b/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-1-disabled-0-3-snap.png index d702bd0b1c..dca921a786 100644 --- a/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-1-disabled-0-3-snap.png +++ b/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-1-disabled-0-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3ede00cdcbc867858b85868e3f9c8e6d1e5d65d454f51814d93f763b864efcb6 -size 2986 +oid sha256:f9c0c2f54ec38dafece38e7b9ba9a2f6d737d8ee9d87a38a3cf73ba5ba07ec0f +size 3008 diff --git a/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-1-disabled-1-3-snap.png b/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-1-disabled-1-3-snap.png index 044f87c80e..4a9e319bfd 100644 --- a/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-1-disabled-1-3-snap.png +++ b/packages/tag/src/__image_snapshots__/mobile-tag-right-addons-checked-1-disabled-1-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6e8e864ecf829bb7e9b7359534fc4992c146f26e0323e10c8ffcbe65eba1ffa1 -size 2329 +oid sha256:118d5232a563d4bddb1d00730155a77daf0bb13e4c05cb321eb1d0433fa15ef2 +size 2340 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-click-2-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-click-2-snap.png new file mode 100644 index 0000000000..2b8004ab97 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-click-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:513baeae595aec9b5e9bb39e51b819e88c0419a78917e3d54d72da0325151782 +size 8668 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-click-3-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-click-3-snap.png new file mode 100644 index 0000000000..c921c458c6 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-click-3-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bde9b07cbe3cbfae3f3f41e90e9e2aa8d8dd2f453cf0cd632a4a1327d809cfa8 +size 11877 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-click-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-click-snap.png new file mode 100644 index 0000000000..7c8f2e3550 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-click-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:19bc4914197b47a6579f5656cfb31e73701337c4ec9ec9cf85cf2ae37914501f +size 14015 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-default-2-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-default-2-snap.png new file mode 100644 index 0000000000..2b8004ab97 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-default-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:513baeae595aec9b5e9bb39e51b819e88c0419a78917e3d54d72da0325151782 +size 8668 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-default-3-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-default-3-snap.png new file mode 100644 index 0000000000..c921c458c6 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-default-3-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bde9b07cbe3cbfae3f3f41e90e9e2aa8d8dd2f453cf0cd632a4a1327d809cfa8 +size 11877 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-default-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-default-snap.png new file mode 100644 index 0000000000..7c8f2e3550 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-default-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:19bc4914197b47a6579f5656cfb31e73701337c4ec9ec9cf85cf2ae37914501f +size 14015 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-2-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-2-snap.png new file mode 100644 index 0000000000..2b8004ab97 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-2-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:513baeae595aec9b5e9bb39e51b819e88c0419a78917e3d54d72da0325151782 +size 8668 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-3-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-3-snap.png new file mode 100644 index 0000000000..c921c458c6 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-3-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bde9b07cbe3cbfae3f3f41e90e9e2aa8d8dd2f453cf0cd632a4a1327d809cfa8 +size 11877 diff --git a/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-snap.png b/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-snap.png new file mode 100644 index 0000000000..7c8f2e3550 --- /dev/null +++ b/packages/tag/src/__image_snapshots__/tag-clear-button-mobile-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:19bc4914197b47a6579f5656cfb31e73701337c4ec9ec9cf85cf2ae37914501f +size 14015 diff --git a/packages/tag/src/__image_snapshots__/tag-dark-preview-snap.png b/packages/tag/src/__image_snapshots__/tag-dark-preview-snap.png index 413755908c..f3d54ec065 100644 --- a/packages/tag/src/__image_snapshots__/tag-dark-preview-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a1fe0ec957f2ee2f0d407968560f87165f690ca3616a6cd9668ce7f0907e097a -size 7316 +oid sha256:137dbc7cd2dfc09cb39d2d75d73c4b67fa54b9a65d7c59dd7e8dfc5d7447ff6c +size 7481 diff --git a/packages/tag/src/__image_snapshots__/tag-inverted-click-2-snap.png b/packages/tag/src/__image_snapshots__/tag-inverted-click-2-snap.png index 947766d7e4..634b93a4da 100644 --- a/packages/tag/src/__image_snapshots__/tag-inverted-click-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-inverted-click-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:42f82d1f7bde8336655d3028f0b5c7c31266c02616632a8c0902431fff5aac56 -size 48996 +oid sha256:c9a538dd17771b0cbc0449861732d543580b82d1fd12c6e67f92c90d1e4808ae +size 48985 diff --git a/packages/tag/src/__image_snapshots__/tag-inverted-click-snap.png b/packages/tag/src/__image_snapshots__/tag-inverted-click-snap.png index 286e8eeb87..eeb5050496 100644 --- a/packages/tag/src/__image_snapshots__/tag-inverted-click-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-inverted-click-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:96af070bec4774daa885b053db92b0a9362ad62f4fcef123bf0c993cfdd82a0e -size 47264 +oid sha256:874249d0c1c152650b0cf5120edeb873d319aee9ff947841598ced2178add35b +size 47285 diff --git a/packages/tag/src/__image_snapshots__/tag-inverted-default-2-snap.png b/packages/tag/src/__image_snapshots__/tag-inverted-default-2-snap.png index 947766d7e4..634b93a4da 100644 --- a/packages/tag/src/__image_snapshots__/tag-inverted-default-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-inverted-default-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:42f82d1f7bde8336655d3028f0b5c7c31266c02616632a8c0902431fff5aac56 -size 48996 +oid sha256:c9a538dd17771b0cbc0449861732d543580b82d1fd12c6e67f92c90d1e4808ae +size 48985 diff --git a/packages/tag/src/__image_snapshots__/tag-inverted-default-snap.png b/packages/tag/src/__image_snapshots__/tag-inverted-default-snap.png index 286e8eeb87..eeb5050496 100644 --- a/packages/tag/src/__image_snapshots__/tag-inverted-default-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-inverted-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:96af070bec4774daa885b053db92b0a9362ad62f4fcef123bf0c993cfdd82a0e -size 47264 +oid sha256:874249d0c1c152650b0cf5120edeb873d319aee9ff947841598ced2178add35b +size 47285 diff --git a/packages/tag/src/__image_snapshots__/tag-inverted-mobile-2-snap.png b/packages/tag/src/__image_snapshots__/tag-inverted-mobile-2-snap.png index 947766d7e4..634b93a4da 100644 --- a/packages/tag/src/__image_snapshots__/tag-inverted-mobile-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-inverted-mobile-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:42f82d1f7bde8336655d3028f0b5c7c31266c02616632a8c0902431fff5aac56 -size 48996 +oid sha256:c9a538dd17771b0cbc0449861732d543580b82d1fd12c6e67f92c90d1e4808ae +size 48985 diff --git a/packages/tag/src/__image_snapshots__/tag-inverted-mobile-snap.png b/packages/tag/src/__image_snapshots__/tag-inverted-mobile-snap.png index 286e8eeb87..eeb5050496 100644 --- a/packages/tag/src/__image_snapshots__/tag-inverted-mobile-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-inverted-mobile-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:96af070bec4774daa885b053db92b0a9362ad62f4fcef123bf0c993cfdd82a0e -size 47264 +oid sha256:874249d0c1c152650b0cf5120edeb873d319aee9ff947841598ced2178add35b +size 47285 diff --git a/packages/tag/src/__image_snapshots__/tag-main-props-click-2-snap.png b/packages/tag/src/__image_snapshots__/tag-main-props-click-2-snap.png index 1e673ef253..a3c5314ad6 100644 --- a/packages/tag/src/__image_snapshots__/tag-main-props-click-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-main-props-click-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ba1911e7c7811185fc1ce2d48f923a49161fe77aee3b757dce81caa4cf81c6a0 -size 32797 +oid sha256:8071014e890302c52e59637ac6bf26073c620022786f0922abc0f843e5b80e75 +size 32755 diff --git a/packages/tag/src/__image_snapshots__/tag-main-props-click-snap.png b/packages/tag/src/__image_snapshots__/tag-main-props-click-snap.png index 28ecca0325..37a5c51c81 100644 --- a/packages/tag/src/__image_snapshots__/tag-main-props-click-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-main-props-click-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:391677d8a524471dfeb04c9f4782c2792130d5dab223e480796a094d02e01b8f -size 30926 +oid sha256:855c4914dac019ce9ef386304c98cfc007eaf27bdf021b79f12a8945004e6066 +size 30901 diff --git a/packages/tag/src/__image_snapshots__/tag-main-props-default-2-snap.png b/packages/tag/src/__image_snapshots__/tag-main-props-default-2-snap.png index 1e673ef253..a3c5314ad6 100644 --- a/packages/tag/src/__image_snapshots__/tag-main-props-default-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-main-props-default-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ba1911e7c7811185fc1ce2d48f923a49161fe77aee3b757dce81caa4cf81c6a0 -size 32797 +oid sha256:8071014e890302c52e59637ac6bf26073c620022786f0922abc0f843e5b80e75 +size 32755 diff --git a/packages/tag/src/__image_snapshots__/tag-main-props-default-snap.png b/packages/tag/src/__image_snapshots__/tag-main-props-default-snap.png index 28ecca0325..37a5c51c81 100644 --- a/packages/tag/src/__image_snapshots__/tag-main-props-default-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-main-props-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:391677d8a524471dfeb04c9f4782c2792130d5dab223e480796a094d02e01b8f -size 30926 +oid sha256:855c4914dac019ce9ef386304c98cfc007eaf27bdf021b79f12a8945004e6066 +size 30901 diff --git a/packages/tag/src/__image_snapshots__/tag-main-props-mobile-2-snap.png b/packages/tag/src/__image_snapshots__/tag-main-props-mobile-2-snap.png index 1e673ef253..a3c5314ad6 100644 --- a/packages/tag/src/__image_snapshots__/tag-main-props-mobile-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-main-props-mobile-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ba1911e7c7811185fc1ce2d48f923a49161fe77aee3b757dce81caa4cf81c6a0 -size 32797 +oid sha256:8071014e890302c52e59637ac6bf26073c620022786f0922abc0f843e5b80e75 +size 32755 diff --git a/packages/tag/src/__image_snapshots__/tag-main-props-mobile-snap.png b/packages/tag/src/__image_snapshots__/tag-main-props-mobile-snap.png index 28ecca0325..37a5c51c81 100644 --- a/packages/tag/src/__image_snapshots__/tag-main-props-mobile-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-main-props-mobile-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:391677d8a524471dfeb04c9f4782c2792130d5dab223e480796a094d02e01b8f -size 30926 +oid sha256:855c4914dac019ce9ef386304c98cfc007eaf27bdf021b79f12a8945004e6066 +size 30901 diff --git a/packages/tag/src/__image_snapshots__/tag-preview-snap.png b/packages/tag/src/__image_snapshots__/tag-preview-snap.png index aaf14a57f3..04e4e92c19 100644 --- a/packages/tag/src/__image_snapshots__/tag-preview-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:57942b218794ff6a8919bd2f379115b5f4ef0bc99ed40bfcc297ff90a0d009eb -size 7324 +oid sha256:797a3d9a787a1639203c8040307cc67825b82770e74986d770df8e48c9d688db +size 7376 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-click-2-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-click-2-snap.png index 3c8a1f2c19..719ead4fd8 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-click-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-click-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7a31445ce5c565b77e1eec8673aeaf1e3032d2766164d2fcd904b6000dc637d0 -size 18605 +oid sha256:ffd03f5dc96ce8069ad35bd1c9befadfb6201c6abd527616109c8783acc8444c +size 22174 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-click-3-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-click-3-snap.png index 75161283a3..3643369a96 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-click-3-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-click-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3c488b2d162aaef2a29832e71d9cd7720a0079920ab008cbc253574ecc5b1ac4 -size 23077 +oid sha256:f6be1194ba6901b3ecb8f4819a5b15326ffbfa9991e77491f0b911b8f40d4d5d +size 26959 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-click-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-click-snap.png index 007b889d0f..b9ec116a17 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-click-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-click-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1db9caf88a6fff349575238bf2f0bb0a17ef5807eaba837eadd0b4f247b7bdcd -size 15573 +oid sha256:73202677254ca3a37314826f5f2e5162a6b2a73bb71b4ba4244c23810ba9aaab +size 18907 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-default-2-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-default-2-snap.png index 3c8a1f2c19..719ead4fd8 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-default-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-default-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7a31445ce5c565b77e1eec8673aeaf1e3032d2766164d2fcd904b6000dc637d0 -size 18605 +oid sha256:ffd03f5dc96ce8069ad35bd1c9befadfb6201c6abd527616109c8783acc8444c +size 22174 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-default-3-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-default-3-snap.png index 75161283a3..3643369a96 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-default-3-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-default-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3c488b2d162aaef2a29832e71d9cd7720a0079920ab008cbc253574ecc5b1ac4 -size 23077 +oid sha256:f6be1194ba6901b3ecb8f4819a5b15326ffbfa9991e77491f0b911b8f40d4d5d +size 26959 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-default-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-default-snap.png index 007b889d0f..b9ec116a17 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-default-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1db9caf88a6fff349575238bf2f0bb0a17ef5807eaba837eadd0b4f247b7bdcd -size 15573 +oid sha256:73202677254ca3a37314826f5f2e5162a6b2a73bb71b4ba4244c23810ba9aaab +size 18907 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-2-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-2-snap.png index 3c8a1f2c19..719ead4fd8 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-2-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7a31445ce5c565b77e1eec8673aeaf1e3032d2766164d2fcd904b6000dc637d0 -size 18605 +oid sha256:ffd03f5dc96ce8069ad35bd1c9befadfb6201c6abd527616109c8783acc8444c +size 22174 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-3-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-3-snap.png index 75161283a3..3643369a96 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-3-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3c488b2d162aaef2a29832e71d9cd7720a0079920ab008cbc253574ecc5b1ac4 -size 23077 +oid sha256:f6be1194ba6901b3ecb8f4819a5b15326ffbfa9991e77491f0b911b8f40d4d5d +size 26959 diff --git a/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-snap.png b/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-snap.png index 007b889d0f..b9ec116a17 100644 --- a/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-snap.png +++ b/packages/tag/src/__image_snapshots__/tag-view-variants-mobile-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1db9caf88a6fff349575238bf2f0bb0a17ef5807eaba837eadd0b4f247b7bdcd -size 15573 +oid sha256:73202677254ca3a37314826f5f2e5162a6b2a73bb71b4ba4244c23810ba9aaab +size 18907 From b7696c8936f68cfb286231fb74b03fbe7b5733ba Mon Sep 17 00:00:00 2001 From: Vadim Kalushko Date: Fri, 26 Jun 2026 11:54:49 +0300 Subject: [PATCH 3/4] fix design review --- packages/filter-tag/src/Component.test.tsx | 6 +- .../components/base-filter-tag/Component.tsx | 8 +- .../base-filter-tag/default.module.css | 173 ++++++++------- .../base-filter-tag/index.module.css | 61 ++--- .../base-filter-tag/inverted.module.css | 173 ++++++++------- .../src/desktop/default.desktop.module.css | 14 ++ .../src/desktop/inverted.desktop.module.css | 14 ++ packages/filter-tag/src/docs/description.mdx | 209 ++++++++++++------ .../src/mobile/default.mobile.module.css | 14 ++ .../src/mobile/inverted.mobile.module.css | 14 ++ packages/filter-tag/src/vars.css | 4 +- .../components/indicator-tag/Component.tsx | 3 +- .../indicator-tag/default.module.css | 19 +- .../components/indicator-tag/index.module.css | 10 +- .../indicator-tag/inverted.module.css | 19 +- packages/tag/src/docs/description.mdx | 32 ++- 16 files changed, 491 insertions(+), 282 deletions(-) diff --git a/packages/filter-tag/src/Component.test.tsx b/packages/filter-tag/src/Component.test.tsx index bd897ab680..a413005c0b 100644 --- a/packages/filter-tag/src/Component.test.tsx +++ b/packages/filter-tag/src/Component.test.tsx @@ -135,6 +135,7 @@ describe('Render tests', () => { expect(container.querySelector('.clear')).toBeInTheDocument(); expect(getAllByRole('button')).toHaveLength(2); expect(container.querySelector('.valueButton')).toHaveClass('withChevronAndClear'); + expect(container.firstChild).toHaveClass('withSplitControls'); }); it('should render chevron only when checked and showClear=false', () => { @@ -157,10 +158,11 @@ describe('Render tests', () => { expect(container.querySelector('.chevron')).not.toBeInTheDocument(); expect(container.querySelector('.clear')).toBeInTheDocument(); - expect(container.querySelector('.clear')).toHaveClass('withClearOnly'); + expect(container.firstChild).toHaveClass('withClearOnly'); expect(getAllByRole('button')).toHaveLength(2); - expect(container.querySelector('.valueButton')).toHaveClass('withClearOnly'); + expect(container.querySelector('.valueButton')).not.toHaveClass('withClearOnly'); expect(container.querySelector('.valueButton')).not.toHaveClass('withChevronAndClear'); + expect(container.firstChild).not.toHaveClass('withSplitControls'); }); it('should not render chevron or clear when checked and both hidden', () => { diff --git a/packages/filter-tag/src/components/base-filter-tag/Component.tsx b/packages/filter-tag/src/components/base-filter-tag/Component.tsx index 1daae2eec9..10a32c13ae 100644 --- a/packages/filter-tag/src/components/base-filter-tag/Component.tsx +++ b/packages/filter-tag/src/components/base-filter-tag/Component.tsx @@ -92,6 +92,10 @@ export const BaseFilterTag = forwardRef { const checkedContent = ( - {!label && 'Одиночный выбор:'} {selected && selected.content} + {!hideFieldLabel && 'Одиночный выбор:'} {selected && selected.content} ); @@ -21,7 +21,7 @@ const CustomField = ({ return (
- setSelectedItems([])} view='filled' checked={selected} @@ -29,14 +29,14 @@ const CustomField = ({ {...restProps} > {selected ? checkedContent : contentLabel} - +
); }; // Множественный выбор const CustomFieldMultiple = ({ - label, + hideFieldLabel, selected, setSelectedItems, selectedMultiple, @@ -50,7 +50,7 @@ const CustomFieldMultiple = ({ Множественный выбор ({selectedMultiple.length}) ) : ( - {!label && 'Множественный выбор:'} {content} + {!hideFieldLabel && 'Множественный выбор:'} {content} ); @@ -58,7 +58,7 @@ const CustomFieldMultiple = ({ return (
- setSelectedItems([])} view='filled' checked={selected} @@ -66,7 +66,7 @@ const CustomFieldMultiple = ({ {...restProps} > {selected ? checkedContent : contentLabel} - +
); }; @@ -96,7 +96,13 @@ render(() => { const [hideLabel, setHideLabel] = React.useState(false); const { showArrow, showClear } = controlMap[controls]; - const fieldProps = { size: FIELD_SIZE, shape: FIELD_SHAPE, showArrow, showClear }; + const fieldProps = { + size: FIELD_SIZE, + shape: FIELD_SHAPE, + showArrow, + showClear, + hideFieldLabel: hideLabel, + }; const [selected, setSelected] = React.useState([]); @@ -177,9 +183,9 @@ render(() => { <> @@ -464,9 +477,9 @@ render(() => { Field={CustomField} onChange={handleChangeSelected} selected={selected} - label={hideLabel} fieldProps={fieldProps} - optionsListClassName='filter-tag-options-list' + Option={BaseOption} + optionProps={{ checkmarkPosition: 'after' }} /> { onChange={handleChangeMultiple} selected={selectedMultiple} multiple={true} - label={hideLabel} fieldProps={fieldProps} - optionsListClassName='filter-tag-options-list' + Option={BaseOption} + optionProps={{ checkmarkPosition: 'after' }} /> setOpen(false)} selectedFrom={selectedFrom} @@ -549,9 +564,9 @@ const CustomField = ({ ...restProps }) => (
- + {selected.content} - +
); render(() => { @@ -573,9 +588,9 @@ render(() => { <> @@ -587,7 +602,7 @@ render(() => { selected={selected} fieldProps={{ size: 40, shape: 'rectangular' }} Option={BaseOption} - optionsListClassName='filter-tag-options-list' + optionsListClassName='filter-tag-options-list-desktop' /> ); @@ -601,9 +616,9 @@ const CustomField = ({ ...restProps }) => (
- + {selected.content} - +
); render(() => { @@ -623,14 +638,6 @@ render(() => { return ( <> - { onChange={handleChangeSelected} selected={selected} fieldProps={{ size: 40, shape: 'rectangular' }} - optionsListClassName='filter-tag-options-list' + Option={BaseOption} + optionProps={{ checkmarkPosition: 'after' }} /> ); @@ -653,12 +661,12 @@ render(() => { render(() => { const [disabled, setDisabled] = React.useState(false); - const checkedContent = Label Value; + const checkedContent = Label: Value; return ( - { disabled={disabled} > Label - + - { disabled={disabled} > {checkedContent} - + - { disabled={disabled} > {checkedContent} - + - { disabled={disabled} > {checkedContent} - + { ); }); +//MOBILE +render(() => { + const [disabled, setDisabled] = React.useState(false); + + const checkedContent = Label: Value; + + return ( + +
+ + Label + + + + {checkedContent} + + + + {checkedContent} + + + + {checkedContent} + +
+ + + setDisabled((prevState) => !prevState)} + /> + + ); +}); ``` ## Дополнительный слот @@ -723,7 +800,7 @@ render(() => { ```jsx live render(() => ( - ( } > Label: Value - + )); ``` diff --git a/packages/filter-tag/src/mobile/default.mobile.module.css b/packages/filter-tag/src/mobile/default.mobile.module.css index 77ae7aa069..f5229b7bee 100644 --- a/packages/filter-tag/src/mobile/default.mobile.module.css +++ b/packages/filter-tag/src/mobile/default.mobile.module.css @@ -5,6 +5,20 @@ &.filled { background-color: var(--tag-mobile-filled-background-color); + &.checked:not(.muted) { + background-color: var(--tag-background-color-checked); + + @media (hover: hover) { + &:not(:disabled):hover { + background-color: var(--tag-background-color-checked-hover); + } + } + + &:not(:disabled):active { + background-color: var(--tag-background-color-checked-active); + } + } + &:disabled { background-color: var(--tag-mobile-filled-background-color-disabled); } diff --git a/packages/filter-tag/src/mobile/inverted.mobile.module.css b/packages/filter-tag/src/mobile/inverted.mobile.module.css index a285ff81b7..69e5490681 100644 --- a/packages/filter-tag/src/mobile/inverted.mobile.module.css +++ b/packages/filter-tag/src/mobile/inverted.mobile.module.css @@ -5,6 +5,20 @@ &.filled { background-color: var(--tag-mobile-filled-background-color-inverted); + &.checked:not(.muted) { + background-color: var(--tag-inverted-background-color-checked); + + @media (hover: hover) { + &:not(:disabled):hover { + background-color: var(--tag-inverted-background-color-checked-hover); + } + } + + &:not(:disabled):active { + background-color: var(--tag-inverted-background-color-checked-active); + } + } + &:disabled { background-color: var(--tag-mobile-filled-background-color-disabled-inverted); } diff --git a/packages/filter-tag/src/vars.css b/packages/filter-tag/src/vars.css index 8edbb73955..19312afc36 100644 --- a/packages/filter-tag/src/vars.css +++ b/packages/filter-tag/src/vars.css @@ -3,11 +3,11 @@ :root { /* chevron */ --filter-tag-chevron-color: var(--color-light-neutral-translucent-700); - --filter-tag-chevron-disabled-color: var(--color-light-neutral-700); + --filter-tag-chevron-disabled-color: var(--color-light-text-tertiary); /* chevron inverted */ --filter-tag-inverted-chevron-color: var(--color-light-neutral-translucent-700-inverted); - --filter-tag-inverted-chevron-disabled-color: var(--color-light-neutral-700-inverted); + --filter-tag-inverted-chevron-disabled-color: var(--color-light-text-tertiary-inverted); /* separator */ --filter-tag-separator-background-color-hover: transparent; diff --git a/packages/tag/src/components/indicator-tag/Component.tsx b/packages/tag/src/components/indicator-tag/Component.tsx index 59e2e73ce5..5e194ee52a 100644 --- a/packages/tag/src/components/indicator-tag/Component.tsx +++ b/packages/tag/src/components/indicator-tag/Component.tsx @@ -57,7 +57,7 @@ export const IndicatorTag = forwardRef( dataTestId, onClick, focused = false, - colorStyles: _colorStyles = {}, + colorStyles = {}, style, styles = {}, ...restProps @@ -90,6 +90,7 @@ export const IndicatorTag = forwardRef( styles[shape], className, { + [colorStyles?.[view]]: Boolean(colorStyles?.[view]), [commonStyles.focused]: focused, [colorStyle.checked]: Boolean(checked), }, diff --git a/packages/tag/src/components/indicator-tag/default.module.css b/packages/tag/src/components/indicator-tag/default.module.css index 7f44a80867..c92b5dd1c3 100644 --- a/packages/tag/src/components/indicator-tag/default.module.css +++ b/packages/tag/src/components/indicator-tag/default.module.css @@ -15,6 +15,17 @@ } } + &.filled, + &.muted { + background-color: transparent; + + &:hover:not(:disabled), + &:active:not(:disabled), + &:disabled { + background-color: transparent; + } + } + &.filled { .shapePath { fill: var(--tag-filled-background-color); @@ -25,7 +36,7 @@ } @media (hover: hover) { - &:hover .shapePath { + .shapePath:hover { fill: var(--tag-filled-background-color-hover); } } @@ -40,7 +51,7 @@ } @media (hover: hover) { - &:hover:not(:disabled) .shapePath { + .shapePath:hover { fill: var(--tag-background-color-checked-hover); } } @@ -61,7 +72,7 @@ } @media (hover: hover) { - &:hover .shapePath { + .shapePath:hover { fill: var(--tag-muted-background-color-hover); } } @@ -72,7 +83,7 @@ } @media (hover: hover) { - &:hover:not(:disabled) .shapePath { + .shapePath:hover { fill: var(--tag-muted-background-color-checked-hover); } } diff --git a/packages/tag/src/components/indicator-tag/index.module.css b/packages/tag/src/components/indicator-tag/index.module.css index 13032207f9..0ace64c3a1 100644 --- a/packages/tag/src/components/indicator-tag/index.module.css +++ b/packages/tag/src/components/indicator-tag/index.module.css @@ -23,7 +23,8 @@ .badgeIcon { position: relative; - cursor: pointer; + pointer-events: none; + cursor: default; margin: 0; padding: 0; border: 0; @@ -56,9 +57,16 @@ } .shapePath { + pointer-events: visiblePainted; + cursor: pointer; transition: fill 0.2s ease; } +.badgeIcon:disabled .shapePath { + pointer-events: none; + cursor: default; +} + .focused { @mixin focus-outline; } diff --git a/packages/tag/src/components/indicator-tag/inverted.module.css b/packages/tag/src/components/indicator-tag/inverted.module.css index 17799a52c5..fa154a5818 100644 --- a/packages/tag/src/components/indicator-tag/inverted.module.css +++ b/packages/tag/src/components/indicator-tag/inverted.module.css @@ -15,6 +15,17 @@ } } + &.filled, + &.muted { + background-color: transparent; + + &:hover:not(:disabled), + &:active:not(:disabled), + &:disabled { + background-color: transparent; + } + } + &.filled { .shapePath { fill: var(--tag-inverted-filled-background-color); @@ -25,7 +36,7 @@ } @media (hover: hover) { - &:hover .shapePath { + .shapePath:hover { fill: var(--tag-inverted-filled-background-color-hover); } } @@ -40,7 +51,7 @@ } @media (hover: hover) { - &:hover:not(:disabled) .shapePath { + .shapePath:hover { fill: var(--tag-inverted-background-color-checked-hover); } } @@ -61,7 +72,7 @@ } @media (hover: hover) { - &:hover .shapePath { + .shapePath:hover { fill: var(--tag-inverted-muted-background-color-hover); } } @@ -72,7 +83,7 @@ } @media (hover: hover) { - &:hover:not(:disabled) .shapePath { + .shapePath:hover { fill: var(--tag-inverted-muted-background-color-checked-hover); } } diff --git a/packages/tag/src/docs/description.mdx b/packages/tag/src/docs/description.mdx index 2f92499343..552f77aee7 100644 --- a/packages/tag/src/docs/description.mdx +++ b/packages/tag/src/docs/description.mdx @@ -15,7 +15,35 @@ render(() => { {SIZES.map((size) => (
- setChecked({ ...checked, [size]: !checked[size] })} + view='filled' + shape='rectangular' + > + Label + +
+ ))} + + + ); +}); +//MOBILE +render(() => { + const SIZES = [48, 40, 32]; + + const [checked, setChecked] = React.useState( + Object.fromEntries(SIZES.map((key) => [key, false])), + ); + + return ( + + + {SIZES.map((size) => ( +
+ setChecked({ ...checked, [size]: !checked[size] })} @@ -23,7 +51,7 @@ render(() => { shape='rectangular' > Label - +
))} From c692fc34ea29f79351a6eb482fec8a6df178b536 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 26 Jun 2026 09:33:56 +0000 Subject: [PATCH 4/4] test: updated screenshots --- .../src/__image_snapshots__/filter-tag-dark-preview-snap.png | 4 ++-- .../src/__image_snapshots__/filter-tag-preview-snap.png | 4 ++-- .../filter-tag-show-clear-show-arrow-click-2-snap.png | 4 ++-- .../filter-tag-show-clear-show-arrow-click-snap.png | 4 ++-- .../filter-tag-show-clear-show-arrow-default-2-snap.png | 4 ++-- .../filter-tag-show-clear-show-arrow-default-snap.png | 4 ++-- .../filter-tag-show-clear-show-arrow-mobile-2-snap.png | 4 ++-- .../filter-tag-show-clear-show-arrow-mobile-snap.png | 4 ++-- .../filter-tag-view-variants-click-3-snap.png | 4 ++-- .../filter-tag-view-variants-click-snap.png | 4 ++-- .../filter-tag-view-variants-default-3-snap.png | 4 ++-- .../filter-tag-view-variants-default-snap.png | 4 ++-- .../filter-tag-view-variants-mobile-3-snap.png | 4 ++-- .../filter-tag-view-variants-mobile-snap.png | 4 ++-- ...-filer-tag-screenshots-hover-clear-state-colors-0-snap.png | 4 ++-- ...-filer-tag-screenshots-hover-clear-state-colors-1-snap.png | 4 ++-- .../hover-filer-tag-screenshots-hover-state-colors-0-snap.png | 4 ++-- .../hover-filer-tag-screenshots-hover-state-colors-1-snap.png | 4 ++-- ...ag-screenshots-pressed-state-checked-0-disabled-0-snap.png | 4 ++-- ...ess-filer-tag-screenshots-pressed-state-checked-0-snap.png | 4 ++-- 20 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-dark-preview-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-dark-preview-snap.png index 8c61b19d63..356bc1dae4 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-dark-preview-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-dark-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9aacb151bb41d21d487d8ff75b6a67ca9e1c8ef14f7078f479644ac64456e913 -size 13225 +oid sha256:f04897232e3a438a8c31ec2486f1e4ba2d9ab543ca769bfbf4ec179f0ad68d98 +size 13306 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-preview-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-preview-snap.png index 31f1e344f2..218578051b 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-preview-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-preview-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ffbc081a529b07f515a87e793b270e3896a3f4f6b5d96f69e4ec107a5b7d6191 -size 12930 +oid sha256:4b7f8ec9b340dca583edf3723a768c13095388a2bd55bdabdedb4c04f2667301 +size 12966 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-2-snap.png index 31b8e63693..118b8a57c2 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-2-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3fd5c847bd5333b3de38bea489c82dda7b1630c031dcc32bf11c3b17325bc311 -size 11828 +oid sha256:f0a3e59e8bd220913b078a8f9564ee2cccdbce8a7b308264a92c9c6dfdfc4e91 +size 12680 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-snap.png index cf70cd262a..a616500df8 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-click-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cde5f702241063cf81d3eb394cbf4c74031d643ad4a3109622f651f71e100683 -size 14795 +oid sha256:a0eabe64e5c66fccbc1157c6f873e900a11ad918dac0e1f74c5e8c8b03c42c88 +size 15707 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-2-snap.png index 31b8e63693..118b8a57c2 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-2-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3fd5c847bd5333b3de38bea489c82dda7b1630c031dcc32bf11c3b17325bc311 -size 11828 +oid sha256:f0a3e59e8bd220913b078a8f9564ee2cccdbce8a7b308264a92c9c6dfdfc4e91 +size 12680 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-snap.png index cf70cd262a..a616500df8 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cde5f702241063cf81d3eb394cbf4c74031d643ad4a3109622f651f71e100683 -size 14795 +oid sha256:a0eabe64e5c66fccbc1157c6f873e900a11ad918dac0e1f74c5e8c8b03c42c88 +size 15707 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-2-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-2-snap.png index 31b8e63693..118b8a57c2 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-2-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3fd5c847bd5333b3de38bea489c82dda7b1630c031dcc32bf11c3b17325bc311 -size 11828 +oid sha256:f0a3e59e8bd220913b078a8f9564ee2cccdbce8a7b308264a92c9c6dfdfc4e91 +size 12680 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-snap.png index cf70cd262a..a616500df8 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-show-clear-show-arrow-mobile-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cde5f702241063cf81d3eb394cbf4c74031d643ad4a3109622f651f71e100683 -size 14795 +oid sha256:a0eabe64e5c66fccbc1157c6f873e900a11ad918dac0e1f74c5e8c8b03c42c88 +size 15707 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-3-snap.png index c978b60bcc..5cc5a673d7 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-3-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24df3051956450c6434561633bca0ee8aed4e365c3d04a15301f97dc57093750 -size 28498 +oid sha256:4040ea72f9e7ec28c8dc63fcdcb09ff865c6dc6f71d5ef0ee740840d74468cd9 +size 28394 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-snap.png index 8b66c2452f..c9ce37ebed 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-click-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2b7e807851d60a7e6e6c339d8772e2299d4db679c8b904cc7041e377f1b16b06 -size 15934 +oid sha256:ace869802cea198dd89cd6d2dc743f47c1c6de88f461b6db4c9aa503648f3d43 +size 15963 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-3-snap.png index c978b60bcc..5cc5a673d7 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-3-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24df3051956450c6434561633bca0ee8aed4e365c3d04a15301f97dc57093750 -size 28498 +oid sha256:4040ea72f9e7ec28c8dc63fcdcb09ff865c6dc6f71d5ef0ee740840d74468cd9 +size 28394 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-snap.png index 8b66c2452f..c9ce37ebed 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2b7e807851d60a7e6e6c339d8772e2299d4db679c8b904cc7041e377f1b16b06 -size 15934 +oid sha256:ace869802cea198dd89cd6d2dc743f47c1c6de88f461b6db4c9aa503648f3d43 +size 15963 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-3-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-3-snap.png index c978b60bcc..5cc5a673d7 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-3-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24df3051956450c6434561633bca0ee8aed4e365c3d04a15301f97dc57093750 -size 28498 +oid sha256:4040ea72f9e7ec28c8dc63fcdcb09ff865c6dc6f71d5ef0ee740840d74468cd9 +size 28394 diff --git a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-snap.png b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-snap.png index 8b66c2452f..c9ce37ebed 100644 --- a/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/filter-tag-view-variants-mobile-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2b7e807851d60a7e6e6c339d8772e2299d4db679c8b904cc7041e377f1b16b06 -size 15934 +oid sha256:ace869802cea198dd89cd6d2dc743f47c1c6de88f461b6db4c9aa503648f3d43 +size 15963 diff --git a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-0-snap.png b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-0-snap.png index 96fc2426d4..b2fb655f9d 100644 --- a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c90317216c23b1bc034c4a6199bdb6d4301b15f87b685fa665c0f5938d209183 -size 3393 +oid sha256:16a8610d645af2d9e944342c4984814dc10e439a0322b8fcddb1c2698372fe84 +size 3524 diff --git a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-1-snap.png b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-1-snap.png index af96e01984..7ac36ade39 100644 --- a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-1-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-clear-state-colors-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5ccbcd99ab71c0ae57298cb8faaa2da2eb6a53e3a24ebf97f8fb8ff8b487757f -size 3524 +oid sha256:0983d82fce49a82689ba51b93b59807182430165e5feeb09cb17e6decbe92ddc +size 3536 diff --git a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-0-snap.png b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-0-snap.png index 94a3040004..e8efbcf6b5 100644 --- a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bea8fd9cefe02adb35d923c9d28db07cc6e4824f603c7305379efc41daeaeef8 -size 3484 +oid sha256:f5876c7deeef77752ef5f9d8db96cbc339c7d782516583cb764bb16a404863be +size 3539 diff --git a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-1-snap.png b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-1-snap.png index 2529f4d4ff..7467410b99 100644 --- a/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-1-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/hover-filer-tag-screenshots-hover-state-colors-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:104678cd09772081f6a62d31f07611c29c331eddaf75d2f538fad0140682f0a9 -size 3518 +oid sha256:bbad4b5b1a47af5f69fd4533ac7b8f77eef00af7b8cab419a73be911063d08fd +size 3506 diff --git a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-0-snap.png b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-0-snap.png index 7b7cc10a0a..0d40829e8a 100644 --- a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-disabled-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b0458cf4592fed55259e064b6a9fa61e08798c4c0148e4a7a45e47932ae79c92 -size 3510 +oid sha256:125b38a1fb5a48a1ecd8afeb9e4a898fdad96ff298c0a440b2ff71c2cacf21e7 +size 3580 diff --git a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-snap.png b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-snap.png index 5a65c665e5..19305d2f6f 100644 --- a/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-snap.png +++ b/packages/filter-tag/src/__image_snapshots__/press-filer-tag-screenshots-pressed-state-checked-0-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:66fb097b1531f1dacde3128ab84fc877f7543e2e55180cb391c0830995789624 -size 3531 +oid sha256:b1695c16875cb8d54d2ff04c2302e162337a35ed1bfb29e56dbc52b26a9d8223 +size 3526