@elliemae/ds-basic 2.0.0-alpha.3 → 2.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-basic",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.7",
   "license": "MIT",
   "description": "EllieMae UI Design System Library",
   "module": "./esm/index.js",
@@ -289,63 +289,63 @@
     "copy:scss": "gulp copy-fonts copy-styles copy-packages-scss && gulp copy-dist-index-scss",
     "compile:scss": "node-sass ./styles/dimsum.scss ./dist/css/dimsum.css",
     "prebuild:css": "yarn run copy:scss && yarn run compile:scss",
-    "build:css": "postcss ./dist/css/dimsum.css -u autoprefixer -b \">= 0.5% in US and last 2 major versions, not samsung > 0, Firefox ESR, not dead\" -r --no-map && postcss ./dist/css/dimsum.css -m -u cssnano -o ./dist/css/dimsum.min.css",
+    "build:css": "postcss ./dist/css/dimsum.css -u autoprefixer -b \"> 0.5% in US, not ie 11, not dead\" -r --no-map && postcss ./dist/css/dimsum.css -m -u cssnano -o ./dist/css/dimsum.min.css",
     "scss:dev": "yarn scss:compile -- --watch",
     "prebuild": "exit 0",
     "build": "node ../../scripts/build/build.js && yarn build:css",
     "dev": "node ../../scripts/build/build.js -w"
   },
   "dependencies": {
-    "@elliemae/ds-accordion": "2.0.0-alpha.3",
-    "@elliemae/ds-app-picker": "2.0.0-alpha.3",
-    "@elliemae/ds-backdrop": "2.0.0-alpha.3",
-    "@elliemae/ds-breadcrumb": "2.0.0-alpha.3",
-    "@elliemae/ds-button": "2.0.0-alpha.3",
-    "@elliemae/ds-button-group": "2.0.0-alpha.3",
-    "@elliemae/ds-card": "2.0.0-alpha.3",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-alpha.3",
-    "@elliemae/ds-classnames": "2.0.0-alpha.3",
-    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.3",
-    "@elliemae/ds-form": "2.0.0-alpha.3",
-    "@elliemae/ds-grid": "2.0.0-alpha.3",
-    "@elliemae/ds-group-box": "2.0.0-alpha.3",
-    "@elliemae/ds-header": "2.0.0-alpha.3",
-    "@elliemae/ds-hidden": "2.0.0-alpha.3",
-    "@elliemae/ds-icon": "2.0.0-alpha.3",
-    "@elliemae/ds-icons": "2.0.0-alpha.3",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-alpha.3",
-    "@elliemae/ds-label-value": "2.0.0-alpha.3",
-    "@elliemae/ds-list-section-header": "2.0.0-alpha.3",
-    "@elliemae/ds-loading-indicator": "2.0.0-alpha.3",
-    "@elliemae/ds-menu": "2.0.0-alpha.3",
-    "@elliemae/ds-mobile": "2.0.0-alpha.3",
-    "@elliemae/ds-overlay": "2.0.0-alpha.3",
-    "@elliemae/ds-page-header": "2.0.0-alpha.3",
-    "@elliemae/ds-page-number": "2.0.0-alpha.3",
-    "@elliemae/ds-pills": "2.0.0-alpha.3",
-    "@elliemae/ds-popover": "2.0.0-alpha.3",
-    "@elliemae/ds-popper": "2.0.0-alpha.3",
-    "@elliemae/ds-portal": "2.0.0-alpha.3",
-    "@elliemae/ds-progress-indicator": "2.0.0-alpha.3",
-    "@elliemae/ds-read-more": "2.0.0-alpha.3",
-    "@elliemae/ds-resizeable-container": "2.0.0-alpha.3",
-    "@elliemae/ds-separator": "2.0.0-alpha.3",
-    "@elliemae/ds-shared": "2.0.0-alpha.3",
-    "@elliemae/ds-side-panel": "2.0.0-alpha.3",
-    "@elliemae/ds-slider": "2.0.0-alpha.3",
-    "@elliemae/ds-spinner": "2.0.0-alpha.3",
-    "@elliemae/ds-system": "2.0.0-alpha.3",
-    "@elliemae/ds-tabs": "2.0.0-alpha.3",
-    "@elliemae/ds-text-wrapper": "2.0.0-alpha.3",
-    "@elliemae/ds-time-picker": "2.0.0-alpha.3",
-    "@elliemae/ds-toast": "2.0.0-alpha.3",
-    "@elliemae/ds-toolbar": "2.0.0-alpha.3",
-    "@elliemae/ds-tooltip": "2.0.0-alpha.3",
-    "@elliemae/ds-truncated-expandable-text": "2.0.0-alpha.3",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.3",
-    "@elliemae/ds-utilities": "2.0.0-alpha.3",
-    "@elliemae/ds-zipcode-search": "2.0.0-alpha.3",
-    "@elliemae/ds-zoom": "2.0.0-alpha.3",
+    "@elliemae/ds-accordion": "2.0.0-alpha.7",
+    "@elliemae/ds-app-picker": "2.0.0-alpha.7",
+    "@elliemae/ds-backdrop": "2.0.0-alpha.7",
+    "@elliemae/ds-breadcrumb": "2.0.0-alpha.7",
+    "@elliemae/ds-button": "2.0.0-alpha.7",
+    "@elliemae/ds-button-group": "2.0.0-alpha.7",
+    "@elliemae/ds-card": "2.0.0-alpha.7",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-alpha.7",
+    "@elliemae/ds-classnames": "2.0.0-alpha.7",
+    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.7",
+    "@elliemae/ds-form": "2.0.0-alpha.7",
+    "@elliemae/ds-grid": "2.0.0-alpha.7",
+    "@elliemae/ds-group-box": "2.0.0-alpha.7",
+    "@elliemae/ds-header": "2.0.0-alpha.7",
+    "@elliemae/ds-hidden": "2.0.0-alpha.7",
+    "@elliemae/ds-icon": "2.0.0-alpha.7",
+    "@elliemae/ds-icons": "2.0.0-alpha.7",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-alpha.7",
+    "@elliemae/ds-label-value": "2.0.0-alpha.7",
+    "@elliemae/ds-list-section-header": "2.0.0-alpha.7",
+    "@elliemae/ds-loading-indicator": "2.0.0-alpha.7",
+    "@elliemae/ds-menu": "2.0.0-alpha.7",
+    "@elliemae/ds-mobile": "2.0.0-alpha.7",
+    "@elliemae/ds-overlay": "2.0.0-alpha.7",
+    "@elliemae/ds-page-header": "2.0.0-alpha.7",
+    "@elliemae/ds-page-number": "2.0.0-alpha.7",
+    "@elliemae/ds-pills": "2.0.0-alpha.7",
+    "@elliemae/ds-popover": "2.0.0-alpha.7",
+    "@elliemae/ds-popper": "2.0.0-alpha.7",
+    "@elliemae/ds-portal": "2.0.0-alpha.7",
+    "@elliemae/ds-progress-indicator": "2.0.0-alpha.7",
+    "@elliemae/ds-read-more": "2.0.0-alpha.7",
+    "@elliemae/ds-resizeable-container": "2.0.0-alpha.7",
+    "@elliemae/ds-separator": "2.0.0-alpha.7",
+    "@elliemae/ds-shared": "2.0.0-alpha.7",
+    "@elliemae/ds-side-panel": "2.0.0-alpha.7",
+    "@elliemae/ds-slider": "2.0.0-alpha.7",
+    "@elliemae/ds-spinner": "2.0.0-alpha.7",
+    "@elliemae/ds-system": "2.0.0-alpha.7",
+    "@elliemae/ds-tabs": "2.0.0-alpha.7",
+    "@elliemae/ds-text-wrapper": "2.0.0-alpha.7",
+    "@elliemae/ds-time-picker": "2.0.0-alpha.7",
+    "@elliemae/ds-toast": "2.0.0-alpha.7",
+    "@elliemae/ds-toolbar": "2.0.0-alpha.7",
+    "@elliemae/ds-tooltip": "2.0.0-alpha.7",
+    "@elliemae/ds-truncated-expandable-text": "2.0.0-alpha.7",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.7",
+    "@elliemae/ds-utilities": "2.0.0-alpha.7",
+    "@elliemae/ds-zipcode-search": "2.0.0-alpha.7",
+    "@elliemae/ds-zoom": "2.0.0-alpha.7",
     "react-dates": "~18.5.0"
   },
   "peerDependencies": {

package/styles/components/packages/ds-app-picker/DSAppPicker.scss

@@ -12,10 +12,13 @@ $arrow: #{$app-picker}__arrow;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  width: 100%;
+  min-width: 244px;
+  max-height: 449px;
+  overflow-y: scroll;
+  padding-top: 4px;
   padding-bottom: 4px;
   margin: 0 auto;
+ 
   &:focus {
     outline: none;
   }
@@ -43,57 +46,92 @@ $arrow: #{$app-picker}__arrow;
 }
 
 .#{$title} {
