Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update padding and width of message component #727

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Update padding and width of message component #727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0d79b8d
update message component to match fluent figmas
ellynliu Nov 18, 2024
16557fb
changeset
ellynliu Nov 18, 2024
65f2e20
gap size of 12px to match fluent
ellynliu Nov 18, 2024
75fd63f
revert gap
ellynliu Nov 18, 2024
b6630a8
update documentation
ellynliu Nov 18, 2024
3c00eaf
don't set width auto on the class
ellynliu Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/tasty-ducks-rest.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@microsoft/atlas-site': minor
'@microsoft/atlas-css': minor
---

Update the padding and width of the message component
15 changes: 12 additions & 3 deletions css/src/components/message.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
Expand Down Expand Up @@ -68,7 +70,14 @@ $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 {
.message-content {
padding-block: $message-content-padding-block-sm-sender;
}
}
}
1 change: 1 addition & 0 deletions site/src/components/message.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ Use the `message-sender` class to indicate message sent by the user.
```

## Sizes

`message-sm` is available for resizing.

```html
Expand Down
52 changes: 52 additions & 0 deletions site/src/patterns/chat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,58 @@ For a copilot-friendly input, with a series of buttons placed within the visual
</div>
```

## Copilot-like chat messages

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
<article class="message message-sm message-sender width-auto">
<div class="message-content">
<p>Ask a short question</p>
</div>
</article>
<article class="message message-sm">
<div class="message-content">
<p>
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.
</p>
</div>
</article>
<article class="message message-sm message-sender">
<div class="message-content">
<p>
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.
</p>
</div>
</article>
<article class="message message-sm">
<div class="message-content">
<p>Short response.</p>
</div>
</article>
```

If you want the full-width message, then only use `message-sm` and `message-sender` on the sender's message.

```html
<article class="message message-sm message-sender">
<div class="message-content">
<p>Ask a short question</p>
</div>
</article>
<article class="message message-sm">
<div class="message-content">
<p>Short response.</p>
</div>
</article>
```

## 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.
Expand Down
Loading