Center InternalDatePicker Clear button

[leojalfred]

Addresses #3249 by altering the InternalDatePicker Clear button to take the full width. Note that .hoverable-buttons is now conditionally rendered to prevent issues when centering the items in the button.

This is my first open source contribution, please let me know if I can do anything to streamline my contribution.

[github-actions]

CLA

Hello there and welcome to our project!
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.
Although we don't have a dedicated legal counsel, having this kind of agreement can protect us from potential legal issues or patent trolls.
Thank you for your understanding.

Generated by 🚫 dangerJS against 0d1a7c3

[charlesBochet]

We avoid styling children through CSS.
Instead you can transform the div itself to a Styled component

[lucasbordeau]

Hi @leojalfred, it seems that you're both working on the same issue with @abdul-irfan-k, see other PR : #3273

Would you be ok to work together on this ?

We need this to be pixel perfect like in the figma.

[leojalfred]

@lucasbordeau I'd be happy to. I can push up necessary changes tomorrow morning. Do you have a specific example in Figma that you want me to reference? I'm looking at the calendar components linked on the repo's README and I don't see a mockup for this.

[charlesBochet]

@leojalfred Thank you :)
The figma is located here: https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=2709-52753&mode=design&t=bTCrlh4rIYbzufiM-0

[leojalfred]

@charlesBochet I saw that but that doesn't really have much to do with the specifics of this ticket. Also the existing implementation doesn't match the design in Figma, particularly with respect to the padding. I can do my best when it comes to the padding, but it makes more sense to have the spacing for the Clear button line up with the rest of the spacing in existing implementation rather than the design in Figma.

[leojalfred]

Also the div that you pointed out in the comment was already a styled component (StyledMenuItemLeftContent). The reason I used the div in styling is because it avoided the need for prop drilling. I think in order to not use children in the styling I'll need to pass a centering boolean down the chain to that component and use it to add justify-content: center.

I've got a question about using children in styling. It seems like children are used in styling, as in targeting .menu-item under the StyledButtonContainer styles. Should this be refactored as well? Or is there some rule that determines when it's appropriate to use children in styling and when it's not?

[leojalfred]

@charlesBochet it should be good to go. I changed the justify-content: center that was originally styled on the div to be styled via props in StyledMenuItemLeftContent. Per the other PR I changed StyledButtonContainer to extend MenuItem. Per the other PR I also changed the StyledButtonContainer spacing to be the same vertically and horizontally, but to my eye it looks worse.

[lucasbordeau]

Good for the design.

Could you just create the button from scratch and not use the MenuItem component ?

Because MenuItem is used everywhere in the code and refactoring it to handle centered text is out of the scope of this issue.

We can see in storybook for MenuItem, that it doesn't play well with isCentered set to true and right icon buttons.

We'll see how to refactor this MenuItem later.

[charlesBochet]

Looks great! Perfect, thank you :)

Changes have been made