From 0d79b8de66a8f17d1e686c9b58f099bae0d4d5ae Mon Sep 17 00:00:00 2001 From: Ellyn Liu Date: Mon, 18 Nov 2024 11:33:25 -0800 Subject: [PATCH 1/6] update message component to match fluent figmas --- css/src/components/message.scss | 15 +++++++++++-- site/src/components/message.md | 38 +++++++++++++++++++++++++++++++++ 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/css/src/components/message.scss b/css/src/components/message.scss index 95fa8d1e6..0e59d95c6 100644 --- a/css/src/components/message.scss +++ b/css/src/components/message.scss @@ -14,7 +14,9 @@ $message-border-radius: $border-radius-lg !default; $message-border: $border-width solid $border !default; $message-content-padding: $spacer-5 !default; -$message-content-padding-sm: 0.875rem !default; +$message-content-padding-inline-sm: 1rem !default; +$message-content-padding-block-sm: 0.75rem !default; +$message-content-padding-block-sm-sender: 0.5rem !default; .message { display: grid; @@ -68,7 +70,16 @@ $message-content-padding-sm: 0.875rem !default; font-size: $message-font-size-sm; .message-content { - padding: $message-content-padding-sm; + padding-inline: $message-content-padding-inline-sm; + padding-block: $message-content-padding-block-sm; + } + } + + &.message-sm.message-sender { + width: auto; + + .message-content { + padding-block: $message-content-padding-block-sm-sender; } } } diff --git a/site/src/components/message.md b/site/src/components/message.md index a3e1afd13..74445e7ac 100644 --- a/site/src/components/message.md +++ b/site/src/components/message.md @@ -79,6 +79,7 @@ Use the `message-sender` class to indicate message sent by the user. ``` ## Sizes + `message-sm` is available for resizing. ```html @@ -138,3 +139,40 @@ Use the `message-sender` class to indicate message sent by the user. ``` + +## Chat + +To mimic a chat experience, apply `message-sm` and `message-sender` to automatically fit to the width of the sender's message. The response should be the full width and should not be shortened. + +```html +
+
+

Ask a short question

+
+
+
+
+

+ Respond with a much longer answer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed + ullamcorper morbi tincidunt ornare massa eget egestas. Pellentesque elit ullamcorper dignissim + cras tincidunt lobortis feugiat. +

+
+
+
+
+

+ Ask a very long question. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper + morbi tincidunt ornare massa eget egestas. Pellentesque elit ullamcorper dignissim cras + tincidunt lobortis feugiat. +

+
+
+
+
+

Short response.

+
+
+``` From 16557fbeee1ea42679765777b58152e4d072f373 Mon Sep 17 00:00:00 2001 From: Ellyn Liu Date: Mon, 18 Nov 2024 11:35:54 -0800 Subject: [PATCH 2/6] changeset --- .changeset/tasty-ducks-rest.md | 6 ++++++ site/src/components/message.md | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/tasty-ducks-rest.md diff --git a/.changeset/tasty-ducks-rest.md b/.changeset/tasty-ducks-rest.md new file mode 100644 index 000000000..fc88655dc --- /dev/null +++ b/.changeset/tasty-ducks-rest.md @@ -0,0 +1,6 @@ +--- +'@microsoft/atlas-site': minor +'@microsoft/atlas-css': minor +--- + +Update the padding and width of the message component diff --git a/site/src/components/message.md b/site/src/components/message.md index 74445e7ac..c4cdfb660 100644 --- a/site/src/components/message.md +++ b/site/src/components/message.md @@ -142,7 +142,7 @@ Use the `message-sender` class to indicate message sent by the user. ## Chat -To mimic a chat experience, apply `message-sm` and `message-sender` to automatically fit to the width of the sender's message. The response should be the full width and should not be shortened. +To mimic a chat experience, apply `message-sm` and `message-sender` to automatically fit to the width of the sender's message. The response should be the full width and will not be shortened. ```html
From 65f2e200f09e8eb247ad91ad6c0ee936b2401adb Mon Sep 17 00:00:00 2001 From: Ellyn Liu Date: Mon, 18 Nov 2024 13:51:27 -0800 Subject: [PATCH 3/6] gap size of 12px to match fluent --- css/src/components/message.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/src/components/message.scss b/css/src/components/message.scss index 0e59d95c6..9a197a636 100644 --- a/css/src/components/message.scss +++ b/css/src/components/message.scss @@ -3,7 +3,7 @@ $message-font-size-sm: $font-size-8 !default; $message-font-size-md: $font-size-7 !default; $message-background-color: $body-background !default; -$message-gap-size: $layout-1 !default; +$message-gap-size: $spacer-4 !default; $message-spacer-md: $spacer-3 !default; $message-spacer-lg: $spacer-5 !default; From 75fd63f3b21ea874b22f9e606522e39691422f11 Mon Sep 17 00:00:00 2001 From: Ellyn Liu Date: Mon, 18 Nov 2024 15:19:14 -0800 Subject: [PATCH 4/6] revert gap --- css/src/components/message.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/src/components/message.scss b/css/src/components/message.scss index 9a197a636..0e59d95c6 100644 --- a/css/src/components/message.scss +++ b/css/src/components/message.scss @@ -3,7 +3,7 @@ $message-font-size-sm: $font-size-8 !default; $message-font-size-md: $font-size-7 !default; $message-background-color: $body-background !default; -$message-gap-size: $spacer-4 !default; +$message-gap-size: $layout-1 !default; $message-spacer-md: $spacer-3 !default; $message-spacer-lg: $spacer-5 !default; From b6630a896a58ff4f1824e3dc0d2abca51b3d6c3a Mon Sep 17 00:00:00 2001 From: Ellyn Liu Date: Mon, 18 Nov 2024 15:56:42 -0800 Subject: [PATCH 5/6] update documentation --- css/src/components/message.scss | 2 +- site/src/components/message.md | 37 --------------------------------- site/src/patterns/chat.md | 37 +++++++++++++++++++++++++++++++++ 3 files changed, 38 insertions(+), 38 deletions(-) diff --git a/css/src/components/message.scss b/css/src/components/message.scss index 0e59d95c6..9a197a636 100644 --- a/css/src/components/message.scss +++ b/css/src/components/message.scss @@ -3,7 +3,7 @@ $message-font-size-sm: $font-size-8 !default; $message-font-size-md: $font-size-7 !default; $message-background-color: $body-background !default; -$message-gap-size: $layout-1 !default; +$message-gap-size: $spacer-4 !default; $message-spacer-md: $spacer-3 !default; $message-spacer-lg: $spacer-5 !default; diff --git a/site/src/components/message.md b/site/src/components/message.md index c4cdfb660..e3a486ba4 100644 --- a/site/src/components/message.md +++ b/site/src/components/message.md @@ -139,40 +139,3 @@ Use the `message-sender` class to indicate message sent by the user.
``` - -## Chat - -To mimic a chat experience, apply `message-sm` and `message-sender` to automatically fit to the width of the sender's message. The response should be the full width and will not be shortened. - -```html -
-
-

