docs: update modal images with border on various component pages part 1

[laurenmrice]

Closes #4766

This PR updates any modal images with the new a11y border across several component pages. This addresses half of our component pages and a separate PR will update the others. Side panels in images have also been updated with the border if it did not include it.

---

Changed

Updated current modal images with a11y border.

• Overview
• Accordion
• Button
• Checkbox
• Content switcher
• Inline loading
• Notification
• Radio button
• Select
• Tabs
• Tag

[sunny-babbar]

Thank you @laurenmrice to work on this!

I have noticed some items to consider looking into:

Button:

Usage tab:

• Under the "Alignment" section in the images the side panel does not seem to have a border

This image

• Under the "Horizontally arranged groups" section in the images of the side panel and modal does not seem to have a border

This is the image(s)

• Under the "Universal behaviors" section in the images the modal the border seems more white

• Under the "Loading" section in the images the modal animation does not seem to have a border

• Under the "Tertiary buttons in button groups " section in the images the side panel does not seem to have a border

• Under the "Ghost button used as a cancel action" section in the images the tearsheet does not seem to have a border (Modal, Side panel, and Tearsheet should all have a border)

Style tab:

• Under the "Button groups structure" section in the images of the side panel(s) does not seem to have a border

These images

[laurenmrice]

@sunny-babbar Just to address some of your comments below:

The images for these are actually correct, I rechecked them. You can see them in the Usage and Style Figma file.

Side panels
There is a side border on the side panels. In some cases where the side panel is using a darker inline theme (like a gray 100 theme), the border token is going to be taking on the dark theme color, which is more subtle visually than it looks in the light themes.

Modals
The modal border you are referring to that looks more “white”, is the correct border-subtle token for the light theme, it just has some more contrast visually.

Gifs
Gifs are going to be worked on in this separate issue.

Tearsheet
We will be updating Tearsheet images in a separate issue. I did not know that Products has added that enhancement already to its code and it was not accounted for in the Modal epic size wise per issue.

[sunny-babbar]

Additionally here are some more comments:
@laurenmrice

I have noticed some items to consider looking into:

Inline loading:

Usage tab:

• Under the "Interactions" section in the images the modal does not seem to have a border

[sunny-babbar]

@sunny-babbar Just to address some of your comments below:

The images for these are actually correct, I rechecked them. You can see them in the Usage and Style Figma file.

Side panels There is a side border on the side panels. In some cases where the side panel is using a darker inline theme (like a gray 100 theme), the border token is going to be taking on the dark theme color, which is more subtle visually than it looks in the light themes.

Modals The modal border you are referring to that looks more “white”, is the correct border-subtle token for the light theme, it just has some more contrast visually.

Gifs Gifs are going to be worked on in this separate issue.

Tearsheet We will be updating Tearsheet images in a separate issue. I did not know that Products has added that enhancement already to its code and it was not accounted for in the Modal epic size wise per issue.

@laurenmrice Thank for your comments on this to help walkthrough my comments.
Based off that I agree and I can see those items in the Figma file.

As far as the seperate issues for Gifs and Tearsheet that is great that will be addressed.

Those were my comments other than that everything else is good to go.

[sunny-babbar]

Based off our conversation and comments this is looking good to me.