diff --git a/docs/content/components/form/autocomplete/autocomplete.mdx b/docs/content/components/form/autocomplete/autocomplete.mdx index a2fcf99ce6..cb743c9fd5 100644 --- a/docs/content/components/form/autocomplete/autocomplete.mdx +++ b/docs/content/components/form/autocomplete/autocomplete.mdx @@ -95,9 +95,9 @@ import { Autocomplete } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the `width` of the field.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'menuTrigger', diff --git a/docs/content/components/form/checkbox/checkbox.mdx b/docs/content/components/form/checkbox/checkbox.mdx index e1824a9822..ef84ed12c8 100644 --- a/docs/content/components/form/checkbox/checkbox.mdx +++ b/docs/content/components/form/checkbox/checkbox.mdx @@ -37,9 +37,9 @@ import { Checkbox, CheckboxGroup } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the width of the field.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'defaultChecked', diff --git a/docs/content/components/form/combobox/combobox.mdx b/docs/content/components/form/combobox/combobox.mdx index b2d2d5c913..3f1c0d415b 100644 --- a/docs/content/components/form/combobox/combobox.mdx +++ b/docs/content/components/form/combobox/combobox.mdx @@ -91,9 +91,9 @@ import { ComboBox } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the `width` of the field.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'menuTrigger', diff --git a/docs/content/components/form/datefield/datefield.mdx b/docs/content/components/form/datefield/datefield.mdx index caeafd5a34..07770d34ce 100644 --- a/docs/content/components/form/datefield/datefield.mdx +++ b/docs/content/components/form/datefield/datefield.mdx @@ -86,9 +86,9 @@ import { DateField } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the width of the field.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, ]} /> diff --git a/docs/content/components/form/number-field/number-field.mdx b/docs/content/components/form/number-field/number-field.mdx index 4e0013908b..af7828e740 100644 --- a/docs/content/components/form/number-field/number-field.mdx +++ b/docs/content/components/form/number-field/number-field.mdx @@ -89,9 +89,9 @@ import { NumberField } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the width of the field.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'minValue', diff --git a/docs/content/components/form/radio/radio.mdx b/docs/content/components/form/radio/radio.mdx index ea7dd1dc2c..d5dcd68048 100644 --- a/docs/content/components/form/radio/radio.mdx +++ b/docs/content/components/form/radio/radio.mdx @@ -37,9 +37,9 @@ import { Radio } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the width of the field', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'disabled', diff --git a/docs/content/components/form/search-field/search-field.mdx b/docs/content/components/form/search-field/search-field.mdx index 515c9d1e67..ed51545f86 100644 --- a/docs/content/components/form/search-field/search-field.mdx +++ b/docs/content/components/form/search-field/search-field.mdx @@ -107,9 +107,9 @@ import { SearchField } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the `width` of the field.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, ]} /> diff --git a/docs/content/components/form/select/select.mdx b/docs/content/components/form/select/select.mdx index 3f69f5e235..8a48245728 100644 --- a/docs/content/components/form/select/select.mdx +++ b/docs/content/components/form/select/select.mdx @@ -78,9 +78,9 @@ import { Select } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Set the width of the select.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'onChange', diff --git a/docs/content/components/form/slider/slider.mdx b/docs/content/components/form/slider/slider.mdx index 60cba89fb5..987cad6daf 100644 --- a/docs/content/components/form/slider/slider.mdx +++ b/docs/content/components/form/slider/slider.mdx @@ -60,9 +60,9 @@ import { Slider } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the width of the field', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: '...', diff --git a/docs/content/components/form/switch/switch.mdx b/docs/content/components/form/switch/switch.mdx index 4e184b6fe5..f3d660d37d 100644 --- a/docs/content/components/form/switch/switch.mdx +++ b/docs/content/components/form/switch/switch.mdx @@ -39,9 +39,9 @@ import { Switch } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the width of the field.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'defaultSelected', diff --git a/docs/content/components/form/tag/tag.mdx b/docs/content/components/form/tag/tag.mdx index 51ed2cbc5f..71f66daaac 100644 --- a/docs/content/components/form/tag/tag.mdx +++ b/docs/content/components/form/tag/tag.mdx @@ -46,9 +46,9 @@ import { Tag } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Set the width of the select.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'allowsRemoving', diff --git a/docs/content/components/form/text-area/text-area.mdx b/docs/content/components/form/text-area/text-area.mdx index 31fb86ee18..f788eb7b1f 100644 --- a/docs/content/components/form/text-area/text-area.mdx +++ b/docs/content/components/form/text-area/text-area.mdx @@ -82,9 +82,9 @@ import { TextArea } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Sets the width of the textarea.', - default: 'none', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: 'rows', diff --git a/docs/content/components/form/textfield/textfield.mdx b/docs/content/components/form/textfield/textfield.mdx index c73bc58439..0625b38edb 100644 --- a/docs/content/components/form/textfield/textfield.mdx +++ b/docs/content/components/form/textfield/textfield.mdx @@ -89,9 +89,9 @@ import { TextField } from '@marigold/components'; }, { property: 'width', - type: 'string', - description: 'Control the `width` of the field.', - default: '100%', + type: 'string | number', + description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width `, + default: 'full', }, { property: '...', diff --git a/docs/ui/PropsTable.tsx b/docs/ui/PropsTable.tsx index 90a4f4d6dc..e60e90eb7d 100644 --- a/docs/ui/PropsTable.tsx +++ b/docs/ui/PropsTable.tsx @@ -6,7 +6,6 @@ import { BlankCanvas } from './icons'; export interface PropsTableProps { props?: { [key: string]: string }[]; } - export const PropsTable = ({ props }: PropsTableProps) => { return ( diff --git a/packages/components/src/Autocomplete/Autocomplete.tsx b/packages/components/src/Autocomplete/Autocomplete.tsx index d6b954ba32..8c638b943a 100644 --- a/packages/components/src/Autocomplete/Autocomplete.tsx +++ b/packages/components/src/Autocomplete/Autocomplete.tsx @@ -12,6 +12,7 @@ import { ListBox } from '../ListBox'; import { Popover } from '../Overlay'; import { ClearButton } from './ClearButton'; +import { WidthProp } from '@marigold/system'; // Search Icon //---------------- @@ -64,7 +65,7 @@ export interface AutocompleteProps onSubmit?: (key: Key | null, value: string | null) => void; variant?: string; size?: string; - width?: string; + width?: WidthProp['width']; } export const Autocomplete = ({ diff --git a/packages/components/src/Checkbox/CheckboxGroup.tsx b/packages/components/src/Checkbox/CheckboxGroup.tsx index f2be740116..af5f2baa26 100644 --- a/packages/components/src/Checkbox/CheckboxGroup.tsx +++ b/packages/components/src/Checkbox/CheckboxGroup.tsx @@ -5,7 +5,7 @@ import { useCheckboxGroupState, } from '@react-stately/checkbox'; import { AriaCheckboxGroupProps } from '@react-types/checkbox'; -import { useStateProps } from '@marigold/system'; +import { useStateProps, WidthProp } from '@marigold/system'; import { HtmlProps } from '@marigold/types'; import { FieldBase } from '../FieldBase'; @@ -40,6 +40,7 @@ export interface CheckboxGroupProps value?: string[]; defaultValue?: string[]; onChange?: (value: string[]) => void; + width?: WidthProp['width']; } // Components @@ -50,6 +51,7 @@ export const CheckboxGroup = ({ disabled, readOnly, error, + width, ...rest }: CheckboxGroupProps) => { const props = { @@ -81,6 +83,7 @@ export const CheckboxGroup = ({ errorMessageProps={errorMessageProps} disabled={disabled} stateProps={stateProps} + width={width} {...groupProps} >
diff --git a/packages/components/src/ComboBox/ComboBox.test.tsx b/packages/components/src/ComboBox/ComboBox.test.tsx index b9533a3ab6..63384fcce3 100644 --- a/packages/components/src/ComboBox/ComboBox.test.tsx +++ b/packages/components/src/ComboBox/ComboBox.test.tsx @@ -81,9 +81,7 @@ test('supports width classname', () => { // eslint-disable-next-line testing-library/no-node-access const container = screen.getByText('Label').parentElement; - expect(container?.className).toMatchInlineSnapshot( - `"group/field w-[--fieldWidth]"` - ); + expect(container?.className).toMatchInlineSnapshot(`"group/field w-full"`); }); test('supports classnames', () => { @@ -108,9 +106,7 @@ test('supports classnames', () => { expect(button.className).toMatchInlineSnapshot( `"inline-flex items-center justify-center gap-[0.5ch] absolute right-2 h-4 w-4 border-none bg-transparent p-0"` ); - expect(container?.className).toMatchInlineSnapshot( - `"group/field w-[--fieldWidth]"` - ); + expect(container?.className).toMatchInlineSnapshot(`"group/field w-full"`); expect(label.className).toMatchInlineSnapshot( `"text-teal-300 flex w-[var(--labelWidth)]"` ); diff --git a/packages/components/src/ComboBox/ComboBox.tsx b/packages/components/src/ComboBox/ComboBox.tsx index 6ea61bd461..5cb1fec9d6 100644 --- a/packages/components/src/ComboBox/ComboBox.tsx +++ b/packages/components/src/ComboBox/ComboBox.tsx @@ -12,6 +12,7 @@ import { Input } from '../Input'; import { Button } from '../Button'; import { Item } from '@react-stately/collections'; +import { WidthProp } from '@marigold/system'; export interface ComboBoxProps extends Omit< @@ -26,7 +27,7 @@ export interface ComboBoxProps variant?: string; size?: string; error?: boolean; - width?: string; + width?: WidthProp['width']; disabled?: boolean; required?: boolean; readOnly?: boolean; diff --git a/packages/components/src/DateField/DateField.stories.tsx b/packages/components/src/DateField/DateField.stories.tsx index a2a34bdfb2..7f5e87762c 100644 --- a/packages/components/src/DateField/DateField.stories.tsx +++ b/packages/components/src/DateField/DateField.stories.tsx @@ -48,6 +48,15 @@ const meta = { defaultValue: { summary: 'Something went wrong' }, }, }, + width: { + control: { + type: 'text', + }, + description: 'Width of the field', + table: { + type: { summary: 'string' }, + }, + }, required: { control: { type: 'boolean', diff --git a/packages/components/src/DateField/DateField.tsx b/packages/components/src/DateField/DateField.tsx index 4fbcf24f20..f8636f2533 100644 --- a/packages/components/src/DateField/DateField.tsx +++ b/packages/components/src/DateField/DateField.tsx @@ -3,7 +3,7 @@ import { useLocale } from '@react-aria/i18n'; import { useDateFieldState } from '@react-stately/datepicker'; import { AriaDateFieldProps, useDateField } from '@react-aria/datepicker'; import { createCalendar, DateValue } from '@internationalized/date'; -import { cn, useClassNames, useStateProps } from '@marigold/system'; +import { WidthProp, cn, useClassNames, useStateProps } from '@marigold/system'; import { DateSegment } from './DateSegment'; import { FieldBase } from '../FieldBase'; import { mergeProps } from '@react-aria/utils'; @@ -31,6 +31,7 @@ export interface DateFieldProps required?: boolean; variant?: string; size?: string; + width?: WidthProp['width']; } // Component @@ -47,6 +48,7 @@ export const DateField = ({ action, isPressed, triggerRef, + width, ...res }: DateFieldProps) => { const { locale } = useLocale(); @@ -89,7 +91,6 @@ export const DateField = ({ focus: isFocused || isPressed, }); - console.log(readOnly); return (
{ // eslint-disable-next-line testing-library/no-node-access const container = screen.getByText('Label').parentElement!; - expect(container.getAttribute('style')).toMatchInlineSnapshot( - `"--fieldWidth: 100%;"` - ); -}); - -test('allows to set custom width', () => { - render( - - - - ); - - // eslint-disable-next-line testing-library/no-node-access - const container = screen.getByText('Label').parentElement!; - expect(container.getAttribute('style')).toMatchInlineSnapshot( - `"--fieldWidth: 60px;"` - ); + expect(container.className).toMatchInlineSnapshot(`"group/field w-full"`); }); diff --git a/packages/components/src/FieldBase/FieldBase.tsx b/packages/components/src/FieldBase/FieldBase.tsx index f7c984c757..26b8550ab5 100644 --- a/packages/components/src/FieldBase/FieldBase.tsx +++ b/packages/components/src/FieldBase/FieldBase.tsx @@ -1,15 +1,20 @@ import React, { HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react'; -import { StateAttrProps, cn, createVar, useClassNames } from '@marigold/system'; +import { + StateAttrProps, + WidthProp, + cn, + useClassNames, + width as twWidth, +} from '@marigold/system'; import { Label, LabelProps } from '../Label'; import { HelpText } from '../HelpText'; import { useFieldGroupContext } from './FieldGroup'; -export interface FieldBaseProps { +export interface FieldBaseProps extends WidthProp { children?: ReactNode; variant?: string; size?: string; - width?: string; disabled?: boolean; label?: ReactNode; labelProps?: LabelHTMLAttributes & Pick; @@ -27,7 +32,7 @@ export const FieldBase = ({ children, variant, size, - width = '100%', + width = 'full', disabled, label, labelProps, @@ -46,15 +51,13 @@ export const FieldBase = ({ component: 'Field', variant, size, - className: 'w-[--fieldWidth]', }); return (
{label && (