agroptima-design-system 0.34.4 → 0.34.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.34.4",
+  "version": "0.34.6-beta.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Button/Button.tsx

@@ -13,6 +13,7 @@ interface CustomProps {
   variant?: ButtonVariant
   loading?: boolean
   disabled?: boolean
+  fullWidth?: boolean
 }
 
 export type ButtonProps = CustomProps & BaseButtonProps
@@ -43,13 +44,16 @@ export function Button({
   leftIcon,
   rightIcon,
   disabled,
+  className,
   variant = 'primary',
   loading = false,
-  className,
+  fullWidth = false,
   ...props
 }: ButtonProps) {
   const leftIconName = loading ? 'Loading' : leftIcon
-  const cssClasses = classNames(className, 'button', variant)
+  const cssClasses = classNames(className, 'button', variant, {
+    'full-width': fullWidth,
+  })
 
   return (
     <BaseButton

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -29,6 +29,7 @@ export type DateRangePickerProps = {
   name?: string
   helpText?: string
   errors?: string[]
+  fullWidth?: boolean
 }
 
 export type DateRange = {
@@ -48,10 +49,12 @@ export function DateRangePicker({
   label = 'Date',
   errors,
   helpText,
+  fullWidth = false,
 }: DateRangePickerProps): JSX.Element {
   const cssClasses = classNames('date-picker', variant, className, {
     toggle: withInput,
     invalid: errors?.length,
+    'full-width': fullWidth,
   })
   const helpTexts = buildHelpText(helpText, errors)
 

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -28,6 +28,7 @@ export type DateSinglePickerProps = {
   label?: string
   helpText?: string
   errors?: string[]
+  fullWidth?: boolean
 }
 
 export function DateSinglePicker({
@@ -42,6 +43,7 @@ export function DateSinglePicker({
   label = 'Date',
   errors,
   helpText,
+  fullWidth = false,
 }: DateSinglePickerProps): JSX.Element {
   const { isOpen, close, toggle } = useOpen(!withInput)
   const pickerRef = useRef(null)
@@ -51,6 +53,7 @@ export function DateSinglePicker({
   const cssClasses = classNames('date-picker', variant, className, {
     toggle: withInput,
     invalid: errors?.length,
+    'full-width': fullWidth,
   })
 
   const [selected, setSelected] = useState<Date | undefined>(

package/src/atoms/Input.tsx

@@ -20,6 +20,7 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   suffix?: string
   errors?: string[]
   rightIcon?: IconType
+  fullWidth?: boolean
 }
 
 export function Input({
@@ -37,6 +38,7 @@ export function Input({
   id,
   errors,
   rightIcon,
+  fullWidth = false,
   ...props
 }: InputProps): React.JSX.Element {
   const identifier = id || name
@@ -62,6 +64,7 @@ export function Input({
         file: type === 'file',
         invalid: errors?.length,
         hidden: type === 'hidden',
+        'full-width': fullWidth,
       })}
     >
       {!hideLabel && (

package/src/atoms/Multiselect.tsx

@@ -30,6 +30,7 @@ export interface MultiselectProps extends InputPropsWithoutOnChange {
   onChange?: (value: string[]) => void
   isSearchable?: boolean
   searchLabel?: string
+  fullWidth?: boolean
 }
 
 export function Multiselect({
@@ -50,6 +51,7 @@ export function Multiselect({
   defaultValue = [],
   isSearchable = false,
   searchLabel = 'Search',
+  fullWidth = false,
   ...props
 }: MultiselectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
@@ -81,6 +83,7 @@ export function Multiselect({
         disabled,
         filled: hasSelectedOptions,
         invalid: isInvalid,
+        'full-width': fullWidth,
       })}
       ref={selectRef}
     >

package/src/atoms/QuantitySelector.tsx

@@ -14,6 +14,7 @@ export interface QuantitySelectorProps extends Omit<InputProps, 'type'> {
   hideLabel?: boolean
   id?: string
   variant?: Variant
+  fullWidth?: boolean
 }
 
 export function QuantitySelector({
@@ -24,6 +25,7 @@ export function QuantitySelector({
   disabled,
   hideLabel = false,
   variant = 'primary',
+  fullWidth = false,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -41,7 +43,11 @@ export function QuantitySelector({
     }
   }
   return (
-    <div className={classNames('quantity-selector-group', variant, className)}>
+    <div
+      className={classNames('quantity-selector-group', variant, className, {
+        'full-width': fullWidth,
+      })}
+    >
       {!hideLabel && (
         <Label required={props.required} htmlFor={id}>
           {label}

package/src/atoms/Select/Select.scss

@@ -4,11 +4,15 @@
 @use '../../settings/depth';
 @use '../../settings/mixins';
 
+$elements-space: config.$space-2x;
 
 .select-group {
   display: flex;
   flex-direction: column;
-  gap: config.$space-2x;
+
+  label {
+    margin-bottom: $elements-space;
+  }
 
   .select {
     @include typography.select-text;
@@ -31,6 +35,9 @@
     height: config.$icon-size-3x;
   }
 
+  .help-text {
+    margin-top: $elements-space;
+  }
 
   &.primary {
     &.disabled .select-container {
@@ -120,7 +127,7 @@
       overflow-y: auto;
       overflow-anchor: none;
       z-index: depth.$z-dropdown-options;
-      margin: 0;
+      margin: $elements-space 0 0;
       padding: config.$space-1x 0;
       text-align: left;
       position: absolute;

package/src/atoms/Select/Select.tsx

@@ -29,6 +29,7 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   onChange?: (value: string) => void
   isSearchable?: boolean
   searchLabel?: string
+  fullWidth?: boolean
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -50,6 +51,7 @@ export function Select({
   defaultValue,
   isSearchable = false,
   searchLabel = 'Search',
+  fullWidth = false,
   ...props
 }: SelectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
@@ -79,6 +81,7 @@ export function Select({
         disabled,
         filled: selectedOption.id,
         invalid: isInvalid,
+        'full-width': fullWidth,
       })}
       ref={selectRef}
     >

package/src/atoms/TextArea.tsx

@@ -15,6 +15,7 @@ export interface TextAreaProps
   variant?: TextAreaVariant
   id?: string
   errors?: string[]
+  fullWidth?: boolean
 }
 
 export function TextArea({
@@ -28,6 +29,7 @@ export function TextArea({
   disabled,
   name,
   errors,
+  fullWidth = false,
   ...props
 }: TextAreaProps) {
   const identifier = id || name
@@ -35,6 +37,7 @@ export function TextArea({
     <div
       className={classNames('input-group', variant, className, {
         invalid: errors?.length,
+        'full-width': fullWidth,
       })}
     >
       {!hideLabel && (

package/src/stories/Button.stories.ts

@@ -50,6 +50,10 @@ const meta = {
       description: 'Is the button visible?',
       control: { type: 'boolean' },
     },
+    fullWidth: {
+      description: 'Makes the Button take the full width of the container',
+      type: 'boolean',
+    },
   },
 }
 

package/src/stories/Changelog.mdx

@@ -4,14 +4,20 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.34.4
+## 0.34.6
+
+* Add fullWidth prop to Select, Button, Input, MultiSelect, TextArea, QuantitySelector, DateRangePicker, DateSinglePicker components
+* Fix extra space when open Select and MultiSelect components
 
-* Update DatePicker related stories with a defaultValue
 
 ## 0.33.4
 
 * Add hasAction and onClick props to Divider component
 
+## 0.34.3
+
+* Update DatePicker related stories with a defaultValue
+
 ## 0.33.1
 
 * Add onChange prop to RadioGroup component

package/src/stories/DateRangePicker.stories.ts

@@ -49,6 +49,11 @@ const meta = {
         default: 'Date',
       },
     },
+    fullWidth: {
+      description:
+        'Makes the DateRangePicker take the full width of the container',
+      type: 'boolean',
+    },
   },
 }
 

package/src/stories/DateSinglePicker.stories.ts

@@ -49,6 +49,11 @@ const meta = {
         default: 'Date',
       },
     },
+    fullWidth: {
+      description:
+        'Makes the DateSinglePicker take the full width of the container',
+      type: 'boolean',
+    },
   },
 }
 

package/src/stories/Input.stories.ts

@@ -60,6 +60,10 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
+    fullWidth: {
+      description: 'Makes the input take the full width of the container',
+      type: 'boolean',
+    },
   },
 }
 

package/src/stories/Multiselect.stories.ts

@@ -59,6 +59,10 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
+    fullWidth: {
+      description: 'Makes the Multiselect take the full width of the container',
+      type: 'boolean',
+    },
   },
 }
 

package/src/stories/QuantitySelector.stories.ts

@@ -48,6 +48,11 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
+    fullWidth: {
+      description:
+        'Makes the QuantitySelector take the full width of the container',
+      type: 'boolean',
+    },
   },
 }
 

package/src/stories/Select.stories.ts

@@ -59,6 +59,10 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
+    fullWidth: {
+      description: 'Makes the Select take the full width of the container',
+      type: 'boolean',
+    },
   },
 }
 

package/src/stories/TextArea.stories.ts

@@ -47,6 +47,10 @@ const meta = {
       description:
         'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
     },
+    fullWidth: {
+      description: 'Makes the TextArea take the full width of the container',
+      type: 'boolean',
+    },
   },
 }