Skip to content

Commit ea33c3e

Browse files
AJIXuMuKAJIXuMuK
authored
Merge pull request #1200 from fabiofranzini/accessibleaccordion-control-support-theme
Added Theme support for AccessibleAccordion control
2 parents 5292f91 + 9d0cf28 commit ea33c3e

13 files changed

Lines changed: 77 additions & 124 deletions

File tree

‎docs/documentation/docs/controls/AccessibleAccordion.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ The `Accordion` control can be configured with the following properties:
7373
| 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. | `[]` |
7474
| className | string | no | Class(es) to apply to element. | "accordion" |
7575
| onChange | (string[]) => void | no | Callback which is invoked when items are expanded or collapsed. Gets passed `uuid`s of the currently expanded `AccordionItem`s. | |
76+
| 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. |
7677
7778
7879

‎src/controls/accessibleAccordion/components/Accordion.tsx‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,69 @@
11
import "../css/AccordionStylesOverride.css";
22

33
import * as React from "react";
4-
54
import { DivAttributes } from "../helpers/types";
65
import { Provider } from "./AccordionContext";
76
import { UUID } from "./ItemContext";
7+
import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
8+
import { getFluentUIThemeOrDefault } from "../../../common/utilities/ThemeUtility";
9+
import { useTheme } from "@fluentui/react-theme-provider/lib/useTheme";
10+
import { useEffect, useRef } from "react";
811

912
type AccordionProps = Pick<
10-
DivAttributes,
11-
Exclude<keyof DivAttributes, 'onChange'>
12-
> & {
13+
DivAttributes,
14+
Exclude<keyof DivAttributes, 'onChange'>> & {
1315
className?: string;
1416
preExpanded?: UUID[];
1517
allowMultipleExpanded?: boolean;
1618
allowZeroExpanded?: boolean;
1719
onChange?(args: UUID[]): void;
18-
};
20+
/**
21+
* Set Fluent UI Theme.
22+
* 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.
23+
*/
24+
theme?: IPartialTheme | ITheme;
25+
};
1926

2027
const Accordion = ({
21-
className = 'accordion',
22-
allowMultipleExpanded,
23-
allowZeroExpanded,
24-
onChange,
25-
preExpanded,
26-
...rest
28+
className = 'accordion',
29+
allowMultipleExpanded,
30+
allowZeroExpanded,
31+
onChange,
32+
preExpanded,
33+
theme,
34+
...rest
2735
}: AccordionProps): JSX.Element => {
28-
return (
29-
<Provider
30-
preExpanded={preExpanded}
31-
allowMultipleExpanded={allowMultipleExpanded}
32-
allowZeroExpanded={allowZeroExpanded}
33-
onChange={onChange}
34-
>
35-
<div
36-
data-accordion-component="Accordion"
37-
className={className}
38-
{...rest}
39-
/>
40-
</Provider>
41-
);
36+
37+
const contextTheme = useTheme();
38+
const divElement = useRef(null);
39+
40+
useEffect(() => {
41+
if (divElement.current) {
42+
const themeToApply = getFluentUIThemeOrDefault((theme) ? theme : contextTheme);
43+
divElement.current.style.setProperty(`--accordion-bodyDivider`, themeToApply.semanticColors.bodyDivider);
44+
divElement.current.style.setProperty(`--accordion-buttonBackground`, themeToApply.semanticColors.buttonBackground);
45+
divElement.current.style.setProperty(`--accordion-buttonText`, themeToApply.semanticColors.buttonText);
46+
divElement.current.style.setProperty(`--accordion-buttonBackgroundHovered`, themeToApply.semanticColors.buttonBackgroundHovered);
47+
divElement.current.style.setProperty(`--accordion-bodyBackground`, themeToApply.semanticColors.bodyBackground);
48+
divElement.current.style.setProperty(`--accordion-bodyText`, themeToApply.semanticColors.bodyText);
49+
}
50+
});
51+
52+
return (
53+
<Provider
54+
preExpanded={preExpanded}
55+
allowMultipleExpanded={allowMultipleExpanded}
56+
allowZeroExpanded={allowZeroExpanded}
57+
onChange={onChange}
58+
>
59+
<div
60+
data-accordion-component="Accordion"
61+
className={className}
62+
ref={divElement}
63+
{...rest}
64+
/>
65+
</Provider>
66+
);
4267
};
4368

4469
export default Accordion;

‎src/controls/accessibleAccordion/components/AccordionContext.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// tslint:disable:max-classes-per-file
22

