removed no items text from component, added to examples

Author: Silviu Avram

docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx

@@ -21,6 +21,7 @@ class DropdownExample extends React.Component {
         search
         getA11ySelectionMessage={getA11ySelectionMessage}
         getA11yStatusMessage={getA11yStatusMessage}
+        noResultsMessage={`We couldn't find any matches.`}
         placeholder="Start typing a name"
         items={inputItems}
       />

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx

@@ -20,6 +20,7 @@ class DropdownExample extends React.Component {
         multiple
         getA11ySelectionMessage={getA11ySelectionMessage}
         getA11yStatusMessage={getA11yStatusMessage}
+        noResultsMessage={`We couldn't find any matches.`}
         search
         fluid
         placeholder="Start typing a name"

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx

@@ -57,6 +57,7 @@ class DropdownExample extends React.Component {
         getA11yStatusMessage={getA11yStatusMessage}
         search
         getA11ySelectionMessage={getA11ySelectionMessage}
+        noResultsMessage={`We couldn't find any matches.`}
         placeholder="Start typing a name"
         items={inputItems}
       />

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand.tsx

@@ -20,6 +20,7 @@ class DropdownExample extends React.Component {
         multiple
         getA11yStatusMessage={getA11yStatusMessage}
         getA11ySelectionMessage={getA11ySelectionMessage}
+        noResultsMessage={`We couldn't find any matches.`}
         search
         placeholder="Start typing a name"
         toggleButton

src/components/Dropdown/Dropdown.tsx

@@ -312,13 +312,14 @@ export default class Dropdown extends AutoControlledComponent<
           {...accessibilityMenuPropsRest}
           styles={styles.list}
           aria-hidden={!isOpen}
-          items={isOpen ? this.renderItems(variables, getItemProps, highlightedIndex) : []}
+          items={isOpen ? this.renderItems(styles, variables, getItemProps, highlightedIndex) : []}
         />
       </Ref>
     )
   }
 
   private renderItems(
+    styles: ComponentSlotStylesInput,
     variables: ComponentVariablesInput,
     getItemProps: (options: GetItemPropsOptions<ShorthandValue>) => any,
     highlightedIndex: number,
@@ -349,15 +350,13 @@ export default class Dropdown extends AutoControlledComponent<
     }
     // render no match message.
     return [
-      {
-        key: 'people-picker-no-results-item',
-        content: (
-          <Text weight="bold" content={noResultsMessage || `We couldn't find any matches.`} />
-        ),
-        variables: {
-          backgroundColor: variables.listItemBackgroundColor,
-        },
-      },
+      noResultsMessage
+        ? {
+            key: 'dropdown-no-results',
+            content: <Text weight="bold" content={noResultsMessage} />,
+            styles: styles.emptyListItem,
+          }
+        : null,
     ]
   }
 

src/themes/teams/components/Dropdown/dropdownItemStyles.ts

@@ -10,7 +10,7 @@ const dropdownItemStyles: ComponentSlotStylesInput<DropdownItemProps, DropdownVa
     ...(active && {
       [`&.${ListItem.className}`]: {
         backgroundColor: v.listItemHighlightedBackgroundColor,
-        color: v.listItemTextColor,
+        color: v.listItemHighlightedTextColor,
       },
     }),
   }),

src/themes/teams/components/Dropdown/dropdownStyles.ts

@@ -37,7 +37,7 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps, DropdownVariables>
     }),
   }),
 
-  activeListLabel: (): ICSSInJSStyle => ({
+  label: (): ICSSInJSStyle => ({
     margin: '.4rem 0 0 .4rem',
   }),
 
@@ -50,6 +50,10 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownProps, DropdownVariables>
     top: 'calc(100% + 2px)', // leave room for container + its border
   }),
 
+  emptyListItem: ({ variables: { listItemBackgroundColor } }) => ({
+    backgroundColor: listItemBackgroundColor,
+  }),
+
   toggleButton: ({ variables: { toggleButtonSize, width }, props: { fluid } }): ICSSInJSStyle => ({
     position: 'absolute',
     height: toggleButtonSize,

src/themes/teams/components/Dropdown/dropdownVariables.ts

@@ -10,7 +10,7 @@ export interface DropdownVariables {
   editTextFlexBasis: string
   listItemBackgroundColor: string
   listItemHighlightedBackgroundColor: string
-  listItemTextColor: string
+  listItemHighlightedTextColor: string
   listMaxHeight: string
   toggleButtonSize: string
   width: string
@@ -27,12 +27,11 @@ export default (siteVars): DropdownVariables => ({
   containerDivColor: siteVars.bodyColor,
   containerDivFocusBorderColor: siteVars.brand,
   containerDivFocusBorderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
-
   editTextFlexBasis: '100px',
 
-  listItemTextColor: siteVars.white,
   listItemBackgroundColor: siteVars.white,
   listItemHighlightedBackgroundColor: siteVars.brand,
+  listItemHighlightedTextColor: siteVars.white,
   listMaxHeight: '20rem',
 
   toggleButtonSize: pxToRem(30),