[#75029] Document Border Box List in Lookbook#23253
Merged
Merged
Conversation
Deploying openproject with ⚡ PullPreview
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates Lookbook documentation to position BorderBoxListComponent as the recommended high-level component for structured list UIs, replacing the older lower-level Border Box docs/examples.
Changes:
- Adds a dedicated Border Box List documentation page with anatomy, parameters, slots, variants, use cases, and example code.
- Updates related Lookbook docs to reference Border Box List instead of the old Border Box component.
- Removes the old
OpPrimer::BorderBoxComponentPreviewand collapsible example.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
lookbook/previews/open_project/common/border_box_list_component_preview.rb |
Adds Lookbook display height metadata for the Border Box List preview. |
lookbook/previews/op_primer/border_box_component_preview.rb |
Removes obsolete low-level Border Box preview class. |
lookbook/previews/op_primer/border_box_component_preview/collapsible.html.erb |
Removes obsolete collapsible Border Box preview template. |
lookbook/docs/components/border-box.md.erb |
Removes old Border Box documentation. |
lookbook/docs/components/border-box-list.md.erb |
Adds new Border Box List documentation. |
lookbook/docs/components/tables/border-box-table.md.erb |
Updates guidance to link to Border Box List for non-table content. |
lookbook/docs/components/inset-box.md.erb |
Updates guidance to recommend Border Box List for more structured content. |
Contributor
Author
|
This should probably wait for #23175 to be merged - so that we can cross-reference |
myabc
commented
May 19, 2026
myabc
force-pushed
the
implementation/75029-border-box-list-lookbook
branch
from
9a1f37d to
f8a5606
Compare
myabc
force-pushed
the
implementation/75029-border-box-list-lookbook
branch
from
f8a5606 to
8481335
Compare
myabc
commented
May 20, 2026
| | `scheme` | `Symbol` | `:default` | Visual scheme. Use `:transparent` for list containers that should blend into their surrounding surface | | ||
| | `padding` | `Symbol` | `:default` | Row padding forwarded to the underlying `Primer::Beta::BorderBox`. Supports Primer BorderBox padding values such as `:condensed`, `:default`, and `:spacious` | | ||
| | `header_padding` | `Symbol` | `:inherit` | Header-only vertical padding override. Supports `:inherit`, `:condensed`, `:default`, and `:spacious` | | ||
| | `interactive` | `Boolean` | `false` | Announces counter and configured empty-state updates politely to assistive technologies | |
Contributor
Author
There was a problem hiding this comment.
@bsatarnejad we're struggling to find a better name for this!
Contributor
There was a problem hiding this comment.
@bsatarnejad We were thinking about aria_interactive or live_region_interactive to differentiate that clearly from existing aria attributes. Wdyt?
Contributor
Author
There was a problem hiding this comment.
@HDinger @bsatarnejad let's address the API change in a follow up. In the meantime I've adjusted the documentation slightly.
myabc
commented
May 20, 2026
myabc
commented
May 20, 2026
myabc
force-pushed
the
feature/71059-sprint-goals
branch
from
adffea7 to
24ca5e6
Compare
Updates Border Box references to point to higher-level Border Box List component. Also removes old Border Box examples. https://community.openproject.org/wp/75029
Surfaces the keywords accepted by `with_header` and its sub-slots (`with_description`, `with_action_button`, `with_menu`) in dedicated tables so readers do not need to inspect the component source. https://community.openproject.org/wp/75029
Drops the `title_arguments:` forward-reference to an `id` defined later in the block. The `aria-describedby` wiring is an advanced pattern that cluttered an introductory example.
Mentions that `with_empty_state` renders a `Primer::Beta::Blankslate` and accepts `title:`, `description:`, and `icon:` keywords. Bumps the work-package preview from 2 to 3 items for visual consistency with the other preview scenarios.
myabc
force-pushed
the
implementation/75029-border-box-list-lookbook
branch
from
b8fc77c to
ff22ca7
Compare
HDinger
approved these changes
May 21, 2026
HDinger
left a comment
HDinger
left a comment
Contributor
There was a problem hiding this comment.
Looks very good 👍 👏 Thanks for taking the time 🙇 I only have very small remarks
| @@ -0,0 +1,192 @@ | |||
| The Border Box List component displays compact, structured list items with | |||
Contributor
There was a problem hiding this comment.
Nitpick: I prefer the technical component name but we don't do that consistently so feel free to ignore that.
Suggested change
| The Border Box List component displays compact, structured list items with | |
| The BorderBoxList displays compact, structured list items with |
Contributor
Author
There was a problem hiding this comment.
SHouldn't it be BorderBoxListComponent then?
| | `scheme` | `Symbol` | `:default` | Visual scheme. Use `:transparent` for list containers that should blend into their surrounding surface | | ||
| | `padding` | `Symbol` | `:default` | Row padding forwarded to the underlying `Primer::Beta::BorderBox`. Supports Primer BorderBox padding values such as `:condensed`, `:default`, and `:spacious` | | ||
| | `header_padding` | `Symbol` | `:inherit` | Header-only vertical padding override. Supports `:inherit`, `:condensed`, `:default`, and `:spacious` | | ||
| | `interactive` | `Boolean` | `false` | Announces counter and configured empty-state updates politely to assistive technologies | |
Contributor
There was a problem hiding this comment.
@bsatarnejad We were thinking about aria_interactive or live_region_interactive to differentiate that clearly from existing aria attributes. Wdyt?
Address follow-up review comments by using the component name, clarifying interactive ARIA behavior, and grouping usage guidance.
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Ticket
https://community.openproject.org/wp/75029
What are you trying to accomplish?
Documents Border Box List in Lookbook
Updates Border Box references to point to higher-level Border Box List component. Also removes old Border Box examples.
Screenshots
Merge checklist