Skip to content

Update Layout #585

Open
flacoman91 wants to merge 3 commits into
mainfrom
rad-layout-only
Open

Update Layout #585
flacoman91 wants to merge 3 commits into
mainfrom
rad-layout-only

Conversation

@flacoman91
Copy link
Copy Markdown
Collaborator

@flacoman91 flacoman91 commented May 14, 2026

Breaking layout work out of #560 to have a more focused PR

Update the layout component

  • fixes bug with missing right divider on a 2-1 layout
  • Updates divider so that it grows to match whichever column/sidebar is longer
  • Updates examples to demonstrate the functionality

@flacoman91 flacoman91 changed the title Update Layout stories, styles, tests, and local DS documentation. Update Layout May 14, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 14, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://cfpb.github.io/design-system-react/pr-previews/pr-585/

Built to branch gh-pages at 2026-05-21 18:16 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@flacoman91 flacoman91 force-pushed the rad-layout-only branch 2 times, most recently from d3102b1 to 6922bca Compare May 14, 2026 15:33
@natalia-fitzgerald
Copy link
Copy Markdown
Collaborator

@flacoman91
Can you describe the goals of this PR, including what we fixed, how we use this component in our work, and how this relates to the discussion I started here: #569?

@flacoman91
Copy link
Copy Markdown
Collaborator Author

@flacoman91 Can you describe the goals of this PR, including what we fixed, how we use this component in our work, and how this relates to the discussion I started here: #569?

I updated the original details. The motivation for this fix was the complaint detail page in which the divider line wouldn't grow match whatever was the longer content column, sidebar or main.

Copy link
Copy Markdown
Collaborator

@natalia-fitzgerald natalia-fitzgerald left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@flacoman91
Can we make the following changes to the Storybook pages within Layout? I have made suggestions about the content but feel free to tweak if you have improvements.

Are the code examples for each of these, content, main, sidebar, and wrapper duplicative?

  • Change "Layout" to "Layouts"

Content

  • Change "Content" body text to: "Content is the main body of the page, situated between the header and the footer."
  • Change labeling of example to "Content" and "Sidebar" instead of "Content.Sidebar" and "Layout.Sidebar"
  • Remove "Usage" section
  • Update to match the screenshot below:
Image

Main

  • Change "Main" body text to: "Main is the container for all of the content within a layout. It is used to configure the column structure and whether the sidebar bleeds to the window edge."
  • Change labeling of example to "Content" and "Sidebar" instead of "Content.Sidebar" and "Layout.Sidebar"
  • Remove "Usage" section
  • Update to match the screenshot below:
Image

Sidebar

  • Change "Sidebar" body text to "A sidebar is a vertical user interface element positioned on the left or right side of the main content area."
  • Change labeling of example to "Content" and "Sidebar" instead of "Content.Sidebar" and "Layout.Sidebar"
  • Remove "Usage" section
  • Update to match the screenshot below:
Image

Wrapper

  • Change "Wrapper" body text to "The wrapper serves as a container for other components or elements. It wraps around child components and provides additional functionality, such as styling, context, or logic."
  • Change labeling of example to "Content" and "Sidebar" instead of "Content.Sidebar" and "Layout.Sidebar"
  • Remove "Usage" section
  • Update to match the screenshot below:
Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants