Merge pull request #1051 from Abderahman88/issue-1033

Added custom icons on Accordion control
pnp · Nov 18, 2021 · fa7232f · fa7232f
2 parents 2859c73 + d6fc581
commit fa7232f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/docs/documentation/docs/assets/accordionCustomIcons.PNG b/docs/documentation/docs/assets/accordionCustomIcons.PNG
diff --git a/docs/documentation/docs/controls/Accordion.md b/docs/documentation/docs/controls/Accordion.md
@@ -6,6 +6,10 @@ Here is an example of the control in action:
 
 ![Accordion control](../assets/accordion.png)
 
+Here is an example of the control with custom icons:
+
+![Accordion control with custom icons](../assets/accordionCustomIcons.png)
+
 ## How to use this control in your solutions
 
 - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
@@ -30,6 +34,14 @@ import { Accordion } from "@pnp/spfx-controls-react/lib/Accordion";
 }
 ```
 
+- For the `Accordion` control with custom icons:
+
+```TypeScript
+{
+  <Accordion title={item.Question} defaultCollapsed={true} className={"itemCell"} key={index} collapsedIcon={"Rocket"} expandedIcon={"InkingTool"}>
+}
+```
+
 ## Implementation
 
 The `Accordion` control can be configured with the following properties:
@@ -39,6 +51,8 @@ The `Accordion` control can be configured with the following properties:
 | title | string | yes | The title in the accordion to display. | |
 | defaultCollapsed | boolean | no | Is the accordion by default collapsed? | false |
 | className | string | no | Additional class name to add to your accordion. | |
+| collapsedIcon | string | no | Optional custom icon when accordion is collapsed [See Fluent UI icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)| ChevronRight |
+| expandedIcon | string | no | Optional custom icon when accordion is expanded [See Fluent UI icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)| ChevronDown |
 
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Accordion)
diff --git a/src/controls/accordion/Accordion.tsx b/src/controls/accordion/Accordion.tsx
@@ -20,6 +20,9 @@ export class Accordion extends React.Component<IAccordionProps, IAccordionState>
     this.state = {
       expanded: !props.defaultCollapsed
     };
+
+    !!props.collapsedIcon? collapsedIcon.iconName = props.collapsedIcon : collapsedIcon.iconName = 'ChevronRight';
+    !!props.expandedIcon? expandedIcon.iconName = props.expandedIcon : expandedIcon.iconName = 'ChevronDown';
 
     telemetry.track('ReactAccordion', {});
   }

diff --git a/src/controls/accordion/IAccordion.types.ts b/src/controls/accordion/IAccordion.types.ts
@@ -3,6 +3,8 @@ export interface IAccordionProps {
   defaultCollapsed?: boolean;
   title: string;
   className?: string;
+  collapsedIcon?: string;
+  expandedIcon?: string;
 }
 
 export interface IAccordionState {