Merge pull request #1200 from fabiofranzini/accessibleaccordion-control-support-theme

Added Theme support for AccessibleAccordion control

Author: AJIXuMuK

docs/documentation/docs/controls/AccessibleAccordion.md

@@ -73,6 +73,7 @@ The `Accordion` control can be configured with the following properties:
 | preExpanded | string[] | no | Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches any one of these strings will be expanded on mount. | `[]` |
 | className | string | no | Class(es) to apply to element. | "accordion" |
 | onChange | (string[]) => void | no | Callback which is invoked when items are expanded or collapsed. Gets passed `uuid`s of the currently expanded `AccordionItem`s. | |
+| 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. |
 
 
 

src/controls/accessibleAccordion/components/Accordion.tsx

@@ -1,44 +1,69 @@
 import "../css/AccordionStylesOverride.css";
 
 import * as React from "react";
-
 import { DivAttributes } from "../helpers/types";
 import { Provider } from "./AccordionContext";
 import { UUID } from "./ItemContext";
+import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
+import { getFluentUIThemeOrDefault } from "../../../common/utilities/ThemeUtility";
+import { useTheme } from "@fluentui/react-theme-provider/lib/useTheme";
+import { useEffect, useRef } from "react";
 
 type AccordionProps = Pick<
-    DivAttributes,
-    Exclude<keyof DivAttributes, 'onChange'>
-> & {
+  DivAttributes,
+  Exclude<keyof DivAttributes, 'onChange'>> & {
     className?: string;
     preExpanded?: UUID[];
     allowMultipleExpanded?: boolean;
     allowZeroExpanded?: boolean;
     onChange?(args: UUID[]): void;
-};
+    /**
+    * 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;
+  };
 
 const Accordion = ({
-    className = 'accordion',
-    allowMultipleExpanded,
-    allowZeroExpanded,
-    onChange,
-    preExpanded,
-    ...rest
+  className = 'accordion',
+  allowMultipleExpanded,
+  allowZeroExpanded,
+  onChange,
+  preExpanded,
+  theme,
+  ...rest
 }: AccordionProps): JSX.Element => {
-    return (
-        <Provider
-            preExpanded={preExpanded}
-            allowMultipleExpanded={allowMultipleExpanded}
-            allowZeroExpanded={allowZeroExpanded}
-            onChange={onChange}
-        >
-            <div
-                data-accordion-component="Accordion"
-                className={className}
-                {...rest}
-            />
-        </Provider>
-    );
+
+  const contextTheme = useTheme();
+  const divElement = useRef(null);
+
+  useEffect(() => {
+    if (divElement.current) {
+      const themeToApply = getFluentUIThemeOrDefault((theme) ? theme : contextTheme);
+      divElement.current.style.setProperty(`--accordion-bodyDivider`, themeToApply.semanticColors.bodyDivider);
+      divElement.current.style.setProperty(`--accordion-buttonBackground`, themeToApply.semanticColors.buttonBackground);
+      divElement.current.style.setProperty(`--accordion-buttonText`, themeToApply.semanticColors.buttonText);
+      divElement.current.style.setProperty(`--accordion-buttonBackgroundHovered`, themeToApply.semanticColors.buttonBackgroundHovered);
+      divElement.current.style.setProperty(`--accordion-bodyBackground`, themeToApply.semanticColors.bodyBackground);
+      divElement.current.style.setProperty(`--accordion-bodyText`, themeToApply.semanticColors.bodyText);
+    }
+  });
+
+  return (
+    <Provider
+      preExpanded={preExpanded}
+      allowMultipleExpanded={allowMultipleExpanded}
+      allowZeroExpanded={allowZeroExpanded}
+      onChange={onChange}
+    >
+      <div
+        data-accordion-component="Accordion"
+        className={className}
+        ref={divElement}
+        {...rest}
+      />
+    </Provider>
+  );
 };
 
 export default Accordion;

src/controls/accessibleAccordion/components/AccordionContext.tsx

@@ -1,7 +1,5 @@
 // tslint:disable:max-classes-per-file
 
-import "../css/AccordionStylesOverride.css";
-
 import * as React from "react";
 
 import * as telemetry from '../../../common/telemetry';
@@ -82,7 +80,7 @@ export class Provider extends React.PureComponent<
         return this.state.isItemExpanded(key);
     }
 
- private   getPanelAttributes = (
+ private  getPanelAttributes = (
         key: UUID,
         dangerouslySetExpanded?: boolean,
     ): InjectedPanelAttributes => {

src/controls/accessibleAccordion/components/AccordionItem.tsx

@@ -1,5 +1,3 @@
-import "../css/AccordionStylesOverride.css";
-
 import * as React from "react";
 import { useState } from "react";
 

src/controls/accessibleAccordion/components/AccordionItemButton.tsx

@@ -1,5 +1,3 @@
-import "../css/AccordionStylesOverride.css";
-
 import * as React from "react";
 
 import { InjectedButtonAttributes } from "../helpers/AccordionStore";

src/controls/accessibleAccordion/components/AccordionItemHeading.tsx

@@ -1,5 +1,3 @@
-import "../css/AccordionStylesOverride.css";
-
 import * as React from "react";
 
 import { InjectedHeadingAttributes } from "../helpers/AccordionStore";

src/controls/accessibleAccordion/components/AccordionItemPanel.tsx

@@ -1,5 +1,3 @@
-import "../css/AccordionStylesOverride.css";
-
 import * as React from "react";
 
 import { DivAttributes } from "../helpers/types";

src/controls/accessibleAccordion/components/AccordionItemState.tsx

@@ -1,5 +1,3 @@
-import "../css/AccordionStylesOverride.css";
-
 import * as React from "react";
 
 import { DivAttributes } from "../helpers/types";

src/controls/accessibleAccordion/components/ItemContext.tsx

@@ -1,7 +1,5 @@
 // tslint:disable:max-classes-per-file
 
-import "../css/AccordionStylesOverride.css";
-
 import * as React from "react";
 
 import {

src/controls/accessibleAccordion/css/AccordionStylesOverride.css

@@ -1,23 +1,30 @@
 /**
 * ----------------------------------------------
-*accordion styles Override default
+* accordion styles Override default
 * ----------------------------------------------
 **/
 .accordion {
   margin-top: 20px;
-  border-bottom: 1px solid #edebe9;
+  border-bottom: 1px solid var(--accordion-bodyDivider);
+  color: var(--accordion-bodyText);
+  background-color: var(--accordion-bodyBackground);
+}
+
+.accordion__item:last-child {
+  margin-bottom: -0.5px;
 }
 
 .accordion__button {
   font-size: 16px;
   font-weight: 400;
-  color: #323130;
+  color: var(--accordion-buttonText);
+  background-color: var(--accordion-buttonBackground);
 }
 
 .accordion__button {
   background: 0 0;
   border: 1px solid transparent;
-  border-top-color: #edebe9;
+  border-top-color: var(--accordion-bodyDivider);
   border-radius: 0;
   cursor: pointer;
   display: block;
@@ -26,17 +33,19 @@
   padding-left: 10px;
 }
 
- .accordion__button:focus {
+.accordion__button:focus {
   outline-width: 0.5px;
   outline-style: solid;
+  border-top-color: transparent;
 }
+
 .accordion__button:hover {
-  background-color: rgb(235, 235, 235);
+  background-color: var(--accordion-buttonBackgroundHovered);
 }
 
 .accordion__button::after {
-  display:  block;
-  float:right;
+  display: block;
+  float: right;
   content: '';
   height: 10px;
   width: 10px;
@@ -57,21 +66,20 @@
 }
 
 .accordion__panel {
+  margin-top: 1px;
   padding-top: 10px;
   padding-bottom: 20px;
-  animation: fadein 0.35s ease-in;
+  color: var(--accordion-bodyText);
+  background-color: var(--accordion-bodyBackground);
+  animation: accordionFadeIn 0.35s ease-in;
 }
 
-/* -------------------------------------------------- */
-/* ---------------- Animation part ------------------ */
-/* -------------------------------------------------- */
-
-@keyframes fadein {
+@keyframes accordionFadeIn {
   0% {
-      opacity: 0;
+    opacity: 0;
   }
 
   100% {
-      opacity: 1;
+    opacity: 1;
   }
 }