Skip to content

Commit c220a72

Browse files
OEvgenyOEvgeny
committed
CSS Modules: migrate bundle package
1 parent 6deffb6 commit c220a72

20 files changed

Lines changed: 210 additions & 21 deletions

‎__tests__/html2/accessibility/adaptiveCard/withTapAction.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
await host.sendShiftTab();
3131

3232
const focusingOnRoot =
33-
document.activeElement === document.querySelector('.webchat__adaptive-card-renderer').firstChild;
33+
document.activeElement === document.querySelector('.adaptive-card-renderer').firstChild;
3434

3535
expect(focusingOnRoot).toBe(true);
3636

‎__tests__/html2/adaptiveCard/rerender.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
]
6767
});
6868

69-
const adaptiveCardEl = document.querySelector('.webchat__adaptive-card-renderer');
69+
const adaptiveCardEl = document.querySelector('.adaptive-card-renderer');
7070
const [currentRenderedChild] = adaptiveCardEl.children;
7171

7272
await new Promise(resolve => setTimeout(resolve, 200));

‎__tests__/html2/adaptiveCard/tapAction.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
// When using runHookActivityMiddleware, an additional hidden activities will be rendered to run the hook function. Thus, minNumActivitiesShown must be +1.
5252
await pageConditions.numActivitiesShown(1);
5353

54-
const renderer = document.querySelector('.webchat__adaptive-card-renderer');
54+
const renderer = document.querySelector('.adaptive-card-renderer');
5555
const card = renderer.querySelector('.ac-adaptiveCard[tabindex="0"]');
5656

5757
expect(card).toBeTruthy();

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/bundle/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@
161161
"@msinternal/botframework-directlinejs": "development",
162162
"@msinternal/botframework-webchat-base": "development",
163163
"@msinternal/botframework-webchat-react-valibot": "development",
164+
"@msinternal/botframework-webchat-styles": "development",
164165
"@msinternal/botframework-webchat-tsconfig": "development",
165166
"@msinternal/isomorphic-react": "development",
166167
"@msinternal/isomorphic-react-dom": "development",
@@ -188,6 +189,7 @@
188189
"@msinternal/botframework-directlinejs": "0.0.0-0",
189190
"@msinternal/botframework-webchat-base": "0.0.0-0",
190191
"@msinternal/botframework-webchat-react-valibot": "0.0.0-0",
192+
"@msinternal/botframework-webchat-styles": "0.0.0-0",
191193
"@msinternal/botframework-webchat-tsconfig": "0.0.0-0",
192194
"@msinternal/isomorphic-react": "0.0.0-0",
193195
"@msinternal/isomorphic-react-dom": "0.0.0-0",

‎packages/bundle/src/AddFullBundle.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import ShikiComposer from './codeHighlighter/ShikiComposer';
1414
import { type AdaptiveCardsPackage } from './types/AdaptiveCardsPackage';
1515
import { type StrictFullBundleStyleOptions } from './types/FullBundleStyleOptions';
1616
import useComposerProps from './useComposerProps';
17+
import BundleStylesheet from './stylesheet/BundleStylesheet';
1718

1819
type AddFullBundleChildren = ({ extraStyleSet }: { extraStyleSet: any }) => ReactNode;
1920

@@ -31,6 +32,7 @@ type AddFullBundleProps = Readonly<{
3132
) => string;
3233
styleOptions?: StyleOptions & AdaptiveCardsStyleOptions;
3334
styleSet?: any & { options: StrictFullBundleStyleOptions };
35+
nonce: string | undefined;
3436