-  color: color('neutral', 500);
-  font-size: size(m);
+  color: color('neutral', 700);
+  font-size: font-size(200);
   font-weight: bold;
-  margin: 12px 0 4px;
+  margin: 8px 0 4px 0;
+  line-height: 1;
+  text-transform: uppercase;
 }
 
 .#{$chip} {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   border-radius: 2%;
+  padding: 8px 0 4px 0;
   margin: 4px;
-  padding: 6px;
   height: 68px;
   width: 68px;
-  color: color('neutral', 500);
+  line-height: 1px;
+  background-color: #fff;
+  color: color('brand-primary', 600);
   cursor: pointer;
-  &:focus,
+  border: 2px solid transparent;
+
   &:hover {
-    @include dsFocus();
-    color: color('neutral', 700);
-    background-color: color('neutral', 000);
-  }
-  &:hover .app-picker__icon {
-    fill: color('brand-primary', 800);
+    color: color('brand-primary', 800);
+    background-color: color('brand-primary', 200);
+    .app-picker__icon {
+      fill: color('brand-primary', 800);
+    }
   }
-  &:active {
-    @include dsActive();
-    box-shadow: none;
-    background-color: #ecf8ff;
+
+  &:focus {
+    outline: none;
+    border: 2px solid color('brand-primary', 800);
   }
+
   &--disabled {
     color: color('neutral', 500);
     cursor: not-allowed;
+
+    .app-picker__icon {
+      fill: color('neutral', 500);
+    }
+   
     &:focus,
-    &:active,
     &:hover {
-      background-color: #fcfcfc;
-      color: color('neutral', 500);
-      border: 1px solid color('neutral', 500);
-      outline: none;
-      outline-offset: none;
-      box-shadow: none;
+      background-color: #fff;
+      cursor: not-allowed;
+      border: 2px solid transparent;
+
+      .#{$chip-label} {
+        color: color('neutral', 500);
+      }
     }
+    
     &:hover .app-picker__icon {
       fill: color('neutral', 500);
     }
   }
