From 63f199cfde526d34284c7dc17b7a46b13988fd3d Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Thu, 7 Feb 2019 18:25:02 +0100
Subject: [PATCH 1/8] feat(dropdown): inline prop

---
 .../Types/DropdownExampleInline.shorthand.tsx | 38 +++++++++++++
 .../components/Dropdown/Types/index.tsx       |  5 ++
 .../src/components/Dropdown/Dropdown.tsx      | 12 +++-
 .../Dropdown/DropdownSearchInput.tsx          |  3 +
 .../Dropdown/dropdownSearchInputStyles.ts     |  8 ++-
 .../components/Dropdown/dropdownStyles.ts     | 55 ++++++++++++++-----
 .../components/Dropdown/dropdownVariables.ts  |  2 +-
 7 files changed, 102 insertions(+), 21 deletions(-)
 create mode 100644 docs/src/examples/components/Dropdown/Types/DropdownExampleInline.shorthand.tsx

diff --git a/docs/src/examples/components/Dropdown/Types/DropdownExampleInline.shorthand.tsx b/docs/src/examples/components/Dropdown/Types/DropdownExampleInline.shorthand.tsx
new file mode 100644
index 0000000000..a44fe80a85
--- /dev/null
+++ b/docs/src/examples/components/Dropdown/Types/DropdownExampleInline.shorthand.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Dropdown, Header } from '@stardust-ui/react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+const DropdownExample = () => (
+  <>
+    <Header as="h3">Inline:</Header>
+    <div>
+      Some text inline with the{' '}
+      <Dropdown inline items={inputItems} placeholder="Select your hero" /> and more text.
+    </div>
+    <Header as="h3">Inline Search:</Header>
+    <span>
+      Some other text inline with the{' '}
+      <Dropdown
+        inline
+        search
+        items={inputItems}
+        noResultsMessage="We couldn't find any matches."
+        placeholder="Start typing a name"
+      />{' '}
+      and more text.
+    </span>
+  </>
+)
+
+export default DropdownExample
diff --git a/docs/src/examples/components/Dropdown/Types/index.tsx b/docs/src/examples/components/Dropdown/Types/index.tsx
index a730a3bd47..aa2d168534 100644
--- a/docs/src/examples/components/Dropdown/Types/index.tsx
+++ b/docs/src/examples/components/Dropdown/Types/index.tsx
@@ -19,6 +19,11 @@ const Types = () => (
       description="A dropdown can be searchable."
       examplePath="components/Dropdown/Types/DropdownExampleSearch"
     />
+    <ComponentExample
+      title="Inline"
+      description="A dropdown can be used inline with text."
+      examplePath="components/Dropdown/Types/DropdownExampleInline"
+    />
   </ExampleSection>
 )
 
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 3482d89b44..4028d1735d 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -76,6 +76,9 @@ export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownS
    */
   getA11yStatusMessage?: (options: DownshiftA11yStatusMessageOptions<ShorthandValue>) => string
 
+  /** A dropdown can be formatted to appear inline in the content of other components. */
+  inline?: boolean
+
   /** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.SelectedItem[]), if it's a multiple selection. */
   items?: ShorthandValue[]
 
@@ -190,6 +193,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     fluid: PropTypes.bool,
     getA11ySelectionMessage: PropTypes.object,
     getA11yStatusMessage: PropTypes.func,
+    inline: PropTypes.bool,
     items: customPropTypes.collectionShorthand,
     itemToString: PropTypes.func,
     loading: PropTypes.bool,
