chore: use new breakpoint helpers in core components

src/core/bottom-bar/bottom-bar.stories.tsx

@@ -38,11 +38,13 @@ const meta = {
       <div
         ref={ref}
         style={{
-          overflow: 'auto',
-          height: '300px',
-          width: '100%',
           boxSizing: 'border-box',
           border: '1px solid #FA00FF',
+          containerType: 'inline-size',
+          height: '300px',
+          marginInline: 'auto',
+          overflow: 'auto',
+          width: '600px',
         }}
       >
         <Pattern height="100vh" />

src/core/bottom-bar/item/styles.ts

@@ -36,13 +36,12 @@ export const ElBottomBarItemIcon = styled.span`
   position: relative;
 
   color: var(--comp-navigation-colour-icon-bottom_bar-default);
-  font-size: var(--icon_size-l);
   width: var(--icon_size-l);
   height: var(--icon_size-l);
 
   ${ElDeprecatedIcon} {
     color: inherit;
-    font-size: inherit;
+    font-size: var(--icon_size-l);
     width: inherit;
     height: inherit;
   }

src/core/bottom-bar/styles.ts

@@ -1,4 +1,4 @@
-import { isTablet } from '#src/styles/deprecated-media'
+import { isWidthAtOrAbove, isWidthBelow } from '#src/utils/breakpoints'
 import { styled } from '@linaria/react'
 
 export const ElBottomBarContainer = styled.div`
@@ -10,16 +10,20 @@ export const ElBottomBarContainer = styled.div`
   container-type: inline-size;
 
   display: block;
-  @supports not (container-type: inline-size) {
-    ${isTablet} {
-      display: none;
-    }
+
+  @media screen and ${isWidthAtOrAbove('SM')} {
+    display: none;
+  }
+
+  @container ${isWidthAtOrAbove('SM')} {
+    display: none;
   }
-  @supports (container-type: inline-size) {
-    /* NOTE: This is equivalent to the SM breakpoint */
-    @container (width >= 768px) {
-      display: none;
-    }
+
+  /* NOTE: This container query will override the default media query behaviour above if there's
+   * an ancestor is a container. If there's no ancestral container, the media query will behave
+   * as defined above. */
+  @container ${isWidthBelow('SM')} {
+    display: block;
   }
 `
 

src/core/breadcrumbs/breadcrumbs.stories.tsx

@@ -59,10 +59,11 @@ export const Example: Story = {
 }
 
 /**
- * Overflowing should be avoided as much as possible. On SM screen sizes and larger, or when `overflow="truncate"` is
- * specified, each item's text will shrink as space becomes limited, using ellipses to indicate truncation has
- * occurred, but the breadcrumb separators should remain fully visible. In general, it's best to avoid this situation
- * altogether by limiting the number of breadcrumbs in the trail.
+ * Overflowing should be avoided as much as possible. On SM viewport or container sizes and larger, or
+ * when `overflow="truncate"` is specified, each item's text will shrink as space becomes limited, using
+ * ellipses to indicate truncation has occurred, but the breadcrumb separators should remain fully
+ * visible. In general, it's best to avoid this situation altogether by limiting the number of
+ * breadcrumbs in the trail.
  */
 export const Overflow: Story = {
   args: {
@@ -78,7 +79,7 @@ export const Overflow: Story = {
 }
 
 /**
- * On XS screen sizes (e.g. under 768px), or when `overflow="scroll"` is specified, the breadcrumbs will be
+ * In XS viewport or container sizes, or when `overflow="scroll"` is specified, the breadcrumbs will be
  * horizontally scrollable, albeit without any visible scrollbar. When scrolling occurs, the focus outlines will
  * be clipped; this is expected and considered acceptable.
  */

src/core/breadcrumbs/breadcrumbs.tsx

@@ -12,12 +12,14 @@ interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
 }
 
 /**
- * Breadcrumbs are used to indicate to the user their flow in the application and provide a navigation back step to
- * previous pages. By default, the breadcrumb trails behaviour changes based on screen size.
+ * Breadcrumbs are used to indicate to the user their flow in the application and provide
+ * a navigation back step to previous pages. By default, the breadcrumb trails behaviour changes
+ * based on screen size.
  *
- * - On XS screen sizes, the trail will grow to its maximum content width and be horizontally scrollable.
- * - On SM screen sizes and larger, the trail will grow to its parent container and truncate the text of each item
- *   using ellipses.
+ * - In XS viewport or container sizes, the trail will grow to its maximum content
+ *   width and be horizontally scrollable.
+ * - In SM-2XL viewport or container sizes, the trail will grow to its parent container
+ *   and truncate the text of each item using ellipses.
  *
  * This dynamic behaviour can be overridden by specifying the `width` property.
  */

src/core/breadcrumbs/styles.ts

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react'
-import { isMobile } from '#src/styles/deprecated-media'
+import { isWidthAtOrAbove, isWidthBelow } from '#src/utils/breakpoints'
 
 interface ElBreadcrumbsProps {
   'data-overflow'?: 'scroll' | 'truncate'
@@ -8,12 +8,27 @@ interface ElBreadcrumbsProps {
 export const ElBreadcrumbs = styled.nav<ElBreadcrumbsProps>`
   width: 100%;
 
-  ${isMobile} {
+  /* NOTE: Media and container queries come before data-overflow attribute styles to allow
+   * the latter to take precedence */
+  @media screen and ${isWidthBelow('SM')} {
     /* NOTE: This is generally considered bad practice */
     scrollbar-width: none;
     overflow-x: auto;
   }
 
+  @container ${isWidthBelow('SM')} {
+    scrollbar-width: none;
+    overflow-x: auto;
+  }
+
+  /* NOTE: This container query will override the default media query behaviour above if there's
+   * an ancestor is a container. If there's no ancestral container, the media query will behave
+   * as defined above. */
+  @container ${isWidthAtOrAbove('SM')} {
+    scrollbar-width: initial;
+    overflow-x: initial;
+  }
+
   &[data-overflow='scroll'] {
     scrollbar-width: none;
     overflow-x: auto;
@@ -34,10 +49,23 @@ export const ElBreadcrumbsList = styled.ul`
 
   width: 100%;
 
-  ${isMobile} {
+  /* NOTE: Media and container queries come before data-overflow attribute styles to allow
+   * the latter to take precedence */
+  @media screen and ${isWidthBelow('SM')} {
     width: max-content;
   }
 
+  @container ${isWidthBelow('SM')} {
+    width: max-content;
+  }
+
+  /* NOTE: This container query will override the default media query behaviour above if there's
+   * an ancestor is a container. If there's no ancestral container, the media query will behave
+   * as defined above. */
+  @container ${isWidthAtOrAbove('SM')} {
+    width: 100%;
+  }
+
   [data-overflow='truncate'] > & {
     width: 100%;
   }

src/core/page-header/leading-element/styles.ts

@@ -1,4 +1,4 @@
-import { isTablet } from '#src/styles/deprecated-media'
+import { isWidthAtOrAbove, isWidthBelow } from '#src/utils/breakpoints'
 import { styled } from '@linaria/react'
 
 interface PageHeaderLeadingElementProps {
@@ -19,24 +19,25 @@ export const ElPageHeaderLeadingElement = styled.div<PageHeaderLeadingElementPro
     height: var(--size-6);
     width: var(--size-6);
 
-    ${isTablet} {
+    @media screen and ${isWidthAtOrAbove('SM')} {
       padding-block-start: var(--spacing-1);
       height: var(--size-10);
       width: var(--size-10);
     }
 
-    @supports (container-type: inline-size) {
-      @container (width < 768px) {
-        padding-block-start: var(--spacing-2);
-        height: var(--size-6);
-        width: var(--size-6);
-      }
+    @container ${isWidthAtOrAbove('SM')} {
+      padding-block-start: var(--spacing-1);
+      height: var(--size-10);
+      width: var(--size-10);
+    }
 
-      @container (width >= 768px) {
-        padding-block-start: var(--spacing-1);
-        height: var(--size-10);
-        width: var(--size-10);
-      }
+    /* NOTE: This container query will override the default media query behaviour above if there's
+     * an ancestor is a container. If there's no ancestral container, the media query will behave
+     * as defined above. */
+    @container ${isWidthBelow('SM')} {
+      padding-block-start: var(--spacing-2);
+      height: var(--size-6);
+      width: var(--size-6);
     }
   }
 
@@ -47,18 +48,19 @@ export const ElPageHeaderLeadingElement = styled.div<PageHeaderLeadingElementPro
     padding-block-start: var(--spacing-1);
     width: var(--size-16);
 
-    ${isTablet} {
+    @media screen and ${isWidthAtOrAbove('SM')} {
       width: var(--size-24);
     }
 
-    @supports (container-type: inline-size) {
-      @container (width < 768px) {
-        width: var(--size-16);
-      }
+    @container ${isWidthAtOrAbove('SM')} {
+      width: var(--size-24);
+    }
 
-      @container (width >= 768px) {
-        width: var(--size-24);
-      }
+    /* NOTE: This container query will override the default media query behaviour above if there's
+     * an ancestor is a container. If there's no ancestral container, the media query will behave
+     * as defined above. */
+    @container ${isWidthBelow('SM')} {
+      width: var(--size-16);
     }
   }
 `

src/core/page-header/styles.ts

@@ -1,4 +1,4 @@
-import { isDesktop, isTablet } from '#src/styles/deprecated-media'
+import { isWidthAtOrAbove, isWidthBelow } from '#src/utils/breakpoints'
 import { styled } from '@linaria/react'
 
 import type { CSSProperties } from 'react'
@@ -24,34 +24,32 @@ export const ElPageHeader = styled.header<PageHeaderProps>`
 
   /* NOTE: Media queries are use by default, but if the browser supports container queries, they will override the
    * media query styles defined here. */
-  ${isTablet} {
+  @media screen and ${isWidthAtOrAbove('SM')} {
     padding-block: var(--spacing-8);
     padding-inline: var(--spacing-8);
   }
 
-  ${isDesktop} {
+  @media screen and ${isWidthAtOrAbove('MD')} {
     padding-block: var(--spacing-10);
     padding-inline: var(--spacing-10);
   }
 
   /* NOTE: These container query styles come _after_ the media query styles, so they will override them (if the browser
    * supports container queries). These container query styles are also dependent on a parent element being a size or
    * inline-size container. */
-  @supports (container-type: inline-size) {
-    @container (width < 768px) {
-      padding-block: var(--spacing-3);
-      padding-inline: var(--spacing-5) var(--spacing-3);
-    }
-
-    @container (width >= 768px) {
-      padding-block: var(--spacing-8);
-      padding-inline: var(--spacing-8);
-    }
-
-    @container (width >= 1024px) {
-      padding-block: var(--spacing-8);
-      padding-inline: var(--spacing-10);
-    }
+  @container ${isWidthBelow('SM')} {
+    padding-block: var(--spacing-3);
+    padding-inline: var(--spacing-5) var(--spacing-3);
+  }
+
+  @container ${isWidthBelow('MD')} {
+    padding-block: var(--spacing-8);
+    padding-inline: var(--spacing-8);
+  }
+
+  @container ${isWidthBelow('MD')} {
+    padding-block: var(--spacing-8);
+    padding-inline: var(--spacing-10);
   }
 `
 
@@ -61,21 +59,19 @@ export const ElPageHeaderBreadcrumbsContainer = styled.div`
 
   /* NOTE: Media queries are use by default, but if the browser supports container queries, they will override the
    * media query styles defined here. */
-  ${isTablet} {
+  @media screen and ${isWidthAtOrAbove('SM')} {
+    padding-block-end: var(--spacing-4);
+  }
+
+  @container ${isWidthAtOrAbove('SM')} {
     padding-block-end: var(--spacing-4);
   }
 
   /* NOTE: These container query styles come _after_ the media query styles, so they will override them (if the browser
-  * supports container queries). These container query styles are also dependent on a parent element being a size or
-  * inline-size container. */
-  @supports (container-type: inline-size) {
-    @container (width < 768px) {
-      padding-block-end: var(--spacing-2);
-    }
-
-    @container (width >= 768px) {
-      padding-block-end: var(--spacing-4);
-    }
+   * supports container queries). These container query styles are also dependent on a parent element being a size or
+   * inline-size container. */
+  @container ${isWidthBelow('SM')} {
+    padding-block-end: var(--spacing-2);
   }
 `
 
@@ -85,21 +81,19 @@ export const ElPageHeaderLeadingElementContainer = styled.div`
 
   /* NOTE: Media queries are use by default, but if the browser supports container queries, they will override the
    * media query styles defined here. */
-  ${isTablet} {
+  @media screen and ${isWidthAtOrAbove('SM')} {
+    padding-inline-end: var(--spacing-4);
+  }
+
+  @container ${isWidthAtOrAbove('SM')} {
     padding-inline-end: var(--spacing-4);
   }
 
   /* NOTE: These container query styles come _after_ the media query styles, so they will override them (if the browser
-  * supports container queries). These container query styles are also dependent on a parent element being a size or
-  * inline-size container. */
-  @supports (container-type: inline-size) {
-    @container (width < 768px) {
-      padding-inline-end: var(--spacing-3);
-    }
-
-    @container (width >= 768px) {
-      padding-inline-end: var(--spacing-4);
-    }
+   * supports container queries). These container query styles are also dependent on a parent element being a size or
+   * inline-size container. */
+  @container ${isWidthBelow('SM')} {
+    padding-inline-end: var(--spacing-3);
   }
 `
 

src/core/top-bar/constants.ts

@@ -0,0 +1 @@
+export const TOP_BAR_CONTAINER_NAME = '--top-bar-container'