-
Notifications
You must be signed in to change notification settings - Fork 152
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
fix(Hide): use native tailwind breakpoint range classes #4153
Conversation
Size Change: +9 B (0%) Total Size: 460 kB
ℹ️ View Unchanged
|
Deploying with Cloudflare Pages
|
"sm-lm": { | ||
max: px(tokens.breakpointLargeMobile - 1), | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is being used in ModalFooter.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good catch, thanks
@@ -8,7 +8,7 @@ describe("Desktop", () => { | |||
render(<Desktop>kek</Desktop>); | |||
expect(screen.getByText("kek")).toMatchInlineSnapshot(` | |||
<div | |||
class="inline-block sm-mm:hidden mm-lm:hidden lm-tb:hidden tb-de:hidden" | |||
class="inline-block sm:max-lm:hidden mm:max-lm:hidden lm:max-tb:hidden tb:max-de:hidden" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we had sm-mm
why did it change to sm:max-lm
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's inside Hide, will fix
"lm-tb:hidden": on.includes("largeMobile"), | ||
"tb-de:hidden": on.includes("tablet"), | ||
"de-ld:hidden": on.includes("desktop"), | ||
"sm:max-lm:hidden": on.includes("smallMobile"), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't it be?
"sm:max-lm:hidden": on.includes("smallMobile"), | |
"sm:max-mm:hidden": on.includes("smallMobile"), |
@@ -12,7 +12,7 @@ describe("Hide", () => { | |||
); | |||
expect(container.childNodes[1]).toMatchInlineSnapshot(` | |||
<div | |||
class="inline-block sm-mm:hidden lm-tb:hidden ld:hidden" | |||
class="inline-block sm:max-lm:hidden lm:max-tb:hidden ld:hidden" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same question as above
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. Organize commits and rebase and I'll approve 👍
d95d89c
to
5c1dfe1
Compare
This Pull Request meets the following criteria:
Fixes reported issue FEPLT-1819
Storybook: https://orbit-mainframev-fix-hide-and-screens-issue.surge.sh