@solid-design-system/mcp 7.0.0-next.3 → 7.0.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/metadata/packages/components/docs/usage.md +4 -4
- package/metadata/packages/components/sd-dialog/stories/open.md +9 -7
- package/metadata/packages/components/sd-drawer/info.md +1 -2
- package/metadata/packages/components/sd-teaser/stories/breakpoint.md +2 -2
- package/metadata/packages/components/sd-teaser/stories/default-and-headline-slot.md +1 -1
- package/metadata/packages/components/sd-teaser/stories/distribution.md +1 -1
- package/metadata/packages/components/sd-teaser/stories/inset.md +1 -1
- package/metadata/packages/components/sd-teaser/stories/media-slot.md +1 -1
- package/metadata/packages/components/sd-teaser/stories/meta-slot.md +1 -1
- package/metadata/packages/components/sd-teaser/stories/reverse.md +1 -1
- package/metadata/packages/components/sd-teaser/stories/variant.md +5 -9
- package/metadata/packages/templates/teaser.md +1 -1
- package/package.json +4 -4
- package/metadata/packages/components/sd-spinner/info.md +0 -53
- package/metadata/packages/components/sd-spinner/stories/size.md +0 -15
- package/metadata/packages/components/sd-spinner/stories/variants.md +0 -43
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 7.0.0-next.5
|
|
4
|
+
|
|
5
|
+
## 7.0.0-next.4
|
|
6
|
+
|
|
3
7
|
## 7.0.0-next.3
|
|
4
8
|
|
|
5
9
|
## 7.0.0-next.2
|
|
6
10
|
|
|
11
|
+
## 6.29.0
|
|
12
|
+
|
|
13
|
+
## 6.28.2
|
|
14
|
+
|
|
7
15
|
### Patch Changes
|
|
8
16
|
|
|
9
17
|
- Updated dependencies. See details in the Pull Request _[`#3163`](https://github.com/solid-design-system/solid/pull/3163) [`91ff1c8`](https://github.com/solid-design-system/solid/commit/91ff1c81831fb3522c534306a61b8a5be3562f64) [@rahulsuvarna18](https://github.com/rahulsuvarna18)_
|
|
@@ -94,10 +94,10 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta
|
|
|
94
94
|
|
|
95
95
|
```html
|
|
96
96
|
<!-- Don't do this -->
|
|
97
|
-
<sd-
|
|
97
|
+
<sd-button />
|
|
98
98
|
|
|
99
99
|
<!-- Always do this -->
|
|
100
|
-
<sd-
|
|
100
|
+
<sd-button></sd-button>
|
|
101
101
|
```
|
|
102
102
|
|
|
103
103
|
### Differences from Native Elements
|
|
@@ -142,10 +142,10 @@ A way to use this method is to hide the `<body>` with `opacity: 0` and add a cla
|
|
|
142
142
|
await Promise.allSettled([
|
|
143
143
|
customElements.whenDefined('sd-button'),
|
|
144
144
|
customElements.whenDefined('sd-icon'),
|
|
145
|
-
customElements.whenDefined('sd-
|
|
145
|
+
customElements.whenDefined('sd-loader')
|
|
146
146
|
]);
|
|
147
147
|
|
|
148
|
-
// Button, icon and
|
|
148
|
+
// Button, icon and loader are registered now! Add
|
|
149
149
|
// the `ready` class so the UI fades in.
|
|
150
150
|
document.body.classList.add('ready');
|
|
151
151
|
</script>
|
|
@@ -8,11 +8,6 @@
|
|
|
8
8
|
tags: ['!dev', 'autodocs'],
|
|
9
9
|
args: overrideArgs([
|
|
10
10
|
{
|
|
11
|
-
type: 'attribute',
|
|
12
|
-
name: 'open',
|
|
13
|
-
value: true
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
11
|
type: 'slot',
|
|
17
12
|
name: 'default',
|
|
18
13
|
value: `<div class="slot slot--border slot--text h-16 w-full">Default slot</div>`
|
|
@@ -39,12 +34,19 @@
|
|
|
39
34
|
};
|
|
40
35
|
export const Default = {
|
|
41
36
|
render: (args: any) => {
|
|
42
|
-
return html`
|
|
37
|
+
return html`
|
|
38
|
+
<sd-button id="open-default-dialog">Open Dialog</sd-button>
|
|
43
39
|
${generateTemplate({
|
|
44
40
|
args
|
|
45
41
|
})}
|
|
46
42
|
|
|
47
|
-
|
|
43
|
+
<script>
|
|
44
|
+
document.querySelector('#open-default-dialog').addEventListener('click', () => {
|
|
45
|
+
document.querySelector('sd-dialog').show();
|
|
46
|
+
});
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
`;
|
|
48
50
|
}
|
|
49
51
|
};
|
|
50
52
|
/**
|
|
@@ -19,7 +19,6 @@ Use the components tool by passing the args `component` and `example` for any of
|
|
|
19
19
|
- prop.label: string, default='' — You should always include a relevant label even when using
|
|
20
20
|
`no-header`, as it is required for proper accessibility.
|
|
21
21
|
- prop.placement: 'end'|'start', default='end' — The direction from which the drawer will open.
|
|
22
|
-
- prop.contained: boolean, default=false — By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.
|
|
23
22
|
- prop.noHeader [attr: no-header]: boolean, default=false — Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
|
|
24
23
|
- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
|
|
25
24
|
- prop.lang: string — The element's language.
|
|
@@ -42,13 +41,13 @@ Use the components tool by passing the args `component` and `example` for any of
|
|
|
42
41
|
### CSS Parts
|
|
43
42
|
|
|
44
43
|
- part.base: The component's base wrapper.
|
|
45
|
-
- part.overlay: The overlay that covers the screen behind the drawer.
|
|
46
44
|
- part.panel: The drawer's panel (where the drawer and its content are rendered).
|
|
47
45
|
- part.header: The drawer's header. This element wraps the title and the close-button.
|
|
48
46
|
- part.title: The drawer's title.
|
|
49
47
|
- part.close-button: The close button, an `<sd-button>`.
|
|
50
48
|
- part.body: The drawer's body.
|
|
51
49
|
- part.footer: The drawer's footer.
|
|
50
|
+
- part.overlay: The overlay that covers the screen behind the drawer.
|
|
52
51
|
|
|
53
52
|
## Guidelines
|
|
54
53
|
|
|
@@ -6,7 +6,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
|
|
|
6
6
|
```html
|
|
7
7
|
<div class="flex gap-8 flex-col">
|
|
8
8
|
<sd-teaser breakpoint="0">
|
|
9
|
-
<h3 slot="headline"
|
|
9
|
+
<h3 slot="headline">Horizontal</h3>
|
|
10
10
|
<img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
|
|
11
11
|
<p>
|
|
12
12
|
Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
|
|
@@ -16,7 +16,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
|
|
|
16
16
|
</sd-teaser>
|
|
17
17
|
|
|
18
18
|
<sd-teaser breakpoint="9999" class="w-[256px]">
|
|
19
|
-
<h3 slot="headline"
|
|
19
|
+
<h3 slot="headline">Vertical</h3>
|
|
20
20
|
<img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
|
|
21
21
|
<p>
|
|
22
22
|
Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
```html
|
|
6
6
|
<sd-teaser>
|
|
7
|
-
<h3 slot="headline"
|
|
7
|
+
<h3 slot="headline">Lorem ipsum sic semper</h3>
|
|
8
8
|
<p>
|
|
9
9
|
Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
|
|
10
10
|
reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
|
|
@@ -2,7 +2,7 @@ Use the `--distribution-media` and `--distribution-content` CSS properties to ad
|
|
|
2
2
|
|
|
3
3
|
```html
|
|
4
4
|
<sd-teaser style="--distribution-media: 20%; --distribution-content: 80%;">
|
|
5
|
-
<h3 slot="headline"
|
|
5
|
+
<h3 slot="headline">Lorem ipsum sic semper</h3>
|
|
6
6
|
<img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
|
|
7
7
|
<p>
|
|
8
8
|
Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
|
|
@@ -2,7 +2,7 @@ Use the `inset` attribute to create a teaser with an inset padding if the contex
|
|
|
2
2
|
|
|
3
3
|
```html
|
|
4
4
|
<sd-teaser inset variant="primary-100">
|
|
5
|
-
<h3 slot="headline"
|
|
5
|
+
<h3 slot="headline">Teaser with inset Padding</h3>
|
|
6
6
|
<p>
|
|
7
7
|
Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
|
|
8
8
|
reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
|
|
@@ -3,7 +3,7 @@ Teasers accept a `media` slot to display images or videos.
|
|
|
3
3
|
|
|
4
4
|
```html
|
|
5
5
|
<sd-teaser>
|
|
6
|
-
<h3 slot="headline"
|
|
6
|
+
<h3 slot="headline">Lorem ipsum sic semper</h3>
|
|
7
7
|
<img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
|
|
8
8
|
<p>
|
|
9
9
|
Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
|
|
@@ -2,7 +2,7 @@ Use the `meta` slot to add additional content to the teaser.
|
|
|
2
2
|
|
|
3
3
|
```html
|
|
4
4
|
<sd-teaser>
|
|
5
|
-
<h3 slot="headline"
|
|
5
|
+
<h3 slot="headline">Lorem ipsum sic semper</h3>
|
|
6
6
|
<div slot="meta">
|
|
7
7
|
<time class="sd-meta sd-meta--pipe" datetime="2023-01-01">01.01.2023</time>
|
|
8
8
|
<span class="sd-meta">Author name</span>
|
|
@@ -3,7 +3,7 @@ Use the `reversed-layout` attribute to invert the horizontal layout.
|
|
|
3
3
|
|
|
4
4
|
```html
|
|
5
5
|
<sd-teaser reversed-layout>
|
|
6
|
-
<h3 slot="headline"
|
|
6
|
+
<h3 slot="headline">Horizontal</h3>
|
|
7
7
|
<img slot="media" src="./placeholders/images/architecture.jpg" alt="" class="w-full h-auto" />
|
|
8
8
|
<p>
|
|
9
9
|
Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
|
|
@@ -9,27 +9,23 @@ Use the `variant` attribute to use the appropriate teaser for your context:
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="grid grid-cols-2 gap-12">
|
|
11
11
|
<sd-teaser variant="white" inset>
|
|
12
|
-
<h3 slot="headline"
|
|
12
|
+
<h3 slot="headline">Teaser with white background</h3>
|
|
13
13
|
<p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
|
|
14
14
|
</sd-teaser>
|
|
15
15
|
<sd-teaser variant="white border-neutral-400">
|
|
16
|
-
<h3 slot="headline"
|
|
17
|
-
Teaser with white background and border neutral-400
|
|
18
|
-
</h3>
|
|
16
|
+
<h3 slot="headline">Teaser with white background and border neutral-400</h3>
|
|
19
17
|
<p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
|
|
20
18
|
</sd-teaser>
|
|
21
19
|
<sd-teaser variant="neutral-100" inset>
|
|
22
|
-
<h3 slot="headline"
|
|
20
|
+
<h3 slot="headline">Teaser with neutral-100 background</h3>
|
|
23
21
|
<p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
|
|
24
22
|
</sd-teaser>
|
|
25
23
|
<sd-teaser variant="primary-100" inset>
|
|
26
|
-
<h3 slot="headline"
|
|
24
|
+
<h3 slot="headline">Teaser with primary-100 background</h3>
|
|
27
25
|
<p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
|
|
28
26
|
</sd-teaser>
|
|
29
27
|
<sd-teaser variant="primary" inset>
|
|
30
|
-
<h3 slot="headline"
|
|
31
|
-
Teaser with primary background
|
|
32
|
-
</h3>
|
|
28
|
+
<h3 slot="headline">Teaser with primary background</h3>
|
|
33
29
|
<p class="sd-paragraph sd-paragraph--inverted">
|
|
34
30
|
Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.
|
|
35
31
|
</p>
|
|
@@ -73,7 +73,7 @@ version: 1.0.0
|
|
|
73
73
|
</style>
|
|
74
74
|
<div class="max-w-[426.67px]">
|
|
75
75
|
<sd-teaser variant="primary-100" inset class="clickable relative m-2 translate-x-0 translate-y-0">
|
|
76
|
-
<h2 slot="headline"
|
|
76
|
+
<h2 slot="headline">Union Investment's climate strategy</h2>
|
|
77
77
|
<div slot="media" class="relative">
|
|
78
78
|
<img
|
|
79
79
|
class="aspect-video object-cover"
|
package/package.json
CHANGED
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
"prettier": "^3.9.5",
|
|
21
21
|
"tsx": "^4.23.1",
|
|
22
22
|
"typescript": "^5.9.3",
|
|
23
|
-
"@solid-design-system/components": "7.0.0-next.
|
|
24
|
-
"@solid-design-system/styles": "7.0.0-next.
|
|
25
|
-
"@solid-design-system/tokens": "7.0.0-next.
|
|
23
|
+
"@solid-design-system/components": "7.0.0-next.5",
|
|
24
|
+
"@solid-design-system/styles": "7.0.0-next.5",
|
|
25
|
+
"@solid-design-system/tokens": "7.0.0-next.5"
|
|
26
26
|
},
|
|
27
27
|
"exports": {
|
|
28
28
|
".": {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"directory": "packages/mcp"
|
|
60
60
|
},
|
|
61
61
|
"type": "module",
|
|
62
|
-
"version": "7.0.0-next.
|
|
62
|
+
"version": "7.0.0-next.5",
|
|
63
63
|
"scripts": {
|
|
64
64
|
"build": "pnpm run build:components && pnpm run build:tokens && pnpm run build:ts && pnpm run build:metadata && cd ../.. && pnpm exec prettier --write --log-level warn packages/mcp/metadata",
|
|
65
65
|
"build:components": "cd ../components && pnpm exec node scripts/make-metadata.js --outdir dist",
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
## Overview
|
|
2
|
-
|
|
3
|
-
`<sd-spinner>` — Used as a visual indicator with a looping animation that shows loading is in process.
|
|
4
|
-
|
|
5
|
-
## API
|
|
6
|
-
|
|
7
|
-
### Examples
|
|
8
|
-
|
|
9
|
-
Use the components tool by passing the args `component` and `example` for any of these combinations:
|
|
10
|
-
|
|
11
|
-
- component: sd-spinner, example: variants
|
|
12
|
-
- component: sd-spinner, example: size
|
|
13
|
-
|
|
14
|
-
### Key Properties
|
|
15
|
-
|
|
16
|
-
- prop.color: 'primary'|'white'|'currentColor', default='currentColor' — The color color of the spinner.
|
|
17
|
-
- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
|
|
18
|
-
- prop.lang: string — The element's language.
|
|
19
|
-
|
|
20
|
-
## Guidelines
|
|
21
|
-
|
|
22
|
-
### Use Cases
|
|
23
|
-
|
|
24
|
-
- Indicate that content is being loaded, such as when fetching data from a server or loading a new page.
|
|
25
|
-
- Show ongoing background processes, like file uploads or data processing tasks.
|
|
26
|
-
- Used within buttons or interactive elements to indicate that an action is being processed.
|
|
27
|
-
- Apply to sections of a page that are loading independently, such as widgets or panels.
|
|
28
|
-
- Display when a form is being submitted to show that the submission is in progress.
|
|
29
|
-
|
|
30
|
-
### Rules
|
|
31
|
-
|
|
32
|
-
### Content
|
|
33
|
-
|
|
34
|
-
- Include a label or message to provide context about what is being loaded, especially if the loading time is long.
|
|
35
|
-
|
|
36
|
-
### Behavior and Placement
|
|
37
|
-
|
|
38
|
-
- Use for processes that take a short amount of time (typically under 4 seconds).
|
|
39
|
-
- Apply within specific sections rather than blocking the entire page, unless absolutely necessary.
|
|
40
|
-
- Place in a consistent location relative to the content it is loading.
|
|
41
|
-
|
|
42
|
-
### Styling
|
|
43
|
-
|
|
44
|
-
- Maintain consistency in size and style; avoid using spinners of varying sizes on the same page.
|
|
45
|
-
|
|
46
|
-
### Background
|
|
47
|
-
|
|
48
|
-
- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
|
|
49
|
-
|
|
50
|
-
### Accessibility
|
|
51
|
-
|
|
52
|
-
- Assign role="status" or use a live region (e.g., aria-live="polite") to inform screen reader users of ongoing loading.
|
|
53
|
-
- A spinner shouldn’t itself be focusable or interactive, nor prevent from navigating to other parts of the page while loading continues.
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
Use the CSS property `font-size` to scale the spinner proportionally.
|
|
2
|
-
|
|
3
|
-
```html
|
|
4
|
-
<div class="flex flex-row gap-12">
|
|
5
|
-
<div style="font-size: inherit">
|
|
6
|
-
<sd-spinner color="primary"></sd-spinner>
|
|
7
|
-
</div>
|
|
8
|
-
<div style="font-size: 2rem">
|
|
9
|
-
<sd-spinner color="primary"></sd-spinner>
|
|
10
|
-
</div>
|
|
11
|
-
<div style="font-size: 4rem">
|
|
12
|
-
<sd-spinner color="primary"></sd-spinner>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
```
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
<sd-notification variant="warning" open class="mb-4">**Warning:** The `sd-spinner` will be deprecated in the future. Please use the `sd-loader` component instead.</sd-notification>
|
|
2
|
-
**Known browser issues:**
|
|
3
|
-
|
|
4
|
-
- The 'sd-spinner' component may experience spinner animation issues in Safari, causing them to appear wobbly.
|
|
5
|
-
/
|
|
6
|
-
export default {
|
|
7
|
-
title: 'Components/sd-spinner',
|
|
8
|
-
component: 'sd-spinner',
|
|
9
|
-
tags: ['!dev', 'autodocs'],
|
|
10
|
-
args: overrideArgs({ type: 'attribute', name: 'color', value: 'primary' }),
|
|
11
|
-
argTypes,
|
|
12
|
-
parameters: {
|
|
13
|
-
...parameters,
|
|
14
|
-
design: {
|
|
15
|
-
type: 'figma',
|
|
16
|
-
url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2115-17681&node-type=section&t=5PpAC3TA3kYF7ufX-0'
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
export const Default = {
|
|
21
|
-
render: (args: any) => {
|
|
22
|
-
return generateTemplate({ args });
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
/**
|
|
26
|
-
Use the `color` attribute to set the spinner's color:
|
|
27
|
-
- `currentColor` (default): used to inherit the `text-color` from the parent element
|
|
28
|
-
- `primary`: used on light backgrounds
|
|
29
|
-
- `white`: used on primary backgrounds
|
|
30
|
-
|
|
31
|
-
```html
|
|
32
|
-
<div class="flex flex-row items-center gap-12">
|
|
33
|
-
<div class="p-4">
|
|
34
|
-
<sd-spinner color="currentColor"></sd-spinner>
|
|
35
|
-
</div>
|
|
36
|
-
<div class="p-4">
|
|
37
|
-
<sd-spinner color="primary"></sd-spinner>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="bg-primary p-4">
|
|
40
|
-
<sd-spinner color="white"></sd-spinner>
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
```
|