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(safari): overflow render bug and browser tab focus #838

Merged
merged 1 commit into from
Mar 9, 2021
Merged

fix(safari): overflow render bug and browser tab focus #838

merged 1 commit into from
Mar 9, 2021

Conversation

100stacks
Copy link
Member

@100stacks 100stacks commented Feb 24, 2021 •
edited
Loading

Description

What are the relevant story cards/tickets? Any additional PRs or other references?

Jira:

  • SURF-2177
  • SURF-2190

Before you request a review for this PR:

  • For UI changes, did you manually test in recent versions of modern browsers (Chrome, Firefox, and Safari)?
  • For UI changes, did you manually test in IE11 and legacy Edge?
  • Did you add component tests for any new code?
  • Did you run the component unit tests via yarn test to ensure all tests passed?
  • Did you include a screenshot of the component tests?
  • If you changed/added functionality, did you update the demo page and documentation?
  • If needed, did you add or modify the demo test page to test the changed/added functionality?
  • Did you assign reviewers?
  • In Jira, have you linked to this PR on the ticket(s)?

@100stacks 100stacks added this to the HelixUI-v2.2.0 milestone Feb 24, 2021
@netlify
Copy link

netlify bot commented Feb 24, 2021 •
edited
Loading

Deploy preview for helix-ui ready!

Built with commit dda82e9

https://deploy-preview-838--helix-ui.netlify.app

@100stacks 100stacks force-pushed the surf-2177-safari-render-bug branch from 6f4b8bc to 4dc3285 Compare February 24, 2021 20:55
@100stacks 100stacks changed the title fix(safari): tabset render bug fix(safari): overflow render bug Feb 24, 2021
@100stacks 100stacks force-pushed the surf-2177-safari-render-bug branch from 4dc3285 to cd57d6f Compare February 25, 2021 18:22
100stacks
100stacks commented Feb 25, 2021
View reviewed changes
Copy link
Member Author

@100stacks 100stacks left a comment

Choose a reason for hiding this comment

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

@lalithkarikelli @BY00565233, let's go with this fallback pattern to support IE11. The fallback property should go just above the property with the CSS Variable.

src/scss/components/tabset/_index.scss
border-bottom: 2px solid var(--hxTabset-hxTab-current-border-bottom, $teal-300);
color: $gray-950;
Copy link
Member Author

Choose a reason for hiding this comment

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

IE11 fallback pattern.

lalithkarikelli
lalithkarikelli approved these changes Feb 26, 2021
View reviewed changes
Copy link
Contributor

@lalithkarikelli lalithkarikelli left a comment

Choose a reason for hiding this comment

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

DEV LGTM

badejayayesubabu
badejayayesubabu approved these changes Mar 1, 2021
View reviewed changes
Copy link
Collaborator

@badejayayesubabu badejayayesubabu left a comment

Choose a reason for hiding this comment

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

DEV LGTM

@100stacks 100stacks force-pushed the surf-2177-safari-render-bug branch from cd57d6f to c7554f0 Compare March 2, 2021 17:32
@100stacks 100stacks requested a review from danielmdesigns March 2, 2021 17:35
danielmdesigns
danielmdesigns reviewed Mar 2, 2021
View reviewed changes
Copy link

@danielmdesigns danielmdesigns left a comment

Choose a reason for hiding this comment

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

we need to remove the blue outline when a user clicks on a tab, this shouldn't be visible like this

Screen Shot 2021-03-02 at 3 29 12 PM

@100stacks
Copy link
Member Author

100stacks commented Mar 2, 2021 •
edited
Loading

we need to remove the blue outline when a user clicks on a tab, this shouldn't be visible like this

Screen Shot 2021-03-02 at 3 29 12 PM

@danielmdesigns, the focus-ring is default browser styling that the vendors added for accessibility.

@100stacks 100stacks force-pushed the surf-2177-safari-render-bug branch from c7554f0 to cbf4d96 Compare March 2, 2021 23:18
100stacks
100stacks commented Mar 2, 2021
View reviewed changes
Copy link
Member Author

@100stacks 100stacks left a comment

Choose a reason for hiding this comment

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

@danielmdesigns, removed the browser default focus-ring per your feedback.

@100stacks 100stacks force-pushed the surf-2177-safari-render-bug branch from cbf4d96 to e7b085c Compare March 3, 2021 21:21
@100stacks 100stacks force-pushed the surf-2177-safari-render-bug branch 2 times, most recently from 281a53c to b7a28db Compare March 4, 2021 20:53
@100stacks 100stacks changed the title fix(safari): overflow render bug fix(safari): overflow render bug and browser tab focus Mar 5, 2021
@100stacks 100stacks force-pushed the surf-2177-safari-render-bug branch from b7a28db to 114a67e Compare March 9, 2021 18:50
@100stacks 100stacks added 🆕 New Component Specs Updated Component Specifications CSS and removed Need: Design LGTM 🆕 New Component Specs Updated Component Specifications labels Mar 9, 2021
@100stacks
fix(safari): overflow render bug and fix tab styles
dda82e9 
* fix safari render bug
* amend tabset styles
* remove browser default focus-ring on tabs
@100stacks 100stacks force-pushed the surf-2177-safari-render-bug branch from 114a67e to dda82e9 Compare March 9, 2021 19:18
@100stacks 100stacks merged commit ad7c5fa into master Mar 9, 2021
@100stacks 100stacks deleted the surf-2177-safari-render-bug branch March 25, 2021 18:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@danielmdesigns danielmdesigns danielmdesigns left review comments

@badejayayesubabu badejayayesubabu badejayayesubabu approved these changes

@lalithkarikelli lalithkarikelli lalithkarikelli approved these changes

Assignees
No one assigned
Labels
BUG FIX CSS
Projects
None yet
Milestone
HelixUI-v2.2.0
Development

Successfully merging this pull request may close these issues.
4 participants
@100stacks @danielmdesigns @lalithkarikelli @badejayayesubabu