@lumx/core 4.6.0 → 4.7.0
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/components-and-utils.css +12362 -0
- package/js/components/Chip/ChipGroup.d.ts +35 -0
- package/js/components/Chip/ChipGroupTests.d.ts +11 -0
- package/js/components/List/ListItemActionTests.d.ts +10 -0
- package/js/components/List/ListSectionTests.d.ts +13 -0
- package/js/components/TextField/RawInputTextTests.d.ts +11 -0
- package/js/components/TextField/RawInputTextarea.d.ts +20 -0
- package/js/components/TextField/RawInputTextareaTests.d.ts +11 -0
- package/js/components/TextField/Tests.d.ts +14 -0
- package/js/components/TextField/constants.d.ts +13 -0
- package/js/utils/classNames/action-area/index.d.ts +15 -0
- package/js/utils/classNames/action-area/index.js +21 -0
- package/js/utils/classNames/index.d.ts +1 -0
- package/js/utils/classNames/index.js +1 -0
- package/lumx.css +118 -5
- package/package.json +4 -2
- package/scss/_components_classes.scss +52 -0
- package/scss/_core_classes.scss +7 -0
- package/scss/components/list/_index.scss +47 -2
- package/scss/components/list/_mixins.scss +24 -0
- package/scss/components/popover/_index.scss +4 -0
- package/scss/components-and-utils.scss +8 -0
- package/scss/core/_normalize.scss +0 -0
- package/scss/core/action-area/_index.scss +75 -0
- package/scss/lumx.scss +2 -58
- package/stories/types.d.ts +3 -1
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Action area
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
.lumx-action-area {
|
|
6
|
+
position: relative;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Action element
|
|
10
|
+
========================================================================== */
|
|
11
|
+
|
|
12
|
+
.lumx-action-area__action {
|
|
13
|
+
all: unset;
|
|
14
|
+
|
|
15
|
+
&::before {
|
|
16
|
+
@include lumx-state-transition;
|
|
17
|
+
|
|
18
|
+
position: absolute;
|
|
19
|
+
inset: 0;
|
|
20
|
+
z-index: 0;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
content: '';
|
|
23
|
+
outline: 2px none lumx-color-variant('dark', 'N');
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* ==================================================================
|
|
27
|
+
Overlay (hover / active)
|
|
28
|
+
================================================================== */
|
|
29
|
+
|
|
30
|
+
// Light theme overlay (default)
|
|
31
|
+
&--has-overlay {
|
|
32
|
+
&:hover::before,
|
|
33
|
+
&[data-focus-visible-added]::before,
|
|
34
|
+
&[data-lumx-hover]::before {
|
|
35
|
+
@include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'dark');
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&:active::before,
|
|
39
|
+
&[data-lumx-active]::before {
|
|
40
|
+
@include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'dark');
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Dark theme overlay
|
|
45
|
+
&--theme-dark#{&}--has-overlay {
|
|
46
|
+
&:hover::before,
|
|
47
|
+
&[data-focus-visible-added]::before,
|
|
48
|
+
&[data-lumx-hover]::before {
|
|
49
|
+
@include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'light');
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:active::before,
|
|
53
|
+
&[data-lumx-active]::before {
|
|
54
|
+
@include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'light');
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* ==================================================================
|
|
59
|
+
Focus outline
|
|
60
|
+
================================================================== */
|
|
61
|
+
|
|
62
|
+
&--focus-outset[data-focus-visible-added]::before {
|
|
63
|
+
outline-style: solid;
|
|
64
|
+
outline-offset: 2px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&--focus-inset[data-focus-visible-added]::before {
|
|
68
|
+
outline-style: solid;
|
|
69
|
+
outline-offset: -2px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&--theme-dark[data-focus-visible-added]::before {
|
|
73
|
+
outline-color: lumx-color-variant('light', 'N');
|
|
74
|
+
}
|
|
75
|
+
}
|
package/scss/lumx.scss
CHANGED
|
@@ -11,61 +11,5 @@
|
|
|
11
11
|
@import "./retro-compat-v2";
|
|
12
12
|
@import "./core";
|
|
13
13
|
@import "./components";
|
|
14
|
-
@import "./
|
|
15
|
-
@import "./
|
|
16
|
-
@import "./core/base/helpers";
|
|
17
|
-
@import "./core/spacing/index";
|
|
18
|
-
@import "./core/color/index";
|
|
19
|
-
@import "./core/typography/index";
|
|
20
|
-
@import "./components/avatar/index";
|
|
21
|
-
@import "./components/badge/index";
|
|
22
|
-
@import "./components/button/index";
|
|
23
|
-
@import "./components/checkbox/index";
|
|
24
|
-
@import "./components/chip/index";
|
|
25
|
-
@import "./components/comment-block/index";
|
|
26
|
-
@import "./components/date-picker/index";
|
|
27
|
-
@import "./components/dialog/index";
|
|
28
|
-
@import "./components/divider/index";
|
|
29
|
-
@import "./components/drag-handle/index";
|
|
30
|
-
@import "./components/dropdown/index";
|
|
31
|
-
@import "./components/expansion-panel/index";
|
|
32
|
-
@import "./components/flag/index";
|
|
33
|
-
@import "./components/flex-box/index";
|
|
34
|
-
@import "./components/generic-block/index";
|
|
35
|
-
@import "./components/grid/index";
|
|
36
|
-
@import "./components/grid-column/index";
|
|
37
|
-
@import "./components/icon/index";
|
|
38
|
-
@import "./components/image-block/index";
|
|
39
|
-
@import "./components/image-lightbox/index";
|
|
40
|
-
@import "./components/inline-list/index";
|
|
41
|
-
@import "./components/input-helper/index";
|
|
42
|
-
@import "./components/input-label/index";
|
|
43
|
-
@import "./components/lightbox/index";
|
|
44
|
-
@import "./components/link/index";
|
|
45
|
-
@import "./components/link-preview/index";
|
|
46
|
-
@import "./components/list/index";
|
|
47
|
-
@import "./components/message/index";
|
|
48
|
-
@import "./components/mosaic/index";
|
|
49
|
-
@import "./components/navigation/index";
|
|
50
|
-
@import "./components/notification/index";
|
|
51
|
-
@import "./components/notification-block/index";
|
|
52
|
-
@import "./components/popover/index";
|
|
53
|
-
@import "./components/post-block/index";
|
|
54
|
-
@import "./components/progress/index";
|
|
55
|
-
@import "./components/progress-tracker/index";
|
|
56
|
-
@import "./components/radio-button/index";
|
|
57
|
-
@import "./components/select/index";
|
|
58
|
-
@import "./components/side-navigation/index";
|
|
59
|
-
@import "./components/skeleton/index";
|
|
60
|
-
@import "./components/slideshow/index";
|
|
61
|
-
@import "./components/slider/index";
|
|
62
|
-
@import "./components/switch/index";
|
|
63
|
-
@import "./components/table/index";
|
|
64
|
-
@import "./components/tabs/index";
|
|
65
|
-
@import "./components/text/index";
|
|
66
|
-
@import "./components/text-field/index";
|
|
67
|
-
@import "./components/thumbnail/index";
|
|
68
|
-
@import "./components/toolbar/index";
|
|
69
|
-
@import "./components/tooltip/index";
|
|
70
|
-
@import "./components/uploader/index";
|
|
71
|
-
@import "./components/user-block/index";
|
|
14
|
+
@import "./core_classes";
|
|
15
|
+
@import "./components_classes";
|
package/stories/types.d.ts
CHANGED
|
@@ -29,11 +29,13 @@ type StoryOverride = Record<string, any>;
|
|
|
29
29
|
/** Base options shared by all setup functions. */
|
|
30
30
|
interface SetupStoriesBaseOptions {
|
|
31
31
|
/** The component to create stories for */
|
|
32
|
-
component
|
|
32
|
+
component?: any;
|
|
33
33
|
/** Base render */
|
|
34
34
|
render?: any;
|
|
35
35
|
/** Base args */
|
|
36
36
|
args?: any;
|
|
37
|
+
/** The prop name used to pass CSS classes to components ('className' for React, 'class' for Vue) */
|
|
38
|
+
classProp?: 'className' | 'class';
|
|
37
39
|
}
|
|
38
40
|
/**
|
|
39
41
|
* Generic options for setting up component stories.
|