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

change: [M3-6522] - Tag Component v7 story & cleanup #9840

Merged
merged 4 commits into from
Oct 31, 2023

Conversation

abailly-akamai
Copy link
Contributor

@abailly-akamai abailly-akamai commented Oct 24, 2023

Description 📝

This PR replaces the Tag component's .mdx story with a fresh v7 story.

Changes 🔄

  • Refactor old mdx story into a v7 story
  • Component cleanup
  • A new .styles file
  • A new unit test
  • A few fixes:

Broken hover state in main menu

Before After
Screenshot 2023-10-24 at 16 26 24 Screenshot 2023-10-24 at 16 43 36

Poor contrast & accessibility on dark mode

Before After
Screenshot 2023-10-24 at 16 42 57 Screenshot 2023-10-24 at 16 47 22

Preview 📷

Apart from the fixes shown above, there should be no change in the way the component looks or behaves.

How to test 🧪

Prerequisites

  • Pull code locally

Verification steps

(How to verify changes)

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@abailly-akamai abailly-akamai self-assigned this Oct 24, 2023
type Variants = 'blue' | 'lightBlue';

export interface TagProps extends ChipProps {
asSuggestion?: boolean;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was only used as a boolean for closeMenu (in main search bar) so i took it out and checked for closeMenu directly

}
history.push(`/search/?query=tag:${label}`);
};

// If maxLength is set, truncate display to that length.
const _label = maxLength ? truncateEnd(label, maxLength) : label;

const tagProps = omit(props, ['asSuggestion', 'closeMenu']);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

we can just use shouldForwardProps on the styled component for this

@abailly-akamai abailly-akamai marked this pull request as ready for review October 24, 2023 21:04
@abailly-akamai abailly-akamai requested a review from a team as a code owner October 24, 2023 21:04
@abailly-akamai abailly-akamai requested review from bnussman-akamai and cliu-akamai and removed request for a team October 24, 2023 21:04
Copy link
Contributor

@jdamore-linode jdamore-linode left a comment

Choose a reason for hiding this comment

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

Thanks @abailly-akamai! Changes look good in Storybook, and I'm always excited to see doc improvements and test additions

@abailly-akamai abailly-akamai merged commit a6b17ec into linode:develop Oct 31, 2023
13 checks passed
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.

3 participants