-
Notifications
You must be signed in to change notification settings - Fork 211
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
fix(dialog-wrapper): add dismiss-label attribute for the close button's label #4154
Conversation
Lighthouse scores
What is this?Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on Transfer Size
Request Count
|
Tachometer resultsChromedialog permalinkbasic-test
Firefoxdialog permalinkbasic-test
|
packages/dialog/src/Dialog.ts
Outdated
@@ -61,6 +61,9 @@ export class Dialog extends ObserveSlotPresence(AlertDialog, [ | |||
@property({ type: Boolean, reflect: true }) | |||
public dismissable = false; | |||
|
|||
@property({ type: String, reflect: true, attribute: 'dismiss-label' }) | |||
public dismissLabel = ''; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please default this to Close
to reduce default effort required to consume this pattern.
This should also prevent the need to alter the story files, unless you'd like to add one that leverages this for an internationalized delivery.
4782663
to
ce577c4
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
dialog-wrapper has several labels for customization. This PR introduces a new attribute
dismiss-label
fordialog-wrapper
anddialog
. It allows the string passed in to be used as thelabel
fordialog-wrapper
anddialog
.Description
dismissLabel
and attributedismiss-label
todialog-wrapper
anddialog
. Default is ``.dismiss-label
will be used as thesp-close-button
'slabel
prop.dialog-wrapper
anddialog
stories to pass indismiss-label = 'Close'
.dismiss-label
set in the stories trickles down to thearia-label
of the components.dialog-wrapper
readme with newdismiss-label
.Related issue(s)
fixes #3375
Motivation and context
#1975
How has this been tested?
DialogWrapper
Dialog Wrapper
.Wrapper Dismissable
.sp-close-button
haslabel = 'Close'
sp-dialog
andsp-dialog-wrapper
hasdismiss-label = 'Close'
Dialog
Dialog
.Dismissable
.sp-close-button
haslabel = 'Close'
sp-dialog
hasdismiss-label = 'Close'
Screenshots (if appropriate)
Dialog Wrapper
Dialog
Types of changes
Checklist
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against
main
.