Merge branch 'master' into 4479_disabled-link-button

packages/components/docs/sass.md

@@ -17237,6 +17237,24 @@ Dropdown styles
     }
   }
 
+  .#{$prefix}--dropdown--show-selected .#{$prefix}--dropdown--selected {
+    background-color: $hover-ui;
+    color: $text-01;
+    display: block;
+
+    &:hover {
+      background-color: $selected-ui;
+    }
+
+    .#{$prefix}--dropdown-link {
+      border-top-color: transparent;
+    }
+
+    + .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link {
+      border-top-color: transparent;
+    }
+  }
+
   // Skeleton State
   .#{$prefix}--dropdown-v2.#{$prefix}--skeleton,
   .#{$prefix}--dropdown.#{$prefix}--skeleton {

packages/components/src/components/dropdown/_dropdown.scss

@@ -123,6 +123,7 @@
   }
 
   button.#{$prefix}--dropdown-text {
+    color: $text-01;
     // button-reset mixin contradicts with bx--dropdown-text styles
     background: none;
     border: none;
@@ -350,6 +351,24 @@
     }
   }
 
+  .#{$prefix}--dropdown--show-selected .#{$prefix}--dropdown--selected {
+    background-color: $hover-ui;
+    color: $text-01;
+    display: block;
+
+    &:hover {
+      background-color: $selected-ui;
+    }
+
+    .#{$prefix}--dropdown-link {
+      border-top-color: transparent;
+    }
+
+    + .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link {
+      border-top-color: transparent;
+    }
+  }
+
   // Skeleton State
   .#{$prefix}--dropdown-v2.#{$prefix}--skeleton,
   .#{$prefix}--dropdown.#{$prefix}--skeleton {

packages/components/src/components/dropdown/dropdown.hbs

