diff --git a/UNRELEASED-v9.md b/UNRELEASED-v9.md index b96317acc79..678e87c7a73 100644 --- a/UNRELEASED-v9.md +++ b/UNRELEASED-v9.md @@ -43,6 +43,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed the `unstyled-link()` mixin and replaced with values ([#4951](https://github.com/Shopify/polaris-react/pull/4951)) - Removed the `unstyled-list()` mixin and replaced with values ([#4960](https://github.com/Shopify/polaris-react/pull/4960)) - Removed the `high-contrast-outline()` and `high-contrast-border()` mixins and replaced with tokens and values ([#4962](https://github.com/Shopify/polaris-react/pull/4962)) +- Removed the `when-printing`, `when-not-printing`, `hidden-when-printing`, and `print-hidden` scss mixins ([#4995](https://github.com/Shopify/polaris-react/pull/4995)) - Replaced the `icon-size()` function with the `--p-icon-size-medium` custom property ([#4990](https://github.com/Shopify/polaris-react/pull/4990)) **Sass global variables** diff --git a/src/components/ActionMenu/ActionMenu.scss b/src/components/ActionMenu/ActionMenu.scss index 88d99f2bb40..425ec802958 100644 --- a/src/components/ActionMenu/ActionMenu.scss +++ b/src/components/ActionMenu/ActionMenu.scss @@ -1,9 +1,13 @@ @import '../../styles/common'; .ActionMenu { - @include print-hidden; // Needed for JS calculations width: 100%; display: flex; justify-content: flex-end; + + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index eb3bfa2b976..ae912294aaa 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -45,7 +45,7 @@ body { // stylelint-disable color-no-hex background-color: #f6f6f7; - @include when-printing { + @media print { // AppProvider sets styles on the body. These needs to // be overridden using !important. // stylelint-disable-next-line declaration-no-important diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 89d0c44cb48..d7914aacd51 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -28,7 +28,10 @@ .Section-hideOnPrint, .hideOnPrint { - @include hidden-when-printing; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } .Header { diff --git a/src/components/Collapsible/Collapsible.scss b/src/components/Collapsible/Collapsible.scss index 36ee62c44e4..6a37bd5af61 100644 --- a/src/components/Collapsible/Collapsible.scss +++ b/src/components/Collapsible/Collapsible.scss @@ -17,7 +17,7 @@ } .expandOnPrint { - @include when-printing { + @media print { // stylelint-disable-next-line declaration-no-important max-height: none !important; overflow: visible; diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss index 1659461e886..49c47c454e3 100644 --- a/src/components/Frame/Frame.scss +++ b/src/components/Frame/Frame.scss @@ -7,7 +7,7 @@ display: flex; background-color: var(--p-background); - @include when-printing { + @media print { background-color: transparent; } @@ -18,7 +18,6 @@ } .Navigation { - @include hidden-when-printing; position: fixed; z-index: var(--p-z-8); top: 0; @@ -30,6 +29,11 @@ outline: none; transform: translateX(0%); + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } + @include frame-when-nav-displayed { z-index: 1; left: var(--pc-frame-offset); @@ -72,7 +76,6 @@ } .NavigationDismiss { - @include hidden-when-printing; @include recolor-icon(var(--p-surface)); @include focus-ring; position: absolute; @@ -91,6 +94,11 @@ cursor: pointer; transition: opacity var(--p-duration-100) var(--p-ease); + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } + .Navigation-visible & { pointer-events: all; opacity: 1; @@ -117,7 +125,6 @@ } .TopBar { - @include hidden-when-printing; position: fixed; z-index: var(--p-z-4); top: 0; @@ -125,6 +132,11 @@ width: 100%; height: top-bar-height(); + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } + @include frame-when-nav-displayed { left: var(--pc-frame-offset); width: calc(100% - var(--pc-frame-offset)); @@ -158,7 +170,7 @@ @include frame-when-nav-displayed { .hasNav & { padding-left: layout-width(nav); - @include when-printing { + @media print { padding-left: 0; } @include safe-area-for(padding-left, layout-width(nav), left); @@ -167,7 +179,7 @@ .hasTopBar & { padding-top: top-bar-height(); - @include when-printing { + @media print { padding-top: 0; } } @@ -202,13 +214,17 @@ } .LoadingBar { - @include hidden-when-printing; position: fixed; z-index: var(--p-z-6); top: 0; right: 0; left: 0; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } + @include frame-when-nav-displayed { .hasNav & { left: var(--pc-frame-offset); diff --git a/src/components/Page/components/Header/Header.scss b/src/components/Page/components/Header/Header.scss index 88310dcc0f7..cc07864d185 100644 --- a/src/components/Page/components/Header/Header.scss +++ b/src/components/Page/components/Header/Header.scss @@ -40,7 +40,10 @@ $action-menu-rollup-computed-width: 40px; padding-right: $action-menu-rollup-computed-width; } - @include print-hidden; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } .BreadcrumbWrapper { @@ -49,7 +52,10 @@ $action-menu-rollup-computed-width: 40px; max-width: 100%; margin-right: var(--p-space-4); - @include print-hidden; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } .PaginationWrapper { @@ -72,7 +78,10 @@ $action-menu-rollup-computed-width: 40px; } } - @include print-hidden; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } .AdditionalNavigationWrapper { @@ -80,7 +89,10 @@ $action-menu-rollup-computed-width: 40px; flex: 1 0 auto; justify-content: flex-end; - @include print-hidden; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } /// @@ -115,7 +127,10 @@ $action-menu-rollup-computed-width: 40px; margin-left: var(--p-space-4); } - @include print-hidden; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } .ActionMenuWrapper { @@ -137,7 +152,10 @@ $action-menu-rollup-computed-width: 40px; top: control-height() * 0.5; } - @include print-hidden; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } .Row { @@ -193,7 +211,7 @@ $action-menu-rollup-computed-width: 40px; margin-left: 0; } - @include when-printing { + @media print { // stylelint-disable-next-line declaration-no-important margin-left: 0 !important; } diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index 0a642bd88ec..98c80fc042f 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -119,5 +119,8 @@ $vertical-motion-offset: -5px; } .PopoverOverlay-hideOnPrint { - @include hidden-when-printing; + @media print { + // stylelint-disable-next-line declaration-no-important + display: none !important; + } } diff --git a/src/styles/_common.scss b/src/styles/_common.scss index c2d4db86609..11a6f8f8a87 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -18,4 +18,3 @@ @import './shared/typography'; @import './shared/skeleton'; @import './shared/interaction-state'; -@import './shared/printing'; diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss index fb9988db34e..de09f266ce3 100644 --- a/src/styles/_public-api.scss +++ b/src/styles/_public-api.scss @@ -30,4 +30,3 @@ @import './shared/typography'; @import './shared/skeleton'; @import './shared/interaction-state'; -@import './shared/printing'; diff --git a/src/styles/shared/_printing.scss b/src/styles/shared/_printing.scss deleted file mode 100644 index e8b1f4c723f..00000000000 --- a/src/styles/shared/_printing.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin when-printing { - @media print { - @content; - } -} - -@mixin when-not-printing { - @media not print { - @content; - } -} - -@mixin hidden-when-printing { - @include when-printing { - // We really, really don't want to see this thing when it is printed. - // stylelint-disable-next-line declaration-no-important - display: none !important; - } -} diff --git a/src/styles/shared/_typography.scss b/src/styles/shared/_typography.scss index 651eeb14b98..56874445a2b 100644 --- a/src/styles/shared/_typography.scss +++ b/src/styles/shared/_typography.scss @@ -165,10 +165,3 @@ $typography-condensed: 640px; white-space: nowrap; text-overflow: ellipsis; } - -@mixin print-hidden { - @media print { - // stylelint-disable-next-line declaration-no-important - display: none !important; - } -}