From 0afbfbf60925014a0a603bd1af1b995b5081f6d9 Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Wed, 7 Jul 2021 12:25:39 -0700 Subject: [PATCH] refactor(breakpoint): add prop descriptions, type slot --- COMPONENT_INDEX.md | 16 ++++++++-------- docs/src/COMPONENT_API.json | 9 ++++++--- src/Breakpoint/Breakpoint.svelte | 22 +++++++++++++++++----- types/Breakpoint/Breakpoint.d.ts | 7 ++++++- 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index eb5554d7..81510a5d 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -357,17 +357,17 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ----------- | -| sizes | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | -- | -| size | let | Yes | BreakpointSize | -- | -- | -| breakpoints | const | No | Record | { sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, } | -- | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | +| sizes | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object | +| size | let | Yes | BreakpointSize | -- | Determine the current Carbon grid breakpoint size | +| breakpoints | const | No | Record | { sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, } | Reference the Carbon grid breakpoints | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :----------------------------------------------------------------------------- | :------- | -| -- | Yes | { sizes: Record, size: BreakpointSize } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------------------------------------------ | :------- | +| -- | Yes | { size: BreakpointSize; sizes: Record; } | -- | ### Events diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 3e8f7d3a..b94c4636 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -351,6 +351,7 @@ { "name": "size", "kind": "let", + "description": "Determine the current Carbon grid breakpoint size", "type": "BreakpointSize", "isFunction": false, "constant": false, @@ -359,8 +360,9 @@ { "name": "sizes", "kind": "let", + "description": "Carbon grid sizes as an object", "type": "Record", - "value": "{ sm: false, md: false, lg: false, xlg: false, max: false, }", + "value": "{ sm: false, md: false, lg: false, xlg: false, max: false, }", "isFunction": false, "constant": false, "reactive": true @@ -368,8 +370,9 @@ { "name": "breakpoints", "kind": "const", + "description": "Reference the Carbon grid breakpoints", "type": "Record", - "value": "{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }", + "value": "{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }", "isFunction": false, "constant": true, "reactive": false @@ -379,7 +382,7 @@ { "name": "__default__", "default": true, - "slot_props": "{ sizes: Record, size: BreakpointSize }" + "slot_props": "{ size: BreakpointSize; sizes: Record; }" } ], "events": [ diff --git a/src/Breakpoint/Breakpoint.svelte b/src/Breakpoint/Breakpoint.svelte index baabbf62..19ef305f 100644 --- a/src/Breakpoint/Breakpoint.svelte +++ b/src/Breakpoint/Breakpoint.svelte @@ -3,12 +3,19 @@ * @typedef {"sm" | "md" | "lg" | "xlg" | "max"} BreakpointSize * @typedef {320 | 672 | 1056 | 1312 | 1584} BreakpointValue * @event {{ size: BreakpointSize; breakpointValue: BreakpointValue; }} match + * @slot {{ size: BreakpointSize; sizes: Record; }} */ - /** @type {BreakpointSize} */ + /** + * Determine the current Carbon grid breakpoint size + * @type {BreakpointSize} + */ export let size = undefined; - /** @type {Record} */ + /** + * Carbon grid sizes as an object + * @type {Record} + */ export let sizes = { sm: false, md: false, @@ -17,7 +24,10 @@ max: false, }; - /** @type {Record} */ + /** + * Reference the Carbon grid breakpoints + * @type {Record} + */ export const breakpoints = { sm: 320, md: 672, @@ -62,6 +72,9 @@ sizes = { ...sizes }; sizes[size] = matches; + + if (matches) + dispatch("match", { size, breakpointValue: breakpoints[size] }); } matchers.forEach(([size, queryList]) => @@ -81,8 +94,7 @@ if (sizes.lg) size = "lg"; if (sizes.xlg) size = "xlg"; if (sizes.max) size = "max"; - if (size) dispatch("match", { size, breakpointValue: breakpoints[size] }); } - + diff --git a/types/Breakpoint/Breakpoint.d.ts b/types/Breakpoint/Breakpoint.d.ts index e47d2978..cb5d1cab 100644 --- a/types/Breakpoint/Breakpoint.d.ts +++ b/types/Breakpoint/Breakpoint.d.ts @@ -6,14 +6,19 @@ export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max"; export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; export interface BreakpointProps { + /** + * Determine the current Carbon grid breakpoint size + */ size?: BreakpointSize; /** + * Carbon grid sizes as an object * @default { sm: false, md: false, lg: false, xlg: false, max: false, } */ sizes?: Record; /** + * Reference the Carbon grid breakpoints * @constant * @default { sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, } */ @@ -28,5 +33,5 @@ export default class Breakpoint extends SvelteComponentTyped< breakpointValue: BreakpointValue; }>; }, - { default: { sizes: Record; size: BreakpointSize } } + { default: { size: BreakpointSize; sizes: Record } } > {}