mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Implement breakpointObserver.

Browse source 
Drop breakpoints constant export from Breakpoint component.
Expose breakpoints constant separately and freeze it.
Change `match` event to 'change`, because it is now based on store and captures initial value change.

Issues:
- Wrong exports in types/index.d.ts
- Typedefs lost from docs.
This commit is contained in:
Harald Brunner 2022-02-12 16:31:08 +01:00
commit 2cd2872274
10 changed files with 115 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

19
COMPONENT_INDEX.md
View file

@ -348,21 +348,12 @@ None.
## `Breakpoint`
### Types
```ts
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
| sizes | <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 |
| size | <code>let</code> | Yes | <code>BreakpointSize</code> | <code>undefined</code> | Determine the current Carbon grid breakpoint size |
| breakpoints | <code>const</code> | No | <code>Record<BreakpointSize, BreakpointValue></code> | <code>{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }</code> | Reference the Carbon grid breakpoints |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
| sizes | <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 |
| size | <code>let</code> | Yes | <code>BreakpointSize</code> | <code>undefined</code> | Determine the current Carbon grid breakpoint size |
### Slots
@ -374,7 +365,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| Event name | Type | Detail |
| :--------- | :--------- | :----------------------------------------------------------------------- |
| match | dispatched | <code>{ size: BreakpointSize; breakpointValue: BreakpointValue; }</code> |
| change | dispatched | <code>{ size: BreakpointSize; breakpointValue: BreakpointValue; }</code> |
## `Button`