From 6ac16b475de748ab8912f19eef390078cada20dc Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Fri, 22 Nov 2019 14:22:00 +0900
Subject: [PATCH 1/5] feat(list-box): update selection style

Fixes #3988.
---
 .../src/components/dropdown/_dropdown.scss           |  5 +++++
 .../components/src/components/dropdown/dropdown.hbs  |  1 +
 .../src/components/list-box/_list-box.scss           | 12 ++++++++++++
 .../components/src/components/list-box/list-box.hbs  |  3 ++-
 packages/react/src/components/ComboBox/ComboBox.js   |  7 ++++++-
 packages/react/src/components/Dropdown/Dropdown.js   |  7 ++++++-
 6 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
index e6583772c477..016145e9d85b 100644
--- a/packages/components/src/components/dropdown/_dropdown.scss
+++ b/packages/components/src/components/dropdown/_dropdown.scss
@@ -178,6 +178,7 @@
       background-color $duration--fast-01 motion(standard, productive);
     opacity: 0;
     visibility: inherit;
+    position: relative;
 
     &:hover {
       background-color: $hover-ui;
@@ -396,6 +397,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 85a1100893ec..33dc5fb407be 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -545,6 +545,18 @@ $list-box-menu-width: rem(300px);
     color: $text-01;
   }
 
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    display: none;
+    position: absolute;
+    top: rem(12px);
+    right: rem(16px);
+  }
+
+  .#{$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 71489505681a..32badbc22da2 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';
@@ -388,6 +388,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 715c465d785d..4cd31159d4d1 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';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
@@ -293,6 +293,11 @@ export default class Dropdown extends React.Component {
                       ) : (
                         itemToString(item)
                       )}
+                      {selectedItem === item && (
+                        <Checkmark16
+                          className={`${prefix}--list-box__menu-item__selected-icon`}
+                        />
+                      )}
                     </ListBox.MenuItem>
                   ))}
                 </ListBox.Menu>

From 385b573083fdcc59eea0ebf200952fd4257a0266 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Fri, 22 Nov 2019 22:10:45 +0900
Subject: [PATCH 2/5] fix(list-box): update selected icon position

---
 packages/components/src/components/list-box/_list-box.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 33dc5fb407be..a55c2efc7f82 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -548,8 +548,9 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__menu-item__selected-icon {
     display: none;
     position: absolute;
-    top: rem(12px);
+    top: 50%;
     right: rem(16px);
+    transform: translateY(-50%);
   }
 
   .#{$prefix}--list-box__menu-item--active

From 6a9caf2e76630063cf83e9f4e44e37f5786d4b7b Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Mon, 25 Nov 2019 18:08:37 +0900
Subject: [PATCH 3/5] fix(list-box): address design review comments

---
 .../src/components/combo-box/_combo-box.scss        |  2 ++
 .../src/components/list-box/_list-box.scss          | 13 +++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss
index ae7689221269..b4a69393f6cf 100644
--- a/packages/components/src/components/combo-box/_combo-box.scss
+++ b/packages/components/src/components/combo-box/_combo-box.scss
@@ -35,6 +35,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/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index a55c2efc7f82..1be654b191b3 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -543,6 +543,7 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__menu-item--active
     .#{$prefix}--list-box__menu-item__option {
     color: $text-01;
+    margin-right: rem(48px);
   }
 
   .#{$prefix}--list-box__menu-item__selected-icon {
@@ -551,6 +552,18 @@ $list-box-menu-width: rem(300px);
     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--inline
+    .#{$prefix}--list-box__menu-item--active
+    .#{$prefix}--list-box__menu-item__option {
+    margin-right: rem(40px);
   }
 
   .#{$prefix}--list-box__menu-item--active

From d4e0adeb1148db907cb0530b2e88525a89457980 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 27 Nov 2019 16:12:13 +0900
Subject: [PATCH 4/5] fix(list-box): fix active color and margin

---
 .../src/components/list-box/_list-box.scss       | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 1be654b191b3..aa5565ff5269 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -471,7 +471,7 @@ $list-box-menu-width: rem(300px);
     font-weight: normal;
     line-height: rem(16px);
     padding: rem(11px) 0;
-    margin: 0 $carbon--spacing-05;
+    margin: 0 rem(48px) 0 $carbon--spacing-05;
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
     border-top-color: $ui-03;
@@ -503,7 +503,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;
@@ -533,17 +533,13 @@ $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
     .#{$prefix}--list-box__menu-item__option {
     color: $text-01;
-    margin-right: rem(48px);
   }
 
   .#{$prefix}--list-box__menu-item__selected-icon {
@@ -560,12 +556,6 @@ $list-box-menu-width: rem(300px);
     right: rem(8px);
   }
 
-  .#{$prefix}--list-box--inline
-    .#{$prefix}--list-box__menu-item--active
-    .#{$prefix}--list-box__menu-item__option {
-    margin-right: rem(40px);
-  }
-
   .#{$prefix}--list-box__menu-item--active
     .#{$prefix}--list-box__menu-item__selected-icon {
     display: block;

From 4f715c9edec5eee821768de9ff6e69ab160f199c Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 15 Jan 2020 15:21:31 +0900
Subject: [PATCH 5/5] fix(list-box): fix item border style

---
 packages/components/src/components/list-box/_list-box.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index aa5565ff5269..586c5a761ad3 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -471,7 +471,8 @@ $list-box-menu-width: rem(300px);
     font-weight: normal;
     line-height: rem(16px);
     padding: rem(11px) 0;
-    margin: 0 rem(48px) 0 $carbon--spacing-05;
+    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;