Skip to content

Commit a47bc65

Browse files
fabiofranzinifabiofranzini
committed
'AdaptiveCardHost' fixed requests for change
1 parent 962e795 commit a47bc65

File tree

7 files changed

+62
-47
lines changed

7 files changed

+62
-47
lines changed

‎src/controls/adaptiveCardHost/AdaptiveCardHost.css

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
user-select: none;
2020
height: 32px;
2121
border-radius: 2px;
22-
border: 1px solid var(--ach-fui-buttonBorder, #6290FF);
23-
background-color: var(--ach-fui-buttonBackground, white);
24-
color: var(--ach-fui-buttonText, #0079db);
22+
border: 1px solid var(--ach-fui-buttonBorder);
23+
background-color: var(--ach-fui-buttonBackground);
24+
color: var(--ach-fui-buttonText);
2525
}
2626

2727
.ac-pushButton-disabled {
@@ -40,25 +40,25 @@
4040
user-select: none;
4141
height: 32px;
4242
border-radius: 2px;
43-
border: 1px solid var(--ach-fui-buttonBorderDisabled, #EEEEEE);
44-
background-color: var(--ach-fui-buttonBackgroundDisabled, #EEEEEE);
45-
color: var(--ach-fui-buttonTextDisabled, #666666);
43+
border: 1px solid var(--ach-fui-buttonBorderDisabled);
44+
background-color: var(--ach-fui-buttonBackgroundDisabled);
45+
color: var(--ach-fui-buttonTextDisabled);
4646
}
4747

4848
.ac-pushButton:hover {
49-
border: 1px solid var(--ach-fui-buttonBorder, #73C1FD);
50-
background-color: var(--ach-fui-buttonBackgroundHovered, #0078D7);
51-
color: var(--ach-fui-buttonTextHovered, white);
49+
border: 1px solid var(--ach-fui-buttonBorder);
50+
background-color: var(--ach-fui-buttonBackgroundHovered);
51+
color: var(--ach-fui-buttonTextHovered);
5252
}
5353

5454
.ac-pushButton:active {
55-
background-color: var(--ach-fui-buttonBackgroundPressed, #464B93);
56-
color: var(--ach-fui-buttonTextPressed, white);
57-
border: 1px solid var(--ach-fui-buttonBorder, #464B93);
55+
background-color: var(--ach-fui-buttonBackgroundPressed);
56+
color: var(--ach-fui-buttonTextPressed);
57+
border: 1px solid var(--ach-fui-buttonBorder);
5858
}
5959

6060
.ac-ctrl-overlay {
61-
font-family: var(--ach-fui-fontFamily, "Segoe UI", sans-serif);
61+
font-family: var(--ach-fui-fontFamily);
6262
position: absolute;
6363
left: 0;
6464
top: 0;
@@ -72,7 +72,7 @@
7272
}
7373

7474
.ac-ctrl-popup-container {
75-
background-color: var(--ach-fui-bodyBackground, white);
75+
background-color: var(--ach-fui-bodyBackground);
7676
position: absolute;
7777
overflow-y: auto;
7878
box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px 0px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px 0px;
@@ -113,8 +113,8 @@
113113
padding: 0px 12px 0px 12px;
114114
line-height: 30px;
115115
cursor: pointer;
116-
background-color: var(--ach-fui-bodyBackground, #ffffff);
117-
color: var(--ach-fui-bodyText, #323130);
116+
background-color: var(--ach-fui-bodyBackground);
117+
color: var(--ach-fui-bodyText);
118118
}
119119

120120
.ac-ctrl-dropdown-item-disabled {
@@ -126,17 +126,17 @@
126126
padding: 0px 12px 0px 12px;
127127
line-height: 30px;
128128
cursor: pointer;
129-
background-color: var(--ach-fui-neutralLighter, #f3f2f1);
130-
color: var(--ach-fui-neutralTertiary, #a19f9d);
129+
background-color: var(--ach-fui-neutralLighter);
130+
color: var(--ach-fui-neutralTertiary);
131131
}
132132

133133
.ac-ctrl-dropdown-item:hover {
134-
background-color: var(--ach-fui-neutralLighter, #f3f2f1);
135-
color: var(--ach-fui-neutralDark, #201f1e);
134+
background-color: var(--ach-fui-neutralLighter);
135+
color: var(--ach-fui-neutralDark);
136136
}
137137

138138
.ac-ctrl-dropdown-item:focus {
139139
outline: 0;
140-
background-color: var(--ach-fui-neutralLight, #edebe9);
141-
color: var(--ach-fui-neutralDark, #201f1e);
140+
background-color: var(--ach-fui-neutralLight);
141+
color: var(--ach-fui-neutralDark);
142142
}

‎src/controls/adaptiveCardHost/AdaptiveCardHost.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11

22

3-
import { PartialTheme, Theme, ThemeProvider } from '@fluentui/react-theme-provider';
3+
import { ThemeProvider } from '@fluentui/react-theme-provider';
44
import { Action, AdaptiveCard, CardElement, CardObjectRegistry, ExecuteAction, GlobalRegistry, HostConfig, OpenUrlAction, SerializationContext, SubmitAction } from 'adaptivecards';
55
import { Template } from 'adaptivecards-templating';
6-
import { CustomizerContext, ITheme } from 'office-ui-fabric-react';
6+
import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
7+
import { CustomizerContext } from 'office-ui-fabric-react/lib/Utilities';
78
import * as React from 'react';
89
import {
910
useCallback,
@@ -13,17 +14,18 @@ import {
1314
import './AdaptiveCardHost.css';
1415
import { convertFromPartialThemeToTheme, createDarkTeamsHostConfig, createDefaultTeamsHostConfig, createHighContrastTeamsHostConfig, createSharePointHostConfig, initProcessMarkdown, setFluentUIThemeAsCSSVariables } from './AdaptiveCardHostHelpers';
1516
import { createDarkTeamsTheme, createDefaultTeamsTheme, createHighContrastTeamsTheme, getDefaultFluentUITheme, setFluentUIThemeAsHostCapability, useLocalFluentUI } from './fluentUI';
16-
import { IAdaptiveCardHostActionResult, IAdaptiveCardHostProps, AdaptiveCardHostThemeType } from './IAdaptiveCardHostProps';
17+
import { AdaptiveCardHostThemeType, IAdaptiveCardHostActionResult, IAdaptiveCardHostProps } from './IAdaptiveCardHostProps';
1718

1819
// Init Process Markdown
1920
initProcessMarkdown();
2021

2122
export const AdaptiveCardHost = (props: IAdaptiveCardHostProps) => {
2223
const adaptiveCardInstanceRef = useRef<AdaptiveCard>(null);
2324
const serializationContextInstanceRef = useRef<SerializationContext>(null);
25+
const fluentUIThemeInstanceRef = useRef<ITheme>(null);
26+
2427
const renderElementRef = useRef<HTMLDivElement>(null);
2528
const fluentUICustomizerContext = React.useContext(CustomizerContext);
26-
const fluentUIThemeInstanceRef = useRef<ITheme>(null);
2729

2830
// create the instance of AdaptiveCard & SerializationContext
2931
useEffect(() => {
@@ -41,7 +43,7 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps) => {
4143
case OpenUrlAction.JsonTypeName: {
4244
let typedAction = action as OpenUrlAction;
4345
actionResult = {
44-
type: typedAction.getJsonTypeName(),
46+
type: type,
4547
title: typedAction.title,
4648
url: typedAction.url
4749
};
@@ -51,7 +53,7 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps) => {
5153
case SubmitAction.JsonTypeName: {
5254
let typedAction = action as SubmitAction;
5355
actionResult = {
54-
type: typedAction.getJsonTypeName(),
56+
type: type,
5557
title: typedAction.title,
5658
data: typedAction.data
5759
};
@@ -60,7 +62,7 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps) => {
6062
case ExecuteAction.JsonTypeName: {
6163
let typedAction = action as ExecuteAction;
6264
actionResult = {
63-
type: typedAction.getJsonTypeName(),
65+
type: type,
6466
title: typedAction.title,
6567
data: typedAction.data,
6668
verb: typedAction.verb
@@ -76,7 +78,7 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps) => {
7678

7779
// set hostConfig
7880
useEffect(() => {
79-
let theme: PartialTheme | Theme;
81+
let theme: IPartialTheme | ITheme;
8082
let themeType = props.themeType;
8183

8284
if (!themeType) {
@@ -147,12 +149,10 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps) => {
147149
);
148150

149151
// just to fix the colors of the list actions menu
150-
if (props.isUniqueControlInPage) {
151-
setFluentUIThemeAsCSSVariables(
152-
document.body,
153-
theme
154-
);
155-
}
152+
setFluentUIThemeAsCSSVariables(
153+
document.body,
154+
(props.isUniqueControlInPage) ? theme : getDefaultFluentUITheme()
155+
);
156156
// *****
157157

158158
}, [adaptiveCardInstanceRef.current, fluentUICustomizerContext, props.theme, props.themeType, props.hostConfig, props.isUniqueControlInPage]);

‎src/controls/adaptiveCardHost/AdaptiveCardHostHelpers.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { mergeThemes } from '@fluentui/theme';
21
import { LocalizedFontFamilies } from '@fluentui/theme/lib/fonts';
2+
import { mergeThemes } from '@fluentui/theme/lib/mergeThemes';
33
import { IReadonlyTheme } from '@microsoft/sp-component-base';
44
import { ActionAlignment, AdaptiveCard, TextColor, TextWeight } from 'adaptivecards';
55
import * as markdown from 'markdown-it';
6-
import { IPartialTheme, ITheme } from 'office-ui-fabric-react';
6+
import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
77
import { getDefaultFluentUITheme } from './fluentUI';
88

99
const fluentUICSSVariablePrefix = "ach-fui";

‎src/controls/adaptiveCardHost/IAdaptiveCardHostProps.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { IPartialTheme, ITheme } from 'office-ui-fabric-react';
21
import { Action, CardElement, CardObjectRegistry, HostCapabilities } from 'adaptivecards';
2+
import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
33

44
export interface IAdaptiveCardHostProps {
55
/**
@@ -37,7 +37,7 @@ export interface IAdaptiveCardHostProps {
3737
* Used only if the "themeType" property is set to 'ThemeType.SharePoint'.
3838
* If not set or set to null or not defined, the theme passed through context will be searched, or the default theme of the page will be loaded.
3939
*/
40-
theme?: IPartialTheme | ITheme;
40+
theme?: IPartialTheme | ITheme;
4141
/**
4242
* Select the Type of Theme you want to use.
4343
* If it is not set or set to null or undefined, the 'ThemeType.SharePoint' value will be used and the "theme" property or the theme passed through the context or default page will be loaded.

‎src/controls/adaptiveCardHost/fluentUI/Actions.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ActionButtonState, ActionIconPlacement, defaultHostConfig, ExecuteAction, OpenUrlAction, ShowCardAction, SubmitAction, ToggleVisibilityAction } from "adaptivecards";
2-
import { BaseButton, Button, CompoundButton, createTheme, DefaultButton, ITheme, PrimaryButton } from "office-ui-fabric-react";
2+
import { BaseButton, Button, CompoundButton, DefaultButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
3+
import { createTheme, ITheme } from "office-ui-fabric-react/lib/Styling";
34
import * as React from "react";
45
import * as ReactDOM from "react-dom";
56
import { getDefaultFluentUITheme, hostCapabilitiesFluentUIThemeKey } from "./FluentUI";
@@ -59,9 +60,6 @@ export class FluentUIOpenUrlAction extends OpenUrlAction {
5960
export class FluentUIShowCardAction extends ShowCardAction {
6061
protected updateCssClasses() {
6162
if (this.renderedElement) {
62-
const effectiveHostConfig = this.parent ? this.parent.hostConfig : defaultHostConfig;
63-
64-
this.renderedElement.classList.add(effectiveHostConfig.makeCssClassName("expandable"));
6563
this.renderedElement.setAttribute(
6664
"aria-expanded",
6765
(this.state === ActionButtonState.Expanded).toString()
@@ -117,6 +115,12 @@ export class FluentUISubmitAction extends SubmitAction {
117115

118116
export class FluentUIToggleVisibilityAction extends ToggleVisibilityAction {
119117
protected updateCssClasses() {
118+
if (this.renderedElement) {
119+
this.renderedElement.setAttribute(
120+
"aria-expanded",
121+
(this.state === ActionButtonState.Expanded).toString()
122+
);
123+
}
120124
}
121125

122126
private actionClickHandler = (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement>): void => {

‎src/controls/adaptiveCardHost/fluentUI/Elements.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
1-
import { ThemeProvider } from "@fluentui/react-theme-provider";
1+
import { IStyle, ThemeProvider } from "@fluentui/react-theme-provider";
22
import { Action, ActionProperty, BoolProperty, Choice, EnumProperty, Input, InputTextStyle, NumProperty, property, SerializableObject, SerializableObjectCollectionProperty, StringProperty, Strings, TimeProperty, ValidationEvent, ValidationResults, ValueSetProperty, Versions } from "adaptivecards";
3-
import { Button, Checkbox, ChoiceGroup, ComboBox, DatePicker, DefaultButton, ICheckbox, IChoiceGroup, IChoiceGroupOption, IComboBox, IComboBoxOption, IconButton, IDatePicker, IDropdown, IDropdownOption, ISpinButton, IStyle, ITextField, ITheme, IToggle, SpinButton, Stack, TextField, Toggle } from "office-ui-fabric-react";
3+
import { Button, DefaultButton, IconButton } from "office-ui-fabric-react/lib/Button";
4+
import { Checkbox, ICheckbox } from "office-ui-fabric-react/lib/Checkbox";
5+
import { ChoiceGroup, IChoiceGroup, IChoiceGroupOption } from "office-ui-fabric-react/lib/ChoiceGroup";
6+
import { ComboBox, IComboBox, IComboBoxOption } from "office-ui-fabric-react/lib/ComboBox";
7+
import { DatePicker, IDatePicker } from "office-ui-fabric-react/lib/DatePicker";
8+
import { IDropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
9+
import { ISpinButton, SpinButton } from "office-ui-fabric-react/lib/SpinButton";
10+
import { Stack } from "office-ui-fabric-react/lib/Stack";
11+
import { ITheme } from "office-ui-fabric-react/lib/Styling";
12+
import { ITextField, TextField } from "office-ui-fabric-react/lib/TextField";
13+
import { IToggle, Toggle } from "office-ui-fabric-react/lib/Toggle";
414
import * as React from "react";
515
import { getFluentUIThemeFromHostCapability, hostCapabilitiesFluentUIThemeKey } from "./FluentUI";
616
import { internalRender } from "./Shared";

‎src/controls/adaptiveCardHost/fluentUI/FluentUI.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Action, CardElement, CardObjectRegistry, HostConfig } from "adaptivecards";
2-
import { createTheme, getTheme, initializeIcons, ITheme } from "office-ui-fabric-react";
2+
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
3+
import { createTheme, getTheme, ITheme } from "office-ui-fabric-react/lib/Styling";
34
import { FluentUIExecuteAction, FluentUIOpenUrlAction, FluentUIShowCardAction, FluentUISubmitAction, FluentUIToggleVisibilityAction } from "./Actions";
45
import { FluentUIChoiceSetInput, FluentUIDateInput, FluentUINumberInput, FluentUITextInput, FluentUITimeInput, FluentUIToggleInput } from "./Elements";
56

0 commit comments

Comments
 (0)