feat(typeahead): position checkmark to right of lable

pluralsight · Dec 16, 2019 · 97f0f3d · 97f0f3d
1 parent 9ed1266
commit 97f0f3d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/typeahead/src/css/index.js b/packages/typeahead/src/css/index.js
@@ -49,9 +49,13 @@ export default {
       outline: 'none'
     }
   },
+  '.psds-typeahead__menu__item__label': {
+    flexGrow: 1,
+    marginRight: 'auto'
+  },
   '.psds-typeahead__menu__item__icon': {
     color: 'transparent',
-    marginRight: core.layout.spacingXSmall
+    marginLeft: core.layout.spacingXSmall
   },
   '.psds-typeahead__menu__item__icon--selected': {
     color: core.colors.blue

diff --git a/packages/typeahead/src/react/menu.js b/packages/typeahead/src/react/menu.js
@@ -10,6 +10,7 @@ import stylesheet from '../css/index.js'
 const styles = {
   menu: () => css(stylesheet['.psds-typeahead__menu']),
   menuItem: () => css(stylesheet['.psds-typeahead__menu__item']),
+  menuItemLabel: () => css(stylesheet['.psds-typeahead__menu__item__label']),
   menuItemIcon: ({ selected }) =>
     compose(
       css(stylesheet['.psds-typeahead__menu__item__icon']),
@@ -59,9 +60,8 @@ SuggestionsMenu.propTypes = {
 function MenuItem({ children, selected, value, ...rest }) {
   return (
     <button {...rest} {...styles.menuItem()}>
+      <span {...styles.menuItemLabel()}>{children}</span>
       <CheckIcon {...styles.menuItemIcon({ selected })} />
-
-      {children}
     </button>
   )
 }