add variables to dropdownVariables

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

@@ -12,7 +12,10 @@ export type DropdownItemStylesProps = Pick<
   hasHeader?: boolean
 }
 
-const dropdownItemStyles: ComponentSlotStylesPrepared<DropdownItemProps, DropdownVariables> = {
+const dropdownItemStyles: ComponentSlotStylesPrepared<
+  DropdownItemStylesProps,
+  DropdownVariables
+> = {
   root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({
     display: 'flex',
     alignItems: 'center',
@@ -50,7 +53,7 @@ const dropdownItemStyles: ComponentSlotStylesPrepared<DropdownItemProps, Dropdow
   }),
   header: ({ props: p, variables: v }): ICSSInJSStyle => ({
     flexGrow: 1,
-    lineHeight: v.headerLineHeight,
+    lineHeight: v.listItemHeaderLineHeight,
 
     fontSize: v.listItemHeaderFontSize,
     // if the item doesn't have content - i.e. it is header only - then it should use the content color
@@ -67,7 +70,7 @@ const dropdownItemStyles: ComponentSlotStylesPrepared<DropdownItemProps, Dropdow
   }),
   content: ({ variables: v }): ICSSInJSStyle => ({
     flexGrow: 1,
-    lineHeight: v.contentLineHeight,
+    lineHeight: v.listItemContentLineHeight,
     fontSize: v.listItemContentFontSize,
     color: v.listItemContentColor,
   }),

packages/react/src/themes/teams/components/Dropdown/dropdownItemVariables.ts

@@ -1,14 +1,3 @@
 import dropdownVariables from './dropdownVariables'
 
-export interface DropdownItemVariables {
-  headerLineHeight: string
-  contentLineHeight: string
-}
-
-export default (siteVariables): DropdownItemVariables => ({
-  // Header
-  // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
-  headerLineHeight: siteVariables.lineHeightSmall,
-  contentLineHeight: siteVariables.lineHeightSmall,
-  ...dropdownVariables,
-})
+export default dropdownVariables

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

@@ -33,6 +33,8 @@ export interface DropdownVariables {
   listItemColorActive: string
   listItemSelectedFontWeight: number
   listItemSelectedColor: string
+  listItemHeaderLineHeight: string
+  listItemContentLineHeight: string
   selectedItemColor: string
   selectedItemBackgroundColor: string
   selectedItemColorFocus: string
@@ -76,6 +78,9 @@ export default (siteVars): DropdownVariables => ({
   listItemColorActive: siteVars.colors.grey[750],
   listItemSelectedFontWeight: siteVars.fontWeightSemibold,
   listItemSelectedColor: siteVars.colors.grey[750],
+  // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
+  listItemHeaderLineHeight: siteVars.lineHeightSmall,
+  listItemContentLineHeight: siteVars.lineHeightSmall,
   selectedItemBackgroundColor: 'undefined',
   selectedItemColorFocus: siteVars.bodyColor,
   selectedItemBackgroundColorFocus: siteVars.colors.brand[200],