-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DSD-1798: Add labelPlacement prop to ProgressIndicator #1680
base: development
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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.
Looks good but minor comments regarding documentation. I think the ticket needs to be updated to reflect these changes for the AC.
@@ -95,7 +99,7 @@ export const ProgressIndicator: ChakraComponent< | |||
if (indicatorType === "circular") { | |||
// For the small size, since the label won't be visible, we need to add |
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.
I don't think this comment is true anymore since the circular small size variant does display the label on the right side.
@@ -107,8 +111,14 @@ export const ProgressIndicator: ChakraComponent< | |||
</ChakraCircularProgressLabel> | |||
)} | |||
</ChakraCircularProgress> | |||
{showLabel && size !== "small" && ( | |||
<Label id={`${id}-label`} htmlFor={id}> | |||
{showLabel && (size !== "small" || labelPlacement === "right") && ( |
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.
Can you add a few more examples in the storybook doc section? The current example shows size="small" and labelPlacement="right", but it'd be good to see others such as the regular size and labelPlacement="right".
Fixes JIRA ticket DSD-1798
This PR does the following:
labelPlacement
prop to theProgressIndicator
component to allow users to set the placement of labels relative to the indicator. It is only applicable to the circular variant.How has this been tested?
Accessibility concerns or updates
Accessibility Checklist
aria-live
is used, a screenreader was used to verify the text is read.ref
s, focus management was reviewed.Open Questions
Checklist:
Front End Review: