@mindlogic-ai/logician-ui 5.0.0-alpha.3 → 5.0.0-alpha.30

package/src/components/Select/Select.stories.tsx

@@ -9,11 +9,22 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react';
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
 import { Badge } from '../Badge';
+import { Radio, RadioGroup } from '../Radio';
 import { IoCall, IoChatbubbleEllipses, IoIosMail } from '../Icon';
+import { ComboboxField } from './ComboboxField';
 import { Select } from './Select';
+import {
+  contentStyles,
+  indicatorStyles,
+  itemStyles,
+  selectClearTriggerStyles,
+  triggerStyles,
+} from './Select.styles';
 import { SelectField } from './SelectField';
 
 const meta = {
@@ -188,6 +199,76 @@ export const MultiSelect = () => (
   </Box>
 );
 
+/**
+ * An optional field the member can empty again. `ClearTrigger` goes before
+ * the chevron and shows only while something is selected. It draws its own
+ * icon and is named 「선택 지우기」 in the provider's language; pass
+ * `aria-label` to say what is cleared. A divider separates it from the
+ * chevron, and a long value ends in an ellipsis before it. On a touch screen
+ * its hit area widens to 44px toward the value, at the field's own height.
+ */
+const longValueCollection = createListCollection({
+  items: [
+    {
+      label: 'Engineering / Platform / Developer Experience',
+      value: 'dx',
+    },
+    { label: 'Design', value: 'design' },
+  ],
+});
+
+export const Clearable = () => (
+  <Stack maxW="320px" gap={4}>
+    <Box maxW="180px">
+      <Select.Root collection={longValueCollection} defaultValue={['dx']}>
+        <Select.HiddenSelect />
+        <Select.Label>Team (180px)</Select.Label>
+        <Select.Control>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Select a team" />
+          </Select.Trigger>
+          <Select.IndicatorGroup>
+            <Select.ClearTrigger />
+            <Select.Indicator />
+          </Select.IndicatorGroup>
+        </Select.Control>
+      </Select.Root>
+    </Box>
+    {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
+      <Select.Root
+        key={size}
+        size={size}
+        collection={frameworkCollection}
+        defaultValue={['react']}
+      >
+        <Select.HiddenSelect />
+        <Select.Label>{`Framework (${size})`}</Select.Label>
+        <Select.Control>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Select a framework" />
+          </Select.Trigger>
+          <Select.IndicatorGroup>
+            <Select.ClearTrigger />
+            <Select.Indicator />
+          </Select.IndicatorGroup>
+        </Select.Control>
+        <Portal>
+          <Select.Positioner>
+            <Select.Content>
+              {frameworkCollection.items.map((item) => (
+                <Select.Item item={item} key={item.value}>
+                  <Select.ItemText>{item.label}</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              ))}
+            </Select.Content>
+          </Select.Positioner>
+        </Portal>
+      </Select.Root>
+    ))}
+  </Stack>
+);
+
 /* -------------------------------------------------------------------------
  * Custom children
  *
@@ -771,3 +852,211 @@ export const WithOpenChange = () => {
     </HStack>
   );
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Select.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`); `tags` is written out on each story because the indexer
+// reads CSF statically.
+
+type UsageStory = StoryObj;
+
+const LANGUAGES = [
+  { label: '한국어', value: 'ko' },
+  { label: 'English', value: 'en' },
+  { label: '日本語', value: 'ja' },
+];
+
+const GROUPS = [
+  '경영지원팀',
+  '고객성공팀',
+  '데이터팀',
+  '디자인팀',
+  '마케팅팀',
+  '백엔드팀',
+  '법무팀',
+  '보안팀',
+  '사업개발팀',
+  '세일즈팀',
+  '인사팀',
+  '재무팀',
+  '프론트엔드팀',
+].map((name) => ({ label: name, value: name }));
+
+export const DoLabelled: UsageStory = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a visible label',
+  render: () => (
+    <Box maxW="320px">
+      <SelectField label="답변 언어" options={LANGUAGES} defaultValue="ko" />
+    </Box>
+  ),
+};
+
+export const DontNameless: UsageStory = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: no label, ariaLabel or placeholder",
+  render: () => (
+    <Flex maxW="480px" align="center" justify="space-between" gap={4}>
+      <Text fontWeight="semibold">답변 언어</Text>
+      <Box w="180px">
+        <SelectField options={LANGUAGES} defaultValue="ko" />
+      </Box>
+    </Flex>
+  ),
+};
+
+export const DoComboboxForLongList: UsageStory = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: ComboboxField for a long list',
+  render: () => (
+    <Box maxW="320px">
+      <ComboboxField
+        label="그룹"
+        placeholder="그룹 이름으로 찾기"
+        options={GROUPS}
+        emptyText="일치하는 그룹이 없습니다"
+      />
+    </Box>
+  ),
+};
+
+export const DontSelectForTwo: UsageStory = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a dropdown for two options",
+  render: () => (
+    <Box maxW="320px">
+      <SelectField
+        label="공개 범위"
+        options={[
+          { label: '전체 공개', value: 'public' },
+          { label: '그룹만', value: 'group' },
+        ]}
+        defaultValue="public"
+      />
+    </Box>
+  ),
+};
+
+export const DoRadioForTwo: UsageStory = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: Radio for two visible options',
+  render: () => (
+    <Stack gap={2} maxW="320px">
+      <Text id="usage-visibility" fontWeight="semibold">
+        공개 범위
+      </Text>
+      <RadioGroup
+        defaultValue="public"
+        aria-labelledby="usage-visibility"
+        display="flex"
+        gap={4}
+      >
+        <Radio value="public">
+          <Radio.Control />
+          <Radio.Text>전체 공개</Radio.Text>
+        </Radio>
+        <Radio value="group">
+          <Radio.Control />
+          <Radio.Text>그룹만</Radio.Text>
+        </Radio>
+      </RadioGroup>
+    </Stack>
+  ),
+};
+
+/**
+ * Tokens the trigger, list and options read, taken from the style objects in
+ * `Select.styles.ts` (shared by Select and Combobox).
+ */
+export const UsageTokens: UsageStory = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: triggerStyles.bg,
+          use: <T en="Trigger background" ko="트리거 배경" />,
+        },
+        {
+          token: triggerStyles.color,
+          use: <T en="Selected value" ko="선택한 값" />,
+        },
+        {
+          token: triggerStyles.borderColor,
+          use: <T en="Trigger border at rest" ko="트리거 평소 테두리" />,
+        },
+        {
+          token: triggerStyles._hover.borderColor,
+          use: <T en="Border on hover" ko="마우스를 올렸을 때 테두리" />,
+        },
+        {
+          token: triggerStyles._focus.borderColor,
+          use: (
+            <T
+              en="Border and ring on focus or open"
+              ko="초점을 받거나 열렸을 때 테두리와 링"
+            />
+          ),
+        },
+        {
+          token: triggerStyles._invalid.borderColor,
+          use: <T en="Border when invalid" ko="오류 상태 테두리" />,
+        },
+        {
+          token: triggerStyles._disabled.bg,
+          use: <T en="Disabled background" ko="비활성 배경" />,
+        },
+        {
+          token: triggerStyles._disabled.color,
+          use: <T en="Disabled text" ko="비활성 글자" />,
+        },
+        {
+          token: indicatorStyles.color,
+          use: <T en="Chevron" ko="펼침 화살표" />,
+        },
+        {
+          token: selectClearTriggerStyles.color,
+          use: <T en="Clear (×) button" ko="선택 지우기(×) 버튼" />,
+        },
+        {
+          token: selectClearTriggerStyles._hover.color,
+          use: (
+            <T en="Clear button on hover" ko="마우스를 올렸을 때 지우기 버튼" />
+          ),
+        },
+        {
+          token: contentStyles.bg,
+          use: <T en="List background" ko="목록 배경" />,
+        },
+        {
+          token: contentStyles.borderColor,
+          use: <T en="List border" ko="목록 테두리" />,
+        },
+        {
+          token: itemStyles._highlighted.bg,
+          use: (
+            <T
+              en="Option under the pointer or keyboard"
+              ko="포인터나 키보드가 가리키는 항목"
+            />
+          ),
+        },
+        {
+          token: itemStyles._checked.bg,
+          use: <T en="Selected option" ko="선택된 항목" />,
+        },
+        {
+          token: itemStyles._disabled.color,
+          use: <T en="Disabled option" ko="선택할 수 없는 항목" />,
+        },
+      ]}
+    />
+  ),
+};

