Additional styling and theme support

Author: patrikhellgren

docs/documentation/docs/controls/ModernTaxonomyPicker.md

@@ -70,5 +70,6 @@ The ModernTaxonomyPicker control can be configured with the following properties
 | customPanelWidth | number | no | Custom panel width in pixels. |
 | onRenderItem | function | no | Modify the display of the items in the picker. |
 | onRenderSuggestionsItem | function | no | Modify the display of the items in the pickers suggestions list. |
+| themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TaxonomyPicker)

src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

@@ -35,6 +35,7 @@ import { TermItemSuggestion } from './termItem/TermItemSuggestion';
 import { ModernTermPicker } from './modernTermPicker/ModernTermPicker';
 import { ITermItemProps } from './modernTermPicker/ModernTermPicker.types';
 import { TermItem } from './termItem/TermItem';
+import { IReadonlyTheme } from "@microsoft/sp-component-base";
 
 export interface IModernTaxonomyPickerProps {
   allowMultipleSelections?: boolean;
@@ -51,6 +52,7 @@ export interface IModernTaxonomyPickerProps {
   onRenderSuggestionsItem?: (term: ITermInfo, itemProps: ISuggestionItemProps<ITermInfo>) => JSX.Element;
   placeHolder?: string;
   customPanelWidth?: number;
+  themeVariant?: IReadonlyTheme;
 }
 
 export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
@@ -205,6 +207,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
             }}
             onRenderSuggestionsItem={props.onRenderSuggestionsItem ?? onRenderSuggestionsItem}
             onRenderItem={props.onRenderItem ?? onRenderItem}
+            themeVariant={props.themeVariant}
           />
         </div>
         <div className={styles.termFieldButton}>
@@ -260,6 +263,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
                 onRenderItem={props.onRenderItem ?? onRenderItem}
                 getTextFromItem={getTextFromItem}
                 languageTag={currentLanguageTag}
+                themeVariant={props.themeVariant}
               />
             </div>
           )

src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts

@@ -3,8 +3,11 @@ import { IBasePickerProps } from "office-ui-fabric-react/lib/components/pickers/
 import { IPickerItemProps } from "office-ui-fabric-react/lib/components/pickers/PickerItem.types";
 import { IStyle, ITheme } from "office-ui-fabric-react/lib/Styling";
 import { IStyleFunctionOrObject } from "office-ui-fabric-react/lib/Utilities";
+import { IReadonlyTheme } from "@microsoft/sp-component-base";
 
-export interface IModernTermPickerProps extends IBasePickerProps<ITermInfo> {}
+export interface IModernTermPickerProps extends IBasePickerProps<ITermInfo> {
+  themeVariant?: IReadonlyTheme;
+}
 
 export interface ITermItemProps extends IPickerItemProps<ITermInfo> {
   /** Additional CSS class(es) to apply to the TermItem root element. */

src/controls/modernTaxonomyPicker/taxonomyPanelContents/TaxonomyPanelContents.module.scss

@@ -3,6 +3,13 @@
 .taxonomyPanelContents {
   .choiceOption {
     color: "[theme: bodyText, default: #323130]";
+    display: inline-block;
+    padding-left: 26px;
+  }
+
+  .disabledChoiceOption {
+    color: "[theme: disabledBodyText, default: #323130]";
+    display: inline-block;
     padding-left: 26px;
   }
 
@@ -15,6 +22,11 @@
     margin-left: 4px;
   }
 
+  .disabledCheckbox {
+    color: "[theme: disabledBodyText, default: #323130]";
+    margin-left: 4px;
+  }
+
   .selectedCheckbox {
     font-weight: bold;
   }

src/controls/modernTaxonomyPicker/taxonomyPanelContents/TaxonomyPanelContents.tsx

@@ -46,6 +46,7 @@ import { css } from '@uifabric/utilities/lib/css';
 import * as strings from 'ControlStrings';
 import { useForceUpdate } from '@uifabric/react-hooks';
 import { ModernTermPicker } from '../modernTermPicker/ModernTermPicker';
+import { IReadonlyTheme } from "@microsoft/sp-component-base";
 
 export interface ITaxonomyFormProps {
   context: BaseComponentContext;
@@ -64,6 +65,7 @@ export interface ITaxonomyFormProps {
   onRenderItem?: (props: IPickerItemProps<ITermInfo>) => JSX.Element;
   getTextFromItem: (item: ITermInfo, currentValue?: string) => string;
   languageTag: string;
+  themeVariant?: IReadonlyTheme;
 }
 
 export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactElement<ITaxonomyFormProps> {
@@ -282,7 +284,7 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
             checked={isSelected}
             styles={selectedStyles}
             disabled={isDisabled}
-            onRenderLabel={(p) => <span className={css(styles.checkbox, isSelected && styles.selectedCheckbox)} title={p.title}>
+            onRenderLabel={(p) => <span className={css(!isDisabled && styles.checkbox, isDisabled && styles.disabledCheckbox, isSelected && styles.selectedCheckbox)} title={p.title}>
               {p.label}
             </span>}
           />
@@ -296,7 +298,7 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
                                                 text: groupHeaderProps.group.name,
                                                 styles: selectedStyle,
                                                 onRenderLabel: (p) =>
-                                                  <span id={p.labelId} className={css(styles.choiceOption, isSelected && styles.selectedChoiceOption)}>
+                                                  <span id={p.labelId} className={css(!isDisabled && styles.choiceOption, isDisabled && styles.disabledChoiceOption, isSelected && styles.selectedChoiceOption)}>
                                                     {p.text}
                                                   </span>
                                               }];
@@ -322,8 +324,8 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
 
   const onRenderHeader = (headerProps: IGroupHeaderProps): JSX.Element => {
     const groupHeaderStyles: IStyleFunctionOrObject<IGroupHeaderStyleProps, IGroupHeaderStyles> = {
-      expand: { height: 42, visibility: !headerProps.group.children || headerProps.group.level === 0 ? "hidden" : "visible" },
-      expandIsCollapsed: { visibility: !headerProps.group.children || headerProps.group.level === 0 ? "hidden" : "visible" },
+      expand: { height: 42, visibility: !headerProps.group.children || headerProps.group.level === 0 ? "hidden" : "visible", fontSize: 14 },
+      expandIsCollapsed: { visibility: !headerProps.group.children || headerProps.group.level === 0 ? "hidden" : "visible", fontSize: 14 },
       check: { display: 'none' },
       headerCount: { display: 'none' },
       groupHeaderContainer: { height: 36, paddingTop: 3, paddingBottom: 3, paddingLeft: 3, paddingRight: 3, alignItems: 'center', },
@@ -337,6 +339,7 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
         onRenderTitle={onRenderTitle}
         onToggleCollapse={onToggleCollapse}
         indentWidth={20}
+        expandButtonProps={{style: {color: props.themeVariant?.semanticColors.bodyText}}}
       />
     );
   };
@@ -441,6 +444,7 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
             }}
             onRenderSuggestionsItem={props.onRenderSuggestionsItem}
             onRenderItem={props.onRenderItem}
+            themeVariant={props.themeVariant}
           />
         </div>
       </div>