Merge pull request microsoft-search#3547 from SherpasGroup/fix-sectio…

…n-styling Fix text styling in sections with dark colors
davemehr · Feb 20, 2024 · 9a001ef · 9a001ef
2 parents b0e5ca2 + ea32093
commit 9a001ef
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/search-parts/src/components/CollapsibleContentComponent.tsx b/search-parts/src/components/CollapsibleContentComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseWebComponent } from '@pnp/modern-search-extensibility';
 import * as ReactDOM from 'react-dom';
-import { IGroup, IGroupDividerProps, Icon, Text, GroupedList } from '@fluentui/react';
+import { IGroup, IGroupDividerProps, Icon, Text, GroupedList, ITextProps, IStyleFunctionOrObject, ITextStyles } from '@fluentui/react';
 import { IReadonlyTheme } from '@microsoft/sp-component-base';
 import styles from './CollapsibleContentComponent.module.scss';
 import 'core-js/features/dom-collections';
@@ -126,7 +126,12 @@ export class CollapsibleContentComponent extends React.Component<ICollapsibleCon
     }
 
     private _onRenderHeader(props: IGroupDividerProps): JSX.Element {
-
+        let textColor: string = this.props.themeVariant && this.props.themeVariant.isInverted ? (this.props.themeVariant ? this.props.themeVariant.semanticColors.bodyText : '#323130') : this.props.themeVariant.semanticColors.inputText;
+        const textComponentStyles: IStyleFunctionOrObject<ITextProps, ITextStyles> = {
+            root: {
+                color: textColor
+            }
+        };
         return (
             <div style={{ position: 'relative' }}>
                 <div
@@ -142,7 +147,7 @@ export class CollapsibleContentComponent extends React.Component<ICollapsibleCon
                         }
                     }}
                 >
-                    <Text variant={'large'}>{props.group.name}</Text>
+                    <Text variant={'large'} styles={textComponentStyles}>{props.group.name}</Text>
                     <div className={styles.collapsible__filterPanel__body__headerIcon}>
                         {props.group.isCollapsed ?
                             <Icon iconName='ChevronDown' />

diff --git a/search-parts/src/components/filters/FilterCheckBoxComponent.tsx b/search-parts/src/components/filters/FilterCheckBoxComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseWebComponent, IDataFilterInfo, IDataFilterValueInfo, ExtensibilityConstants } from '@pnp/modern-search-extensibility';
 import * as ReactDOM from 'react-dom';
-import { Checkbox, ChoiceGroup, IChoiceGroupOption, ITheme, Text } from '@fluentui/react';
+import { Checkbox, ChoiceGroup, IChoiceGroupOption, IStyleFunctionOrObject, ITextProps, ITextStyles, ITheme, Text } from '@fluentui/react';
 import { IReadonlyTheme } from '@microsoft/sp-component-base';
 
 export interface IFilterCheckBoxProps {
@@ -72,6 +72,11 @@ export class FilterCheckBoxComponent extends React.Component<IFilterCheckBoxProp
 
         let renderInput: JSX.Element = null;
         let textColor: string = this.props.themeVariant && this.props.themeVariant.isInverted ? (this.props.themeVariant ? this.props.themeVariant.semanticColors.bodyText : '#323130') : this.props.themeVariant.semanticColors.inputText;
+        const textComponentStyles: IStyleFunctionOrObject<ITextProps, ITextStyles> = {
+            root: {
+                color: textColor
+            }
+        };
 
         if (this.props.isMulti) {
             renderInput = <Checkbox
@@ -96,7 +101,7 @@ export class FilterCheckBoxComponent extends React.Component<IFilterCheckBoxProp
                     this.props.onChecked(this.props.filterName, filterValue);
                 }}
                 onRenderLabel={(props, defaultRender) => {
-                    return <Text block nowrap title={props.label}>{props.label}</Text>;
+                    return <Text block nowrap styles={textComponentStyles} title={props.label}>{props.label}</Text>;
                 }}
             />;
         } else {