chore[DST-69]: added width as style prop from tailwind (#3233)

* added style prop from tailwind * add new type to components * save * save mdx files * tests * test
marigold-ui · Jul 28, 2023 · 5942d94 · 5942d94 · vercel · Jul 28, 2023
1 parent 7b7348f
commit 5942d94
Show file tree

Hide file tree

Showing 34 changed files with 162 additions and 102 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,7 +6,6 @@ import { BlankCanvas } from './icons';
 export interface PropsTableProps {
   props?: { [key: string]: string }[];
 }
-
 export const PropsTable = ({ props }: PropsTableProps) => {
   return (
     <Card px={3} py={4}>

diff --git 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
@@ -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}
     >
       <div role="presentation" className={'flex flex-col items-start'}>

diff --git 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
@@ -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
@@ -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
@@ -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 (
     <FieldBase
       error={error}
@@ -103,6 +104,7 @@ export const DateField = ({
       stateProps={stateProps}
       variant={variant}
       size={size}
+      width={width}
     >
       <div
         {...mergeProps(fieldProps, focusProps, stateProps, hoverProps)}

diff --git a/packages/components/src/FieldBase/FieldBase.test.tsx b/packages/components/src/FieldBase/FieldBase.test.tsx
@@ -174,21 +174,5 @@ test('takes full width by default', () => {
 
   // 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(
-    <FieldBase label="Label" description="Description" width="60px">
-      <input type="text" />
-    </FieldBase>
-  );
-
-  // 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
@@ -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<HTMLLabelElement> & Pick<LabelProps, 'as'>;
@@ -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 (
     <div
       {...props}
       {...stateProps}
-      className={cn('group/field', classNames)}
-      style={createVar({ fieldWidth: width })}
+      className={cn('group/field', twWidth[width], classNames)}
     >
       {label && (
         <Label