agroptima-design-system 0.31.11 → 0.31.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.31.11",
+  "version": "0.31.12",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/DatePicker/DatePicker.scss

@@ -49,6 +49,7 @@
     display: flex;
     justify-content: center;
     border-radius: config.$corner-radius-xxs;
+    background: color_alias.$neutral-white;
     z-index: depth.$z-dropdown-options;
     padding-left: config.$space-3x;
     width: 20rem;

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -25,6 +25,7 @@ export type DateRangePickerProps = {
   onSelect?: (date: DateRange) => void
   withInput?: boolean
   label?: string
+  name?: string
 }
 
 export type DateRange = {
@@ -40,6 +41,7 @@ export function DateRangePicker({
   required = false,
   variant,
   withInput = false,
+  name = 'date',
   label = 'Date',
 }: DateRangePickerProps): React.JSX.Element {
   const inputType = withInput ? 'text' : 'hidden'
@@ -75,7 +77,7 @@ export function DateRangePicker({
           datePickerIcon={isOpen ? 'AngleUp' : 'AngleDown'}
           value={`${formatDatePickerFooterDate(selected.from, lng as string)} - ${formatDatePickerFooterDate(selected.to, lng as string)}`}
           icon="Calendar"
-          name="date"
+          name={name}
           placeholder={translations[lng].rangePlaceholder}
           readOnly
         />

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -18,6 +18,7 @@ export type DateSinglePickerProps = {
   lng: Locale
   required?: boolean
   className?: string
+  name?: string
   defaultValue?: string
   onSelect?: (date: string) => void
   withInput?: boolean
@@ -29,6 +30,7 @@ export function DateSinglePicker({
   defaultValue,
   lng,
   className,
+  name = 'date',
   required = false,
   variant,
   withInput = false,
@@ -59,7 +61,7 @@ export function DateSinglePicker({
           datePickerIcon={isOpen ? 'AngleUp' : 'AngleDown'}
           value={formatDatePickerFooterDate(selected, lng as string)}
           icon="Calendar"
-          name="date"
+          name={name}
           placeholder={translations[lng].singlePlaceholder}
           readOnly
         />

package/src/atoms/Select.scss

@@ -2,6 +2,8 @@
 @use '../settings/typography/form' as typography;
 @use '../settings/config';
 @use '../settings/depth';
+@use '../settings/mixins';
+
 
 .select-group {
   display: flex;
@@ -62,14 +64,8 @@
         background: color_alias.$neutral-color-50;
         color: color_alias.$neutral-color-400;
 
-        > .icon {
-          > svg {
-            fill: color_alias.$neutral-color-400;
-            path {
-              fill: color_alias.$neutral-color-400;
-            }
-          }
-        }
+        @include mixins.icon-color(color_alias.$neutral-color-400);
+
       }
     }
 

package/src/atoms/Select.tsx

@@ -79,6 +79,7 @@ export function Select({
   }
 
   function handleClear(event: React.MouseEvent<HTMLButtonElement>) {
+    if (disabled) return
     event.stopPropagation()
     setSelectedOption(EMPTY_OPTION)
     onChange('')

package/src/stories/Changelog.mdx

@@ -4,6 +4,12 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.12
+
+* Fix background color in date picker calendar with input
+* Fix selector close button when is disabled
+* Add optional name to date picker input
+
 ## 0.31.11
 
 * On DateSinglePicker component, Input component shows the selected date with the optional property withInput.