Ask a short question

-
-
-
-
-

- Respond with a much longer answer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed - ullamcorper morbi tincidunt ornare massa eget egestas. Pellentesque elit ullamcorper dignissim - cras tincidunt lobortis feugiat. -

-
-
-
-
-

- Ask a very long question. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper - morbi tincidunt ornare massa eget egestas. Pellentesque elit ullamcorper dignissim cras - tincidunt lobortis feugiat. -

-
-
-
-
-

Short response.

-
-
-``` diff --git a/site/src/patterns/chat.md b/site/src/patterns/chat.md index b56f3addf..a67689b0a 100644 --- a/site/src/patterns/chat.md +++ b/site/src/patterns/chat.md @@ -52,6 +52,43 @@ For a copilot-friendly input, with a series of buttons placed within the visual ``` +## Copilot-like chat messages + +To mimic a copilot chat experience, apply `message-sm` and `message-sender` to automatically fit to the width of the sender's message. For the AI responses (`message-sm`), the message will take up the full width. + +```html +
+
+

Ask a short question

+
+
+
+
+

+ Respond with a much longer answer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed + ullamcorper morbi tincidunt ornare massa eget egestas. Pellentesque elit ullamcorper dignissim + cras tincidunt lobortis feugiat. +

+
+
+
+
+

+ Ask a very long question. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper + morbi tincidunt ornare massa eget egestas. Pellentesque elit ullamcorper dignissim cras + tincidunt lobortis feugiat. +

+
+
+
+
+

Short response.

+
+
+``` + ## Messages The following markup utilizes various components and atomics to create a chat experience. As you can see from the example below, we create a grid container and place several `.message` components within. In each message we make use of `.persona` to display a user's information, and a `popover` to house the overflow menu and its contents. From 3c00eaf3e35cc84b3024f6d0366f4d44ab21bdae Mon Sep 17 00:00:00 2001 From: Ellyn Liu Date: Fri, 6 Dec 2024 10:59:50 -0800 Subject: [PATCH 6/6] don't set width auto on the class --- css/src/components/message.scss | 2 -- site/src/patterns/chat.md | 19 +++++++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/css/src/components/message.scss b/css/src/components/message.scss index 9a197a636..abeb6180a 100644 --- a/css/src/components/message.scss +++ b/css/src/components/message.scss @@ -76,8 +76,6 @@ $message-content-padding-block-sm-sender: 0.5rem !default; } &.message-sm.message-sender { - width: auto; - .message-content { padding-block: $message-content-padding-block-sm-sender; } diff --git a/site/src/patterns/chat.md b/site/src/patterns/chat.md index a67689b0a..4feff6a65 100644 --- a/site/src/patterns/chat.md +++ b/site/src/patterns/chat.md @@ -54,10 +54,10 @@ For a copilot-friendly input, with a series of buttons placed within the visual ## Copilot-like chat messages -To mimic a copilot chat experience, apply `message-sm` and `message-sender` to automatically fit to the width of the sender's message. For the AI responses (`message-sm`), the message will take up the full width. +To mimic a copilot chat experience, apply `message-sm`, `message-sender`, and `width-auto` to automatically fit to the width of the sender's message. For the AI responses (`message-sm`), the message will take up the full width. ```html -
+

Ask a short question

@@ -89,6 +89,21 @@ To mimic a copilot chat experience, apply `message-sm` and `message-sender` to a
``` +If you want the full-width message, then only use `message-sm` and `message-sender` on the sender's message. + +```html +
+
+

Ask a short question

+
+
+
+
+

Short response.

+
+
+``` + ## Messages The following markup utilizes various components and atomics to create a chat experience. As you can see from the example below, we create a grid container and place several `.message` components within. In each message we make use of `.persona` to display a user's information, and a `popover` to house the overflow menu and its contents.