agroptima-design-system 0.29.1 → 0.29.2-beta.0

package/package.json

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

package/src/atoms/Button/Button.scss

@@ -1,20 +1,13 @@
 @use '../../settings/color_alias';
 @use '../../settings/typography/content' as typography;
 @use '../../settings/config';
+@use '../../settings/mixins';
 
 @mixin button-style($main-color, $secondary-color, $hover-color) {
+  @include mixins.icon-color($secondary-color);
   background: $main-color;
   color: $secondary-color;
 
-  > .icon {
-    > svg {
-      fill: $secondary-color;
-      path {
-        fill: $secondary-color;
-      }
-    }
-  }
-
   &:not(:disabled):hover,
   &:not(:disabled):active {
     background: $hover-color;
@@ -39,10 +32,6 @@
     margin-top: 2px;
     width: config.$icon-size-3x;
     height: config.$icon-size-3x;
-    > svg {
-      width: 100%;
-      height: 100%;
-    }
   }
 
   &.primary {

package/src/atoms/Select.scss

@@ -2,6 +2,10 @@
 @use '../settings/typography/form' as typography;
 @use '../settings/config';
 @use '../settings/depth';
+@use '../settings/mixins';
+
+$selected-option-padding: config.$space-2x config.$space-3x;
+$selected-option-height: config.$space-10x;
 
 .select-group {
   display: flex;
@@ -34,15 +38,7 @@
       border: 1px solid color_alias.$neutral-color-600;
       background: color_alias.$neutral-white;
       @include typography.select-text;
-
-      > .icon {
-        > svg {
-          fill: color_alias.$primary-color-600;
-          path {
-            fill: color_alias.$primary-color-600;
-          }
-        }
-      }
+      @include mixins.icon-color(color_alias.$primary-color-600);
 
       &.filled {
         @include typography.select-option-text;
@@ -61,15 +57,7 @@
         border: 1px solid color_alias.$neutral-color-400;
         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);
       }
     }
 
@@ -117,6 +105,7 @@
   }
 
   .selected-option {
+    min-height: $selected-option-height;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -128,7 +117,7 @@
       height: config.$icon-size-3x;
     }
   }
-  
+
   .select-options {
     max-height: 256px;
     overflow-y: auto;
@@ -141,7 +130,7 @@
     width: 100%;
 
     .search {
-      margin: config.$space-2x config.$space-3x;
+      margin: $selected-option-padding;
     }
 
     ul {
@@ -149,13 +138,13 @@
       margin: 0;
       padding: 0;
     }
-    
+
     .option {
       display: flex;
       align-items: center;
       cursor: default;
       list-style-type: none;
-      padding: config.$space-2x config.$space-3x;
+      padding: $selected-option-padding;
 
       > .icon {
         width: config.$icon-size-4x;
@@ -163,5 +152,13 @@
         margin-right: config.$space-1x;
       }
     }
-  }  
+  }
+}
+
+.select-loader {
+  position: absolute;
+  padding: $selected-option-padding;
+  min-height: $selected-option-height;
+  display: flex;
+  align-items: center;
 }

package/src/atoms/Select.tsx

@@ -31,6 +31,7 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   required?: boolean
   isSearchable?: boolean
   searchLabel?: string
+  loading?: boolean
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -51,6 +52,7 @@ export function Select({
   defaultValue,
   required = false,
   isSearchable = false,
+  loading = false,
   searchLabel = 'Search',
   ...props
 }: SelectProps): React.JSX.Element {
@@ -62,6 +64,7 @@ export function Select({
   const isEmpty = selectedOption.id === EMPTY_OPTION.id
   const selectRef = useRef(null)
   useOutsideClick(selectRef, close)
+  const displayedValue = loading ? '' : selectedOption.label || placeholder
 
   const cssClasses = classNames('selected-option', {
     open: isOpen,
@@ -98,6 +101,11 @@ export function Select({
       )}
 
       <div className="select-container" ref={selectRef}>
+        {loading && (
+          <div className="select-loader">
+            <Icon name="Loading" />
+          </div>
+        )}
         <div
           className={cssClasses}
           tabIndex={0}
@@ -106,7 +114,7 @@ export function Select({
           aria-live="assertive"
           role="alert"
         >
-          <span>{selectedOption.label || placeholder}</span>
+          <span>{displayedValue}</span>
           <Icon name={isOpen ? 'AngleUp' : 'AngleDown'} visible={isEmpty} />
           <IconButton
             icon="Close"