Fix: [IGL-116] Added missing border on dropdown (#645)

.changeset/six-olives-perform.md

@@ -0,0 +1,11 @@
+---
+"@igloo-ui/action-menu": patch
+"@igloo-ui/color-picker": patch
+"@igloo-ui/combobox": patch
+"@igloo-ui/datepicker": patch
+"@igloo-ui/dropdown": patch
+"@igloo-ui/select": patch
+"@igloo-ui/tag-picker": patch
+---
+
+Added a border to the dropdown component and removed the outline from the date picker since it was no longer needed.

packages/Datepicker/src/datepicker.scss

@@ -12,7 +12,6 @@
   --ids-datepicker-cell-empty-border: calc(6 * .05rem);
 
   /* Default */
-  --ids-datepicker-outline: none;
   --ids-datepicker-font-family: #{tokens.$primary-font-family};
   --ids-datepicker-font-size: #{tokens.$font-size-4};
   --ids-datepicker-width: calc(var(--ids-datepicker-cell-number) * var(--ids-datepicker-cell-size) - var(--ids-datepicker-cell-border) - var(--ids-datepicker-cell-empty-border));
@@ -56,7 +55,6 @@
   --ids-datepicker-cell-number: 7;
 
   /* Default */
-  --ids-datepicker-outline: 1px solid var(--hop-neutral-border-weak);
   --ids-datepicker-font-family: var(--hop-body-sm-font-family);
   --ids-datepicker-font-size: var(--hop-body-sm-font-size);
   --ids-datepicker-width: calc(var(--ids-datepicker-cell-number) * var(--ids-datepicker-cell-size));
@@ -104,10 +102,6 @@
   font-size: var(--ids-datepicker-font-size);
   width: var(--ids-datepicker-width);
 
-  &__dropdown {
-    outline: var(--ids-datepicker-outline);
-  }
-
   &__header {
     display: flex;
     align-items: center;

packages/Dropdown/src/dropdown.scss

@@ -11,6 +11,7 @@
     --ids-dropdown-font-size: #{tokens.$font-size-4};
     --ids-dropdown-color: #{tokens.$grey-800};
     --ids-dropdown-background: #{tokens.$samoyed};
+    --ids-dropdown-border: none;
     --ids-dropdown-border-radius: #{tokens.$border-radius-sm};
     --ids-dropdown-zindex: #{tokens.$z-index-100};
     --ids-dropdown-box-shadow: #{tokens.$shadow-12};
@@ -36,6 +37,7 @@
     --ids-dropdown-font-size: var(--hop-body-sm-font-size);
     --ids-dropdown-color: var(--hop-neutral-text);
     --ids-dropdown-background: var(--hop-neutral-surface);
+    --ids-dropdown-border: 0.0625rem solid var(--hop-neutral-border-weak);
     --ids-dropdown-border-radius: var(--hop-shape-rounded-md);
     --ids-dropdown-box-shadow: var(--hop-elevation-lifted);
     --ids-dropdown-padding: 0;
@@ -57,6 +59,7 @@
     font-size: var(--ids-dropdown-font-size);
     color: var(--ids-dropdown-color);
     background-color: var(--ids-dropdown-background);
+    border: var(--ids-dropdown-border);
     border-radius: var(--ids-dropdown-border-radius);
     box-shadow: var(--ids-dropdown-box-shadow);
     z-index: var(--ids-dropdown-zindex);