fix: remove elevation from new chat component (#2791)

remove elevation from new chat component removed header line and padding from new chat fixed react-contoso sample and updated docs
microsoftgraph · Oct 25, 2023 · c854c6a · c854c6a
1 parent 112aaba
commit c854c6a
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 74 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/mgt-chat/README.md b/packages/mgt-chat/README.md
@@ -82,8 +82,6 @@ export const App: React.FunctionComponent = () => {
             onChatCreated={onChatCreated}
             onCancelClicked={() => setShowNewChat(false)}
             mode="auto"
-            hideTitle={true}
-            title="Create a new chat"
         />
     )}
 

diff --git a/packages/mgt-chat/docs/new-chat.md b/packages/mgt-chat/docs/new-chat.md
@@ -25,8 +25,6 @@ The following example displays a signed-in user's conversation using the `mgt-ne
 
 | Attribute | Property | Description |
 | - | - | - |
-| hide-title  | hideTitle | A Boolean to set the component interface to hide its title. Default is `false`. |
-| title | title | Value of the title displayed in the component. |
 | mode | mode | Set to `oneOnOne`, `group` or `auto`. Default is `auto`. |
 
 ## CSS custom properties

diff --git a/packages/mgt-chat/src/components/NewChat/NewChat.tsx b/packages/mgt-chat/src/components/NewChat/NewChat.tsx
@@ -4,41 +4,28 @@ import { Chat } from '@microsoft/microsoft-graph-types';
 import { IGraph, PeoplePicker, Spinner } from '@microsoft/mgt-react';
 import {
   Button,
-  Divider,
   Field,
   FluentProvider,
   Input,
   InputOnChangeData,
-  Text,
   Textarea,
   TextareaOnChangeData,
-  teamsLightTheme,
   makeStyles,
   typographyStyles,
   shorthands,
-  tokens
+  webLightTheme
 } from '@fluentui/react-components';
 import { createChatThread } from '../../statefulClient/graph.chat';
 import { graph } from '../../utils/graph';
 import { currentUserId } from '../../utils/currentUser';
 
 interface NewChatProps {
-  hideTitle?: boolean;
-  title?: string;
   mode?: 'oneOnOne' | 'group' | 'auto';
   onChatCreated: (chat: Chat) => void;
   onCancelClicked: () => void;
 }
 
 const useStyles = makeStyles({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    ...shorthands.paddingBlock('3px', '16px'),
-    minWidth: '300px',
-    backgroundColor: tokens.colorNeutralBackground1,
-    boxShadow: tokens.shadow8
-  },
   title: {
     ...typographyStyles.subtitle2,
     ...shorthands.marginInline('32px')
@@ -47,8 +34,7 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     gridRowGap: '16px',
-    marginBlockStart: '16px',
-    ...shorthands.marginInline('32px')
+    minWidth: '300px'
   },
   formButtons: {
     display: 'flex',
@@ -58,13 +44,7 @@ const useStyles = makeStyles({
   }
 });
 
-const NewChat: FC<NewChatProps> = ({
-  hideTitle,
-  title,
-  mode = 'auto',
-  onChatCreated,
-  onCancelClicked
-}: NewChatProps) => {
+const NewChat: FC<NewChatProps> = ({ mode = 'auto', onChatCreated, onCancelClicked }: NewChatProps) => {
   const styles = useStyles();
   type NewChatState = 'initial';
 
@@ -115,47 +95,37 @@ const NewChat: FC<NewChatProps> = ({
   }, [onChatCreated, selectedPeople, initialMessage, chatName, isGroup]);
 
   return (
-    <FluentProvider theme={teamsLightTheme}>
+    <FluentProvider theme={webLightTheme}>
       {state === 'initial' ? (
-        <div className={styles.container}>
-          {!hideTitle && (
-            <>
-              <Text as="h2" className={styles.title}>
-                {title ? title : 'New chat'}
-              </Text>
-              <Divider />
-            </>
-          )}
-          <div className={styles.form}>
-            <Field label="To">
-              <PeoplePicker
-                disabled={(mode === 'oneOnOne' && selectedPeople?.length > 0) || selectedPeople?.length > 19}
-                ariaLabel="Select people to chat with"
-                selectedPeople={selectedPeople}
-                selectionChanged={onSelectedPeopleChange}
-              />
-            </Field>
-
-            {isGroup && (
-              <Field label="Group name">
-                <Input placeholder="Chat name" onChange={onChatNameChanged} value={chatName} />
-              </Field>
-            )}
-            <Textarea
-              placeholder="Type your first message"
-              size="large"
-              resize="vertical"
-              value={initialMessage}
-              onChange={onInitialMessageChange}
+        <div className={styles.form}>
+          <Field label="To">
+            <PeoplePicker
+              disabled={(mode === 'oneOnOne' && selectedPeople?.length > 0) || selectedPeople?.length > 19}
+              ariaLabel="Select people to chat with"
+              selectedPeople={selectedPeople}
+              selectionChanged={onSelectedPeopleChange}
             />
-            <div className={styles.formButtons}>
-              <Button appearance="secondary" onClick={onCancelClicked}>
-                Cancel
-              </Button>
-              <Button appearance="primary" onClick={createChat}>
-                Send
-              </Button>
-            </div>
+          </Field>
+
+          {isGroup && (
+            <Field label="Group name">
+              <Input placeholder="Chat name" onChange={onChatNameChanged} value={chatName} />
+            </Field>
+          )}
+          <Textarea
+            placeholder="Type your first message"
+            size="large"
+            resize="vertical"
+            value={initialMessage}
+            onChange={onInitialMessageChange}
+          />
+          <div className={styles.formButtons}>
+            <Button appearance="secondary" onClick={onCancelClicked}>
+              Cancel
+            </Button>
+            <Button appearance="primary" onClick={createChat}>
+              Send
+            </Button>
           </div>
         </div>
       ) : (

diff --git a/samples/react-chat/src/App.tsx b/samples/react-chat/src/App.tsx
@@ -40,13 +40,7 @@ function App() {
           <button onClick={() => setShowNewChat(true)}>New Chat</button>
           {showNewChat && (
             <div className="new-chat">
-              <NewChat
-                onChatCreated={onChatCreated}
-                onCancelClicked={() => setShowNewChat(false)}
-                mode="auto"
-                hideTitle={true}
-                title="Create a new chat"
-              />
+              <NewChat onChatCreated={onChatCreated} onCancelClicked={() => setShowNewChat(false)} mode="auto" />
             </div>
           )}
         </div>

diff --git a/samples/react-contoso/src/pages/ChatPage.tsx b/samples/react-contoso/src/pages/ChatPage.tsx
@@ -92,7 +92,6 @@ export const ChatPage: React.FunctionComponent = () => {
                     onCancelClicked={() => {
                       setIsNewChatOpen(false);
                     }}
-                    hideTitle={true}
                   ></NewChat>
                 </DialogBody>
               </DialogSurface>