@@ -333,15 +337,16 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     styles: ComponentSlotStylesInput,
     getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any,
   ): JSX.Element {
+    const { inline, fluid, triggerButton } = this.props
     const content = this.getSelectedItemAsString(this.state.value)
 
     return (
       <Ref innerRef={this.buttonRef}>
-        {Button.create(this.props.triggerButton, {
+        {Button.create(triggerButton, {
           defaultProps: {
             className: Dropdown.slotClassNames.triggerButton,
             content,
-            fluid: true,
+            fluid: fluid || !inline,
             styles: styles.triggerButton,
             ...getToggleButtonProps({
               onFocus: () => {
@@ -369,7 +374,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     ) => void,
     variables,
   ): JSX.Element {
-    const { searchInput, multiple, placeholder } = this.props
+    const { inline, searchInput, multiple, placeholder } = this.props
     const { searchQuery, value } = this.state
 
     const noPlaceholder =
@@ -378,6 +383,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     return DropdownSearchInput.create(searchInput || {}, {
       defaultProps: {
         placeholder: noPlaceholder ? '' : placeholder,
+        inline,
         variables,
         inputRef: this.inputRef,
       },
diff --git a/packages/react/src/components/Dropdown/DropdownSearchInput.tsx b/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
index 7c8cbcc1e7..4c14fba8e6 100644
--- a/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
+++ b/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
@@ -14,6 +14,9 @@ import { UIComponentProps } from '../../lib/commonPropInterfaces'
 import Input from '../Input/Input'
 
 export interface DropdownSearchInputProps extends UIComponentProps<DropdownSearchInputProps> {
+  /** A dropdown search input can be formatted to appear inline in the context of a Dropdown. */
+  inline?: boolean
+
   /** Ref for input DOM node. */
   inputRef?: React.Ref<HTMLElement>
 
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts
index cb0f8652e5..7452a15b6b 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownSearchInputStyles.ts
@@ -11,10 +11,14 @@ const dropdownSearchInputStyles: ComponentSlotStylesInput<
     flexGrow: 1,
   }),
 
-  input: ({ variables: v }): ICSSInJSStyle => ({
+  input: ({ props: p }): ICSSInJSStyle => ({
     width: '100%',
-    backgroundColor: v.backgroundColor,
+    backgroundColor: 'transparent',
     borderWidth: 0,
+    ...(p.inline && {
+      paddingLeft: 0,
+      paddingRight: 0,
+    }),
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 9e2cceb70f..26fd5713c4 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -3,23 +3,49 @@ import { DropdownProps, DropdownState } from '../../../../components/Dropdown/Dr
 import { DropdownVariables } from './dropdownVariables'
 import { pxToRem } from '../../../../lib'
 
-const dropdownStyles: ComponentSlotStylesInput<DropdownProps & DropdownState, DropdownVariables> = {
-  root: (): ICSSInJSStyle => ({}),
+type Props = DropdownProps & DropdownState
+
+const transparentColorStyle: ICSSInJSStyle = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  borderBottomColor: 'transparent',
+}
+
+const transparentColorStyleObj: ICSSInJSStyle = {
+  ...transparentColorStyle,
+  ':hover': transparentColorStyle,
+  ':active': transparentColorStyle,
+  ':focus': {
+    ...transparentColorStyle,
+    ':active': transparentColorStyle,
+  },
+}
+
+const getWidth = (p: Props, v: DropdownVariables): string =>
+  p.fluid ? '100%' : p.inline ? 'initial' : v.width
+
+const dropdownStyles: ComponentSlotStylesInput<Props, DropdownVariables> = {
+  root: ({ props: p }): ICSSInJSStyle => ({
+    ...(p.inline && {
+      display: 'inline-flex',
+    }),
+  }),
 
   container: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'flex',
     flexWrap: 'wrap',
-    outline: 0,
-    backgroundColor: v.backgroundColor,
+    position: 'relative',
     boxSizing: 'border-box',
     borderStyle: 'solid',
     borderColor: 'transparent',
+    outline: 0,
+    width: getWidth(p, v),
     borderWidth: v.borderWidth,
     borderRadius: v.borderRadius,
     color: v.color,
-    width: p.fluid ? '100%' : v.width,
-    position: 'relative',
+    backgroundColor: v.backgroundColor,
     ...(p.focused && { borderBottomColor: v.borderColorFocus }),
+    ...(p.inline && transparentColorStyleObj),
   }),
 
   selectedItems: ({ props: p, variables: v }): ICSSInJSStyle => ({
@@ -32,19 +58,14 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps & DropdownState, Dr
   }),
 
   triggerButton: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const transparentColorStyle = {
-      backgroundColor: 'transparent',
-      borderColor: 'transparent',
-    }
     return {
       boxShadow: 'none',
       margin: '0',
       justifyContent: 'left',
       padding: v.comboboxPaddingButton,
       height: pxToRem(30),
-      ...transparentColorStyle,
       ...(p.multiple && { minWidth: 0, flex: 1 }),
-      ':hover': transparentColorStyle,
+      ...transparentColorStyleObj,
       ':focus': {
         ...transparentColorStyle,
         ':after': {
@@ -54,7 +75,10 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps & DropdownState, Dr
         },
         ':active': transparentColorStyle,
       },
-      ':active': transparentColorStyle,
+      ...(p.inline && {
+        paddingLeft: 0,
+        paddingRight: 0,
+      }),
     }
   },
 
@@ -65,7 +89,8 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps & DropdownState, Dr
     zIndex: 1000,
     maxHeight: v.listMaxHeight,
     overflowY: 'auto',
-    width: p.fluid ? '100%' : v.width,
+    width: getWidth(p, v),
+    minWidth: 'max-content',
     top: 'calc(100% + 2px)', // leave room for container + its border
     background: v.listBackgroundColor,
     ...(p.isOpen && {
@@ -83,7 +108,7 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps & DropdownState, Dr
     fontWeight: 'bold',
   }),
 
-  toggleIndicator: ({ variables: v }): ICSSInJSStyle => ({
+  toggleIndicator: ({ props: p, variables: v }): ICSSInJSStyle => ({
     position: 'absolute',
     height: v.toggleIndicatorSize,
     width: v.toggleIndicatorSize,
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
index 9a55d29e60..ad0a17020b 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
@@ -40,5 +40,5 @@ export default (siteVars): DropdownVariables => ({
   listItemColorActive: siteVars.white,
   selectedItemsMaxHeight: pxToRem(82),
   toggleIndicatorSize: pxToRem(32),
-  width: pxToRem(356),
+  width: pxToRem(368),
 })

From c3591e591d72ecc595f9c1ad1cad00542a3b60d4 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Thu, 7 Feb 2019 18:45:08 +0100
Subject: [PATCH 2/8] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e111bfcb37..163da63a0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add multiple selection flavor for `Dropdown` component @Bugaa92 ([#845](https://github.com/stardust-ui/react/pull/845))
 - Add `black` and `white` options for the `color` prop of the `Label` component @mnajdova ([#855](https://github.com/stardust-ui/react/pull/855))
 - Add `Flex` component @kuzhelov ([#802](https://github.com/stardust-ui/react/pull/802))
+- Add `inline` prop for `Dropdown` component @Bugaa92 ([#863](https://github.com/stardust-ui/react/pull/863))
 
 ### Fixes
 - Focus the last focused element which triggered `Popup` on ESC @sophieH29 ([#861](https://github.com/stardust-ui/react/pull/861))

From 005978fef7406f3876f3d238c88a5e99cebf2757 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Thu, 7 Feb 2019 18:51:21 +0100
Subject: [PATCH 3/8] restored wrong variables change

---
 .../src/themes/teams/components/Dropdown/dropdownVariables.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
index ad0a17020b..9a55d29e60 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts
@@ -40,5 +40,5 @@ export default (siteVars): DropdownVariables => ({
   listItemColorActive: siteVars.white,
   selectedItemsMaxHeight: pxToRem(82),
   toggleIndicatorSize: pxToRem(32),
-  width: pxToRem(368),
+  width: pxToRem(356),
 })

From 93c6497d263e3745ab0ef89050292da818ccf98b Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 8 Feb 2019 12:53:30 +0100
Subject: [PATCH 4/8] addressed comments

---
 .../Types/DropdownExampleInline.shorthand.tsx  |  4 ++--
 .../react/src/components/Dropdown/Dropdown.tsx |  4 ++--
 .../components/Dropdown/dropdownStyles.ts      | 18 ++++++++++++++----
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/docs/src/examples/components/Dropdown/Types/DropdownExampleInline.shorthand.tsx b/docs/src/examples/components/Dropdown/Types/DropdownExampleInline.shorthand.tsx
index a44fe80a85..523dfd0511 100644
--- a/docs/src/examples/components/Dropdown/Types/DropdownExampleInline.shorthand.tsx
+++ b/docs/src/examples/components/Dropdown/Types/DropdownExampleInline.shorthand.tsx
@@ -13,7 +13,7 @@ const inputItems = [
   'Selina Kyle',
 ]
 
-const DropdownExample = () => (
+const DropdownExampleInline = () => (
   <>
     <Header as="h3">Inline:</Header>
     <div>
@@ -35,4 +35,4 @@ const DropdownExample = () => (
   </>
 )
 
-export default DropdownExample
+export default DropdownExampleInline
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 4028d1735d..d7e82d5c05 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -337,7 +337,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     styles: ComponentSlotStylesInput,
     getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any,
   ): JSX.Element {
-    const { inline, fluid, triggerButton } = this.props
+    const { triggerButton } = this.props
     const content = this.getSelectedItemAsString(this.state.value)
 
     return (
@@ -346,7 +346,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
           defaultProps: {
             className: Dropdown.slotClassNames.triggerButton,
             content,
-            fluid: fluid || !inline,
+            fluid: true,
             styles: styles.triggerButton,
             ...getToggleButtonProps({
               onFocus: () => {
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 26fd5713c4..b7bfd2e914 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -3,7 +3,7 @@ import { DropdownProps, DropdownState } from '../../../../components/Dropdown/Dr
 import { DropdownVariables } from './dropdownVariables'
 import { pxToRem } from '../../../../lib'
 
-type Props = DropdownProps & DropdownState
+type DropdownPropsAndState = DropdownProps & DropdownState
 
 const transparentColorStyle: ICSSInJSStyle = {
   backgroundColor: 'transparent',
@@ -21,10 +21,19 @@ const transparentColorStyleObj: ICSSInJSStyle = {
   },
 }
 
-const getWidth = (p: Props, v: DropdownVariables): string =>
-  p.fluid ? '100%' : p.inline ? 'initial' : v.width
+const getWidth = (p: DropdownPropsAndState, v: DropdownVariables): string => {
+  if (p.fluid) {
+    return '100%'
+  }
 
-const dropdownStyles: ComponentSlotStylesInput<Props, DropdownVariables> = {
+  if (p.inline) {
+    return 'initial'
+  }
+
+  return v.width
+}
+
+const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVariables> = {
   root: ({ props: p }): ICSSInJSStyle => ({
     ...(p.inline && {
       display: 'inline-flex',
@@ -78,6 +87,7 @@ const dropdownStyles: ComponentSlotStylesInput<Props, DropdownVariables> = {
       ...(p.inline && {
         paddingLeft: 0,
         paddingRight: 0,
+        width: 'initial',
       }),
     }
   },

From e644f0c2334c5c16ea03fd69efce3d0435a6fdc2 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 8 Feb 2019 13:16:55 +0100
Subject: [PATCH 5/8] fixed list item width on all browsers using @layershifter
 suggestion

---
 .../themes/teams/components/Dropdown/dropdownItemStyles.ts   | 5 ++++-
 .../src/themes/teams/components/Dropdown/dropdownStyles.ts   | 1 -
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
index 4e28dbe216..161bd3527b 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
@@ -5,7 +5,10 @@ import ListItem from '../../../../components/List/ListItem'
 
 const dropdownItemStyles: ComponentSlotStylesInput<DropdownItemProps, DropdownVariables> = {
   root: ({ variables: v, props: { active } }): ICSSInJSStyle => ({
-    [`&.${ListItem.className}`]: { backgroundColor: v.listItemBackgroundColor },
+    [`&.${ListItem.className}`]: {
+      backgroundColor: v.listItemBackgroundColor,
+      whiteSpace: 'nowrap',
+    },
 
     ...(active && {
       [`&.${ListItem.className}`]: {
diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index b7bfd2e914..b9381fd01d 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -100,7 +100,6 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
     maxHeight: v.listMaxHeight,
     overflowY: 'auto',
     width: getWidth(p, v),
-    minWidth: 'max-content',
     top: 'calc(100% + 2px)', // leave room for container + its border
     background: v.listBackgroundColor,
     ...(p.isOpen && {

From 30964028f4e8496c94c4ceff4fca0ae18d38582b Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 8 Feb 2019 13:32:09 +0100
Subject: [PATCH 6/8] fix propTypes for DropdownSearchInput

---
 packages/react/src/components/Dropdown/DropdownSearchInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Dropdown/DropdownSearchInput.tsx b/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
index 4c14fba8e6..1e2b6658fc 100644
--- a/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
+++ b/packages/react/src/components/Dropdown/DropdownSearchInput.tsx
@@ -73,7 +73,7 @@ class DropdownSearchInput extends UIComponent<ReactProps<DropdownSearchInputProp
     }),
     accessibilityInputProps: PropTypes.object,
     accessibilityComboboxProps: PropTypes.object,
-    hasToggleButton: PropTypes.bool,
+    inline: PropTypes.bool,
     inputRef: customPropTypes.ref,
     onFocus: PropTypes.func,
     onInputBlur: PropTypes.func,

From a5e1ff28c27f8282071e1747b4cb35ee61fe52ad Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 8 Feb 2019 13:55:15 +0100
Subject: [PATCH 7/8] remove unused props param

---
 .../src/themes/teams/components/Dropdown/dropdownStyles.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
index b9381fd01d..38c06c13ac 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -117,7 +117,7 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
     fontWeight: 'bold',
   }),
 
-  toggleIndicator: ({ props: p, variables: v }): ICSSInJSStyle => ({
+  toggleIndicator: ({ variables: v }): ICSSInJSStyle => ({
     position: 'absolute',
     height: v.toggleIndicatorSize,
     width: v.toggleIndicatorSize,

From 742d81e39ec8f28b6c549ab90b6a35a3990152e2 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Fri, 8 Feb 2019 14:26:36 +0100
Subject: [PATCH 8/8] fixed list item styles and removed redundancy

---
 .../components/Dropdown/dropdownItemStyles.ts  | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
index 161bd3527b..092e448243 100644
--- a/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Dropdown/dropdownItemStyles.ts
@@ -1,20 +1,14 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { DropdownVariables } from './dropdownVariables'
 import { DropdownItemProps } from '../../../../components/Dropdown/DropdownItem'
-import ListItem from '../../../../components/List/ListItem'
 
 const dropdownItemStyles: ComponentSlotStylesInput<DropdownItemProps, DropdownVariables> = {
-  root: ({ variables: v, props: { active } }): ICSSInJSStyle => ({
-    [`&.${ListItem.className}`]: {
-      backgroundColor: v.listItemBackgroundColor,
-      whiteSpace: 'nowrap',
-    },
-
-    ...(active && {
-      [`&.${ListItem.className}`]: {
-        backgroundColor: v.listItemBackgroundColorActive,
-        color: v.listItemColorActive,
-      },
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    whiteSpace: 'nowrap',
+    backgroundColor: v.listItemBackgroundColor,
+    ...(p.active && {
+      color: v.listItemColorActive,
+      backgroundColor: v.listItemBackgroundColorActive,
     }),
   }),
 }