-  &--disabled .app-picker__icon {
-    fill: color('neutral', 500);
+
+  &--selected {
+    color: color('brand-primary', 800);
+    background-color: color('brand-primary', 200);
+    position: relative;
+
+    .app-picker__icon {
+      fill: color('brand-primary', 800);
+    }
+
+    &:focus {
+      border: 2px solid transparent;
+      &::after {
+        border: 2px solid color('brand-primary', 800);
+      }
+    }
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: -2px;
+      left: -2px;
+      width: calc(100% + 4px);
+      height: calc(100% + 4px);
+      border: 1px solid color('brand-primary', 600);
+      border-radius: 2px;
+    }
   }
 }
 
@@ -108,14 +146,17 @@ $arrow: #{$app-picker}__arrow;
 }
 
 .#{$chip-label} {
-  font-size: 12px;
+  font-size: font-size(200);
   font-weight: 600;
-  margin: 5px;
+  word-wrap: break-word;
+  margin: 4px 0;
+  line-height: 12px;
+  text-overflow: ellipsis;
 }
 
 .#{$separator} {
   border-top: 1px solid color('neutral', 100);
   border-bottom: none;
   width: 99%;
-  margin: 0;
+  margin-bottom: 0;
 }

package/styles/components/packages/ds-form/Radio/DSRadio.scss

