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.

Sign up for GitHub

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

Jump to bottom

fix: [M3-7256] - Added spacing for Hively external link #9776

Merged
merged 6 commits into from
Oct 11, 2023
Merged

fix: [M3-7256] - Added spacing for Hively external link #9776

merged 6 commits into from
Oct 11, 2023

Conversation

jaalah-akamai
Copy link
Contributor

@jaalah-akamai jaalah-akamai commented Oct 10, 2023 •
edited
Loading

Description 📝

Feedback Smiley Ratings should be easily clickable, however it overlaps with the "How did I do?" link

Changes 🔄

  • margin is overwritten due to being in a Stack, so switching to padding which is the more better approach.
  • Added Storybook

Preview 📷

Before After
Screenshot 2023-10-10 at 12 31 40 PM Screenshot 2023-10-10 at 12 36 54 PM
Screenshot 2023-10-10 at 12 37 26 PM

How to test 🧪

Prerequisites

  • Run storybook yarn storybook

Reproduction steps

Verification steps

  • Observe that there's no more overlapping happening in component

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

@jaalah-akamai jaalah-akamai added Bug Fixes for regressions or bugs Storybook Ready for Review labels Oct 10, 2023
@jaalah-akamai jaalah-akamai self-assigned this Oct 10, 2023
@jaalah-akamai jaalah-akamai requested a review from a team as a code owner October 10, 2023 16:39
@jaalah-akamai jaalah-akamai requested review from cpathipa and cliu-akamai and removed request for a team October 10, 2023 16:39
@mjac0bs mjac0bs self-requested a review October 10, 2023 18:50
mjac0bs
mjac0bs reviewed Oct 10, 2023
View reviewed changes
Copy link
Contributor

@mjac0bs mjac0bs left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Confirmed the component looks good in Storybook.

I also tested this in Cloud by removing the conditional on L188 of ExpandableTicketPanel.tsx. I was seeing the bottom of the external link icon get cut off on desktop viewports. (see the first ticket in the screenshot below)

Does adding a little bit of marginTop and marginBottom (see the second ticket in the screenshot below for example, that's 5px) resolve the issue sufficiently?

Screenshot 2023-10-10 at 12 10 46 PM

packages/manager/src/features/Support/Hively.tsx Outdated
@@ -48,7 +51,7 @@ export const Hively = (props: Props) => {
<>
<Divider />
<Stack alignItems="center" direction="row" pl={1} spacing={1.5}>
<Typography mr={3}>
<Typography pr={2.5}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Am I recalling correctly from our cafe discussions that we preferred marginRight and paddingRight over Tailwind-like prop styles (mr and pr), so as to reduce the number of kinds of styling we have in the code base?

Copy link
Member

Choose a reason for hiding this comment

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

I think we decided to use sx over styling via props in general, although I really enjoy the inline props styling 😖

packages/manager/src/features/Support/Hively.stories.tsx Outdated
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for this!

@jaalah-akamai
Copy link
Contributor Author

@mjac0bs What browser / version are you using? I'm on Chrome - Version 117.0.5938.149 (Official Build) (arm64)
Screenshot 2023-10-10 at 4 47 06 PM

@mjac0bs
Copy link
Contributor

mjac0bs commented Oct 10, 2023 •
edited
Loading

@mjac0bs What browser / version are you using? I'm on Chrome - Version 117.0.5938.149 (Official Build) (arm64) !

Hmm, the same, it appears: Version 117.0.5938.149 (Official Build) (arm64).

I am confused:

Screen.Recording.2023-10-10.at.1.57.14.PM.mov

bnussman-akamai
bnussman-akamai reviewed Oct 11, 2023
View reviewed changes
Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

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

The fix looks good but I'm starting to think that the issue is caused by the <Link> component. The external icon just floats beside the <a>. Maybe the <Link> component needs to be updated to that It has some margin to account for the floating icon?

Screenshot 2023-10-11 at 10 43 28 AM

@jaalah-akamai
Copy link
Contributor Author

@bnussman-akamai that would require a refactor of Link. I will create a separate ticket / PR for this.

mjac0bs
mjac0bs approved these changes Oct 11, 2023
View reviewed changes
Copy link
Contributor

@mjac0bs mjac0bs left a comment

Choose a reason for hiding this comment

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

Approving this after talking offline. The clipping issue is inconsistent and can only be seen in some cases when a browser window is a certain width and zoom (less than 100%), which seems like an unlikely edge case. Experimenting with margin and padding also didn't seem to produce a fix. It would be nice to look into this a little more in the follow up ticket -- maybe Link issues would solve this -- but main issue resolved in this PR looks good.

bnussman-akamai
bnussman-akamai approved these changes Oct 11, 2023
View reviewed changes
Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

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

Looks good to me! (Safari btw 🤓)

@mjac0bs mjac0bs added Approved Multiple approvals and ready to merge! and removed Ready for Review labels Oct 11, 2023
@jaalah-akamai jaalah-akamai merged commit 2d6019b into linode:develop Oct 11, 2023
11 checks passed
This was referenced Oct 12, 2023
Merged
Closed
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bnussman-akamai bnussman-akamai bnussman-akamai approved these changes

@mjac0bs mjac0bs mjac0bs approved these changes

@cpathipa cpathipa Awaiting requested review from cpathipa cpathipa is a code owner automatically assigned from linode/frontend

@cliu-akamai cliu-akamai Awaiting requested review from cliu-akamai cliu-akamai is a code owner automatically assigned from linode/frontend

Assignees

@jaalah-akamai jaalah-akamai

Labels
Approved Multiple approvals and ready to merge! Bug Fixes for regressions or bugs Storybook
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@jaalah-akamai @mjac0bs @bnussman-akamai @jaalah