Draft
Conversation
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Contributor
|
Size Change: +7.66 kB (+2.88%) Total Size: 273 kB
ℹ️ View Unchanged
|
Contributor
Documentation Health
|
| Category | Score | |
|---|---|---|
| Element description | 0/25 | ❌ |
| Attribute documentation | 20/20 | ✅ |
| Slot documentation | 15/15 | ✅ |
| CSS documentation | 15/15 | ✅ |
| Event documentation | 15/15 | ✅ |
| Demos | 0/10 | ❌ |
DrawerCloseEvent — 65/100 ⚠️
| Category | Score | |
|---|---|---|
| Element description | 0/25 | ❌ |
| Attribute documentation | 20/20 | ✅ |
| Slot documentation | 15/15 | ✅ |
| CSS documentation | 15/15 | ✅ |
| Event documentation | 15/15 | ✅ |
| Demos | 0/10 | ❌ |
rh-drawer (RhDrawer) — 56/100 ⚠️
| Category | Score | |
|---|---|---|
| Element description | 8/25 | ❌ |
| Attribute documentation | 20/20 | ✅ |
| Slot documentation | 10/15 | |
| CSS documentation | 3/15 | ❌ |
| Event documentation | 10/15 | |
| Demos | 5/10 |
Recommendations:
- DrawerCloseEvent: add a description to explain what this declaration does (Element description, +5 pts)
- rh-drawer: add descriptions to all CSS parts (CSS documentation, +5 pts)
- DrawerOpenEvent: describe purpose and context using words like 'for', 'when', 'provides', 'allows' (Element description, +5 pts)
- DrawerOpenEvent: use RFC 2119 keywords (MUST, SHOULD, AVOID) to clarify requirements (Element description, +5 pts)
- rh-drawer: describe event detail/data shape (Event documentation, +5 pts)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What I did
rh-drawerbased on figma explorations.auto: At viewports < 992px acts asoverlaydrawer, >= 992 acts asinlinedrawerinline: Drawer content is pushed aside by the panel expands or is resized. When the panel collapses, the content expands to fill the full width.overlay: Drawer panel overlays content as it expandsfixed: Drawer panel exists without content, and slides in from either side of the viewport overlaying full page.flow: Drawer panel exists in layout flow such as a grid at breakpoints >= 992px, then < 992px exists as afixedpanel and slides in from either side of viewport.ux.redhat.comcurrently uses this pattern.none: If a panel can not be controlled outside the open and closed statecollapsible: Has an integrated toggle button, causes the panel to not fully animate off page so that the toggle button allows user to control open and closed state.resizable: Allows panel to be resized by dragging or keyboard navigationposition: What position is the panelinline-startorinline-endside of viewport, works with RTL languages.trigger-id: Allows an external button to be linked via its ID to toggle the panel.storage-key: Allows the state to be saved into sessionStorage, so if used in a navigation pattern allows the user to open or close the panel and have that state be remembered across page visits within a particular session.Testing Instructions
Notes to Reviewers
This is a prototype and some of the specifications haven't yet been fleshed out, this is to help guide conversation on how we should design this component and what works and what maybe doesn't.