Skip to content

[Docs] Add Layer content update #5843

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

Open
Sulaymon333 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[Docs] Add Layer content update #5843

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef7cd75
add new use cases section and placeholder text
Sulaymon333 Feb 23, 2026
d83393c
Merge branch 'master' into wip-layer-content-update
Sulaymon333 Feb 25, 2026
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
32 changes: 28 additions & 4 deletions apps/docs/src/pages/components/layer/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { Button, Notification } from 'grommet';
import { AccessibilitySection, BestPracticeGroup, Example, StyleTable } from '../../../layouts';
import {
AccessibilitySection,
BestPracticeGroup,
Example,
StyleTable,
} from '../../../layouts';
import {
ActionLabels,
ActionLabelTitle,
Expand Down Expand Up @@ -29,9 +34,27 @@ import { Checkmark } from '@hpe-design/icons-grommet';
<LayerExample />
</Example>

## When to use
## Use cases

### Confirming next steps

[Placeholder for confirming next steps example]

### Confirming destructive deletion

[Placeholder for confirming destructive deletion example]
Comment on lines +37 to +45
Copy link

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

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

The new "Use cases" section currently renders multiple bracketed placeholder lines (e.g. "[Placeholder for …]") and also removes the prior introductory guidance about when Layers should be used. This will ship unfinished content to the docs; either replace these placeholders with real guidance/examples, or hide them (e.g. MDX comments) and keep a short introductory paragraph explaining intended usage until examples are ready.

Copilot uses AI. Check for mistakes.

### Adding a new record

A layer should be used to present information or task flows to the user without navigating them away from their current context.
[Placeholder for adding a new record example]

### Filtering data

[Placeholder for filtering data example]

### Completing a multi‑step process
Copy link

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

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

The heading "Completing a multi‑step process" uses a non-standard hyphen character (U+2011), while the placeholder text below uses a regular hyphen ("multi-step"). Consider using a regular '-' in the heading as well to avoid odd anchor/slug generation and keep wording consistent.

Suggested change
### Completing a multi‑step process
### Completing a multi-step process

Copilot uses AI. Check for mistakes.

[Placeholder for completing a multi-step process example]

## Anatomy

Expand Down Expand Up @@ -340,6 +363,7 @@ For example, implementation of this "Close" button for a Layer would be:
autoFocus
/>
```

### WCAG compliance

<AccessibilitySection title='layer' />
<AccessibilitySection title="layer" />