@@ -16,7 +16,9 @@ $el-children: #{$el-container}__radio-children;
 // ********************************************
 // local
 $border-type: solid 1px;
+$border-type-focus: solid 2px;
 $border-type-mobile: solid 2px;
+$border-type-focus-mobile: solid 3px;
 
 .#{$el-input} {
   position: absolute;
@@ -47,21 +49,6 @@ $border-type-mobile: solid 2px;
   align-items: center;
   align-self: flex-start;
   position: relative;
-  cursor: pointer;
-
-  &:after {
-    @include border-radius(50%);
-    transition: duration(base) easing(base);
-    width: space(xs);
-    height: space(xs);
-  }
-  &:hover {
-    @include dsFocus();
-    border: $border-type color(brand-primary, 600);
-  }
-  &:focus {
-    @include dsFocus();
-  }
 }
 
 .#{$el-label} {
@@ -81,60 +68,43 @@ $border-type-mobile: solid 2px;
   width: fit-content;
   padding-bottom: space(s);
   circle.unchecked {
-    fill: color(neutral, 0);
+    fill: color(neutral, 000);
   }
 
   .#{$el-label} {
     &:hover {
       .#{$el-button} {
-        border: $border-type color(brand-primary, 600);
-      }
-      .#{$el-input} {
-        &:checked + .#{$el-button} {
-          @include dsFocus();
-          background-color: color(neutral, 000);
-        }
-      }
-    }
-    &:active {
-      .#{$el-button} {
-        @include dsFocus();
+        border-color: color(brand-primary, 600);
         background-color: color(brand-primary, 200);
       }
       circle.unchecked {
         fill: color(brand-primary, 200);
       }
     }
-    &:focus {
-      .#{$el-button} {
-        background-color: color(brand-primary, 200);
+    .#{$el-button} {
+      &:focus {
+        box-shadow: none;
       }
-      .#{$el-input} {
-        &:checked + .#{$el-button} {
-          @include dsFocus();
+
+      &:focus:not(:active) {
+        border: $border-type-focus color(brand-primary, 700);
+      }
+
+      &:active {
           background-color: color(neutral, 000);
+        circle.unchecked {
+          fill: color(neutral, 000);
         }
       }
-      circle.unchecked {
-        fill: color(brand-primary, 200);
-      }
     }
   }
 
   .#{$el-input} {
     &:checked + .#{$el-button} {
-      border-color: color(neutral, 400);
       circle.checked {
         fill: color(brand-primary, 600);
       }
     }
-
-    &:checked + &:hover,
-    &:checked + &:focus {
-      border-color: color(brand-primary, 600);
-      background-color: color(neutral, 000);
-      @include dsFocus();
-    }
   }
 }
 
@@ -142,32 +112,27 @@ $border-type-mobile: solid 2px;
 // Error container & elements             *****
 .#{$el-container-error} {
   .#{$el-button} {
-    border: $border-type color(danger, 900);
-    &:focus {
-      border-color: color(brand-primary, 600);
-    }
+    border-color: color(danger, 900);
   }
 
   .#{$el-label} {
     &:hover {
-      .#{$el-button} {
-        border: $border-type color(danger, 900);
+      .#{$el-button}:not(:focus) {
+        border-color: color(danger, 900);
       }
     }
     &:active {
       .#{$el-button} {
-        background-color: color(danger, 200);
-        box-shadow: unset;
+        border-color: color(danger, 900);;
       }
       circle.unchecked {
-        fill: color(danger, 200);
+        fill: color(neutral, 080);
       }
     }
   }
 
   .#{$el-input} {
     &:checked + .#{$el-button} {
