diff --git a/.changeset/select-content-props-align-end.md b/.changeset/select-content-props-align-end.md new file mode 100644 index 00000000..24ee823a --- /dev/null +++ b/.changeset/select-content-props-align-end.md @@ -0,0 +1,7 @@ +--- +"@lambdacurry/forms": patch +--- + +Add contentProps to UI Select to pass through PopoverPrimitive.Content positioning props (align/side/sideOffset). +Defaults preserved (align='start', sideOffset=4). New Storybook example and play test demonstrate overriding align to 'end' for right-aligned triggers. + diff --git a/apps/docs/package.json b/apps/docs/package.json index b25ae921..3f902f53 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -2,13 +2,13 @@ "name": "@lambdacurry/forms-docs", "version": "0.2.0", "scripts": { - "dev": "storybook dev -p 6006", - "build": "storybook build", - "build-storybook": "storybook build", - "storybook": "storybook dev -p 6006", - "serve": "http-server ./storybook-static -p 6006 -s", - "test": "start-server-and-test serve http://127.0.0.1:6006 'test-storybook --url http://127.0.0.1:6006'", - "test:local": "test-storybook", + "dev": "../../node_modules/.bin/storybook dev -p 6006", + "build": "../../node_modules/.bin/storybook build", + "build-storybook": "../../node_modules/.bin/storybook build", + "storybook": "../../node_modules/.bin/storybook dev -p 6006", + "serve": "../../node_modules/.bin/http-server ./storybook-static -p 6006 -s", + "test": "../../node_modules/.bin/start-server-and-test serve http://127.0.0.1:6006 '../../node_modules/.bin/test-storybook --url http://127.0.0.1:6006'", + "test:local": "../../node_modules/.bin/test-storybook", "type-check": "tsc -p tsconfig.json --noEmit" }, "dependencies": { diff --git a/apps/docs/src/ui/select-alignment.stories.tsx b/apps/docs/src/ui/select-alignment.stories.tsx new file mode 100644 index 00000000..96ec2a54 --- /dev/null +++ b/apps/docs/src/ui/select-alignment.stories.tsx @@ -0,0 +1,86 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { expect, userEvent, within } from '@storybook/test'; +import { useState } from 'react'; +import { Select, type SelectOption } from '@lambdacurry/forms/ui/select'; + +const meta: Meta = { + title: 'UI/Select/Alignment', + component: Select, + parameters: { layout: 'centered' }, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const OPTIONS: SelectOption[] = [ + { label: 'Alabama', value: 'AL' }, + { label: 'Alaska', value: 'AK' }, + { label: 'Arizona', value: 'AZ' }, + { label: 'Arkansas', value: 'AR' }, + { label: 'California', value: 'CA' }, +]; + +export const RightAlignedWithEndContent: Story = { + name: 'Right-aligned trigger with content align="end"', + args: {}, + render: () => { + const [value, setValue] = useState(''); + + return ( +
+
+
+