From 025b213844414113936c1233991c09da8c77f96e Mon Sep 17 00:00:00 2001 From: Eugene Date: Fri, 19 Apr 2024 01:35:02 -0400 Subject: [PATCH] Do not use non-recommended styleSet in samples (#5023) Co-authored-by: William Wong --- .../a.branding-web-chat/README.md | 14 ++++---- .../a.minimizable-web-chat/README.md | 32 +++++++------------ .../a.minimizable-web-chat/src/WebChat.js | 19 +++++------ 3 files changed, 27 insertions(+), 38 deletions(-) diff --git a/samples/02.branding-styling-and-customization/a.branding-web-chat/README.md b/samples/02.branding-styling-and-customization/a.branding-web-chat/README.md index 9b4f273065..9c59342da2 100644 --- a/samples/02.branding-styling-and-customization/a.branding-web-chat/README.md +++ b/samples/02.branding-styling-and-customization/a.branding-web-chat/README.md @@ -2,7 +2,7 @@ ## Description -This sample introduces `styleSetOptions` and branding your bot through Web Chat via styling. +This sample introduces `styleOptions` and branding your bot through Web Chat via styling. # Test out the hosted sample @@ -23,23 +23,23 @@ This sample introduces `styleSetOptions` and branding your bot through Web Chat > Jump to [completed code](#completed-code) to see the end-result `index.html`. -## Why `styleSetOptions`? +## Why `styleOptions`? You may have noticed that Web Chat provides two different ways to change the appearance of your bot: -1. 'Branding' your bot via `styleSetOptions` (recommended) +1. 'Branding' your bot via `styleOptions` (recommended) 1. Idiosyncratic styling via overriding `createStyleSet` (not recommended) -`styleSetOptions` is the Web Chat supported method of changing existing DOM elements in the application, and the currently available options are listed on the [`defaultStyleOptions.ts` file](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/api/src/defaultStyleOptions.ts) and [`adaptiveCards/defaultStyleOptions.ts` file](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/bundle/src/adaptiveCards/defaultStyleOptions.ts) when Adaptive Cards is enabled. These options will continue to be updated as we make further as the project grows. +`styleOptions` is the Web Chat supported method of changing existing DOM elements in the application, and the currently available options are listed on the [`defaultStyleOptions.ts` file](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/api/src/defaultStyleOptions.ts) and [`adaptiveCards/defaultStyleOptions.ts` file](https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/bundle/src/adaptiveCards/defaultStyleOptions.ts) when Adaptive Cards is enabled. These options will continue to be updated as we make further as the project grows. We provide these options to override for several reasons: - These are commonly re-styled DOM elements that bot creators want modify in order to provide a specific brand experience - Although we support the modification of styling, we want it to be obvious to the user that **we do not guarantee our DOM will always stay the same**, which is why Web Chat uses CSS-in-JS (`emotion`), which generates the class names for Web Chat - We encourage our users to use CSS selectors, such as `& > button > div > ul > li:nth-child`, as opposed to accessing the element by it's class name (e.g. `& > .css-1a2b3c4`) because of the high likelihood that the project will have future class and DOM changes. CSS selectors provide high specificity without the need of using `!important`, and provides implicit information of what element is being styled -- `styleSetOptions` is our way of preserving your modifications (without breaking changes!) but allowing the repo to continue to facilitate natural DOM changes that come with an actively updated project +- `styleOptions` is our way of preserving your modifications (without breaking changes!) but allowing the repo to continue to facilitate natural DOM changes that come with an actively updated project -### My required changes are not all specified in `defaultStyleOptions.js`, what do I do now? +### My required changes are not all specified in `defaultStyleOptions.ts`, what do I do now? - Please feel free to [file a PR](https://github.com/microsoft/BotFramework-WebChat/issues/new) requesting the feature you want to be able to brand! We welcome your input and are constantly updating `defaultStyleOptions` with commonly modified aspects of Web Chat. - As a last resort, idiosyncratic styling is available, but not supported by our team. You may use this method by following the [02.branding-styling-and-customization/b.idiosyncratic-manual-styles sample](../b.idiosyncratic-manual-styles/README.md). Please note that using this method creates a **high likelihood** of breaking changes when Web Chat releases new code. @@ -134,7 +134,7 @@ Here is the finished `index.html`: # Other modifications -Feel free to add your own `styleSetOptions` object to override as many of these styles as you like! +Feel free to add your own `styleOptions` object to override as many of these styles as you like! # Further reading diff --git a/samples/06.recomposing-ui/a.minimizable-web-chat/README.md b/samples/06.recomposing-ui/a.minimizable-web-chat/README.md index 40d4912f01..96885eb8ec 100644 --- a/samples/06.recomposing-ui/a.minimizable-web-chat/README.md +++ b/samples/06.recomposing-ui/a.minimizable-web-chat/README.md @@ -76,12 +76,12 @@ Open the project in your preferred IDE. First we will render Web Chat. To test, you can temporarily add `` to your `App.js` -In the `WebChat.js` file, import `React`, `{ useEffect, useMemo }` `ReactWebChat`, `createDirectLine`, and `createStyleSet` from our packages. +In the `WebChat.js` file, import `React`, `{ useEffect, useMemo }` `ReactWebChat`, and `createDirectLine`, from our packages. ```js import React from 'react'; -import ReactWebChat, { createDirectLine, createStyleSet } from 'botframework-webchat'; +import ReactWebChat, { createDirectLine } from 'botframework-webchat'; ``` @@ -92,7 +92,7 @@ Set up the functional component the same way you would set up a regular `React.C ```js -const WebChat = ({ className, onFetchToken, store, token }) => { +const WebChat = ({ className, onFetchToken, store, styleOptions, token }) => { const directLine = useMemo(() => createDirectLine({ token }), [token]); useEffect(() => { @@ -100,7 +100,7 @@ const WebChat = ({ className, onFetchToken, store, token }) => { }, [onFetchToken]); return token ? ( - + ) : (
@@ -130,12 +130,12 @@ In the `useEffect` hook, invoke `onFetchToken` from props if the `token` has not Let's move on to building the `` component. -Import `React`, `{ useCallback, useMemo, useState }` `createStore`, and `createStyleSet`. Then import your newly made component, `WebChat`. +Import `React`, `{ useCallback, useMemo, useState }` and `createStore`. Then import your newly made component, `WebChat`. ```js import React from 'react', { useCallback, useMemo, useState }; -import { createStore, createStyleSet } from 'botframework-webchat'; +import { createStore } from 'botframework-webchat'; import WebChat from './WebChat'; ``` @@ -212,14 +212,6 @@ import WebChat from './WebChat'; [] ); - const styleSet = useMemo( - () => - createStyleSet({ - backgroundColor: 'Transparent' - }), - [] - ); - const [loaded, setLoaded] = useState(false); const [minimized, setMinimized] = useState(true); const [newMessage, setNewMessage] = useState(false); @@ -298,7 +290,7 @@ Then implement these methods into the component: className="react-web-chat" + onFetchToken={handleFetchToken} + store={store} - styleSet={styleSet} + styleOptions={styleOptions} + token={token} />
@@ -345,7 +337,7 @@ Completed `MinimizableWebChat.js` ```js import classNames from 'classnames'; import React, { useCallback, useMemo, useState } from 'react'; -import { createStore, createStyleSet } from 'botframework-webchat'; +import { createStore } from 'botframework-webchat'; import WebChat from './WebChat'; @@ -377,10 +369,10 @@ const MinimizableWebChat = () => { [] ); - const styleSet = useMemo( + const styleOptions = useMemo( () => - createStyleSet({ - backgroundColor: 'Transparent' + ({ + backgroundColor: 'transparent' }), [] ); @@ -440,7 +432,7 @@ const MinimizableWebChat = () => { className="react-web-chat" onFetchToken={handleFetchToken} store={store} - styleSet={styleSet} + styleOptions={styleOptions} token={token} />
diff --git a/samples/06.recomposing-ui/a.minimizable-web-chat/src/WebChat.js b/samples/06.recomposing-ui/a.minimizable-web-chat/src/WebChat.js index 85c8834930..933189a8c3 100644 --- a/samples/06.recomposing-ui/a.minimizable-web-chat/src/WebChat.js +++ b/samples/06.recomposing-ui/a.minimizable-web-chat/src/WebChat.js @@ -1,25 +1,22 @@ import React, { useEffect, useMemo } from 'react'; -import ReactWebChat, { createDirectLine, createStyleSet } from 'botframework-webchat'; +import ReactWebChat, { createDirectLine } from 'botframework-webchat'; import './WebChat.css'; -const WebChat = ({ className, onFetchToken, store, token }) => { +const WebChat = ({ className, onFetchToken, store, styleOptions, token }) => { const directLine = useMemo(() => createDirectLine({ token }), [token]); - const styleSet = useMemo( - () => - createStyleSet({ - backgroundColor: 'Transparent' - }), - [] - ); - useEffect(() => { onFetchToken(); }, [onFetchToken]); return token ? ( - + ) : (