feat(breakpoint): integrate Breakpoint with v11 (#1957)

carbon-design-system · Apr 21, 2024 · b493091 · b493091
1 parent 1600308
commit b493091
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 8 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -335,7 +335,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 
 | Prop name | Required | Kind             | Reactive | Type                                         | Default value                                                             | Description                                       |
 | :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
-| sizes     | No       | <code>let</code> | Yes      | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Carbon grid sizes as an object                    |
+| sizes     | No       | <code>let</code> | Yes      | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Bind to all Carbon grid breakpoints.              |
 | size      | No       | <code>let</code> | Yes      | <code>BreakpointSize</code>                  | <code>undefined</code>                                                    | Determine the current Carbon grid breakpoint size |
 
 ### Slots

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -358,7 +358,7 @@
         {
           "name": "sizes",
           "kind": "let",
-          "description": "Carbon grid sizes as an object",
+          "description": "Bind to all Carbon grid breakpoints.",
           "type": "Record<BreakpointSize, boolean>",
           "value": "{     sm: false,     md: false,     lg: false,     xlg: false,     max: false,   }",
           "isFunction": false,

diff --git a/docs/src/pages/components/Breakpoint.svx b/docs/src/pages/components/Breakpoint.svx
@@ -6,7 +6,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
+The [Carbon Design System grid implementation](https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints) defines five responsive breakpoints:
 
 <UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
   <ListItem><strong>Small</strong>: less than 672px</ListItem>

diff --git a/src/Breakpoint/Breakpoint.svelte b/src/Breakpoint/Breakpoint.svelte
@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   /**
    * @typedef {"sm" | "md" | "lg" | "xlg" | "max"} BreakpointSize
    * @typedef {320 | 672 | 1056 | 1312 | 1584} BreakpointValue
@@ -13,7 +15,7 @@
   export let size = undefined;
 
   /**
-   * Carbon grid sizes as an object
+   * Bind to all Carbon grid breakpoints.
    * @type {Record<BreakpointSize, boolean>}
    */
   export let sizes = {
@@ -28,6 +30,7 @@
   import { breakpointObserver } from "./breakpointObserver";
   import { breakpoints } from "./breakpoints";
 
+  /** @type {import("svelte").EventDispatcher<{ change: { size: BreakpointSize; breakpointValue: BreakpointValue; } }>} */
   const dispatch = createEventDispatcher();
   const observer = breakpointObserver();
 
@@ -39,8 +42,9 @@
     xlg: size == "xlg",
     max: size == "max",
   };
-  $: if (size != undefined)
+  $: if (size != undefined) {
     dispatch("change", { size, breakpointValue: breakpoints[size] });
+  }
 </script>
 
 <slot size="{size}" sizes="{sizes}" />
diff --git a/src/Breakpoint/breakpointObserver.js b/src/Breakpoint/breakpointObserver.js
@@ -75,8 +75,9 @@ export function breakpointObserver() {
 }
 
 function checkSizeValid(size) {
-  if (size in breakpoints == false)
+  if (size in breakpoints == false) {
     throw new Error(`"${size}" is not a valid breakpoint size.`);
+  }
 }
 
 export default breakpointObserver;
diff --git a/src/Breakpoint/breakpoints.js b/src/Breakpoint/breakpoints.js
@@ -1,5 +1,6 @@
 /**
- * Pixel sizes of Carbon grid breakpoints.
+ * Carbon grid breakpoints in px.
+ * @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
  * @type {Record<import("./breakpoints").BreakpointSize, BreakpointValue>}
  */
 export const breakpoints = Object.freeze({

diff --git a/types/Breakpoint/Breakpoint.svelte.d.ts b/types/Breakpoint/Breakpoint.svelte.d.ts
@@ -12,7 +12,7 @@ export interface BreakpointProps {
   size?: BreakpointSize;
 
   /**
-   * Carbon grid sizes as an object
+   * Bind to all Carbon grid breakpoints.
    * @default { sm: false, md: false, lg: false, xlg: false, max: false, }
    */
   sizes?: Record<BreakpointSize, boolean>;