docs(si-menu): improve and extend menu example#1559
Open
robertwilde wants to merge 2 commits intosiemens:mainfrom
Open
docs(si-menu): improve and extend menu example#1559robertwilde wants to merge 2 commits intosiemens:mainfrom
robertwilde wants to merge 2 commits intosiemens:mainfrom
Conversation
Contributor
There was a problem hiding this comment.
Code Review
This pull request improves the documentation for the si-menu component by simplifying the basic example and adding a new, more comprehensive "full options" example. The changes are well-structured and enhance the documentation. All identified areas for improvement, including a high-severity accessibility issue, code cleanup opportunities, and a suggestion to improve test code readability, remain valid as they do not contradict any provided rules.
| <button | ||
| type="button" | ||
| class="btn btn-circle btn-tertiary element-options-vertical" | ||
| [cdkMenuTriggerFor]="contextMenu" |
Contributor
Comment on lines
18
to
29
| const example1 = 'si-menu/si-menu-full-options'; | ||
| test(example1, async ({ page, si }) => { | ||
| await si.visitExample(example1); | ||
| await si.runVisualAndA11yTests(); | ||
| }); | ||
|
|
||
| const example2 = 'si-menu/si-menu-bar'; | ||
| test(example2, async ({ page, si }) => { | ||
| await si.visitExample(example2); | ||
| await page.getByText('Item 1').click(); | ||
| await si.runVisualAndA11yTests(); | ||
| }); |
Contributor
There was a problem hiding this comment.
For better readability and maintainability, it's good practice to use more descriptive variable names for test examples instead of generic names like example1 and example2.
Suggested change
| const example1 = 'si-menu/si-menu-full-options'; | |
| test(example1, async ({ page, si }) => { | |
| await si.visitExample(example1); | |
| await si.runVisualAndA11yTests(); | |
| }); | |
| const example2 = 'si-menu/si-menu-bar'; | |
| test(example2, async ({ page, si }) => { | |
| await si.visitExample(example2); | |
| await page.getByText('Item 1').click(); | |
| await si.runVisualAndA11yTests(); | |
| }); | |
| const fullOptionsExample = 'si-menu/si-menu-full-options'; | |
| test(fullOptionsExample, async ({ page, si }) => { | |
| await si.visitExample(fullOptionsExample); | |
| await si.runVisualAndA11yTests(); | |
| }); | |
| const menuBarExample = 'si-menu/si-menu-bar'; | |
| test(menuBarExample, async ({ page, si }) => { | |
| await si.visitExample(menuBarExample); | |
| await page.getByText('Item 1').click(); | |
| await si.runVisualAndA11yTests(); | |
| }); |
| @@ -0,0 +1,66 @@ | |||
| <!-- <ng-template #contextMenu> --> | |||
Contributor
|
|
||
| @Component({ | ||
| selector: 'app-sample', | ||
| imports: [SiMenuModule, CdkContextMenuTrigger, CdkMenuTrigger], |
Contributor
There was a problem hiding this comment.
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
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.
Closes #984
In the basic example, introduce 3 columns to trigger the menu, and simplify the menu.
Add a new "full-options" example, inline using the declarative API, and with a menu button click using the factory API.