From 178f2ef4f58c84dedfef1150c96265d8ec4e8d9f Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 10:12:57 +0100
Subject: [PATCH 1/9] add static

---
 src/components/Dropdown/DropdownLabel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Dropdown/DropdownLabel.tsx b/src/components/Dropdown/DropdownLabel.tsx
index 33954a8207..db5c97f4d8 100644
--- a/src/components/Dropdown/DropdownLabel.tsx
+++ b/src/components/Dropdown/DropdownLabel.tsx
@@ -47,11 +47,11 @@ export interface DropdownLabelProps extends UIComponentProps<DropdownLabelProps>
  * It is used to display selected item.
  */
 class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
-  displayName = 'DropdownLabel'
+  static displayName = 'DropdownLabel'
 
   static create: Function
 
-  className = 'ui-dropdown__label'
+  static className = 'ui-dropdown__label'
 
   static propTypes = {
     ...commonPropTypes.createCommon({

From 336d22989077c3d82a9602338f7e41a6fc4211aa Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 10:14:43 +0100
Subject: [PATCH 2/9] use correct type for predefined props

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

diff --git a/src/components/Dropdown/DropdownLabel.tsx b/src/components/Dropdown/DropdownLabel.tsx
index db5c97f4d8..e98cfb932e 100644
--- a/src/components/Dropdown/DropdownLabel.tsx
+++ b/src/components/Dropdown/DropdownLabel.tsx
@@ -100,7 +100,7 @@ class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
     )
   }
 
-  private handleIconOverrides = (predefinedProps: DropdownLabelProps) => ({
+  private handleIconOverrides = (predefinedProps: IconProps) => ({
     onClick: (e: React.SyntheticEvent, iconProps: IconProps) => {
       e.stopPropagation()
       _.invoke(this.props, 'onRemove', e, this.props)

From 9eb1d421ee2e5a42db68cb860e8a18fb269ceccd Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 10:16:19 +0100
Subject: [PATCH 3/9] extract elements to variables

---
 src/components/Dropdown/DropdownLabel.tsx | 29 +++++++++++++----------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/Dropdown/DropdownLabel.tsx b/src/components/Dropdown/DropdownLabel.tsx
index e98cfb932e..d1337f2a3a 100644
--- a/src/components/Dropdown/DropdownLabel.tsx
+++ b/src/components/Dropdown/DropdownLabel.tsx
@@ -75,6 +75,20 @@ class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
   public renderComponent({ unhandledProps, styles }: RenderResultConfig<DropdownLabelProps>) {
     const { header, icon, image } = this.props
 
+    const iconElement = Icon.create(icon, {
+      defaultProps: {
+        'aria-label': `Remove ${header} from selection.`, // TODO: Extract this in a behaviour.
+        'aria-hidden': false,
+        role: 'button',
+      },
+      overrideProps: this.handleIconOverrides,
+    })
+    const imageElement = Image.create(image, {
+      defaultProps: {
+        avatar: true,
+      },
+    })
+
     return (
       <Label
         styles={styles.root}
@@ -82,19 +96,8 @@ class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
         circular
         onClick={this.handleClick}
         content={header}
-        icon={Icon.create(icon, {
-          defaultProps: {
-            'aria-label': `Remove ${header} from selection.`, // TODO: Extract this in a behaviour.
-            'aria-hidden': false,
-            role: 'button',
-          },
-          overrideProps: this.handleIconOverrides,
-        })}
-        image={Image.create(image, {
-          defaultProps: {
-            avatar: true,
-          },
-        })}
+        icon={iconElement}
+        image={imageElement}
         {...unhandledProps}
       />
     )

From 92e5084158f172c993b646a395d18a4fcf008c20 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 10:19:00 +0100
Subject: [PATCH 4/9] rename to DropdownSelectedItem

---
 src/components/Dropdown/Dropdown.tsx          | 18 ++++++++--------
 ...downLabel.tsx => DropdownSelectedItem.tsx} | 21 +++++++++++--------
 src/index.ts                                  |  5 ++++-
 3 files changed, 25 insertions(+), 19 deletions(-)
 rename src/components/Dropdown/{DropdownLabel.tsx => DropdownSelectedItem.tsx} (81%)

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 5791c740bb..76cfbb6db3 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -31,7 +31,7 @@ import Text from '../Text/Text'
 import Ref from '../Ref/Ref'
 import { UIComponentProps } from '../../lib/commonPropInterfaces'
 import DropdownItem from './DropdownItem'
-import DropdownLabel, { DropdownLabelProps } from './DropdownLabel'
+import DropdownSelectedItem, { DropdownSelectedItemProps } from './DropdownSelectedItem'
 import DropdownSearchInput, { DropdownSearchInputProps } from './DropdownSearchInput'
 import Button from '../Button/Button'
 
@@ -191,8 +191,8 @@ export default class Dropdown extends AutoControlledComponent<
   static autoControlledProps = ['searchQuery', 'value']
 
   static Item = DropdownItem
-  static Label = DropdownLabel
   static SearchInput = DropdownSearchInput
+  static SelectedItem = DropdownSelectedItem
 
   getInitialAutoControlledState({ multiple, search }: DropdownProps): DropdownState {
     return {
@@ -450,7 +450,7 @@ export default class Dropdown extends AutoControlledComponent<
     }
 
     return value.map(item =>
-      DropdownLabel.create(item, {
+      DropdownSelectedItem.create(item, {
         defaultProps: {
           styles: styles.label,
           ...(typeof item === 'object' &&
@@ -458,7 +458,7 @@ export default class Dropdown extends AutoControlledComponent<
               key: (item as any).header,
             }),
         },
-        overrideProps: (predefinedProps: DropdownLabelProps) =>
+        overrideProps: (predefinedProps: DropdownSelectedItemProps) =>
           this.handleSelectedItemOverrides(predefinedProps, item),
       }),
     )
@@ -552,16 +552,16 @@ export default class Dropdown extends AutoControlledComponent<
   })
 
   private handleSelectedItemOverrides = (
-    predefinedProps: DropdownLabelProps,
+    predefinedProps: DropdownSelectedItemProps,
     item: ShorthandValue,
   ) => ({
-    onRemove: (e: React.SyntheticEvent, dropdownLabelProps: DropdownLabelProps) => {
+    onRemove: (e: React.SyntheticEvent, DropdownSelectedItemProps: DropdownSelectedItemProps) => {
       this.handleSelectedItemRemove(e, item)
-      _.invoke(predefinedProps, 'onRemove', e, dropdownLabelProps)
+      _.invoke(predefinedProps, 'onRemove', e, DropdownSelectedItemProps)
     },
-    onClick: (e: React.SyntheticEvent, dropdownLabelProps: DropdownLabelProps) => {
+    onClick: (e: React.SyntheticEvent, DropdownSelectedItemProps: DropdownSelectedItemProps) => {
       e.stopPropagation()
-      _.invoke(predefinedProps, 'onClick', e, dropdownLabelProps)
+      _.invoke(predefinedProps, 'onClick', e, DropdownSelectedItemProps)
     },
   })
 
diff --git a/src/components/Dropdown/DropdownLabel.tsx b/src/components/Dropdown/DropdownSelectedItem.tsx
similarity index 81%
rename from src/components/Dropdown/DropdownLabel.tsx
rename to src/components/Dropdown/DropdownSelectedItem.tsx
index d1337f2a3a..1ea38c5049 100644
--- a/src/components/Dropdown/DropdownLabel.tsx
+++ b/src/components/Dropdown/DropdownSelectedItem.tsx
@@ -15,7 +15,7 @@ import {
 import { Image, Icon, Label } from '../..'
 import { IconProps } from '../Icon/Icon'
 
-export interface DropdownLabelProps extends UIComponentProps<DropdownLabelProps> {
+export interface DropdownSelectedItemProps extends UIComponentProps<DropdownSelectedItemProps> {
   /** Header of the selected item. */
   header?: string
 
@@ -31,7 +31,7 @@ export interface DropdownLabelProps extends UIComponentProps<DropdownLabelProps>
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed value.
    */
-  onClick?: ComponentEventHandler<DropdownLabelProps>
+  onClick?: ComponentEventHandler<DropdownSelectedItemProps>
 
   /**
    * Called when item is removed from the selection list.
@@ -39,15 +39,15 @@ export interface DropdownLabelProps extends UIComponentProps<DropdownLabelProps>
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed value.
    */
-  onRemove?: ComponentEventHandler<DropdownLabelProps>
+  onRemove?: ComponentEventHandler<DropdownSelectedItemProps>
 }
 
 /**
- * A DropdownLabel is a sub-component of a multiple selection Dropdown.
+ * A DropdownSelectedItem is a sub-component of a multiple selection Dropdown.
  * It is used to display selected item.
  */
-class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
-  static displayName = 'DropdownLabel'
+class DropdownSelectedItem extends UIComponent<ReactProps<DropdownSelectedItemProps>, any> {
+  static displayName = 'DropdownSelectedItem'
 
   static create: Function
 
@@ -72,7 +72,10 @@ class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
     _.invoke(this.props, 'onClick', e, this.props)
   }
 
-  public renderComponent({ unhandledProps, styles }: RenderResultConfig<DropdownLabelProps>) {
+  public renderComponent({
+    unhandledProps,
+    styles,
+  }: RenderResultConfig<DropdownSelectedItemProps>) {
     const { header, icon, image } = this.props
 
     const iconElement = Icon.create(icon, {
@@ -119,6 +122,6 @@ class DropdownLabel extends UIComponent<ReactProps<DropdownLabelProps>, any> {
   })
 }
 
-DropdownLabel.create = createShorthandFactory(DropdownLabel, 'header')
+DropdownSelectedItem.create = createShorthandFactory(DropdownSelectedItem, 'header')
 
-export default DropdownLabel
+export default DropdownSelectedItem
diff --git a/src/index.ts b/src/index.ts
index 1d2a538e92..bca60dda88 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -37,7 +37,10 @@ export {
 
 export { default as DropdownItem, DropdownItemProps } from './components/Dropdown/DropdownItem'
 
-export { default as DropdownLabel, DropdownLabelProps } from './components/Dropdown/DropdownLabel'
+export {
+  default as DropdownSelectedItem,
+  DropdownSelectedItemProps,
+} from './components/Dropdown/DropdownSelectedItem'
 
 export {
   default as DropdownSearchInput,

From bf68ad5e4a3308b981357369c792cc59c3058a1f Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 10:39:43 +0100
Subject: [PATCH 5/9] move upper

---
 .../Dropdown/DropdownSelectedItem.tsx         | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Dropdown/DropdownSelectedItem.tsx b/src/components/Dropdown/DropdownSelectedItem.tsx
index 1ea38c5049..17c87b4ded 100644
--- a/src/components/Dropdown/DropdownSelectedItem.tsx
+++ b/src/components/Dropdown/DropdownSelectedItem.tsx
@@ -72,6 +72,21 @@ class DropdownSelectedItem extends UIComponent<ReactProps<DropdownSelectedItemPr
     _.invoke(this.props, 'onClick', e, this.props)
   }
 
+  private handleIconOverrides = (predefinedProps: IconProps) => ({
+    onClick: (e: React.SyntheticEvent, iconProps: IconProps) => {
+      e.stopPropagation()
+      _.invoke(this.props, 'onRemove', e, this.props)
+      _.invoke(predefinedProps, 'onClick', e, iconProps)
+    },
+    onKeyDown: (e: React.SyntheticEvent, iconProps: IconProps) => {
+      e.stopPropagation()
+      if (keyboardKey.getCode(e) === keyboardKey.Enter) {
+        _.invoke(this.props, 'onRemove', e, this.props)
+      }
+      _.invoke(predefinedProps, 'onKeyDown', e, iconProps)
+    },
+  })
+
   public renderComponent({
     unhandledProps,
     styles,
@@ -105,21 +120,6 @@ class DropdownSelectedItem extends UIComponent<ReactProps<DropdownSelectedItemPr
       />
     )
   }
-
-  private handleIconOverrides = (predefinedProps: IconProps) => ({
-    onClick: (e: React.SyntheticEvent, iconProps: IconProps) => {
-      e.stopPropagation()
-      _.invoke(this.props, 'onRemove', e, this.props)
-      _.invoke(predefinedProps, 'onClick', e, iconProps)
-    },
-    onKeyDown: (e: React.SyntheticEvent, iconProps: IconProps) => {
-      e.stopPropagation()
-      if (keyboardKey.getCode(e) === keyboardKey.Enter) {
-        _.invoke(this.props, 'onRemove', e, this.props)
-      }
-      _.invoke(predefinedProps, 'onKeyDown', e, iconProps)
-    },
-  })
 }
 
 DropdownSelectedItem.create = createShorthandFactory(DropdownSelectedItem, 'header')

From b97b7754a549d795238244329214af898f8e3895 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 10:45:40 +0100
Subject: [PATCH 6/9] extract styles

---
 src/components/Dropdown/Dropdown.tsx                   |  7 +++----
 src/themes/teams/componentStyles.ts                    |  1 +
 .../components/Dropdown/dropdownSelectedItemStyles.ts  | 10 ++++++++++
 src/themes/teams/components/Dropdown/dropdownStyles.ts |  4 ----
 4 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 76cfbb6db3..1a0080ec5c 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -70,7 +70,7 @@ export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownS
    */
   getA11yStatusMessage?: (options: A11yStatusMessageOptions<ShorthandValue>) => string
 
-  /** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.Label[]), if it's a multiple selection. */
+  /** Array of props for generating list options (Dropdown.Item[]) and selected item labels(Dropdown.SelectedItem[]), if it's a multiple selection. */
   items?: ShorthandValue[]
 
   /**
@@ -252,7 +252,7 @@ export default class Dropdown extends AutoControlledComponent<
                   className={classes.container}
                   onClick={multiple ? this.handleContainerClick.bind(this, isOpen) : undefined}
                 >
-                  {multiple && this.renderSelectedItems(styles)}
+                  {multiple && this.renderSelectedItems()}
                   {search
                     ? this.renderSearchInput(
                         accessibilityRootPropsRest,
@@ -442,7 +442,7 @@ export default class Dropdown extends AutoControlledComponent<
     ]
   }
 
-  private renderSelectedItems(styles: ComponentSlotStylesInput) {
+  private renderSelectedItems() {
     const value = this.state.value as ShorthandValue[]
 
     if (value.length === 0) {
@@ -452,7 +452,6 @@ export default class Dropdown extends AutoControlledComponent<
     return value.map(item =>
       DropdownSelectedItem.create(item, {
         defaultProps: {
-          styles: styles.label,
           ...(typeof item === 'object' &&
             !item.hasOwnProperty('key') && {
               key: (item as any).header,
diff --git a/src/themes/teams/componentStyles.ts b/src/themes/teams/componentStyles.ts
index 3b58305ba2..b0d43027de 100644
--- a/src/themes/teams/componentStyles.ts
+++ b/src/themes/teams/componentStyles.ts
@@ -17,6 +17,7 @@ export { default as Divider } from './components/Divider/dividerStyles'
 
 export { default as Dropdown } from './components/Dropdown/dropdownStyles'
 export { default as DropdownSearchInput } from './components/Dropdown/dropdownSearchInputStyles'
+export { default as DropdownSelectedItem } from './components/Dropdown/dropdownSelectedItemStyles'
 export { default as DropdownItem } from './components/Dropdown/dropdownItemStyles'
 
 export { default as Form } from './components/Form/formStyles'
diff --git a/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts b/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts
new file mode 100644
index 0000000000..d9059af917
--- /dev/null
+++ b/src/themes/teams/components/Dropdown/dropdownSelectedItemStyles.ts
@@ -0,0 +1,10 @@
+import { DropdownSelectedItemProps } from '../../../../components/Dropdown/DropdownSelectedItem'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+
+const dropdownSelectedItemStyles: ComponentSlotStylesInput<DropdownSelectedItemProps> = {
+  root: (): ICSSInJSStyle => ({
+    margin: '.4rem 0 0 .4rem',
+  }),
+}
+
+export default dropdownSelectedItemStyles
diff --git a/src/themes/teams/components/Dropdown/dropdownStyles.ts b/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 3423fc22e8..f808ad6fd1 100644
--- a/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -60,10 +60,6 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps, DropdownVariables>
     }
   },
 
-  label: (): ICSSInJSStyle => ({
-    margin: '.4rem 0 0 .4rem',
-  }),
-
   list: ({
     variables: { listMaxHeight, width, listBackgroundColor },
     props: { fluid },

From 47417ce9f14fd4d170b7d50716295a5ba5fe321b Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 11:47:53 +0100
Subject: [PATCH 7/9] add changelog entry

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d2384262c..9af2ac5c14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- Rename `DropdownLabel` to `DropdownSelectedItem` and extract styles @layershifter ([#725](https://github.com/stardust-ui/react/pull/725))
+
 ### Documentation
 - Fix ignored initial state of knobs @layershifter ([#720](https://github.com/stardust-ui/react/pull/720))
 - Fix unclearable example's code @layershifter ([#720](https://github.com/stardust-ui/react/pull/720))

From 2e77760c2686b1f8231df824f2a5af00ef3232a0 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 12:42:57 +0100
Subject: [PATCH 8/9] update classname

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

diff --git a/src/components/Dropdown/DropdownSelectedItem.tsx b/src/components/Dropdown/DropdownSelectedItem.tsx
index 17c87b4ded..2978208f94 100644
--- a/src/components/Dropdown/DropdownSelectedItem.tsx
+++ b/src/components/Dropdown/DropdownSelectedItem.tsx
@@ -51,7 +51,7 @@ class DropdownSelectedItem extends UIComponent<ReactProps<DropdownSelectedItemPr
 
   static create: Function
 
-  static className = 'ui-dropdown__label'
+  static className = 'ui-dropdown__selected-item'
 
   static propTypes = {
     ...commonPropTypes.createCommon({

From 1cfdf20d1295efc8c5966202d44db2b2f418ee4e Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 15 Jan 2019 12:43:16 +0100
Subject: [PATCH 9/9] update section

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9af2ac5c14..bf5613b206 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,7 +17,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
-### Fixes
+### BREAKING
 - Rename `DropdownLabel` to `DropdownSelectedItem` and extract styles @layershifter ([#725](https://github.com/stardust-ui/react/pull/725))
 
 ### Documentation