Components: Add ItemGroup and Item #30097
Conversation
Size Change: +236 kB (+15%) Total Size: 1.86 MB
|
Filename | Size | Change |
---|---|---|
build/a11y/index.js |
1.12 kB | 0 B |
build/autop/index.js |
2.28 kB | 0 B |
build/blob/index.js |
673 B | 0 B |
build/block-directory/style-rtl.css |
989 B | 0 B |
build/block-directory/style.css |
990 B | 0 B |
build/block-library/blocks/archives/editor-rtl.css |
61 B | 0 B |
build/block-library/blocks/archives/editor.css |
60 B | 0 B |
build/block-library/blocks/archives/style-rtl.css |
65 B | 0 B |
build/block-library/blocks/archives/style.css |
65 B | 0 B |
build/block-library/blocks/audio/editor-rtl.css |
58 B | 0 B |
build/block-library/blocks/audio/editor.css |
58 B | 0 B |
build/block-library/blocks/audio/style-rtl.css |
112 B | 0 B |
build/block-library/blocks/audio/style.css |
112 B | 0 B |
build/block-library/blocks/block/editor-rtl.css |
161 B | 0 B |
build/block-library/blocks/block/editor.css |
161 B | 0 B |
build/block-library/blocks/button/editor-rtl.css |
475 B | 0 B |
build/block-library/blocks/button/editor.css |
474 B | 0 B |
build/block-library/blocks/button/style-rtl.css |
603 B | 0 B |
build/block-library/blocks/button/style.css |
602 B | 0 B |
build/block-library/blocks/buttons/editor-rtl.css |
315 B | 0 B |
build/block-library/blocks/buttons/editor.css |
315 B | 0 B |
build/block-library/blocks/buttons/style-rtl.css |
375 B | 0 B |
build/block-library/blocks/buttons/style.css |
375 B | 0 B |
build/block-library/blocks/calendar/style-rtl.css |
208 B | 0 B |
build/block-library/blocks/calendar/style.css |
208 B | 0 B |
build/block-library/blocks/categories/editor-rtl.css |
84 B | 0 B |
build/block-library/blocks/categories/editor.css |
83 B | 0 B |
build/block-library/blocks/categories/style-rtl.css |
79 B | 0 B |
build/block-library/blocks/categories/style.css |
79 B | 0 B |
build/block-library/blocks/code/style-rtl.css |
90 B | 0 B |
build/block-library/blocks/code/style.css |
90 B | 0 B |
build/block-library/blocks/columns/editor-rtl.css |
190 B | 0 B |
build/block-library/blocks/columns/editor.css |
190 B | 0 B |
build/block-library/blocks/columns/style-rtl.css |
422 B | 0 B |
build/block-library/blocks/columns/style.css |
422 B | 0 B |
build/block-library/blocks/cover/editor-rtl.css |
644 B | 0 B |
build/block-library/blocks/cover/editor.css |
646 B | 0 B |
build/block-library/blocks/cover/style-rtl.css |
1.22 kB | 0 B |
build/block-library/blocks/cover/style.css |
1.23 kB | 0 B |
build/block-library/blocks/embed/editor-rtl.css |
486 B | 0 B |
build/block-library/blocks/embed/editor.css |
486 B | 0 B |
build/block-library/blocks/embed/style-rtl.css |
401 B | 0 B |
build/block-library/blocks/embed/style.css |
400 B | 0 B |
build/block-library/blocks/file/editor-rtl.css |
301 B | 0 B |
build/block-library/blocks/file/editor.css |
300 B | 0 B |
build/block-library/blocks/file/frontend.js |
771 B | 0 B |
build/block-library/blocks/file/style-rtl.css |
255 B | 0 B |
build/block-library/blocks/file/style.css |
255 B | 0 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.44 kB | 0 B |
build/block-library/blocks/freeform/editor.css |
2.44 kB | 0 B |
build/block-library/blocks/gallery/editor-rtl.css |
704 B | 0 B |
build/block-library/blocks/gallery/editor.css |
705 B | 0 B |
build/block-library/blocks/gallery/style-rtl.css |
1.06 kB | 0 B |
build/block-library/blocks/gallery/style.css |
1.06 kB | 0 B |
build/block-library/blocks/group/editor-rtl.css |
160 B | 0 B |
build/block-library/blocks/group/editor.css |
160 B | 0 B |
build/block-library/blocks/group/style-rtl.css |
57 B | 0 B |
build/block-library/blocks/group/style.css |
57 B | 0 B |
build/block-library/blocks/heading/editor-rtl.css |
129 B | 0 B |
build/block-library/blocks/heading/editor.css |
129 B | 0 B |
build/block-library/blocks/heading/style-rtl.css |
76 B | 0 B |
build/block-library/blocks/heading/style.css |
76 B | 0 B |
build/block-library/blocks/home-link/style-rtl.css |
259 B | 0 B |
build/block-library/blocks/home-link/style.css |
259 B | 0 B |
build/block-library/blocks/html/editor-rtl.css |
281 B | 0 B |
build/block-library/blocks/html/editor.css |
281 B | 0 B |
build/block-library/blocks/image/editor-rtl.css |
717 B | 0 B |
build/block-library/blocks/image/editor.css |
716 B | 0 B |
build/block-library/blocks/image/style-rtl.css |
481 B | 0 B |
build/block-library/blocks/image/style.css |
485 B | 0 B |
build/block-library/blocks/latest-comments/style-rtl.css |
281 B | 0 B |
build/block-library/blocks/latest-comments/style.css |
282 B | 0 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
137 B | 0 B |
build/block-library/blocks/latest-posts/editor.css |
137 B | 0 B |
build/block-library/blocks/legacy-widget/editor-rtl.css |
557 B | 0 B |
build/block-library/blocks/legacy-widget/editor.css |
557 B | 0 B |
build/block-library/blocks/list/style-rtl.css |
63 B | 0 B |
build/block-library/blocks/list/style.css |
63 B | 0 B |
build/block-library/blocks/media-text/editor-rtl.css |
176 B | 0 B |
build/block-library/blocks/media-text/editor.css |
176 B | 0 B |
build/block-library/blocks/media-text/style-rtl.css |
492 B | 0 B |
build/block-library/blocks/media-text/style.css |
489 B | 0 B |
build/block-library/blocks/more/editor-rtl.css |
434 B | 0 B |
build/block-library/blocks/more/editor.css |
434 B | 0 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
633 B | 0 B |
build/block-library/blocks/navigation-link/editor.css |
634 B | 0 B |
build/block-library/blocks/navigation-link/style-rtl.css |
94 B | 0 B |
build/block-library/blocks/navigation-link/style.css |
94 B | 0 B |
build/block-library/blocks/navigation/editor-rtl.css |
1.54 kB | 0 B |
build/block-library/blocks/navigation/editor.css |
1.54 kB | 0 B |
build/block-library/blocks/navigation/frontend.js |
2.85 kB | 0 B |
build/block-library/blocks/nextpage/editor-rtl.css |
395 B | 0 B |
build/block-library/blocks/nextpage/editor.css |
395 B | 0 B |
build/block-library/blocks/page-list/editor-rtl.css |
310 B | 0 B |
build/block-library/blocks/page-list/editor.css |
311 B | 0 B |
build/block-library/blocks/page-list/style-rtl.css |
233 B | 0 B |
build/block-library/blocks/page-list/style.css |
233 B | 0 B |
build/block-library/blocks/paragraph/editor-rtl.css |
157 B | 0 B |
build/block-library/blocks/paragraph/editor.css |
157 B | 0 B |
build/block-library/blocks/paragraph/style-rtl.css |
247 B | 0 B |
build/block-library/blocks/paragraph/style.css |
248 B | 0 B |
build/block-library/blocks/post-author/editor-rtl.css |
209 B | 0 B |
build/block-library/blocks/post-author/editor.css |
209 B | 0 B |
build/block-library/blocks/post-author/style-rtl.css |
183 B | 0 B |
build/block-library/blocks/post-author/style.css |
184 B | 0 B |
build/block-library/blocks/post-comments-form/style-rtl.css |
140 B | 0 B |
build/block-library/blocks/post-comments-form/style.css |
140 B | 0 B |
build/block-library/blocks/post-comments/style-rtl.css |
360 B | 0 B |
build/block-library/blocks/post-comments/style.css |
359 B | 0 B |
build/block-library/blocks/post-content/editor-rtl.css |
139 B | 0 B |
build/block-library/blocks/post-content/editor.css |
139 B | 0 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
73 B | 0 B |
build/block-library/blocks/post-excerpt/editor.css |
73 B | 0 B |
build/block-library/blocks/post-excerpt/style-rtl.css |
69 B | 0 B |
build/block-library/blocks/post-excerpt/style.css |
69 B | 0 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
338 B | 0 B |
build/block-library/blocks/post-featured-image/editor.css |
338 B | 0 B |
build/block-library/blocks/post-title/style-rtl.css |
60 B | 0 B |
build/block-library/blocks/post-title/style.css |
60 B | 0 B |
build/block-library/blocks/preformatted/style-rtl.css |
103 B | 0 B |
build/block-library/blocks/preformatted/style.css |
103 B | 0 B |
build/block-library/blocks/pullquote/editor-rtl.css |
183 B | 0 B |
build/block-library/blocks/pullquote/editor.css |
183 B | 0 B |
build/block-library/blocks/pullquote/style-rtl.css |
318 B | 0 B |
build/block-library/blocks/pullquote/style.css |
318 B | 0 B |
build/block-library/blocks/query-loop/editor-rtl.css |
98 B | 0 B |
build/block-library/blocks/query-loop/editor.css |
97 B | 0 B |
build/block-library/blocks/query-loop/style-rtl.css |
315 B | 0 B |
build/block-library/blocks/query-loop/style.css |
317 B | 0 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B | 0 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B | 0 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
270 B | 0 B |
build/block-library/blocks/query-pagination/editor.css |
262 B | 0 B |
build/block-library/blocks/query-pagination/style-rtl.css |
168 B | 0 B |
build/block-library/blocks/query-pagination/style.css |
168 B | 0 B |
build/block-library/blocks/query-title/editor-rtl.css |
86 B | 0 B |
build/block-library/blocks/query-title/editor.css |
86 B | 0 B |
build/block-library/blocks/query/editor-rtl.css |
131 B | 0 B |
build/block-library/blocks/query/editor.css |
132 B | 0 B |
build/block-library/blocks/quote/style-rtl.css |
169 B | 0 B |
build/block-library/blocks/quote/style.css |
169 B | 0 B |
build/block-library/blocks/rss/editor-rtl.css |
201 B | 0 B |
build/block-library/blocks/rss/editor.css |
202 B | 0 B |
build/block-library/blocks/rss/style-rtl.css |
290 B | 0 B |
build/block-library/blocks/rss/style.css |
290 B | 0 B |
build/block-library/blocks/search/editor-rtl.css |
189 B | 0 B |
build/block-library/blocks/search/editor.css |
189 B | 0 B |
build/block-library/blocks/search/style-rtl.css |
359 B | 0 B |
build/block-library/blocks/search/style.css |
362 B | 0 B |
build/block-library/blocks/separator/editor-rtl.css |
99 B | 0 B |
build/block-library/blocks/separator/editor.css |
99 B | 0 B |
build/block-library/blocks/separator/style-rtl.css |
251 B | 0 B |
build/block-library/blocks/separator/style.css |
251 B | 0 B |
build/block-library/blocks/shortcode/editor-rtl.css |
512 B | 0 B |
build/block-library/blocks/shortcode/editor.css |
512 B | 0 B |
build/block-library/blocks/site-logo/editor-rtl.css |
440 B | 0 B |
build/block-library/blocks/site-logo/editor.css |
441 B | 0 B |
build/block-library/blocks/site-logo/style-rtl.css |
154 B | 0 B |
build/block-library/blocks/site-logo/style.css |
154 B | 0 B |
build/block-library/blocks/social-link/editor-rtl.css |
164 B | 0 B |
build/block-library/blocks/social-link/editor.css |
165 B | 0 B |
build/block-library/blocks/social-links/editor-rtl.css |
800 B | 0 B |
build/block-library/blocks/social-links/editor.css |
799 B | 0 B |
build/block-library/blocks/social-links/style-rtl.css |
1.32 kB | 0 B |
build/block-library/blocks/social-links/style.css |
1.33 kB | 0 B |
build/block-library/blocks/spacer/editor-rtl.css |
308 B | 0 B |
build/block-library/blocks/spacer/editor.css |
308 B | 0 B |
build/block-library/blocks/spacer/style-rtl.css |
48 B | 0 B |
build/block-library/blocks/spacer/style.css |
48 B | 0 B |
build/block-library/blocks/table/editor-rtl.css |
478 B | 0 B |
build/block-library/blocks/table/editor.css |
478 B | 0 B |
build/block-library/blocks/table/style-rtl.css |
480 B | 0 B |
build/block-library/blocks/table/style.css |
480 B | 0 B |
build/block-library/blocks/tag-cloud/editor-rtl.css |
118 B | 0 B |
build/block-library/blocks/tag-cloud/editor.css |
118 B | 0 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
94 B | 0 B |
build/block-library/blocks/tag-cloud/style.css |
94 B | 0 B |
build/block-library/blocks/template-part/editor-rtl.css |
551 B | 0 B |
build/block-library/blocks/template-part/editor.css |
550 B | 0 B |
build/block-library/blocks/term-description/editor-rtl.css |
90 B | 0 B |
build/block-library/blocks/term-description/editor.css |
90 B | 0 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B | 0 B |
build/block-library/blocks/text-columns/editor.css |
95 B | 0 B |
build/block-library/blocks/text-columns/style-rtl.css |
166 B | 0 B |
build/block-library/blocks/text-columns/style.css |
166 B | 0 B |
build/block-library/blocks/verse/style-rtl.css |
87 B | 0 B |
build/block-library/blocks/verse/style.css |
87 B | 0 B |
build/block-library/blocks/video/editor-rtl.css |
569 B | 0 B |
build/block-library/blocks/video/editor.css |
570 B | 0 B |
build/block-library/blocks/video/style-rtl.css |
173 B | 0 B |
build/block-library/blocks/video/style.css |
173 B | 0 B |
build/block-library/common-rtl.css |
1.26 kB | 0 B |
build/block-library/common.css |
1.26 kB | 0 B |
build/block-library/editor-rtl.css |
9.93 kB | 0 B |
build/block-library/editor.css |
9.92 kB | 0 B |
build/block-library/reset-rtl.css |
506 B | 0 B |
build/block-library/reset.css |
507 B | 0 B |
build/block-library/theme-rtl.css |
692 B | 0 B |
build/block-library/theme.css |
693 B | 0 B |
build/block-serialization-default-parser/index.js |
1.29 kB | 0 B |
build/block-serialization-spec-parser/index.js |
3.06 kB | 0 B |
build/components/style-rtl.css |
16.2 kB | 0 B |
build/components/style.css |
16.2 kB | 0 B |
build/data-controls/index.js |
829 B | 0 B |
build/date/index.js |
31.8 kB | 0 B |
build/deprecated/index.js |
739 B | 0 B |
build/dom-ready/index.js |
577 B | 0 B |
build/dom/index.js |
4.62 kB | 0 B |
build/edit-navigation/style-rtl.css |
3.08 kB | 0 B |
build/edit-navigation/style.css |
3.08 kB | 0 B |
build/edit-post/classic-rtl.css |
454 B | 0 B |
build/edit-post/classic.css |
454 B | 0 B |
build/edit-post/style-rtl.css |
6.81 kB | 0 B |
build/edit-post/style.css |
6.8 kB | 0 B |
build/edit-widgets/style-rtl.css |
3.46 kB | 0 B |
build/edit-widgets/style.css |
3.47 kB | 0 B |
build/editor/style-rtl.css |
3.92 kB | 0 B |
build/editor/style.css |
3.91 kB | 0 B |
build/element/index.js |
3.44 kB | 0 B |
build/escape-html/index.js |
739 B | 0 B |
build/format-library/style-rtl.css |
637 B | 0 B |
build/format-library/style.css |
639 B | 0 B |
build/hooks/index.js |
1.76 kB | 0 B |
build/html-entities/index.js |
627 B | 0 B |
build/i18n/index.js |
3.73 kB | 0 B |
build/is-shallow-equal/index.js |
710 B | 0 B |
build/keycodes/index.js |
1.43 kB | 0 B |
build/list-reusable-blocks/style-rtl.css |
629 B | 0 B |
build/list-reusable-blocks/style.css |
628 B | 0 B |
build/media-utils/index.js |
3.08 kB | 0 B |
build/notices/index.js |
1.07 kB | 0 B |
build/nux/style-rtl.css |
718 B | 0 B |
build/nux/style.css |
716 B | 0 B |
build/primitives/index.js |
1.03 kB | 0 B |
build/priority-queue/index.js |
791 B | 0 B |
build/react-i18n/index.js |
923 B | 0 B |
build/redux-routine/index.js |
2.82 kB | 0 B |
build/reusable-blocks/style-rtl.css |
225 B | 0 B |
build/reusable-blocks/style.css |
225 B | 0 B |
build/shortcode/index.js |
1.68 kB | 0 B |
build/token-list/index.js |
846 B | 0 B |
build/url/index.js |
1.95 kB | 0 B |
build/viewport/index.js |
1.28 kB | 0 B |
build/warning/index.js |
1.13 kB | 0 B |
build/wordcount/index.js |
1.24 kB | 0 B |
It was such a blast Going through the PR now. I think it was awesome that we got an initial implementation of nested + collapsible lists working in the story: For now, I think we should remove it from the story (until we can refine + create a better working implementation) |
Thoughts on design: The original new Menu component was designed to work as a (sub) component of Dropdown. We want to carry that spirit within this new/updated implementation of That Menu component was intentionally designed (aesthetically) to look like the current Gutenberg dropdown: In that case, we may need to make some style adjustments. |
I did a quick test, and I was able to get these new It's too much effort to get it working 100% in the Story. I did enough to ensure the integration, features, and mechanics work |
@@ -4,6 +4,7 @@ | |||
import { createContext, useContext } from '@wordpress/element'; | |||
|
|||
export const ItemGroupContext = createContext( { size: 'medium' } as { | |||
spacedAround: boolean; |
sarayourfriend
Mar 22, 2021
Author
Contributor
Shall we give this a default value in the context, just for consistency?
Shall we give this a default value in the context, just for consistency?
ItsJonQ
Mar 22, 2021
Contributor
We could! I wasn't sure how to go about this, since it's kind of inferred from bordered
/ separated
🤔
We could! I wasn't sure how to go about this, since it's kind of inferred from bordered
/ separated
I've pushed up some styling updates to prepare the component to replace Note: The current I've also updated the "Non action" story to showcase some alternate UIs we can build using this component: |
|
Hey! Great work! I don't think we should render Also, the following markups are not valid: // button is not read as a button if it has role listitem
<div role="list">
<button role="listitem" />
<button role="listitem" />
</div> // ul requires children to be li's
<ul>
<button />
<button />
</ul> This makes the <ItemGroup action>
<Item />
<Item />
</ItemGroup> That would render this: <div>
<button />
<button />
</div> That's the best markup I can think of for a group of buttons. But I wonder if it wouldn't be better as a separate component. I would expect it to be |
@diegohaz Thank you for your thoughts!! (Humour me for a second, haha If you have the time, I'd love to know how you would approach the construction of these use cases - specifically from a semantic/a11y perspective and a React component API perspective. To clarify, I'm mostly trying to understand the best rendered HTML markup. HTML <div>
<nav>
<ul>
<li><a>Link</a></li>
<li><a>Link</a></li>
</ul>
</nav>
<hr />
<ul>
<li><button>Action</button></li>
<li><button>Action</button></li>
</ul>
</div> React component: <div>
<nav>
<List>
<ListItem as={NavLink} to="/url">Link</ListItem>
<ListItem as={NavLink} to="/url">Link</ListItem>
</List>
</nav>
<Divider />
<List>
<ListItem action onClick={...}>Link</ListItem>
<ListItem action onClick={...}>Link</ListItem>
</List>
</div> HTML <ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul> React component: <List>
<ListItem>...</ListItem>
<ListItem>...</ListItem>
<ListItem>...</ListItem>
</List> Complex list of actionable items, with inner actions HTML <ul>
<li>
<input type="checkbox" />
...
<button>...</button>
</li>
...
</ul> React component: <List>
<ListItem action onClick={...}>
<Checkbox />
...
<Button>...</Button>
</ListItem>
...
</List> Thank you!! |
I tried giving this a test and the G2 components test page is so inaccessible. There are so many unlabeled buttons and links, it's hard enough finding the component to test. Once I finally found it, once again, the iframe with Mac's Voiceover doesn't play well. I wrote all this to say there's really no way to pass this accessibility wise until a more suitable testing environment is created. If your testing environment is inaccessible from the start, it's tough to tell what the new feature is. When I clicked the dropdown it said something about a bunch of random letters web dialog opened. Again, not sure if this is just a side-effect with the iframe or something is going wrong with the dialog that opens. Thanks. |
@alexstine Haii! Thank you for trying to help!
The new component is just a general (consistent) way to render a list of items. At this moment, we're not ready for a real accessibility run through, as we're still figuring out the correct structure (convos above with @diegohaz ). We are planning on using it for a new Dropdown component. However, the one from Storybook was just an initial test to see if it would even work. Perhaps we should switch the status of this PR to draft - since we're still actively working on it. Your comment has raised an important point. (cc'ing @sarayourfriend) |
If they're all navigation links, but it makes sense to have some distinction between the groups of links, we can have multiple nav elements: <div>
<nav aria-label="Primary folders">
<ul>
<li><a>Inbox</a></li>
<li><a>Drafts</a></li>
</ul>
</nav>
<nav aria-label="Secondary folders">
<ul>
<li><a>Trash</a></li>
<li><a>Spam</a></li>
</ul>
</nav>
</div> But, if Trash and Spam are buttons, just wrap them within a div: <div>
<nav>
<ul>
<li><a>Inbox</a></li>
<li><a>Drafts</a></li>
</ul>
</nav>
<div>
<button>Move to Trash</button>
<button>Move to Spam</button>
</div>
</div> This looks like a table. <table aria-label="Items">
<tbody>
<tr>
<td>
<input type="checkbox" aria-labelledby="title-1" />
</td>
<td>
<a href="#" id="title-1">Line item 1</a>
</td>
<td>
<button>...</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" aria-labelledby="title-2" />
</td>
<td>
<a href="#" id="title-2">Line item 2</a>
</td>
<td>
<button>...</button>
</td>
</tr>
</tbody>
</table> Or, in the case we want keyboard users to be able to navigate through the table with arrow keys, a |
@diegohaz Wow!! That's really helpful!!! I never thought of that layout like a |
Yes! That would look like this: <div role="grid">
<div role="row">
<div role="gridcell">
<input type="checkbox" aria-labelledby="title-1" />
</div>
<div role="gridcell">
<a href="#" id="title-1">Line item 1</a>
</div>
<div role="gridcell">
<button>...</button>
</div>
</div>
</div> If we use |
@diegohaz Hmm! Maybe this particular UI I had in mind doesn't fit a |
aa44a5b
to
e57fede
I made some adjustments: fixed the Since this is a very abstract component, I'm still not sure how the use cases could impact its API, but I think we can move forward with it and keep it experimental while we understand better the use cases and make the necessary adjustments. |
* Add ItemGroup and Item * Update UI design for item-group * Remove collabsible story * Improve computed paddingY calculations for ItemGroup Item * Remove g2 * Fix stories * Rename DropdownMenu to Dropdown Co-authored-by: Jon Q <[email protected]> Co-authored-by: Haz <[email protected]>
sarayourfriend commentedMar 22, 2021
•
edited
Description
Adds new
ItemGroup
andItem
componentsObviates the need for #29645.
How has this been tested?
Run Storybook (
npm run storybook:dev
) and go to the ItemGroup story (/iframe.html?id=g2-components-experimental-itemgroup--default&viewMode=story
).Screenshots
Types of changes
New feature
Checklist: