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

fix(icon): Allow icon to be focusable when not clickable #2217

Merged

Conversation

rivka-ungar
Copy link
Contributor

@rivka-ungar rivka-ungar requested a review from a team as a code owner July 8, 2024 16:28
Copy link
Contributor

@YossiSaadi YossiSaadi left a comment

Choose a reason for hiding this comment

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

amazing work! had some unblocking comments

Comment on lines -64 to -74
const iconLabel = useMemo(() => {
if (type === AttentionBoxType.DANGER) {
return "alert";
}

if (type === AttentionBoxType.SUCCESS) {
return "success";
}

return "attention";
}, [type]);
Copy link
Contributor

Choose a reason for hiding this comment

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

We said those are redundant anyway, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, the icon is for decoration purpose only

Copy link
Contributor

Choose a reason for hiding this comment

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

That's awesome!!

Comment on lines 11 to 12
// TODO remove in next major
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Copy link
Contributor

Choose a reason for hiding this comment

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

maybe also add this in the type declaration as you did in other places, as it is easy to remove it from here and forget to remove from declaration. so even only there is enough instead of here, as this way it would show an error, but not the other way around

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changed it

<Tooltip
content={infoContent}
referenceWrapperClassName={styles.infoTooltip}
addKeyboardHideShowTriggersByDefault
Copy link
Contributor

Choose a reason for hiding this comment

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

btw, is this has a task to become default true at next major? just wondering 👀

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I didn't see one, so added it

@@ -66,6 +66,7 @@ export interface TextFieldProps extends VibeComponentProps {
searchResultsContainerId?: string;
activeDescendant?: string;
/** Icon names labels for a11y */
/// TODO Remove layout in next major
Copy link
Contributor

Choose a reason for hiding this comment

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

💪🏼

@@ -69,7 +69,7 @@ export const States: Story = {
<TextField placeholder="With icon" iconName={Email} size={TextField.sizes.MEDIUM} />
<TextField
placeholder="With clickable icon"
iconName={Email}
iconName={Duplicate}
Copy link
Contributor

Choose a reason for hiding this comment

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

makes more sense for the sake of the example, good job 👏🏼

@rivka-ungar rivka-ungar merged commit 9788fac into master Jul 24, 2024
10 checks passed
@rivka-ungar rivka-ungar deleted the allow-icon-to-be-focusable-when-not-clickable-6965412634 branch July 24, 2024 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants