Skip to content
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

feat(issue-stream): Update priority badge/selector #78726

Merged
merged 5 commits into from
Oct 8, 2024

Conversation

MichaelSun48
Copy link
Member

@MichaelSun48 MichaelSun48 commented Oct 7, 2024

closes #77819

Creates the new design for the issue priority badge under the variant prop within the <GroupPriorityBadge/> component. This design is currently under a feature flag, so it is not visible.

Demo with flag manually set to true:

Screen.Recording.2024-10-07.at.1.47.39.PM.mov

@MichaelSun48 MichaelSun48 requested review from malwilley, vuluongj20 and a team October 7, 2024 20:49
@MichaelSun48 MichaelSun48 requested a review from a team as a code owner October 7, 2024 20:49
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Oct 7, 2024
Comment on lines 99 to 105
label: (
<GroupPriorityBadge
variant={hasStreamlinedIssueStream ? 'streamlined' : 'default'}
priority={priority}
/>
),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that I have decided to keep the labels for the badges that are shown in the dropdown, unlike for the badges in the issue stream.

interface Props extends SVGIconProps {
bars?: 0 | 1 | 2 | 3;
}
const IconCellSignal = forwardRef<SVGSVGElement, Props>(({bars = 3, ...props}, ref) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not attached to this name, feel free to give suggestions.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like material icons has a similar name, so seems okay to me.

Only other think I could think of would be IconSignalBars

type={variant === 'signal' ? 'default' : getTagTypeForPriority(priority)}
icon={variant === 'signal' && <IconCellSignal bars={bars} />}
>
{(showLabel && PRIORITY_KEY_TO_LABEL[priority]) ?? t('Unknown')}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use VisuallyHidden here so that the text still exists for screen readers and tests?

@MichaelSun48 MichaelSun48 force-pushed the msun/issuesTable/updateGroupPrioritySelector branch from 60d6679 to 9bf00de Compare October 8, 2024 18:23
@MichaelSun48 MichaelSun48 merged commit 1d8bddb into master Oct 8, 2024
41 of 42 checks passed
@MichaelSun48 MichaelSun48 deleted the msun/issuesTable/updateGroupPrioritySelector branch October 8, 2024 22:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Issue Stream Table: Modify priority dropdown to use signal icons
3 participants