package/src/components/Select/Select.styles.ts

@@ -37,9 +37,27 @@ const fieldBase = {
   },
 };
 
+/**
+ * Room for the × and its divider at the end of the value, while the × shows.
+ *
+ * The indicator group overlays the value. Chakra keeps the value off the
+ * chevron with `maxW: 80%` on a Select (too little in a narrow filter) and a
+ * 1.5× height padding on a Combobox, and neither counts the × with its
+ * divider. This reserves the whole group instead: padding on both sides, the
+ * × (`8`) with its `me` (`3`), the group `gap` (`1`) and the chevron (`1em`),
+ * so a long value ends in an ellipsis before the ×.
+ */
+const clearTriggerRoom = (paddingVar: string) => ({
+  '[data-part=control]:has([data-part=clear-trigger]:not([hidden])) > &': {
+    pe: `calc(var(${paddingVar}) * 2 + 4em)`,
+    '& [data-part=value-text]': { maxW: 'none' },
+  },
+});
+
 /** Select trigger — the clickable control. */
 export const triggerStyles = {
   ...fieldBase,
+  ...clearTriggerRoom('--select-trigger-padding-x'),
   cursor: 'pointer',
   _open: {
     borderColor: 'primary.main',
@@ -67,6 +85,11 @@ export const ghostTriggerStyles = {
   _hover: { borderColor: 'border.control' },
   _disabled: {
     ...disabledText,
+    // A field, not a ghost button: the value text stays readable at
+    // `disabled.fg` (well apart from the resting `fg.default` already).
+    // `disabled.fgGhost` is for fill-less buttons whose resting glyph is
+    // `fg.icon`.
+    color: 'disabled.fg',
     cursor: 'not-allowed',
     fontWeight: 'semibold',
   },
@@ -75,6 +98,7 @@ export const ghostTriggerStyles = {
 /** Combobox text input — the typeable control. */
 export const inputStyles = {
   ...fieldBase,
+  ...clearTriggerRoom('--combobox-input-padding-x'),
 };
 
 /** Dropdown panel for both Select and Combobox. */
@@ -115,3 +139,68 @@ export const itemStyles = {
 export const indicatorStyles = {
   color: 'fg.muted',
 };
+
+/**
+ * Clear (×) button for both Select and Combobox.
+ *
+ * Chakra's recipe gives this part a colour and no size, and its default icon
+ * is `1em`, so a bare `ClearTrigger` drew a 21px × next to a 14px chevron. The
+ * × is the secondary action, so it is smaller (`3.5`, 12px at 14px text) and
+ * lighter (`fg.icon`) than the chevron, on an `8` box. `& svg` rather than
+ * `_icon` so the size also wins over an icon passed with its own `boxSize`.
+ *
+ * On a touch screen the hit area widens to 44px, toward the value only: the
+ * chevron sits to the right and has to keep opening the list. The height stays
+ * the control's own height (`heightVar`), so the area never reaches the field
+ * above or below. Every control height is over the 24px KWCAG minimum.
+ */
+const clearTriggerStyles = (heightVar: string) => ({
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxSize: '8',
+  // The divider sits `1` past the box. `3` leaves the same space between the
+  // divider and the chevron glyph as between the × glyph and the divider
+  // (about 13px at 14px text).
+  me: '3',
+  color: 'fg.icon',
+  cursor: 'pointer',
+  _hover: { color: 'fg.default' },
+  // The divider marks where opening starts: it sits in the `me` gap, takes no
+  // clicks, and everything right of it belongs to the chevron.
+  _after: {
+    content: '""',
+    position: 'absolute',
+    insetEnd: '-1',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    h: '4',
+    borderEndWidth: '1px',
+    borderColor: 'border.subtle',
+    pointerEvents: 'none',
+  },
+  // zag hides the × with the `hidden` attribute while nothing is selected,
+  // and the `display` above would otherwise override it.
+  _hidden: { display: 'none' },
+  '& svg': { width: '3.5', height: '3.5' },
+  '@media (pointer: coarse)': {
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      insetEnd: 0,
+      top: '50%',
+      transform: 'translateY(-50%)',
+      width: '44px',
+      height: `var(${heightVar})`,
+    },
+  },
+});
+
+export const selectClearTriggerStyles = clearTriggerStyles(
+  '--select-trigger-height'
+);
+
+export const comboboxClearTriggerStyles = clearTriggerStyles(
+  '--combobox-input-height'
+);

package/src/components/Select/Select.tsx

@@ -1,13 +1,16 @@
 import { forwardRef } from 'react';
 import { Select as ChakraSelect } from '@chakra-ui/react';
 
+import { useTranslate } from '@/hooks/useTranslate';
 import { mergeCss } from '@/utils/mergeCss';
 
+import { CloseIcon } from '../Icon';
 import {
   contentStyles,
   ghostTriggerStyles,
   indicatorStyles,
   itemStyles,
+  selectClearTriggerStyles,
   triggerStyles,
 } from './Select.styles';
 import type { SelectVariant } from './Select.types';
@@ -67,10 +70,33 @@ const Indicator = forwardRef<HTMLDivElement, ChakraSelect.IndicatorProps>(
   }
 );
 
+/**
+ * The × that empties the selection. Draws `CloseIcon` when no children are
+ * passed, and names itself in the provider's language: Chakra's own name is
+ * the English "Clear value" in every locale. Pass `aria-label` to say what is
+ * being cleared ("조직 선택 지우기").
+ */
+const ClearTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraSelect.ClearTriggerProps
+>(function SelectClearTrigger({ css, children, ...props }, ref) {
+  const translate = useTranslate();
+  return (
+    <ChakraSelect.ClearTrigger
+      ref={ref}
+      aria-label={translate('clear_selection') as string}
+      {...props}
+      css={mergeCss(selectClearTriggerStyles, css)}
+    >
+      {children ?? <CloseIcon aria-hidden />}
+    </ChakraSelect.ClearTrigger>
+  );
+});
+
 /**
  * Compound Select primitives — Chakra's `Select` namespace with the Logician
  * design-system styling baked into the visual parts (`Trigger`, `Content`,
- * `Item`, `Indicator`). Use these directly for full compositional control
+ * `Item`, `Indicator`, `ClearTrigger`). Use these directly for full compositional control
  * (multi-select, grouped options, custom layouts); use `SelectField` for the
  * common single-select case.
  */
@@ -84,7 +110,7 @@ export const Select = {
   ValueText: ChakraSelect.ValueText,
   IndicatorGroup: ChakraSelect.IndicatorGroup,
   Indicator,
-  ClearTrigger: ChakraSelect.ClearTrigger,
+  ClearTrigger,
   HiddenSelect: ChakraSelect.HiddenSelect,
   Positioner: ChakraSelect.Positioner,
   Content,