fix(coachmark): add "step-count" slot for custom/internationalized pagination content #4215
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 resultsChromecoachmark permalinkbasic-test
Firefoxcoachmark permalinkbasic-test
|
Rajdeepc
changed the title
|
Can you sync with the internationalization team to confirm that this works across the actual usage of our target languages? Naively, I've seeing |
Based on the feedback from the Internationalisation team, we'll need to update our component to allow users to provide the entire string for the step count dynamically using a slot. protected renderSteps = (): TemplateResult => {
return html`
<div class="step" role="status">
<span aria-live="polite">
<slot name="step-count"></slot>
</span>
</div>
`;
}; |
… into feature/coachmark-localization
… into feature/coachmark-localization
… into feature/coachmark-localization
|
@Westbrook Let me know if we are good to land this or do you see any additional work that needs to be done here? |
Can we see this in a story that surfaces to VRT to ensure we're covered over time? Something like |
🎆
Westbrook
changed the title
… into feature/coachmark-localization
…gination content (#4215) * chore(coachmark): added separator property * chore(coachmark): updated tests * chore(coachmark): updated golden image cache * fix(coachmark): localized the step count * chore(coachmark): updated golden image cache * chore(coachmark): update readme and coachmark to default to english * chore(coachmark): removed separator from the props * chore(coachmark): updated to check for 1 of 4 stepcount context * chore(coachmark): updated golden image cache * chore(coachmark): added locallixation story for step count * chore(coachmark): updated golden image cache * chore(coachmark): update readme to include slot for docs site --------- Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
Description
This PR adds the ability for users to customize the separator between the current step and the total steps in the YourComponent component. By default, the separator is 'of', but users can now specify a custom separator using the separator attribute.
Changes Made
Added a new separator property to the YourComponent component to allow customization of the separator.
Updated the component's template to use the separator property for the separator between the current step and the total steps.
Related issue(s)
Motivation and context
How has this been tested?
Screenshots (if appropriate)
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.