From d08a14b17821d15f73d3b17b713cfa406e15e864 Mon Sep 17 00:00:00 2001 From: Fabio Franzini Date: Fri, 29 Apr 2022 16:15:16 +0200 Subject: [PATCH 1/6] TreeView - Add support for theme --- docs/documentation/docs/controls/TreeView.md | 4 +- .../treeView/ButtonTreeItemAction.tsx | 39 ++--- .../treeView/DropdownTreeItemAction.tsx | 21 +-- src/controls/treeView/ITreeItemActions.ts | 143 ++++++++++-------- src/controls/treeView/ITreeViewProps.ts | 24 +-- src/controls/treeView/TreeItem.tsx | 54 +++---- .../treeView/TreeItemActionsControl.tsx | 124 +++++++-------- src/controls/treeView/TreeView.module.scss | 29 ++-- src/controls/treeView/TreeView.tsx | 78 +++++++--- .../controlsTest/components/ControlsTest.tsx | 1 + 10 files changed, 273 insertions(+), 244 deletions(-) diff --git a/docs/documentation/docs/controls/TreeView.md b/docs/documentation/docs/controls/TreeView.md index fd193fc59..1444c411d 100644 --- a/docs/documentation/docs/controls/TreeView.md +++ b/docs/documentation/docs/controls/TreeView.md @@ -42,7 +42,8 @@ import { TreeView, ITreeItem, TreeViewSelectionMode } from "@pnp/spfx-controls-r defaultExpandedChildren={true} onSelect={this.onTreeItemSelect} onExpandCollapse={this.onTreeItemExpandCollapse} - onRenderItem={this.renderCustomTreeItem} /> + onRenderItem={this.renderCustomTreeItem} + theme={this.props.themeVariant} /> ``` - With the `onSelect` property you can capture the event of when the tree item in the TreeView has changed the selection: @@ -102,6 +103,7 @@ The `TreeView` control can be configured with the following properties: | onRenderItem | function | no | Optional callback to provide custom rendering of the item (default is simple text of item label and a checkbox for selection). | | defaultExpandedChildren | boolean | no | Default expand / collapse behavior for the child nodes. By default this is set to true. | | defaultExpandedKeys | string[] | no | Keys of items expanded by default. | +| theme | IPartialTheme \| ITheme | no | Set Fluent UI Theme. If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. | Enum `TreeViewSelectionMode` diff --git a/src/controls/treeView/ButtonTreeItemAction.tsx b/src/controls/treeView/ButtonTreeItemAction.tsx index 2360eb800..c4993c4cf 100644 --- a/src/controls/treeView/ButtonTreeItemAction.tsx +++ b/src/controls/treeView/ButtonTreeItemAction.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; import { CommandBarButton } from 'office-ui-fabric-react/lib/Button'; import { IIconProps } from 'office-ui-fabric-react/lib/Icon'; -import { ITreeItemAction, IConcreteTreeItemActionProps } from './ITreeItemActions'; +import * as React from 'react'; +import { IConcreteTreeItemActionProps, ITreeItemAction } from './ITreeItemActions'; import styles from './TreeView.module.scss'; /** @@ -28,18 +28,6 @@ export default class ButtonTreeItemAction extends React.Component { - let result: React.CSSProperties = { - backgroundColor: "transparent", - height: "32px" - }; - - return result; - } - /** * Check if there are action to immediatly invoke */ @@ -84,17 +72,18 @@ export default class ButtonTreeItemAction extends React.Component - { this.onActionExecute(treeItemAction); }} - iconProps={iconProps} - text={text} - title={btnTitle} - name={name} - key={treeItem.key} - className={styles.actionButton} /> - - ) +
+ { this.onActionExecute(treeItemAction); }} + iconProps={iconProps} + text={text} + title={btnTitle} + name={name} + key={treeItem.key} + className={styles.actionButton} + theme={this.props.theme} /> +
+ ) ); }) } diff --git a/src/controls/treeView/DropdownTreeItemAction.tsx b/src/controls/treeView/DropdownTreeItemAction.tsx index e2598ede3..5f20ceeb2 100644 --- a/src/controls/treeView/DropdownTreeItemAction.tsx +++ b/src/controls/treeView/DropdownTreeItemAction.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; -import { IContextualMenuItem, IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu'; import { IconButton } from 'office-ui-fabric-react/lib/Button'; +import { IContextualMenuItem, IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu'; +import * as React from 'react'; import { ITreeItem } from './ITreeItem'; -import { ITreeItemAction, IConcreteTreeItemActionProps } from './ITreeItemActions'; +import { IConcreteTreeItemActionProps, ITreeItemAction } from './ITreeItemActions'; import styles from './TreeView.module.scss'; /** @@ -47,20 +47,6 @@ export class DropdownTreeItemAction extends React.Component { - let result: React.CSSProperties = { - backgroundColor: "transparent", - width: "14px", - display: "inline-flex", - padding: "0px" - }; - - return result; - } - /** * Check if there are action to immediatly invoke */ @@ -97,6 +83,7 @@ export class DropdownTreeItemAction extends React.Component ); diff --git a/src/controls/treeView/ITreeItemActions.ts b/src/controls/treeView/ITreeItemActions.ts index c1794f474..e271e241b 100644 --- a/src/controls/treeView/ITreeItemActions.ts +++ b/src/controls/treeView/ITreeItemActions.ts @@ -1,107 +1,116 @@ import { ITreeItem } from './ITreeItem'; import { IIconProps } from 'office-ui-fabric-react/lib/Icon'; +import { ITheme } from 'office-ui-fabric-react/lib/Styling'; /** * Specifies the display mode of the tree item action. */ export enum TreeItemActionsDisplayMode { - Buttons = 1, - ContextualMenu + Buttons = 1, + ContextualMenu } /** * Tree item actions. */ export interface ITreeItemActions { - /** - * List of actions. - */ - actions: ITreeItemAction[]; - /** - * Display mode of the tree item actions. - */ - treeItemActionsDisplayMode?: TreeItemActionsDisplayMode; + /** + * List of actions. + */ + actions: ITreeItemAction[]; + /** + * Display mode of the tree item actions. + */ + treeItemActionsDisplayMode?: TreeItemActionsDisplayMode; } /** * TreeItemActionsControl properties interface */ export interface ITreeItemActionsControlProps { - /** - * Current tree item. - */ - treeItem: ITreeItem; - /** - * List of actions. - */ - treeItemActions: ITreeItemActions; - /** - * Callback after execution of tree item action. - */ - treeItemActionCallback: () => void; + /** + * Current tree item. + */ + treeItem: ITreeItem; + /** + * List of actions. + */ + treeItemActions: ITreeItemActions; + /** + * Callback after execution of tree item action. + */ + treeItemActionCallback: () => void; + /** + * Set Fluent UI Theme. + * */ + theme: ITheme; } /** * TreeItemActionsControl state interface */ export interface ITreeItemActionsControlState { - /** - * Specifies the list of the available actions for the tree item. - */ - availableActions: ITreeItemAction[]; - /** - * TreeItemAction display mode. - */ - displayMode: TreeItemActionsDisplayMode; + /** + * Specifies the list of the available actions for the tree item. + */ + availableActions: ITreeItemAction[]; + /** + * TreeItemAction display mode. + */ + displayMode: TreeItemActionsDisplayMode; } /** * ConcreteTreeItemAction properties interface */ export interface IConcreteTreeItemActionProps { - /** - * Specifies the list of the available actions for the tree item. - */ - treeItemActions: ITreeItemAction[]; - /** - * Current tree item - */ - treeItem: ITreeItem; + /** + * Specifies the list of the available actions for the tree item. + */ + treeItemActions: ITreeItemAction[]; + /** + * Current tree item + */ + treeItem: ITreeItem; - /** - * Method to be executed when action is fired. - */ - treeItemActionCallback: () => void; + /** + * Method to be executed when action is fired. + */ + treeItemActionCallback: () => void; + /** + * Set Fluent UI Theme.v + * */ + theme: ITheme; } /** * Interface represents the possible action that could be execute on tree item level. */ export interface ITreeItemAction { - /** - * Action ID - */ - id: string; - /** - * Action title - */ - title?: string; - /** - * Icon to be displayed for the action. - */ - iconProps?: IIconProps; - /** - * Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering. - */ - hidden?: boolean; - /** - * Specifies if you want to invoke the action on render - */ - invokeActionOnRender?: boolean; + /** + * Action ID + */ + id: string; + /** + * Action title + */ + title?: string; + /** + * Icon to be displayed for the action. + */ + iconProps?: IIconProps; + /** + * Specify if the action is hidden. This could be used for instance when you want to invoke the action right after rendering. + */ + hidden?: boolean; + /** + * Specifies if you want to invoke the action on render + */ + invokeActionOnRender?: boolean; - /** - * Method to be executed when action is fired. - * @param currentTreeItem - */ - actionCallback: (currentTreeItem: ITreeItem) => void; + /** + * Method to be executed when action is fired. + * @param currentTreeItem + */ + actionCallback: (currentTreeItem: ITreeItem) => void; } diff --git a/src/controls/treeView/ITreeViewProps.ts b/src/controls/treeView/ITreeViewProps.ts index e1619083a..6a1723268 100644 --- a/src/controls/treeView/ITreeViewProps.ts +++ b/src/controls/treeView/ITreeViewProps.ts @@ -1,3 +1,4 @@ +import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling'; import { ITreeItem } from './ITreeItem'; import { TreeItemActionsDisplayMode } from './ITreeItemActions'; @@ -43,10 +44,10 @@ export interface ITreeViewProps { * By default this is set to false. */ selectChildrenIfParentSelected?: boolean; - /** - * Specifies if the childrens should be selected when parent is selected. Flagged enum, so values can be combined eg. SelectChildrenMode.Select | SelectChildrenMode.Unselect - * By default this is set to None. - */ + /** + * Specifies if the childrens should be selected when parent is selected. Flagged enum, so values can be combined eg. SelectChildrenMode.Select | SelectChildrenMode.Unselect + * By default this is set to None. + */ selectChildrenMode?: SelectChildrenMode; /** * Specifies if the checkboxes should be displayed for selection. @@ -59,7 +60,7 @@ export interface ITreeViewProps { /** * Keys of items expanded by default */ - defaultExpandedKeys?: string[]; + defaultExpandedKeys?: string[]; /** * Keys of items selected by default */ @@ -86,9 +87,14 @@ export interface ITreeViewProps { * @argument item The tree item. */ onRenderItem?: (item: ITreeItem) => JSX.Element; - /** - * Default expand / collapse behavior for the child nodes. - * By default this is set to true. - */ + /** + * Default expand / collapse behavior for the child nodes. + * By default this is set to true. + */ defaultExpandedChildren?: boolean; + /** + * Set Fluent UI Theme. + * If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. + */ + theme?: IPartialTheme | ITheme; } diff --git a/src/controls/treeView/TreeItem.tsx b/src/controls/treeView/TreeItem.tsx index a72c0d3b8..3c0472dc0 100644 --- a/src/controls/treeView/TreeItem.tsx +++ b/src/controls/treeView/TreeItem.tsx @@ -1,14 +1,15 @@ -import * as React from 'react'; -import styles from './TreeView.module.scss'; +import * as strings from 'ControlStrings'; +import { IconButton } from 'office-ui-fabric-react/lib/Button'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; -import { IconButton } from 'office-ui-fabric-react/lib/Button'; -import * as strings from 'ControlStrings'; +import { ITheme } from 'office-ui-fabric-react/lib/Styling'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; +import * as React from 'react'; import { ITreeItem } from './ITreeItem'; +import { TreeItemActionsDisplayMode } from './ITreeItemActions'; import { TreeViewSelectionMode } from './ITreeViewProps'; import TreeItemActionsControl from './TreeItemActionsControl'; -import { TreeItemActionsDisplayMode } from './ITreeItemActions'; -import { css } from 'office-ui-fabric-react/lib/Utilities'; +import styles from './TreeView.module.scss'; /** * TreeItem properties interface @@ -61,14 +62,16 @@ export interface ITreeItemProps { onRenderItem?: (item: ITreeItem) => JSX.Element; nodesToExpand: any[]; - /** - * Specifies whether current tree item's children should be rendered as expanded. - */ + /** + * Specifies whether current tree item's children should be rendered as expanded. + */ defaultExpandedChildren?: boolean; + /** + * Set Fluent UI Theme. + */ + theme: ITheme; } - - /** * TreeItem state interface */ @@ -83,13 +86,6 @@ export interface ITreeItemState { expanded?: boolean; } -/** - * CSS styles for checkbox - */ -const checkBoxStyle: React.CSSProperties = { - display: "inline-flex" -}; - /** * Renders the controls for TreeItem component */ @@ -155,14 +151,14 @@ export default class TreeItem extends React.Component item.key === treeItem.key); - let _isExpanded:boolean=this.state.expanded; - - if(!_isExpanded && nodesToExpand.indexOf(this.props.treeItem.key) == -1){ - _isExpanded=false; + let _isExpanded: boolean = this.state.expanded; + + if (!_isExpanded && nodesToExpand.indexOf(this.props.treeItem.key) == -1) { + _isExpanded = false; } this.setState({ @@ -202,9 +198,9 @@ export default class TreeItem extends React.Component - +   - + } {item.label} @@ -255,6 +251,7 @@ export default class TreeItem extends React.Component ); }); @@ -299,7 +296,8 @@ export default class TreeItem extends React.Component this._handleExpandCollapse()}> + onClick={() => this._handleExpandCollapse()} + theme={this.props.theme}> } @@ -328,6 +326,7 @@ export default class TreeItem extends React.Component } { @@ -343,7 +342,8 @@ export default class TreeItem extends React.Component + treeItemActionCallback={this.treeItemActionCallback} + theme={this.props.theme} /> } diff --git a/src/controls/treeView/TreeItemActionsControl.tsx b/src/controls/treeView/TreeItemActionsControl.tsx index 4e98ec673..aa1d3d229 100644 --- a/src/controls/treeView/TreeItemActionsControl.tsx +++ b/src/controls/treeView/TreeItemActionsControl.tsx @@ -1,80 +1,82 @@ import * as React from 'react'; -import { ITreeItemAction, ITreeItemActionsControlProps, ITreeItemActionsControlState, TreeItemActionsDisplayMode } from './ITreeItemActions'; -import { DropdownTreeItemAction } from './DropdownTreeItemAction'; import ButtonTreeItemAction from './ButtonTreeItemAction'; +import { DropdownTreeItemAction } from './DropdownTreeItemAction'; +import { ITreeItemAction, ITreeItemActionsControlProps, ITreeItemActionsControlState, TreeItemActionsDisplayMode } from './ITreeItemActions'; /** * Renders the controls for TreeItem actions component */ export default class TreeItemActionsControl extends React.Component { - /** - * Constructor method - * @param props properties interface - */ - constructor(props: ITreeItemActionsControlProps) { - super(props); + /** + * Constructor method + * @param props properties interface + */ + constructor(props: ITreeItemActionsControlProps) { + super(props); - const { treeItemActions } = this.props; - const displayMode = treeItemActions.treeItemActionsDisplayMode ? treeItemActions.treeItemActionsDisplayMode : TreeItemActionsDisplayMode.Buttons; + const { treeItemActions } = this.props; + const displayMode = treeItemActions.treeItemActionsDisplayMode ? treeItemActions.treeItemActionsDisplayMode : TreeItemActionsDisplayMode.Buttons; - this.state = { - availableActions: [], - displayMode - }; - } + this.state = { + availableActions: [], + displayMode + }; + } - /** - * componentWillMount lifecycle hook - */ - public componentWillMount(): void { - this.getAvailableActions(); - } + /** + * componentWillMount lifecycle hook + */ + public componentWillMount(): void { + this.getAvailableActions(); + } - /** - * Get the available treeItem actions - */ - private async getAvailableActions(): Promise { - const { treeItemActions } = this.props; + /** + * Get the available treeItem actions + */ + private async getAvailableActions(): Promise { + const { treeItemActions } = this.props; - // Prepare list of the available actions - const availableActions: ITreeItemAction[] = []; + // Prepare list of the available actions + const availableActions: ITreeItemAction[] = []; - if (treeItemActions.actions) { - for (const action of treeItemActions.actions) { - availableActions.push(action); - } - } - - this.setState({ - availableActions - }); + if (treeItemActions.actions) { + for (const action of treeItemActions.actions) { + availableActions.push(action); + } } - /** - * Default React render method - */ - public render(): React.ReactElement { - const { treeItem } = this.props; - const { displayMode, availableActions } = this.state; + this.setState({ + availableActions + }); + } - if (!availableActions || availableActions.length <= 0 || !treeItem) { - return null; - } + /** + * Default React render method + */ + public render(): React.ReactElement { + const { treeItem } = this.props; + const { displayMode, availableActions } = this.state; - return ( -
- { - displayMode == TreeItemActionsDisplayMode.ContextualMenu ? - - : - - } -
- ); + if (!availableActions || availableActions.length <= 0 || !treeItem) { + return null; } + + return ( +
+ { + displayMode == TreeItemActionsDisplayMode.ContextualMenu ? + + : + + } +
+ ); + } } diff --git a/src/controls/treeView/TreeView.module.scss b/src/controls/treeView/TreeView.module.scss index 5a36fed11..86fc48074 100644 --- a/src/controls/treeView/TreeView.module.scss +++ b/src/controls/treeView/TreeView.module.scss @@ -13,6 +13,7 @@ vertical-align: middle; margin: 4px 4px 0 0; cursor: pointer; + &>button { height: 20px; width: 20px; @@ -29,22 +30,22 @@ &.disabled { cursor: default; - color: '[theme:disabledBodyText, default:#a6a6a6]'; + color: var(--treeview-disabledBodyText); .labels { .itemSubLabel { - color: '[theme:disabledSubtext, default:#d0d0d0]'; + color: var(--treeview-disabledSubtext); } } } &.noCheckBox:not(.disabled) { - &:hover { - background-color: '[theme:listItemBackgroundHover, default:#f4f4f4]'; + &:hover { + background-color: var(--treeview-listItemBackgroundHovered); } &.checked { - background-color: '[theme:listItemBackgroundChecked, default:#eaeaea]'; + background-color: var(--treeview-listItemBackgroundChecked); } } @@ -59,13 +60,14 @@ .labels { line-height: 18px; + .itemLabel { padding: 0; } .itemSubLabel { font-size: 12px; - color: '[theme:bodySubtext, default:#666666]'; + color: var(--treeview-bodySubtext); } } } @@ -84,24 +86,27 @@ height: 20px; padding: 0; background-color: transparent; + &:hover { - background-color: '[theme:buttonBackgroundHovered, default:#f4f4f4]'; - color: '[theme:buttonTextHovered, default:#212121]'; + background-color: var(--treeview-buttonBackgroundHovered); + color: var(--treeview-buttonTextHovered); } + &:pressed { - background-color: '[theme:buttonBackgroundPressed, default:#eaeaea]'; - color: '[theme:buttonTextPressed, default:#212121]'; + background-color: var(--treeview-buttonBackgroundPressed); + color: var(--treeview-buttonTextPressed); } } } .tree { - label > span { + label>span { padding-left: 0px; } + .blankspace { padding-left: 35px; } } -} \ No newline at end of file +} diff --git a/src/controls/treeView/TreeView.tsx b/src/controls/treeView/TreeView.tsx index b50583c30..502ad3592 100644 --- a/src/controls/treeView/TreeView.tsx +++ b/src/controls/treeView/TreeView.tsx @@ -1,11 +1,15 @@ -import * as React from 'react'; -import styles from './TreeView.module.scss'; +import { ThemeContext } from '@fluentui/react-theme-provider/lib/ThemeContext'; +import { Theme } from '@fluentui/react-theme-provider/lib/types'; +import { Json } from 'adaptive-expressions/lib/builtinFunctions'; import uniqBy from 'lodash/uniqBy'; +import * as React from 'react'; +import * as telemetry from '../../common/telemetry'; +import { getFluentUIThemeOrDefault } from '../../common/utilities/ThemeUtility'; +import { ITreeItem } from './ITreeItem'; import { ITreeViewProps, SelectChildrenMode, TreeViewSelectionMode } from './ITreeViewProps'; import { ITreeViewState } from './ITreeViewState'; -import { ITreeItem } from './ITreeItem'; import TreeItem from './TreeItem'; -import * as telemetry from '../../common/telemetry'; +import styles from './TreeView.module.scss'; /** * Renders the controls for TreeItem component @@ -13,6 +17,7 @@ import * as telemetry from '../../common/telemetry'; export class TreeView extends React.Component { private nodesToExpand: string[] = []; + private divToInjectCssVariables = React.createRef(); /** * Constructor method * @param props properties interface @@ -38,7 +43,6 @@ export class TreeView extends React.Component { } } - private pathTo = (array: ITreeItem[], target: string): string => { let result: string; if (array) { @@ -254,29 +258,53 @@ export class TreeView extends React.Component { defaultExpanded, defaultExpandedChildren = this.props.defaultExpandedChildren ?? true, defaultExpandedKeys = this.props.defaultExpandedKeys ?? [], + theme } = this.props; return ( -
- { - items.map((treeNodeItem, index) => ( - - )) - } +
+ + {(contextTheme: Theme | undefined) => { + + const themeToApply = getFluentUIThemeOrDefault((theme) ? theme : contextTheme); + const div = this.divToInjectCssVariables.current; + if (div) { + div.style.setProperty(`--treeview-disabledBodyText`, themeToApply.semanticColors.disabledBodyText); + div.style.setProperty(`--treeview-disabledSubtext`, themeToApply.semanticColors.disabledSubtext); + div.style.setProperty(`--treeview-listItemBackgroundHovered`, themeToApply.semanticColors.listItemBackgroundHovered); + div.style.setProperty(`--treeview-listItemBackgroundChecked`, themeToApply.semanticColors.listItemBackgroundChecked); + div.style.setProperty(`--treeview-bodySubtext`, themeToApply.semanticColors.bodySubtext); + div.style.setProperty(`--treeview-buttonBackgroundHovered`, themeToApply.semanticColors.buttonBackgroundHovered); + div.style.setProperty(`--treeview-buttonTextHovered`, themeToApply.semanticColors.buttonTextHovered); + div.style.setProperty(`--treeview-buttonBackgroundPressed`, themeToApply.semanticColors.buttonBackgroundPressed); + div.style.setProperty(`--treeview-buttonTextPressed`, themeToApply.semanticColors.buttonTextPressed); + } + + return ( +
+ { + items.map((treeNodeItem, index) => ( + + )) + } +
); + }} +
); } diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 7ef5eedde..70feeb1fa 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -1765,6 +1765,7 @@ export default class ControlsTest extends React.Component From 89ee37d64e5180cb98a3fe8c119c95c76d64bb84 Mon Sep 17 00:00:00 2001 From: Fabio Franzini Date: Fri, 29 Apr 2022 16:16:33 +0200 Subject: [PATCH 2/6] commit changelog --- CHANGELOG.md | 1 + docs/documentation/docs/about/release-notes.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d1b1de72..5b4f117d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ - `ComboboxListItemPicker`: options are not reloaded after the filter is changed [#1180](https://github.com/pnp/sp-dev-fx-controls-react/issues/1180) - `FieldRendererHelper`: Add missing PnPjs import to SPHelper [#1140](https://github.com/pnp/sp-dev-fx-controls-react/issues/1140) - `RichText`: Update font style and font size on property pane [#1151](https://github.com/pnp/sp-dev-fx-controls-react/issues/1151) +- `Placeholder`: Support section variations for themes [#1193](https://github.com/pnp/sp-dev-fx-controls-react/issues/1193) ## 3.7.2 diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 5d1b1de72..5b4f117d2 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -23,6 +23,7 @@ - `ComboboxListItemPicker`: options are not reloaded after the filter is changed [#1180](https://github.com/pnp/sp-dev-fx-controls-react/issues/1180) - `FieldRendererHelper`: Add missing PnPjs import to SPHelper [#1140](https://github.com/pnp/sp-dev-fx-controls-react/issues/1140) - `RichText`: Update font style and font size on property pane [#1151](https://github.com/pnp/sp-dev-fx-controls-react/issues/1151) +- `Placeholder`: Support section variations for themes [#1193](https://github.com/pnp/sp-dev-fx-controls-react/issues/1193) ## 3.7.2 From 1317f660d57f38c8443989f2cf7793306e5e873d Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 2 May 2022 11:49:22 -0400 Subject: [PATCH 3/6] Update CHANGELOG.md --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b4f117d2..5d1b1de72 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,6 @@ - `ComboboxListItemPicker`: options are not reloaded after the filter is changed [#1180](https://github.com/pnp/sp-dev-fx-controls-react/issues/1180) - `FieldRendererHelper`: Add missing PnPjs import to SPHelper [#1140](https://github.com/pnp/sp-dev-fx-controls-react/issues/1140) - `RichText`: Update font style and font size on property pane [#1151](https://github.com/pnp/sp-dev-fx-controls-react/issues/1151) -- `Placeholder`: Support section variations for themes [#1193](https://github.com/pnp/sp-dev-fx-controls-react/issues/1193) ## 3.7.2 From adf457921e7aff5c81c6672d0eb93b241d8b6cfb Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 2 May 2022 11:49:37 -0400 Subject: [PATCH 4/6] Update release-notes.md --- docs/documentation/docs/about/release-notes.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 5b4f117d2..5d1b1de72 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -23,7 +23,6 @@ - `ComboboxListItemPicker`: options are not reloaded after the filter is changed [#1180](https://github.com/pnp/sp-dev-fx-controls-react/issues/1180) - `FieldRendererHelper`: Add missing PnPjs import to SPHelper [#1140](https://github.com/pnp/sp-dev-fx-controls-react/issues/1140) - `RichText`: Update font style and font size on property pane [#1151](https://github.com/pnp/sp-dev-fx-controls-react/issues/1151) -- `Placeholder`: Support section variations for themes [#1193](https://github.com/pnp/sp-dev-fx-controls-react/issues/1193) ## 3.7.2 From e5fd0e9d290fb1d94583488601b46fd227e40cfd Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 2 May 2022 11:51:47 -0400 Subject: [PATCH 5/6] Return import React back --- src/controls/treeView/TreeItem.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/controls/treeView/TreeItem.tsx b/src/controls/treeView/TreeItem.tsx index 3c0472dc0..ce6229cd4 100644 --- a/src/controls/treeView/TreeItem.tsx +++ b/src/controls/treeView/TreeItem.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import * as strings from 'ControlStrings'; import { IconButton } from 'office-ui-fabric-react/lib/Button'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; From 9dfcb0279a7c8bfc3bfdad8ebdee2aee02480bc9 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Mon, 2 May 2022 11:52:47 -0400 Subject: [PATCH 6/6] Update TreeView.tsx --- src/controls/treeView/TreeView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/treeView/TreeView.tsx b/src/controls/treeView/TreeView.tsx index 502ad3592..b0178451d 100644 --- a/src/controls/treeView/TreeView.tsx +++ b/src/controls/treeView/TreeView.tsx @@ -1,8 +1,8 @@ +import * as React from 'react'; import { ThemeContext } from '@fluentui/react-theme-provider/lib/ThemeContext'; import { Theme } from '@fluentui/react-theme-provider/lib/types'; import { Json } from 'adaptive-expressions/lib/builtinFunctions'; import uniqBy from 'lodash/uniqBy'; -import * as React from 'react'; import * as telemetry from '../../common/telemetry'; import { getFluentUIThemeOrDefault } from '../../common/utilities/ThemeUtility'; import { ITreeItem } from './ITreeItem';