3-
import "../css/AccordionStylesOverride.css";
4-
53
import * as React from "react";
64

75
import * as telemetry from '../../../common/telemetry';
@@ -82,7 +80,7 @@ export class Provider extends React.PureComponent<
8280
return this.state.isItemExpanded(key);
8381
}
8482

85-
private getPanelAttributes = (
83+
private getPanelAttributes = (
8684
key: UUID,
8785
dangerouslySetExpanded?: boolean,
8886
): InjectedPanelAttributes => {

‎src/controls/accessibleAccordion/components/AccordionItem.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import "../css/AccordionStylesOverride.css";
2-
31
import * as React from "react";
42
import { useState } from "react";
53

‎src/controls/accessibleAccordion/components/AccordionItemButton.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import "../css/AccordionStylesOverride.css";
2-
31
import * as React from "react";
42

53
import { InjectedButtonAttributes } from "../helpers/AccordionStore";

‎src/controls/accessibleAccordion/components/AccordionItemHeading.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import "../css/AccordionStylesOverride.css";
2-
31
import * as React from "react";
42

53
import { InjectedHeadingAttributes } from "../helpers/AccordionStore";

‎src/controls/accessibleAccordion/components/AccordionItemPanel.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import "../css/AccordionStylesOverride.css";
2-
31
import * as React from "react";
42

53
import { DivAttributes } from "../helpers/types";

‎src/controls/accessibleAccordion/components/AccordionItemState.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import "../css/AccordionStylesOverride.css";
2-
31
import * as React from "react";
42

53
import { DivAttributes } from "../helpers/types";

‎src/controls/accessibleAccordion/components/ItemContext.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// tslint:disable:max-classes-per-file
22

3-
import "../css/AccordionStylesOverride.css";
4-
53
import * as React from "react";
64

75
import {

‎src/controls/accessibleAccordion/css/AccordionStylesOverride.css‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
/**
22
* ----------------------------------------------
3-
*accordion styles Override default
3+
* accordion styles Override default
44
* ----------------------------------------------
55
**/
66
.accordion {
77
margin-top: 20px;
8-
border-bottom: 1px solid #edebe9;
8+
border-bottom: 1px solid var(--accordion-bodyDivider);
9+
color: var(--accordion-bodyText);
10+
background-color: var(--accordion-bodyBackground);
11+
}
12+
13+
.accordion__item:last-child {
14+
margin-bottom: -0.5px;
915
}
1016

1117
.accordion__button {
1218
font-size: 16px;
1319
font-weight: 400;
14-
color: #323130;
20+
color: var(--accordion-buttonText);
21+
background-color: var(--accordion-buttonBackground);
1522
}
1623

1724
.accordion__button {
1825
background: 0 0;
1926
border: 1px solid transparent;
20-
border-top-color: #edebe9;
27+
border-top-color: var(--accordion-bodyDivider);
2128
border-radius: 0;
2229
cursor: pointer;
2330
display: block;
@@ -26,17 +33,19 @@
2633
padding-left: 10px;
2734
}
2835

29-
.accordion__button:focus {
36+
.accordion__button:focus {
3037
outline-width: 0.5px;
3138
outline-style: solid;
39+
border-top-color: transparent;
3240
}
41+
3342
.accordion__button:hover {
34-
background-color: rgb(235, 235, 235);
43+
background-color: var(--accordion-buttonBackgroundHovered);
3544
}
3645

3746
.accordion__button::after {
38-
display: block;
39-
float:right;
47+
display: block;
48+
float: right;
4049
content: '';
4150
height: 10px;
4251
width: 10px;
@@ -57,21 +66,20 @@
5766
}
5867

5968
.accordion__panel {
69+
margin-top: 1px;
6070
padding-top: 10px;
6171
padding-bottom: 20px;
62-
animation: fadein 0.35s ease-in;
72+
color: var(--accordion-bodyText);
73+
background-color: var(--accordion-bodyBackground);
74+
animation: accordionFadeIn 0.35s ease-in;
6375
}
6476

65-
/* -------------------------------------------------- */
66-
/* ---------------- Animation part ------------------ */
67-
/* -------------------------------------------------- */
68-
69-
@keyframes fadein {
77+
@keyframes accordionFadeIn {
7078
0% {
71-
opacity: 0;
79+
opacity: 0;
7280
}
7381

7482
100% {
75-
opacity: 1;
83+
opacity: 1;
7684
}
7785
}

0 commit comments

Comments
 (0)