@amboss/design-system 1.0.8 → 1.0.11
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
CHANGED
|
@@ -1,3 +1,69 @@
|
|
|
1
|
+
# v1.0.11 (Thu Mar 03 2022)
|
|
2
|
+
|
|
3
|
+
### Release Notes
|
|
4
|
+
|
|
5
|
+
#### Added Button component documentation ([#424](https://github.com/amboss-mededu/amboss-design-system/pull/424))
|
|
6
|
+
|
|
7
|
+
Added the button component documentation
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
#### 🐛 Bug Fix
|
|
12
|
+
|
|
13
|
+
- Added Button component documentation [#424](https://github.com/amboss-mededu/amboss-design-system/pull/424) ([@Hadh](https://github.com/Hadh))
|
|
14
|
+
|
|
15
|
+
#### Authors: 1
|
|
16
|
+
|
|
17
|
+
- Hadhemi ([@Hadh](https://github.com/Hadh))
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# v1.0.10 (Tue Feb 15 2022)
|
|
22
|
+
|
|
23
|
+
### Release Notes
|
|
24
|
+
|
|
25
|
+
#### Add CacheProvider and createCache as exports ([#421](https://github.com/amboss-mededu/amboss-design-system/pull/421))
|
|
26
|
+
|
|
27
|
+
Enable emotional DS components to work in the shadow-dom.
|
|
28
|
+
https://github.com/emotion-js/emotion/issues/1366
|
|
29
|
+
https://emotion.sh/docs/cache-provider
|
|
30
|
+
https://stackblitz.com/edit/emotion-shadow-dom-example?file=ShadowDomContainer.js
|
|
31
|
+
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
#### 🐛 Bug Fix
|
|
36
|
+
|
|
37
|
+
- Add CacheProvider and createCache as exports [#421](https://github.com/amboss-mededu/amboss-design-system/pull/421) ([@AlexJeffcott](https://github.com/AlexJeffcott))
|
|
38
|
+
|
|
39
|
+
#### Authors: 1
|
|
40
|
+
|
|
41
|
+
- Alex ([@AlexJeffcott](https://github.com/AlexJeffcott))
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
# v1.0.9 (Fri Feb 11 2022)
|
|
46
|
+
|
|
47
|
+
### Release Notes
|
|
48
|
+
|
|
49
|
+
#### [LEAR-1458] add highlighted state and alignItems to Toggle ([#415](https://github.com/amboss-mededu/amboss-design-system/pull/415))
|
|
50
|
+
|
|
51
|
+
- Adds highlight state for Toggle
|
|
52
|
+
- Adds alignItems to Toggle
|
|
53
|
+
- Fixes cursor for Disabled Toggle (default instead of pointer)
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
#### 🐛 Bug Fix
|
|
58
|
+
|
|
59
|
+
- [LEAR-1458] add highlighted state and alignItems to Toggle [#415](https://github.com/amboss-mededu/amboss-design-system/pull/415) ([@smooth-opperator](https://github.com/smooth-opperator))
|
|
60
|
+
|
|
61
|
+
#### Authors: 1
|
|
62
|
+
|
|
63
|
+
- Julie Oppermann ([@smooth-opperator](https://github.com/smooth-opperator))
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
1
67
|
# v1.0.8 (Wed Jan 05 2022)
|
|
2
68
|
|
|
3
69
|
### Release Notes
|
package/README.md
CHANGED
|
@@ -255,3 +255,33 @@ export const Box = styled.div<BoxProps>(
|
|
|
255
255
|
);
|
|
256
256
|
```
|
|
257
257
|
|
|
258
|
+
## Shadow-DOM
|
|
259
|
+
In order to use emotion-enabled DS components in the shadow-dom, you need to take some steps to 'link' the styles in the light-dom (these are added by emotion using CSSStyleSheet.insertRule() which is why <style data-emotion> appears empty in the DOM).
|
|
260
|
+
|
|
261
|
+
emotion-js/emotion#1366
|
|
262
|
+
https://emotion.sh/docs/cache-provider
|
|
263
|
+
https://stackblitz.com/edit/emotion-shadow-dom-example?file=ShadowDomContainer.js
|
|
264
|
+
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
|
|
265
|
+
|
|
266
|
+
```js
|
|
267
|
+
import { ThemeProvider, light, Card, H1, CacheProvider, createCache } from '@amboss/design-system';
|
|
268
|
+
class SuchShadow extends HTMLElement {
|
|
269
|
+
connectedCallback() {
|
|
270
|
+
const root = document.createElement('div');
|
|
271
|
+
this.attachShadow({ mode: 'open' });
|
|
272
|
+
this.emotionCache = createCache({ container: this.shadowRoot });
|
|
273
|
+
render(
|
|
274
|
+
<ThemeProvider theme={light}>
|
|
275
|
+
<CacheProvider value={this.emotionCache}>
|
|
276
|
+
<Card>
|
|
277
|
+
<H1>I love you shadow unicorn!!!</H1>
|
|
278
|
+
</Card>
|
|
279
|
+
</CacheProvider>
|
|
280
|
+
</ThemeProvider>,
|
|
281
|
+
root
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
customElements.define('shadow-element', SuchShadow);
|
|
287
|
+
```
|
|
@@ -232,6 +232,7 @@ declare type AmbossTheme = {
|
|
|
232
232
|
"toggle": {
|
|
233
233
|
"default": string;
|
|
234
234
|
"checked": string;
|
|
235
|
+
"highlighted": string;
|
|
235
236
|
};
|
|
236
237
|
"togglePoint": {
|
|
237
238
|
"default": string;
|
|
@@ -371,6 +372,7 @@ declare type AmbossTheme = {
|
|
|
371
372
|
"toggle": {
|
|
372
373
|
"default": string;
|
|
373
374
|
"checked": string;
|
|
375
|
+
"highlighted": string;
|
|
374
376
|
"hover": string;
|
|
375
377
|
};
|
|
376
378
|
"badge": {
|