3537
/** @deprecated Rename to "adaptiveCardsHostConfig" */
3638
adaptiveCardHostConfig?: any;
@@ -50,7 +52,8 @@ function AddFullBundle({
5052
htmlContentTransformMiddleware,
5153
renderMarkdown,
5254
styleOptions,
53-
styleSet
55+
styleSet,
56+
nonce
5457
}: AddFullBundleProps) {
5558
adaptiveCardHostConfig && adaptiveCardHostConfigDeprecation();
5659

@@ -69,6 +72,7 @@ function AddFullBundle({
6972
adaptiveCardsHostConfig={adaptiveCardHostConfig || adaptiveCardsHostConfig}
7073
adaptiveCardsPackage={adaptiveCardsPackage}
7174
>
75+
<BundleStylesheet nonce={nonce} />
7276
{children(patchedProps)}
7377
</AdaptiveCardsComposer>
7478
</ShikiComposer>

‎packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.module.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
:global(.webchat) .adaptive-card-renderer {
2+
/* Related to #4075. */
3+
/* Adaptive Cards assume its host is in "forced border-box" mode. */
4+
/* In CSS, the default is "content-box" mode. */
5+
/* https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#values */
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
:global(.ac-input),
11+
:global(.ac-inlineActionButton),
12+
:global(.ac-quickActionButton) {
13+
font-family: var(--webchat__font--primary);
14+
}
15+
16+
:global(.ac-multichoiceInput) {
17+
padding: var(--webchat__padding--regular);
18+
}
19+
20+
:global(.ac-pushButton) {
21+
appearance: none;
22+
background-color: white;
23+
border-style: solid;
24+
border-width: 1px;
25+
color: var(--webchat__color--accent);
26+
font-weight: 600;
27+
padding: var(--webchat__padding--regular);
28+
}
29+
30+
:global(.ac-pushButton.style-destructive) {
31+
background-color: #e50000;
32+
color: white;
33+
}
34+
35+
:global(.ac-pushButton.style-destructive:hover),
36+
:global(.ac-pushButton.style-destructive:active) {
37+
background-color: #bf0000;
38+
}
39+
40+
:global(.ac-pushButton.style-positive) {
41+
background-color: #0078d7;
42+
color: white;
43+
}
44+
45+
:global(.ac-pushButton.style-positive:hover),
46+
:global(.ac-pushButton.style-positive:active) {
47+
background-color: #006abc;
48+
}
49+
50+
/* The following styles are copied from :disabled via Chromium. */
51+
:global(.ac-pushButton[aria-disabled='true']),
52+
input[aria-disabled='true'],
53+
select[aria-disabled='true'],
54+
textarea[aria-disabled='true'] {
55+
background-color: rgba(239, 239, 239, 0.3);
56+
border-color: rgba(118, 118, 118, 0.3);
57+
border-style: solid;
58+
border-width: 1px;
59+
color: #545454;
60+
}
61+
62+
:global(.ac-pushButton[aria-disabled='true']) {
63+
background-color: #eee;
64+
color: #4f4f4f;
65+
}
66+
67+
:global(.ac-pushButton[aria-pressed='true']) {
68+
background-color: var(--webchat__background--card-push-button, #0063b1);
69+
border-color: var(--webchat__background--card-push-button, #0063b1);
70+
color: var(--webchat__color--card-push-button-text, white);
71+
72+
@media (forced-colors: active) {
73+
background-color: Highlight;
74+
border-color: Highlight;
75+
color: HighlightText;
76+
forced-color-adjust: none;
77+
}
78+
}
79+
80+
input[aria-disabled='true'] {
81+
padding: 2px 1px;
82+
}
83+
}

‎packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
/* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 2] }] */
22

33
import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
4+
import { useStyles } from '@msinternal/botframework-webchat-styles/react';
45
import { type Action as AdaptiveCardAction, type OpenUrlAction, type SubmitAction } from 'adaptivecards';
56
import { ErrorBoxPolymiddlewareProxy } from 'botframework-webchat-api/middleware';
67
import { getTabIndex, hooks } from 'botframework-webchat-component';
78
import { type DirectLineCardAction } from 'botframework-webchat-core';
8-
import classNames from 'classnames';
9+
import cx from 'classnames';
910
import React, {
1011
memo,
1112
useCallback,
@@ -19,7 +20,6 @@ import React, {
1920
import { useRefFrom } from 'use-ref-from';
2021
import { any, boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
2122

22-
import useStyleSet from '../../hooks/useStyleSet';
2323
import useAdaptiveCardsHostConfig from '../hooks/useAdaptiveCardsHostConfig';
2424
import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
2525
import { BotFrameworkCardAction } from './AdaptiveCardBuilder';
@@ -32,6 +32,8 @@ import useRoleModEffect from './AdaptiveCardHacks/useRoleModEffect';
3232
import { directLineCardActionSchema } from './private/directLineSchema';
3333
import renderAdaptiveCard from './private/renderAdaptiveCard';
3434

35+
import styles from './AdaptiveCardRenderer.module.css';
36+
3537
const { useLocalizer, usePerformCardAction, useRenderMarkdownAsHTML, useScrollToEnd, useUIState } = hooks;
3638

3739
const adaptiveCardRendererPropsSchema = pipe(
@@ -54,7 +56,6 @@ function AdaptiveCardRenderer(props: AdaptiveCardRendererProps) {
5456
tapAction
5557
} = validateProps(adaptiveCardRendererPropsSchema, props);
5658

57-
const [{ adaptiveCardRenderer: adaptiveCardRendererStyleSet }] = useStyleSet();
5859
const [{ GlobalSettings, HostConfig }] = useAdaptiveCardsPackage();
5960
const [adaptiveCardsHostConfig] = useAdaptiveCardsHostConfig();
6061
const [uiState] = useUIState();
@@ -63,6 +64,7 @@ function AdaptiveCardRenderer(props: AdaptiveCardRendererProps) {
6364
const performCardAction = usePerformCardAction();
6465
const renderMarkdownAsHTML = useRenderMarkdownAsHTML('adaptive cards');
6566
const scrollToEnd = useScrollToEnd();
67+
const classNames = useStyles(styles);
6668

6769
const disabled = uiState === 'disabled' || disabledFromProps;
6870
const tapActionRef = useValueRef(tapAction);
@@ -249,7 +251,7 @@ function AdaptiveCardRenderer(props: AdaptiveCardRendererProps) {
249251
<ErrorBoxPolymiddlewareProxy error={errors[0]} where={localize('ADAPTIVE_CARD_ERROR_BOX_TITLE_RENDER')} />
250252
) : (
251253
<div
252-
className={classNames(adaptiveCardRendererStyleSet + '', 'webchat__adaptive-card-renderer')}
254+
className={cx('adaptive-card-renderer', classNames['adaptive-card-renderer'])}
253255
onClick={handleClickAndKeyPressForTapAction as MouseEventHandler<HTMLDivElement>}
254256
onKeyPress={handleClickAndKeyPressForTapAction as KeyboardEventHandler<HTMLDivElement>}
255257
ref={contentRef}

‎packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.module.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
:global(.webchat) .animation-card-attachment {
2+
display: flex;
3+
flex-direction: column;
4+
5+
> :global(ul.media-list) {
6+
list-style-type: none;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
}

‎packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
/* eslint react/no-array-index-key: "off" */
22

33
import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
4+
import { useStyles } from '@msinternal/botframework-webchat-styles/react';
45
import { Components } from 'botframework-webchat-component';
56
import React, { memo } from 'react';
67
import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
78

8-
import useStyleSet from '../../hooks/useStyleSet';
99
import CommonCard from './CommonCard';
1010
import { directLineMediaCardSchema } from './private/directLineSchema';
1111

12+
import styles from './AnimationCardContent.module.css';
13+
1214
const { ImageContent, VideoContent } = Components;
1315

1416
const animationCardContentPropsSchema = pipe(
@@ -26,10 +28,10 @@ function AnimationCardContent(props: AnimationCardContentProps) {
2628
const { actionPerformedClassName, content, disabled } = validateProps(animationCardContentPropsSchema, props);
2729

2830
const { media = [] } = content;
29-
const [{ animationCardAttachment: animationCardAttachmentStyleSet }] = useStyleSet();
31+
const classNames = useStyles(styles);
3032

3133
return (
32-
<div className={animationCardAttachmentStyleSet}>
34+
<div className={classNames['animation-card-attachment']}>
3335
<ul className="media-list">
3436
{media.map(({ profile = '', url }, index) => (
3537
<li key={index}>

0 commit comments

Comments
 (0)