From c9157c282ec89d7c82155ee461eca9e4294e0ac8 Mon Sep 17 00:00:00 2001 From: isstuev Date: Tue, 11 Jun 2024 12:49:29 +0200 Subject: [PATCH 1/2] tag group select component --- theme/components/Tag/Tag.ts | 18 ++++++ .../tagGroupSelect/TagGroupSelect.pw.tsx | 22 +++++++ ui/shared/tagGroupSelect/TagGroupSelect.tsx | 55 ++++++++++++++++++ ..._dark-color-mode_base-view-dark-mode-1.png | Bin 0 -> 4004 bytes ...t.pw.tsx_default_base-view-dark-mode-1.png | Bin 0 -> 3809 bytes 5 files changed, 95 insertions(+) create mode 100644 ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx create mode 100644 ui/shared/tagGroupSelect/TagGroupSelect.tsx create mode 100644 ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png create mode 100644 ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png diff --git a/theme/components/Tag/Tag.ts b/theme/components/Tag/Tag.ts index 047ce7d698..5976077a02 100644 --- a/theme/components/Tag/Tag.ts +++ b/theme/components/Tag/Tag.ts @@ -3,9 +3,11 @@ import { createMultiStyleConfigHelpers, defineStyle, } from '@chakra-ui/styled-system'; +import { mode } from '@chakra-ui/theme-tools'; import getDefaultTransitionProps from '../../utils/getDefaultTransitionProps'; import Badge from '../Badge'; + const transitionProps = getDefaultTransitionProps(); const { defineMultiStyleConfig, definePartsStyle } = @@ -15,6 +17,22 @@ const variants = { subtle: definePartsStyle((props) => ({ container: Badge.variants?.subtle(props), })), + select: definePartsStyle((props) => ({ + container: { + bg: mode('gray.100', 'gray.800')(props), + color: mode('gray.500', 'whiteAlpha.800')(props), + _hover: { + color: 'blue.400', + opacity: 0.76, + }, + }, + })), + selectActive: definePartsStyle((props) => ({ + container: { + bg: mode('blue.500', 'blue.900')(props), + color: 'whiteAlpha.800', + }, + })), }; const sizes = { diff --git a/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx b/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx new file mode 100644 index 0000000000..4ccc12110c --- /dev/null +++ b/ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx @@ -0,0 +1,22 @@ +import _noop from 'lodash/noop'; +import React from 'react'; + +import { test, expect } from 'playwright/lib'; + +import TagGroupSelect from './TagGroupSelect'; + +test.use({ viewport: { width: 480, height: 140 } }); + +test('base view +@dark-mode', async({ render }) => { + const component = await render( + , + ); + + await component.getByText('Option 2').hover(); + + await expect(component).toHaveScreenshot(); +}); diff --git a/ui/shared/tagGroupSelect/TagGroupSelect.tsx b/ui/shared/tagGroupSelect/TagGroupSelect.tsx new file mode 100644 index 0000000000..eb0e89d122 --- /dev/null +++ b/ui/shared/tagGroupSelect/TagGroupSelect.tsx @@ -0,0 +1,55 @@ +import { HStack, Tag } from '@chakra-ui/react'; +import React from 'react'; + +type Props = { + items: Array<{ id: T; title: string }>; +} & ( + { + value: T; + onChange: (value: T) => void; + isMulti?: false; + } | { + value: Array; + onChange: (value: Array) => void; + isMulti: true; + } +) + +const TagGroupSelect = ({ items, value, isMulti, onChange }: Props) => { + const onItemClick = React.useCallback((event: React.SyntheticEvent) => { + const itemValue = (event.currentTarget as HTMLDivElement).getAttribute('data-id') as T; + if (isMulti) { + let newValue; + if (value.includes(itemValue)) { + newValue = value.filter(i => i !== itemValue); + } else { + newValue = [ ...value, itemValue ]; + } + onChange(newValue); + } else { + onChange(itemValue); + } + }, [ isMulti, onChange, value ]); + + return ( + + { items.map(item => { + const isActive = isMulti ? value.includes(item.id) : value === item.id; + return ( + + { item.title } + + ); + }) } + + ); +}; + +export default TagGroupSelect; diff --git a/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_dark-color-mode_base-view-dark-mode-1.png new file mode 100644 index 0000000000000000000000000000000000000000..4684f4fcdc63866358f2dfbdc6000d71447fd776 GIT binary patch literal 4004 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 KMNUMnLSTZiGV2%s literal 0 HcmV?d00001 diff --git a/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png b/ui/shared/tagGroupSelect/__screenshots__/TagGroupSelect.pw.tsx_default_base-view-dark-mode-1.png new file mode 100644 index 0000000000000000000000000000000000000000..b6a14300fc24f2e7ce2cdfed79fbb3911a55987b GIT binary patch literal 3809 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 Xm3Q^VLU*b*00000NkvXXu0mjf&82o3 literal 0 HcmV?d00001 From f487cf10719063c2ffd9aef762e4dbbd6757cea1 Mon Sep 17 00:00:00 2001 From: isstuev Date: Sun, 23 Jun 2024 12:02:22 +0300 Subject: [PATCH 2/2] tag theme fix --- theme/components/Tag/Tag.ts | 13 +++++++------ ui/shared/tagGroupSelect/TagGroupSelect.tsx | 5 +++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/theme/components/Tag/Tag.ts b/theme/components/Tag/Tag.ts index 5976077a02..6ea4c41d10 100644 --- a/theme/components/Tag/Tag.ts +++ b/theme/components/Tag/Tag.ts @@ -25,12 +25,13 @@ const variants = { color: 'blue.400', opacity: 0.76, }, - }, - })), - selectActive: definePartsStyle((props) => ({ - container: { - bg: mode('blue.500', 'blue.900')(props), - color: 'whiteAlpha.800', + [` + &[data-selected=true], + &[data-selected=true][aria-selected=true] + `]: { + bg: mode('blue.500', 'blue.900')(props), + color: 'whiteAlpha.800', + }, }, })), }; diff --git a/ui/shared/tagGroupSelect/TagGroupSelect.tsx b/ui/shared/tagGroupSelect/TagGroupSelect.tsx index eb0e89d122..4bf53b2ce1 100644 --- a/ui/shared/tagGroupSelect/TagGroupSelect.tsx +++ b/ui/shared/tagGroupSelect/TagGroupSelect.tsx @@ -34,12 +34,13 @@ const TagGroupSelect = ({ items, value, isMulti, onChange }: P return ( { items.map(item => { - const isActive = isMulti ? value.includes(item.id) : value === item.id; + const isSelected = isMulti ? value.includes(item.id) : value === item.id; return (