Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(headercell): added new hover prop to control component hover state #928

Merged
merged 3 commits into from
Jan 30, 2025

Conversation

masoudmanson
Copy link
Contributor

Summary

HeaderCell
Github issue: #927

https://czi-sci.slack.com/archives/C032S43KKFV/p1738019694310679

Checklist

  • Default Story in Storybook
  • Test Story in Storybook
  • Tests written
  • Semantic Variables from defaultTheme.ts used wherever possible
  • If updating an existing component, depreciate flag has been used where necessary
  • ZeroHeight Documents updated
  • Chromatic build verified by @chanzuckerberg/sds-design

@masoudmanson masoudmanson linked an issue Jan 28, 2025 that may be closed by this pull request
3 tasks
@masoudmanson masoudmanson self-assigned this Jan 28, 2025
@masoudmanson masoudmanson added Bug Something isn't working Eng labels Jan 28, 2025
@@ -55,28 +57,36 @@ export const StyledTableHeader = styled("th", {
${focusVisibleA11yStyle}

${(props: CellHeaderExtraProps) => {
const { active = false, horizontalAlign = "left" } = props;
const { active = false, horizontalAlign = "left", hover = true } = props;
Copy link
Contributor

Choose a reason for hiding this comment

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

It looks like it defaults to "true" 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is it ok? or should it be the other way around? 🤔
What do you think @clarsen-czi?

Copy link
Contributor

Choose a reason for hiding this comment

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

@clarsen-czi sorry I think we still need your feedback here 😁 🙏

If we default hover to true, it would mean that the CellHeader could have hover effect when no corresponding action is present/implemented, so the question here is whether we should default hover to false instead to prevent that?

Thank you!

Choose a reason for hiding this comment

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

Good call @tihuan! I agree that having it default to false makes the most sense. Thanks for the suggestion!

Copy link

@clarsen-czi clarsen-czi left a comment

Choose a reason for hiding this comment

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

LGTM!! Thanks for jumping on this so quickly @masoudmanson!

@masoudmanson masoudmanson merged commit 6a31635 into main Jan 30, 2025
10 checks passed
@masoudmanson masoudmanson deleted the 927-add-hover-prop-to-the-headercell-component branch January 30, 2025 18:57
@tihuan
Copy link
Contributor

tihuan commented Jan 30, 2025

Yes! Thanks Masoud for the quick update, Erin for raising the default and Connor for confirming it! 🎉

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Bug Something isn't working Eng
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add hover prop to the HeaderCell component
4 participants