-      border-color: color(danger, 900);
       circle.checked {
         fill: color(danger, 900);
       }
@@ -181,27 +146,35 @@ $border-type-mobile: solid 2px;
   circle.checked {
     fill: color(neutral, 400);
   }
+  circle.unchecked {
+    fill: color(neutral, 080);
+  }
 
   .#{$el-label} {
     cursor: not-allowed;
     &:hover {
       .#{$el-button} {
         border-color: color(neutral, 400);
+        background-color: color(neutral, 080);
       }
-      .#{$el-input} {
-        &:checked + .#{$el-button} {
-          background-color: color(neutral, 080);
-        }
+      circle.unchecked {
+        fill: color(neutral, 080);
       }
     }
     &:active {
       .#{$el-button} {
-        background: color(neutral, 080);
+        background-color: color(neutral, 080);
       }
       circle.unchecked {
         fill: color(neutral, 080);
       }
     }
+
+    .#{$el-input} {
+      &:checked + .#{$el-button} {
+        background-color: color(neutral, 080);
+      }
+    }
   }
 
   .#{$el-text} {
@@ -210,45 +183,25 @@ $border-type-mobile: solid 2px;
 
   .#{$el-button} {
     pointer-events: none;
-    border-color: color(neutral, 400);
     background: color(neutral, 080);
-    circle.unchecked {
-      fill: transparent;
-    }
     &:hover {
       border-color: color(neutral, 400);
     }
   }
-
-  .#{$el-input} {
-    background-color: color(neutral, 080);
-    &:checked + .#{$el-button} {
-      border-color: color(neutral, 500);
-      circle.checked {
-        fill: color(neutral, 500);
-      }
-    }
-
-    &:checked + .#{$el-text} {
-      color: color(neutral, 500);
-    }
-  }
 }
 
 // ********************************************
 // Read only container & elements         *****
 .#{$el-container-read-only} {
-  .#{$el-button} {
-    border-color: color(neutral, 400);
-    &:focus {
-      border-color: color(brand-primary, 600);
-      @include dsFocus();
+  .#{$el-label} {
+    &:hover {
+      .#{$el-button} {
+        border-color:  color(neutral, 400);
+      }
     }
   }
-
   .#{$el-input} {
     &:checked + .#{$el-button} {
-      border-color: color(neutral, 500);
       circle.checked {
         fill: color(neutral, 500);
       }
@@ -264,11 +217,18 @@ $border-type-mobile: solid 2px;
   .#{$el-container} {
     padding-bottom: calc(#{space(m)} * 0.4);
     -webkit-tap-highlight-color: transparent;
-  }
-  .#{$el-label} {
-    padding: calc(#{space(xxs)} * 0.81) 0;
-  }
 
+    .#{$el-label} {
+      padding: calc(#{space(xxs)} * 0.81) 0;
+      .#{$el-button} {
+        border: $border-type-mobile color(neutral, 400);
+        &:focus {
+          border: $border-type-focus-mobile color(brand-primary, 700);
+        }
+      }
+    }
+  }
+  
   .#{$el-button} {
     width: calc(#{space(s)} * 1.22);
     min-width: calc(#{space(s)} * 1.22);
@@ -282,8 +242,4 @@ $border-type-mobile: solid 2px;
       border: $border-type-mobile color(danger, 900);
     }
   }
-
-  .#{$el-button} svg circle {
-    r: 6;
-  }
 }

package/styles/components/packages/ds-page-header/v2/components/PageHeaderToolbar/PageHeaderToolbar.scss

@@ -12,7 +12,6 @@ $ph-input-search: #{$prefix}-input-addon-wrapper;
     height: auto;
     background: none;
     & > div {
-      align-items: center;
       .#{$ph-btn} {
         margin-left: space(m) * 0.5;
       }