@@ -121,3 +121,28 @@
     {{/unless}}
   </div>
 </div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--dropdown__wrapper {{#if inline}}{{@root.prefix}}--dropdown__wrapper--inline{{/if}}">
+    <span id="{{default.idSuffix}}-label" class="{{@root.prefix}}--label">Dropdown label</span>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text.</div>
+    {{/unless}}
+    <div data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value
+      class="{{@root.prefix}}--dropdown  {{@root.prefix}}--dropdown--show-selected {{#if up}}{{@root.prefix}}--dropdown--up{{/if}} {{#if light}}{{@root.prefix}}--dropdown--light{{/if}} {{#if inline}}{{@root.prefix}}--dropdown--inline{{/if}}">
+      <button class="{{@root.prefix}}--dropdown-text" aria-haspopup="true" aria-expanded="false" aria-controls="{{default.idSuffix}}-menu" aria-labelledby="{{default.idSuffix}}-label {{default.idSuffix}}-value" type="button">
+        <span class="{{@root.prefix}}--dropdown-text__inner" id="{{default.idSuffix}}-value">{{#unless inline}} Dropdown option {{else}}Inline Dropdown label{{/unless}}</span>
+        <span class="{{@root.prefix}}--dropdown__arrow-container">
+          {{ carbon-icon 'ChevronDown16' class=(add @root.prefix '--dropdown__arrow') }}
+        </span>
+      </button>
+      <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="0" id="{{default.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{default.idSuffix}}-label">
+        {{#each items as |item index|}}
+        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
+          <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
+        </li>
+        {{/each}}
+      </ul>
+    </div>
+  </div>
+</div>

packages/components/src/components/dropdown/dropdown.js

@@ -162,8 +162,9 @@ class Dropdown extends mixin(
         (listNode || this.element).focus();
         if (listNode) {
           const selectedNode = listNode.querySelector(
-            this.options.selectorItemSelected
+            this.options.selectorLinkSelected
           );
+
           listNode.setAttribute(
             'aria-activedescendant',
             (selectedNode || listItems[0]).id
@@ -239,7 +240,7 @@ class Dropdown extends mixin(
     );
     const start =
       this.getCurrentNavigation() ||
-      this.element.querySelector(this.options.selectorItemSelected);
+      this.element.querySelector(this.options.selectorLinkSelected);
     const getNextItem = old => {
       const handleUnderflow = (i, l) => i + (i >= 0 ? 0 : l);
       const handleOverflow = (i, l) => i - (i < l ? 0 : l);
@@ -249,6 +250,9 @@ class Dropdown extends mixin(
         handleUnderflow(handleOverflow(index, items.length), items.length)
       ];
     };
+    const isShowSelected = this.element.classList.contains(
+      this.options.classShowSelected
+    );
     for (
       let current = getNextItem(start);
       current && current !== start;
@@ -257,7 +261,9 @@ class Dropdown extends mixin(
       if (
         !current.matches(this.options.selectorItemHidden) &&
         !current.parentNode.matches(this.options.selectorItemHidden) &&
-        !current.matches(this.options.selectorItemSelected)
+        (isShowSelected ||
+          (!isShowSelected &&
+            !current.parentElement.matches(this.options.selectorItemSelected)))
       ) {
         // Using the latest semantic markup structure where trigger is a button
         // @todo remove conditional once legacy structure is depreciated
@@ -304,15 +310,15 @@ class Dropdown extends mixin(
         if (text) {
           text.innerHTML = itemToSelect.innerHTML;
         }
-        itemToSelect.classList.add(this.options.classSelected);
+        itemToSelect.parentElement.classList.add(this.options.classSelected);
       }
       this.element.dataset.value = itemToSelect.parentElement.dataset.value;
 
       toArray(
-        this.element.querySelectorAll(this.options.selectorItemSelected)
+        this.element.querySelectorAll(this.options.selectorLinkSelected)
       ).forEach(item => {
         if (itemToSelect !== item) {
-          item.classList.remove(this.options.classSelected);
+          item.parentElement.classList.remove(this.options.classSelected);
         }
       });
 
@@ -357,6 +363,8 @@ class Dropdown extends mixin(
    *   Used to skip dropdown items for keyboard navigation.
    * @property {string} [selectorItemSelected] The CSS selector to find the clickable area in the selected dropdown item.
    * @property {string} [selectorItemFocused] The CSS selector to find the clickable area in the focused dropdown item.
+   * @property {string} [selectorLinkSelected] The CSS selector to target the link node of the selected dropdown item.
+   * @property {string} [classShowSelected] The CSS class for the show selected modifier of the dropdown.
    * @property {string} [classSelected] The CSS class for the selected dropdown item.
    * @property {string} [classFocused] The CSS class for the focused dropdown item.
    * @property {string} [classOpen] The CSS class for the open state.
@@ -378,6 +386,8 @@ class Dropdown extends mixin(
       selectorItemSelected: `.${prefix}--dropdown--selected`,
       selectorItemFocused: `.${prefix}--dropdown--focused`,
       selectorItemHidden: `[hidden],[aria-hidden="true"]`,
+      selectorLinkSelected: `.${prefix}--dropdown--selected .${prefix}--dropdown-link`,
+      classShowSelected: `${prefix}--dropdown--show-selected`,
       classSelected: `${prefix}--dropdown--selected`,
       classFocused: `${prefix}--dropdown--focused`,
       classOpen: `${prefix}--dropdown--open`,

packages/components/src/components/notification/_inline-notification.scss

@@ -25,7 +25,6 @@
     @include reset;
 
     display: flex;
-    justify-content: space-between;
     position: relative;
     height: auto;
     min-height: rem(48px);
@@ -139,6 +138,7 @@
 
   .#{$prefix}--inline-notification__details {
     display: flex;
+    flex-grow: 1;
     margin: 0 $carbon--spacing-05;
   }
 
@@ -200,8 +200,6 @@
       background-color $duration--fast-02 motion(standard, productive);
 
     .#{$prefix}--inline-notification__close-icon {
-      height: 1rem;
-      width: 1rem;
       fill: $inverse-01;
     }
   }

packages/components/src/components/notification/_toast-notification.scss

@@ -102,7 +102,7 @@
   .#{$prefix}--toast-notification__icon {
     flex-shrink: 0;
     margin-right: $carbon--spacing-05;
-    margin-top: $carbon--spacing-05;
+    margin-top: $carbon--spacing-04;
   }
 
   .#{$prefix}--toast-notification__details {
@@ -127,8 +127,6 @@
     }
 
     .#{$prefix}--toast-notification__close-icon {
-      height: 1rem;
-      width: 1rem;
       fill: $inverse-01;
     }
   }
@@ -141,9 +139,8 @@
 
   .#{$prefix}--toast-notification__title {
     @include type-style('productive-heading-01');
-
     font-weight: 600;
-    margin-top: 1rem;
+    margin-top: $carbon--spacing-04;
     word-break: break-word;
   }
 

packages/components/src/components/notification/notification.hbs

@@ -47,7 +47,7 @@
       <button tabindex="0" class="{{@root.prefix}}--inline-notification__action-button {{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--ghost" type="button">Action</button>
     {{/is}}
     <button data-notification-btn class="{{@root.prefix}}--{{../variant}}-notification__close-button" type="button" aria-label="close">
-      {{ carbon-icon 'Close16' class=(add @root.prefix (add '--' (add ../variant '-notification__close-icon'))) }}
+      {{ carbon-icon 'Close20' class=(add @root.prefix (add '--' (add ../variant '-notification__close-icon'))) }}
     </button>
   </div>
 {{/each}}