From 46a7f62ce2f3b9415d4d3eaa2c045de4cfa7d2f2 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 9 Jun 2026 15:04:29 +0300 Subject: [PATCH 1/5] refactor(select): style contract --- .pnp.cjs | 4 +- ui-parts/select/package.json | 4 +- ui-parts/select/src/index.ts | 1 + ui-parts/select/src/item/item.component.tsx | 18 +++++++- ui-parts/select/src/item/item.interfaces.ts | 1 + ui-parts/select/src/menu/menu.css.ts | 14 +----- ui-parts/select/src/select.component.tsx | 27 ++++++++--- ui-parts/select/src/select.interfaces.ts | 25 +++++++++- ui-parts/select/src/styles/appearance.css.ts | 48 ++++++++++++++++++++ ui-parts/select/src/styles/index.ts | 2 + ui-parts/select/src/styles/shape.css.ts | 34 ++++++++++++++ ui-parts/theme/src/theme/space.ts | 1 + yarn.lock | 2 +- 13 files changed, 151 insertions(+), 30 deletions(-) create mode 100644 ui-parts/select/src/styles/appearance.css.ts create mode 100644 ui-parts/select/src/styles/index.ts create mode 100644 ui-parts/select/src/styles/shape.css.ts diff --git a/.pnp.cjs b/.pnp.cjs index 615c819aa..389485ab7 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -1340,7 +1340,6 @@ const RAW_RUNTIME_STATE = ["@types/vanilla-extract__dynamic", null],\ ["@vanilla-extract/css", "npm:1.17.1"],\ ["@vanilla-extract/dynamic", "npm:2.1.2"],\ - ["@vanilla-extract/recipes", "virtual:3d06fbb19d1fe3e56495101348ea0a04ee3f83383f44c49513a90168d8afa4fd0bb1beb21869c24e100c6d64fc80ac2453d3b6cf930e63e6f7b9fbd0b88593f2#npm:0.5.5"],\ ["clsx", "npm:2.1.1"],\ ["rainbow-sprinkles", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:1.0.0"],\ ["react", "npm:19.1.0"],\ @@ -1372,7 +1371,6 @@ const RAW_RUNTIME_STATE = ["@types/react", "npm:19.1.2"],\ ["@vanilla-extract/css", "npm:1.17.1"],\ ["@vanilla-extract/dynamic", "npm:2.1.2"],\ - ["@vanilla-extract/recipes", "virtual:3d06fbb19d1fe3e56495101348ea0a04ee3f83383f44c49513a90168d8afa4fd0bb1beb21869c24e100c6d64fc80ac2453d3b6cf930e63e6f7b9fbd0b88593f2#npm:0.5.5"],\ ["clsx", "npm:2.1.1"],\ ["rainbow-sprinkles", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:1.0.0"],\ ["react", "npm:19.1.0"],\ @@ -1692,6 +1690,7 @@ const RAW_RUNTIME_STATE = "packageDependencies": [\ ["@atls-ui-parts/select", "workspace:ui-parts/select"],\ ["@atls-ui-parts/layout", "virtual:dbe1a421eee484ea0bdb9d0589d44d9184c9819d8f5bfcb1a73e3d85271cc45ecf4365a26e00f2a3256c13de48b40272578801688978809175001fb2693bc747#workspace:ui-parts/layout"],\ + ["@atls-ui-parts/theme", "virtual:dbe1a421eee484ea0bdb9d0589d44d9184c9819d8f5bfcb1a73e3d85271cc45ecf4365a26e00f2a3256c13de48b40272578801688978809175001fb2693bc747#workspace:ui-parts/theme"],\ ["@atls-utils/use-select", "virtual:9c076913ffd643939b8ac6e8c374fd1470f44689001261d35898fb07091ea0aa596a24d8bcdfb508f949d0c68789b448702cfb68072c423229496303e9a11342#workspace:utils/use-select"],\ ["@storybook/react", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:8.6.12"],\ ["@types/react", "npm:19.1.2"],\ @@ -1699,7 +1698,6 @@ const RAW_RUNTIME_STATE = ["@vanilla-extract/dynamic", "npm:2.1.2"],\ ["clsx", "npm:2.1.1"],\ ["framer-motion", "virtual:3dba37771ce499e6d5c33bd82b7263c259fd8b9b612d0bf65962a3da6b1ec4612c0f051c5ab6d1701e4760bde49cb56e2383e557801939071c5dbec0f467c0d5#npm:12.23.22"],\ - ["rainbow-sprinkles", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:1.0.0"],\ ["react", "npm:19.1.0"],\ ["react-dom", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:19.1.0"],\ ["storybook", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:8.6.12"]\ diff --git a/ui-parts/select/package.json b/ui-parts/select/package.json index ae675f454..af8218e7f 100644 --- a/ui-parts/select/package.json +++ b/ui-parts/select/package.json @@ -13,10 +13,10 @@ "postpack": "rm -rf dist" }, "dependencies": { + "@atls-ui-parts/theme": "workspace:*", "@atls-utils/use-select": "workspace:*", "clsx": "2.1.1", - "framer-motion": "12.23.22", - "rainbow-sprinkles": "1.0.0" + "framer-motion": "12.23.22" }, "devDependencies": { "@atls-ui-parts/layout": "workspace:*", diff --git a/ui-parts/select/src/index.ts b/ui-parts/select/src/index.ts index 74f4467fe..6c9d81075 100644 --- a/ui-parts/select/src/index.ts +++ b/ui-parts/select/src/index.ts @@ -2,4 +2,5 @@ export * from './button/index.js' export * from './item/index.js' export * from './menu/index.js' export * from './select.component.js' +export * from './styles/index.js' export type * from './select.interfaces.js' diff --git a/ui-parts/select/src/item/item.component.tsx b/ui-parts/select/src/item/item.component.tsx index 842d168d5..4258d9bf8 100644 --- a/ui-parts/select/src/item/item.component.tsx +++ b/ui-parts/select/src/item/item.component.tsx @@ -7,8 +7,22 @@ import { clsx } from 'clsx' import { baseItemStyles } from './item.css.js' import { highlightedMenuItemStyles } from './item.css.js' -export const MenuItem = ({ highlighted, children, ...props }: ItemProps): ReactNode => ( -
  • +export const MenuItem = ({ + highlighted, + highlightedClassName, + children, + className, + ...props +}: ItemProps): ReactNode => ( +
  • {children}
    • ) diff --git a/ui-parts/select/src/item/item.interfaces.ts b/ui-parts/select/src/item/item.interfaces.ts index 5b99ea1ba..298251b38 100644 --- a/ui-parts/select/src/item/item.interfaces.ts +++ b/ui-parts/select/src/item/item.interfaces.ts @@ -2,4 +2,5 @@ import type { LiHTMLAttributes } from 'react' export interface ItemProps extends LiHTMLAttributes { highlighted: boolean + highlightedClassName?: string } diff --git a/ui-parts/select/src/menu/menu.css.ts b/ui-parts/select/src/menu/menu.css.ts index 9d0697c82..b4984027c 100644 --- a/ui-parts/select/src/menu/menu.css.ts +++ b/ui-parts/select/src/menu/menu.css.ts @@ -1,16 +1,4 @@ -import { style } from '@vanilla-extract/css' -import { createRainbowSprinkles } from 'rainbow-sprinkles' -import { defineProperties } from 'rainbow-sprinkles' - -const menuComponentProperties = defineProperties({ - dynamicProperties: { - width: true, - }, -}) - -export const baseMenuSprinkles = createRainbowSprinkles(menuComponentProperties) - -export type BaseMenuSprinkles = Parameters[0] +import { style } from '@vanilla-extract/css' export const baseMenuStyles = style({ display: 'flex', diff --git a/ui-parts/select/src/select.component.tsx b/ui-parts/select/src/select.component.tsx index 172418770..186a25d95 100644 --- a/ui-parts/select/src/select.component.tsx +++ b/ui-parts/select/src/select.component.tsx @@ -9,15 +9,21 @@ import { useSelect } from '@atls-utils/use-select' import { MenuItem } from './item/index.js' import { baseButtonStyles } from './button/index.js' -import { baseMenuSprinkles } from './menu/index.js' import { baseMenuStyles } from './menu/index.js' +import { selectAppearances } from './styles/index.js' +import { selectShapes } from './styles/index.js' export const Select = ({ + appearance = selectAppearances.default, + className, items, label, value, onChangeValue, placeholder, + shape = selectShapes.default, + style, + width, ...props }: SelectProps): ReactNode => { const { @@ -33,23 +39,28 @@ export const Select = ({ onChange: onChangeValue, }) - const { className, style, otherProps } = baseMenuSprinkles(props) + const triggerValue = value || placeholder + const menuStyle = width === undefined ? style : { width, ...style } return ( <> {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - {/* eslint-disable-next-line react/jsx-no-leaked-render */} {isOpen && renderMenu( {items.map((item, index) => ( {item} diff --git a/ui-parts/select/src/select.interfaces.ts b/ui-parts/select/src/select.interfaces.ts index 6eb7d2286..36d4462ee 100644 --- a/ui-parts/select/src/select.interfaces.ts +++ b/ui-parts/select/src/select.interfaces.ts @@ -1,9 +1,30 @@ -import type { BaseMenuSprinkles } from './menu/index.js' +import type { HTMLMotionProps } from 'framer-motion' +import type { CSSProperties } from 'react' -export interface SelectProps extends BaseMenuSprinkles { +export interface SelectAppearance { + highlightedItem: string | undefined + item: string | undefined + menu: string | undefined + trigger: string | undefined +} + +export type SelectAppearanceName = 'custom' | 'default' + +export interface SelectShape { + item: string | undefined + menu: string | undefined + trigger: string | undefined +} + +export type SelectShapeName = 'custom' | 'default' + +export interface SelectProps extends HTMLMotionProps<'ul'> { + appearance?: SelectAppearance label: string value: string onChangeValue: (nextValue: string) => void placeholder: string items: Array + shape?: SelectShape + width?: CSSProperties['width'] } diff --git a/ui-parts/select/src/styles/appearance.css.ts b/ui-parts/select/src/styles/appearance.css.ts new file mode 100644 index 000000000..2cf5c4954 --- /dev/null +++ b/ui-parts/select/src/styles/appearance.css.ts @@ -0,0 +1,48 @@ +import type { SelectAppearance } from '../select.interfaces.js' +import type { SelectAppearanceName } from '../select.interfaces.js' + +import { style } from '@vanilla-extract/css' + +import { vars } from '@atls-ui-parts/theme' + +const highlightedItemCustomAppearanceStyles = style({ + backgroundColor: vars.colors.blue, + color: vars.colors.white, +}) + +const itemCustomAppearanceStyles = style({ + color: vars.colors.black, +}) + +const menuCustomAppearanceStyles = style({ + border: '1px solid', + borderColor: vars.colors.blue, + backgroundColor: vars.colors.white, +}) + +const triggerCustomAppearanceStyles = style({ + border: '1px solid', + borderColor: vars.colors.blue, + backgroundColor: vars.colors.white, + color: vars.colors.black, +}) + +export const appearanceVariant = { + default: { + highlightedItem: undefined, + item: undefined, + menu: undefined, + trigger: undefined, + }, + custom: { + highlightedItem: highlightedItemCustomAppearanceStyles, + item: itemCustomAppearanceStyles, + menu: menuCustomAppearanceStyles, + trigger: triggerCustomAppearanceStyles, + }, +} + +export const selectAppearances: Record = { + custom: appearanceVariant.custom, + default: appearanceVariant.default, +} diff --git a/ui-parts/select/src/styles/index.ts b/ui-parts/select/src/styles/index.ts new file mode 100644 index 000000000..93e0eec5d --- /dev/null +++ b/ui-parts/select/src/styles/index.ts @@ -0,0 +1,2 @@ +export * from './appearance.css.js' +export * from './shape.css.js' diff --git a/ui-parts/select/src/styles/shape.css.ts b/ui-parts/select/src/styles/shape.css.ts new file mode 100644 index 000000000..8463f7e1a --- /dev/null +++ b/ui-parts/select/src/styles/shape.css.ts @@ -0,0 +1,34 @@ +import type { SelectShape } from '../select.interfaces.js' +import type { SelectShapeName } from '../select.interfaces.js' + +import { style } from '@vanilla-extract/css' + +import { vars } from '@atls-ui-parts/theme' + +const itemCustomShapeStyles = style({ + padding: `${vars.space.g8} ${vars.space.g16}`, +}) + +const menuCustomShapeStyles = style({ + borderRadius: vars.radii.f8, +}) + +const triggerCustomShapeStyles = style({ + margin: `${vars.space.zero} ${vars.space.g10}`, + borderRadius: vars.radii.f8, +}) + +export const shapeStyles = { + default: { + item: undefined, + menu: undefined, + trigger: undefined, + }, + custom: { + item: itemCustomShapeStyles, + menu: menuCustomShapeStyles, + trigger: triggerCustomShapeStyles, + }, +} + +export const selectShapes: Record = shapeStyles diff --git a/ui-parts/theme/src/theme/space.ts b/ui-parts/theme/src/theme/space.ts index 3ce1eefda..e0bdb24cd 100644 --- a/ui-parts/theme/src/theme/space.ts +++ b/ui-parts/theme/src/theme/space.ts @@ -7,6 +7,7 @@ export const space = { g10: '10px', g12: '12px', g14: '14px', + g16: '16px', g17: '17px', g22: '22px', g24: '24px', diff --git a/yarn.lock b/yarn.lock index 28f232145..372766f6d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -887,6 +887,7 @@ __metadata: resolution: "@atls-ui-parts/select@workspace:ui-parts/select" dependencies: "@atls-ui-parts/layout": "workspace:*" + "@atls-ui-parts/theme": "workspace:*" "@atls-utils/use-select": "workspace:*" "@storybook/react": "npm:8.6.12" "@types/react": "npm:19.1.2" @@ -894,7 +895,6 @@ __metadata: "@vanilla-extract/dynamic": "npm:2.1.2" clsx: "npm:2.1.1" framer-motion: "npm:12.23.22" - rainbow-sprinkles: "npm:1.0.0" react: "npm:19.1.0" react-dom: "npm:19.1.0" storybook: "npm:8.6.12" From ab7b229e7aed3e87b1c8c88180c2b93841543141 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 9 Jun 2026 15:51:50 +0300 Subject: [PATCH 2/5] refactor(select): improve structure/namings --- .../{select.component.tsx => component.tsx} | 7 ++-- ui-parts/select/src/constants.ts | 1 + ui-parts/select/src/index.ts | 4 +-- .../{select.interfaces.ts => interfaces.ts} | 21 ++++++------ .../{item.component.tsx => component.tsx} | 2 +- ui-parts/select/src/item/index.ts | 4 +-- .../{item.interfaces.ts => interfaces.ts} | 0 ui-parts/select/src/menu/menu.css.ts | 3 -- .../src/{select.stories.tsx => stories.tsx} | 2 +- ui-parts/select/src/styles/appearance.css.ts | 34 ++++--------------- ui-parts/select/src/styles/shape.css.ts | 25 ++++---------- 11 files changed, 35 insertions(+), 68 deletions(-) rename ui-parts/select/src/{select.component.tsx => component.tsx} (93%) create mode 100644 ui-parts/select/src/constants.ts rename ui-parts/select/src/{select.interfaces.ts => interfaces.ts} (50%) rename ui-parts/select/src/item/{item.component.tsx => component.tsx} (89%) rename ui-parts/select/src/item/{item.interfaces.ts => interfaces.ts} (100%) rename ui-parts/select/src/{select.stories.tsx => stories.tsx} (94%) diff --git a/ui-parts/select/src/select.component.tsx b/ui-parts/select/src/component.tsx similarity index 93% rename from ui-parts/select/src/select.component.tsx rename to ui-parts/select/src/component.tsx index 186a25d95..a73962f78 100644 --- a/ui-parts/select/src/select.component.tsx +++ b/ui-parts/select/src/component.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react' -import type { SelectProps } from './select.interfaces.js' +import type { SelectProps } from './interfaces.js' import { clsx } from 'clsx' import { motion } from 'framer-motion' @@ -15,16 +15,14 @@ import { selectShapes } from './styles/index.js' export const Select = ({ appearance = selectAppearances.default, - className, items, label, + menuProps: menuPropsProperty, value, onChangeValue, placeholder, shape = selectShapes.default, - style, width, - ...props }: SelectProps): ReactNode => { const { isOpen, @@ -40,6 +38,7 @@ export const Select = ({ }) const triggerValue = value || placeholder + const { className, style, ...props } = menuPropsProperty ?? {} const menuStyle = width === undefined ? style : { width, ...style } return ( diff --git a/ui-parts/select/src/constants.ts b/ui-parts/select/src/constants.ts new file mode 100644 index 000000000..c8a77c173 --- /dev/null +++ b/ui-parts/select/src/constants.ts @@ -0,0 +1 @@ +export const DEFAULT_MENU_WIDTH = 100 diff --git a/ui-parts/select/src/index.ts b/ui-parts/select/src/index.ts index 6c9d81075..2c3bc6700 100644 --- a/ui-parts/select/src/index.ts +++ b/ui-parts/select/src/index.ts @@ -1,6 +1,6 @@ export * from './button/index.js' export * from './item/index.js' export * from './menu/index.js' -export * from './select.component.js' +export * from './component.js' export * from './styles/index.js' -export type * from './select.interfaces.js' +export type * from './interfaces.js' diff --git a/ui-parts/select/src/select.interfaces.ts b/ui-parts/select/src/interfaces.ts similarity index 50% rename from ui-parts/select/src/select.interfaces.ts rename to ui-parts/select/src/interfaces.ts index 36d4462ee..e604bca77 100644 --- a/ui-parts/select/src/select.interfaces.ts +++ b/ui-parts/select/src/interfaces.ts @@ -2,29 +2,30 @@ import type { HTMLMotionProps } from 'framer-motion' import type { CSSProperties } from 'react' export interface SelectAppearance { - highlightedItem: string | undefined - item: string | undefined - menu: string | undefined - trigger: string | undefined + highlightedItem?: string + item?: string + menu?: string + trigger?: string } -export type SelectAppearanceName = 'custom' | 'default' +export type SelectAppearanceName = 'default' export interface SelectShape { - item: string | undefined - menu: string | undefined - trigger: string | undefined + item?: string + menu?: string + trigger?: string } -export type SelectShapeName = 'custom' | 'default' +export type SelectShapeName = 'default' -export interface SelectProps extends HTMLMotionProps<'ul'> { +export interface SelectProps { appearance?: SelectAppearance label: string value: string onChangeValue: (nextValue: string) => void placeholder: string items: Array + menuProps?: HTMLMotionProps<'ul'> shape?: SelectShape width?: CSSProperties['width'] } diff --git a/ui-parts/select/src/item/item.component.tsx b/ui-parts/select/src/item/component.tsx similarity index 89% rename from ui-parts/select/src/item/item.component.tsx rename to ui-parts/select/src/item/component.tsx index 4258d9bf8..84d5d9f7b 100644 --- a/ui-parts/select/src/item/item.component.tsx +++ b/ui-parts/select/src/item/component.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react' -import type { ItemProps } from './item.interfaces.js' +import type { ItemProps } from './interfaces.js' import { clsx } from 'clsx' diff --git a/ui-parts/select/src/item/index.ts b/ui-parts/select/src/item/index.ts index 8b6699f95..db383be6b 100644 --- a/ui-parts/select/src/item/index.ts +++ b/ui-parts/select/src/item/index.ts @@ -1,2 +1,2 @@ -export * from './item.component.js' -export type * from './item.interfaces.js' +export * from './component.js' +export type * from './interfaces.js' diff --git a/ui-parts/select/src/item/item.interfaces.ts b/ui-parts/select/src/item/interfaces.ts similarity index 100% rename from ui-parts/select/src/item/item.interfaces.ts rename to ui-parts/select/src/item/interfaces.ts diff --git a/ui-parts/select/src/menu/menu.css.ts b/ui-parts/select/src/menu/menu.css.ts index b4984027c..d826d9567 100644 --- a/ui-parts/select/src/menu/menu.css.ts +++ b/ui-parts/select/src/menu/menu.css.ts @@ -7,8 +7,5 @@ export const baseMenuStyles = style({ flexDirection: 'column', outline: 'none', padding: 0, - width: 100, height: 'auto', - border: '1px solid black', - borderRadius: 4, }) diff --git a/ui-parts/select/src/select.stories.tsx b/ui-parts/select/src/stories.tsx similarity index 94% rename from ui-parts/select/src/select.stories.tsx rename to ui-parts/select/src/stories.tsx index 223404690..4500bc05a 100644 --- a/ui-parts/select/src/select.stories.tsx +++ b/ui-parts/select/src/stories.tsx @@ -9,7 +9,7 @@ import { Column } from '@atls-ui-parts/layout' import { Row } from '@atls-ui-parts/layout' import { Layout } from '@atls-ui-parts/layout' -import { Select } from './select.component.js' +import { Select } from './component.js' const meta: Meta = { title: 'Components/Select', diff --git a/ui-parts/select/src/styles/appearance.css.ts b/ui-parts/select/src/styles/appearance.css.ts index 2cf5c4954..7abc3505b 100644 --- a/ui-parts/select/src/styles/appearance.css.ts +++ b/ui-parts/select/src/styles/appearance.css.ts @@ -1,48 +1,28 @@ -import type { SelectAppearance } from '../select.interfaces.js' -import type { SelectAppearanceName } from '../select.interfaces.js' +import type { SelectAppearance } from '../interfaces.js' +import type { SelectAppearanceName } from '../interfaces.js' import { style } from '@vanilla-extract/css' import { vars } from '@atls-ui-parts/theme' -const highlightedItemCustomAppearanceStyles = style({ - backgroundColor: vars.colors.blue, - color: vars.colors.white, -}) - -const itemCustomAppearanceStyles = style({ +const itemDefaultAppearanceStyles = style({ color: vars.colors.black, }) -const menuCustomAppearanceStyles = style({ +const menuDefaultAppearanceStyles = style({ border: '1px solid', - borderColor: vars.colors.blue, - backgroundColor: vars.colors.white, -}) - -const triggerCustomAppearanceStyles = style({ - border: '1px solid', - borderColor: vars.colors.blue, - backgroundColor: vars.colors.white, - color: vars.colors.black, + borderColor: vars.colors.black, }) export const appearanceVariant = { default: { highlightedItem: undefined, - item: undefined, - menu: undefined, + item: itemDefaultAppearanceStyles, + menu: menuDefaultAppearanceStyles, trigger: undefined, }, - custom: { - highlightedItem: highlightedItemCustomAppearanceStyles, - item: itemCustomAppearanceStyles, - menu: menuCustomAppearanceStyles, - trigger: triggerCustomAppearanceStyles, - }, } export const selectAppearances: Record = { - custom: appearanceVariant.custom, default: appearanceVariant.default, } diff --git a/ui-parts/select/src/styles/shape.css.ts b/ui-parts/select/src/styles/shape.css.ts index 8463f7e1a..018bb5c8c 100644 --- a/ui-parts/select/src/styles/shape.css.ts +++ b/ui-parts/select/src/styles/shape.css.ts @@ -1,34 +1,23 @@ -import type { SelectShape } from '../select.interfaces.js' -import type { SelectShapeName } from '../select.interfaces.js' +import type { SelectShape } from '../interfaces.js' +import type { SelectShapeName } from '../interfaces.js' import { style } from '@vanilla-extract/css' import { vars } from '@atls-ui-parts/theme' -const itemCustomShapeStyles = style({ - padding: `${vars.space.g8} ${vars.space.g16}`, -}) - -const menuCustomShapeStyles = style({ - borderRadius: vars.radii.f8, -}) +import { DEFAULT_MENU_WIDTH } from '../constants.js' -const triggerCustomShapeStyles = style({ - margin: `${vars.space.zero} ${vars.space.g10}`, - borderRadius: vars.radii.f8, +const menuDefaultShapeStyles = style({ + width: DEFAULT_MENU_WIDTH, + borderRadius: vars.radii.f4, }) export const shapeStyles = { default: { item: undefined, - menu: undefined, + menu: menuDefaultShapeStyles, trigger: undefined, }, - custom: { - item: itemCustomShapeStyles, - menu: menuCustomShapeStyles, - trigger: triggerCustomShapeStyles, - }, } export const selectShapes: Record = shapeStyles From 33fe23b0fbbd6c3ef83ee44c4a2cb22e8e84b1d6 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 9 Jun 2026 15:56:20 +0300 Subject: [PATCH 3/5] fix(select): storybook filename --- ui-parts/select/src/{stories.tsx => select.stories.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ui-parts/select/src/{stories.tsx => select.stories.tsx} (100%) diff --git a/ui-parts/select/src/stories.tsx b/ui-parts/select/src/select.stories.tsx similarity index 100% rename from ui-parts/select/src/stories.tsx rename to ui-parts/select/src/select.stories.tsx From 69ffe010f06a541cbaa267dc71526972ce189527 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 9 Jun 2026 19:56:15 +0300 Subject: [PATCH 4/5] refactor(select): border token --- ui-parts/select/src/styles/appearance.css.ts | 3 +-- ui-parts/theme/src/tokens/borders.ts | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-parts/select/src/styles/appearance.css.ts b/ui-parts/select/src/styles/appearance.css.ts index 7abc3505b..aa7ca396d 100644 --- a/ui-parts/select/src/styles/appearance.css.ts +++ b/ui-parts/select/src/styles/appearance.css.ts @@ -10,8 +10,7 @@ const itemDefaultAppearanceStyles = style({ }) const menuDefaultAppearanceStyles = style({ - border: '1px solid', - borderColor: vars.colors.black, + border: vars.borders.normalBlack, }) export const appearanceVariant = { diff --git a/ui-parts/theme/src/tokens/borders.ts b/ui-parts/theme/src/tokens/borders.ts index b75f97a04..9c43c82f9 100644 --- a/ui-parts/theme/src/tokens/borders.ts +++ b/ui-parts/theme/src/tokens/borders.ts @@ -5,6 +5,7 @@ export const borders = { thinLightGray: '0.5px solid rgba(228, 228, 228, 1)', normalGray: '1px solid rgba(114, 114, 114, 1)', + normalBlack: '1px solid rgba(0, 0, 0, 1)', normalSilver: '1px solid rgba(224, 224, 224, 1)', normalCloudyWhite: '1px solid rgba(228, 228, 228, 1)', normalBlue: '1px solid rgba(65, 109, 223, 1)', From 1bb15b351d7600c62bfe74de158973265bb0568a Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 9 Jun 2026 20:08:32 +0300 Subject: [PATCH 5/5] refactor(select): require appearance/shape props --- ui-parts/select/src/interfaces.ts | 14 +++++++------- ui-parts/select/src/styles/appearance.css.ts | 4 ++-- ui-parts/select/src/styles/shape.css.ts | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui-parts/select/src/interfaces.ts b/ui-parts/select/src/interfaces.ts index e604bca77..314e5c52a 100644 --- a/ui-parts/select/src/interfaces.ts +++ b/ui-parts/select/src/interfaces.ts @@ -2,18 +2,18 @@ import type { HTMLMotionProps } from 'framer-motion' import type { CSSProperties } from 'react' export interface SelectAppearance { - highlightedItem?: string - item?: string - menu?: string - trigger?: string + highlightedItem: string + item: string + menu: string + trigger: string } export type SelectAppearanceName = 'default' export interface SelectShape { - item?: string - menu?: string - trigger?: string + item: string + menu: string + trigger: string } export type SelectShapeName = 'default' diff --git a/ui-parts/select/src/styles/appearance.css.ts b/ui-parts/select/src/styles/appearance.css.ts index aa7ca396d..3472c4f47 100644 --- a/ui-parts/select/src/styles/appearance.css.ts +++ b/ui-parts/select/src/styles/appearance.css.ts @@ -15,10 +15,10 @@ const menuDefaultAppearanceStyles = style({ export const appearanceVariant = { default: { - highlightedItem: undefined, + highlightedItem: '', item: itemDefaultAppearanceStyles, menu: menuDefaultAppearanceStyles, - trigger: undefined, + trigger: '', }, } diff --git a/ui-parts/select/src/styles/shape.css.ts b/ui-parts/select/src/styles/shape.css.ts index 018bb5c8c..e41351adc 100644 --- a/ui-parts/select/src/styles/shape.css.ts +++ b/ui-parts/select/src/styles/shape.css.ts @@ -14,9 +14,9 @@ const menuDefaultShapeStyles = style({ export const shapeStyles = { default: { - item: undefined, + item: '', menu: menuDefaultShapeStyles, - trigger: undefined, + trigger: '', }, }