From 9e6335fdf90bf0bcc1f1d351d66731c3e8c0cd35 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Thu, 16 Jan 2020 08:04:57 +0900
Subject: [PATCH] feat(list-box): update selection style (#4753)

Fixes #3988.
---
 .../src/components/combo-box/_combo-box.scss  |  2 ++
 .../src/components/dropdown/_dropdown.scss    |  5 ++++
 .../src/components/dropdown/dropdown.hbs      |  1 +
 .../src/components/list-box/_list-box.scss    | 27 +++++++++++++++----
 .../src/components/list-box/list-box.hbs      |  3 ++-
 .../react/src/components/ComboBox/ComboBox.js |  7 ++++-
 .../react/src/components/Dropdown/Dropdown.js |  7 ++++-
 7 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss
index 880a87c3a675..8e7000eb0ec7 100644
--- a/packages/components/src/components/combo-box/_combo-box.scss
+++ b/packages/components/src/components/combo-box/_combo-box.scss
@@ -34,6 +34,8 @@
 
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field {
     padding: 0;
   }
diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
index dc1c9cb864d2..10168aa81243 100644
--- a/packages/components/src/components/dropdown/_dropdown.scss
+++ b/packages/components/src/components/dropdown/_dropdown.scss
@@ -193,6 +193,7 @@
       background-color $duration--fast-01 motion(standard, productive);
     opacity: 0;
     visibility: inherit;
+    position: relative;
 
     &:hover {
       background-color: $hover-ui;
@@ -411,6 +412,10 @@
     + .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link {
       border-top-color: transparent;
     }
+
+    .#{$prefix}--list-box__menu-item__selected-icon {
+      display: block;
+    }
   }
 
   // Skeleton State
diff --git a/packages/components/src/components/dropdown/dropdown.hbs b/packages/components/src/components/dropdown/dropdown.hbs
index 4aaae77f29e2..71a7c4b29177 100644
--- a/packages/components/src/components/dropdown/dropdown.hbs
+++ b/packages/components/src/components/dropdown/dropdown.hbs
@@ -140,6 +140,7 @@
         {{#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>
+          {{ carbon-icon 'Checkmark16' class=(add @root.prefix '--list-box__menu-item__selected-icon') aria-hidden="true" }}
         </li>
         {{/each}}
       </ul>
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 44b446cfda6c..c36822d8461a 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -485,6 +485,7 @@ $list-box-menu-width: rem(300px);
     line-height: rem(16px);
     padding: rem(11px) 0;
     margin: 0 $carbon--spacing-05;
+    padding-right: rem(32px); // 40px - `$carbon--spacing-05`
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
     border-top-color: $ui-03;
@@ -516,7 +517,7 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__menu-item__option {
-    margin: 0 $carbon--spacing-03;
+    margin: 0 rem(32px) 0 $carbon--spacing-03;
 
     &:focus {
       margin: 0;
@@ -546,11 +547,8 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item--active {
     color: $text-01;
+    background-color: $selected-ui;
     border-bottom-color: $selected-ui;
-
-    &:hover {
-      background-color: $selected-ui;
-    }
   }
 
   .#{$prefix}--list-box__menu-item--active
@@ -558,6 +556,25 @@ $list-box-menu-width: rem(300px);
     color: $text-01;
   }
 
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: rem(16px);
+    transform: translateY(-50%);
+    fill: $icon-01;
+  }
+
+  .#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-item__selected-icon {
+    right: rem(8px);
+  }
+
+  .#{$prefix}--list-box__menu-item--active
+    .#{$prefix}--list-box__menu-item__selected-icon {
+    display: block;
+  }
+
   .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
     width: 100%;
   }
diff --git a/packages/components/src/components/list-box/list-box.hbs b/packages/components/src/components/list-box/list-box.hbs
index 87a53ea0fe5d..cc731fe80849 100644
--- a/packages/components/src/components/list-box/list-box.hbs
+++ b/packages/components/src/components/list-box/list-box.hbs
@@ -114,10 +114,11 @@
       <ul class="{{@root.prefix}}--list-box__menu" role="combobox">
         {{#each items}}
         <li
-          class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
+          class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--active {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
           id="{{id}}">
           <div class="{{@root.prefix}}--list-box__menu-item__option" tabindex="0">
             {{label}}
+            {{ carbon-icon 'Checkmark16' class=(add @root.prefix '--list-box__menu-item__selected-icon') aria-hidden="true" }}
           </div>
         </li>
         {{/each}}
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 0c75d7947953..32b9a4a4d105 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -10,7 +10,7 @@ import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { settings } from 'carbon-components';
-import { WarningFilled16 } from '@carbon/icons-react';
+import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
@@ -407,6 +407,11 @@ export default class ComboBox extends React.Component {
                         ) : (
                           itemToString(item)
                         )}
+                        {selectedItem === item && (
+                          <Checkmark16
+                            className={`${prefix}--list-box__menu-item__selected-icon`}
+                          />
+                        )}
                       </ListBox.MenuItem>
                     );
                   }
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 21aeb9a9ee36..4aa16198ef79 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -10,7 +10,7 @@ import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { settings } from 'carbon-components';
-import { WarningFilled16 } from '@carbon/icons-react';
+import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
 
@@ -306,6 +306,11 @@ export default class Dropdown extends React.Component {
                           ) : (
                             itemToString(item)
                           )}
+                          {selectedItem === item && (
+                            <Checkmark16
+                              className={`${prefix}--list-box__menu-item__selected-icon`}
+                            />
+                          )}
                         </ListBox.MenuItem>
                       );
                     })}