@muraldevkit/ui-toolkit 2.26.0 → 2.27.1
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/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
- package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +4 -2
- package/dist/components/index.d.ts +1 -0
- package/dist/components/menu/MrlMenu/MrlMenu.d.ts +6 -11
- package/dist/components/menu/MrlMenu/utilities.d.ts +6 -0
- package/dist/components/menu/constants.d.ts +5 -0
- package/dist/components/menu/demo/MenuWithLink.d.ts +3 -4
- package/dist/components/menu/demo/MenuWithPopover.d.ts +19 -0
- package/dist/components/menu/demo/MenuWithSubmenu.d.ts +5 -6
- package/dist/components/menu/demo/MenuWithTrigger.d.ts +5 -6
- package/dist/components/menu/hooks/useBrowserEdgeScroll.d.ts +20 -0
- package/dist/components/popover/MrlPopover/MrlPopover.d.ts +79 -0
- package/dist/components/popover/MrlPopover/index.d.ts +1 -0
- package/dist/components/popover/demo/PopoverWithTrigger.d.ts +22 -0
- package/dist/components/popover/index.d.ts +1 -0
- package/dist/components/tooltip/MrlTooltip/MrlTooltip.d.ts +3 -1
- package/dist/components/tooltip/MrlTooltipContent/MrlTooltipContent.d.ts +3 -1
- package/dist/components/tooltip/constants.d.ts +4 -3
- package/dist/hooks/useClickOutside/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/dist/styles/MrlButton/global.scss +2 -0
- package/dist/styles/MrlPopover/module.scss +100 -0
- package/dist/styles/MrlPopover/variables.scss +16 -0
- package/dist/styles/MrlTooltipContent/variables.scss +4 -0
- package/dist/styles/button/mixins.scss +0 -1
- package/dist/styles/button/variables.scss +10 -10
- package/package.json +2 -2
- package/dist/components/menu/hooks/useMenuScroll.d.ts +0 -17
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
&.mrlButton--ghost,
|
|
44
44
|
&.mrlButton--ghost-inverse {
|
|
45
45
|
padding-left: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
|
|
46
|
+
padding-right: var(--mrl-spacing-03);
|
|
46
47
|
}
|
|
47
48
|
}
|
|
48
49
|
.mrlButton--icon-after {
|
|
@@ -53,6 +54,7 @@
|
|
|
53
54
|
}
|
|
54
55
|
&.mrlButton--ghost,
|
|
55
56
|
&.mrlButton--ghost-inverse {
|
|
57
|
+
padding-left: var(--mrl-spacing-03);
|
|
56
58
|
padding-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
|
|
57
59
|
}
|
|
58
60
|
.MrlSvgContainer,
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
|
|
2
|
+
@use '@muraldevkit/ds-foundation/src/styles/_mixins.scss' as *;
|
|
3
|
+
@use './MrlPopover.variables.scss' as *;
|
|
4
|
+
.MrlPopover {
|
|
5
|
+
background: var(--mrl-popover-background-color);
|
|
6
|
+
border-radius: var(--mrl-border-radius-functional-large);
|
|
7
|
+
box-shadow: var(--mrl-shadows-raised);
|
|
8
|
+
color: var(--mrl-popover-text-color);
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
max-height: calc(100vh - 2 * var(--mrl-space-inset-large));
|
|
11
|
+
max-width: 600px;
|
|
12
|
+
opacity: 0;
|
|
13
|
+
overflow: visible;
|
|
14
|
+
padding: var(--mrl-popover-padding);
|
|
15
|
+
pointer-events: auto;
|
|
16
|
+
position: fixed;
|
|
17
|
+
z-index: $mrl-zIndex-menus;
|
|
18
|
+
z-index: $mrl-zIndex-popovers;
|
|
19
|
+
a {
|
|
20
|
+
color: var(--mrl-popover-text-color);
|
|
21
|
+
}
|
|
22
|
+
@include mrl-shadow('raised');
|
|
23
|
+
&--submenu {
|
|
24
|
+
left: 97%;
|
|
25
|
+
position: absolute;
|
|
26
|
+
}
|
|
27
|
+
&--close {
|
|
28
|
+
position: absolute;
|
|
29
|
+
right: 4px;
|
|
30
|
+
top: 6px;
|
|
31
|
+
svg {
|
|
32
|
+
color: var(--mrl-popover-text-color);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
&.compact {
|
|
36
|
+
padding: var(--mrl-space-stack-related);
|
|
37
|
+
}
|
|
38
|
+
&.open {
|
|
39
|
+
display: flex;
|
|
40
|
+
}
|
|
41
|
+
&--scrolling {
|
|
42
|
+
padding-bottom: var(--mrl-spacing-04);
|
|
43
|
+
padding-right: 0;
|
|
44
|
+
padding-top: var(--mrl-spacing-03);
|
|
45
|
+
&--content {
|
|
46
|
+
overflow-x: hidden;
|
|
47
|
+
overflow-y: auto;
|
|
48
|
+
padding: var(--mrl-spacing-02) var(--mrl-spacing-04) var(--mrl-spacing-02)
|
|
49
|
+
var(--mrl-spacing-04);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
&--point {
|
|
53
|
+
background: var(--mrl-popover-background-color);
|
|
54
|
+
border-radius: 0 2px;
|
|
55
|
+
height: 10px;
|
|
56
|
+
position: absolute;
|
|
57
|
+
width: 10px;
|
|
58
|
+
z-index: 2;
|
|
59
|
+
&[data-point*='bottom-'] {
|
|
60
|
+
top: -4px;
|
|
61
|
+
transform: rotate(315deg);
|
|
62
|
+
}
|
|
63
|
+
&[data-point*='top-'] {
|
|
64
|
+
bottom: -4px;
|
|
65
|
+
transform: rotate(315deg);
|
|
66
|
+
}
|
|
67
|
+
&[data-point='bottom-left'],
|
|
68
|
+
&[data-point='top-left'] {
|
|
69
|
+
left: 14px;
|
|
70
|
+
}
|
|
71
|
+
&[data-point='bottom-right'],
|
|
72
|
+
&[data-point='top-right'] {
|
|
73
|
+
right: 14px;
|
|
74
|
+
}
|
|
75
|
+
&[data-point='bottom-center'],
|
|
76
|
+
&[data-point='top-center'] {
|
|
77
|
+
left: calc(50% - 8px);
|
|
78
|
+
}
|
|
79
|
+
&[data-point*='left-'] {
|
|
80
|
+
right: -5px;
|
|
81
|
+
transform: rotate(225deg);
|
|
82
|
+
}
|
|
83
|
+
&[data-point*='right-'] {
|
|
84
|
+
left: -5px;
|
|
85
|
+
transform: rotate(45deg);
|
|
86
|
+
}
|
|
87
|
+
&[data-point='left-center'],
|
|
88
|
+
&[data-point='right-center'] {
|
|
89
|
+
top: calc(50% - 8px);
|
|
90
|
+
}
|
|
91
|
+
&[data-point='left-top'],
|
|
92
|
+
&[data-point='right-top'] {
|
|
93
|
+
top: 16px;
|
|
94
|
+
}
|
|
95
|
+
&[data-point='left-bottom'],
|
|
96
|
+
&[data-point='right-bottom'] {
|
|
97
|
+
bottom: 16px;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.primary {
|
|
2
|
+
--mrl-popover-background-color: var(--mrl-color-background);
|
|
3
|
+
--mrl-popover-text-color: var(--mrl-color-text);
|
|
4
|
+
--mrl-popover-text-emph-color: var(--mrl-color-text-emph);
|
|
5
|
+
}
|
|
6
|
+
.inverse {
|
|
7
|
+
--mrl-popover-background-color: var(--mrl-color-background-inverse);
|
|
8
|
+
--mrl-popover-text-color: var(--mrl-color-text-inverse);
|
|
9
|
+
--mrl-popover-text-emph-color: var(--mrl-color-text-emph);
|
|
10
|
+
}
|
|
11
|
+
.default {
|
|
12
|
+
--mrl-popover-padding: var(--mrl-spacing-05);
|
|
13
|
+
}
|
|
14
|
+
.compact {
|
|
15
|
+
--mrl-popover-padding: var(--mrl-spacing-04);
|
|
16
|
+
}
|
|
@@ -10,4 +10,8 @@
|
|
|
10
10
|
--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);
|
|
11
11
|
--mrl-tooltip-arrow-display-left-right: none;
|
|
12
12
|
--mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
|
|
13
|
+
&--inverse {
|
|
14
|
+
--mrl-tooltip-background-color: var(--mrl-gray-80);
|
|
15
|
+
--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);
|
|
16
|
+
}
|
|
13
17
|
}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
$mrl-button-toggle-selector: '[aria-pressed="true"],[aria-expanded="true"],[aria-selected="true"],[aria-checked="true"]';
|
|
3
3
|
@mixin mrl-button-common-motion() {
|
|
4
4
|
transition: all var(--mrl-duration-03) var(--mrl-timing-m1);
|
|
5
|
-
transition-property: background-color, border-color, color;
|
|
6
5
|
}
|
|
7
6
|
@mixin mrl-button-common() {
|
|
8
7
|
background: var(--mrl-button-background-color);
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
.mrlIconButton,
|
|
4
4
|
.mrlButton {
|
|
5
5
|
--mrl-button-background-color: var(--mrl-color-background);
|
|
6
|
-
--mrl-button-background-color-active: rgba(var(--mrl-gray-
|
|
6
|
+
--mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);
|
|
7
7
|
--mrl-button-background-color-disabled: var(--mrl-color-background);
|
|
8
|
-
--mrl-button-background-color-hover: rgba(var(--mrl-gray-
|
|
9
|
-
--mrl-button-border-color: rgba(var(--mrl-gray-
|
|
10
|
-
--mrl-button-border-color-active: rgba(var(--mrl-
|
|
11
|
-
--mrl-button-border-color-disabled: var(--mrl-
|
|
12
|
-
--mrl-button-border-color-hover: rgba(var(--mrl-gray-
|
|
8
|
+
--mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);
|
|
9
|
+
--mrl-button-border-color: rgba(var(--mrl-gray-30), 1);
|
|
10
|
+
--mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);
|
|
11
|
+
--mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);
|
|
12
|
+
--mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 1);
|
|
13
13
|
--mrl-button-border-width: var(--mrl-line-width-border);
|
|
14
14
|
--mrl-button-icon-size: var(--mrl-spacing-07);
|
|
15
15
|
--mrl-button-text-color: rgba(var(--mrl-gray-80), 1);
|
|
@@ -143,10 +143,10 @@
|
|
|
143
143
|
--mrl-button-background-color-active: var(--mrl-white-opacity-06);
|
|
144
144
|
--mrl-button-background-color-hover: var(--mrl-white-opacity-08);
|
|
145
145
|
--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
|
|
146
|
-
--mrl-button-border-color:
|
|
147
|
-
--mrl-button-border-color-active:
|
|
148
|
-
--mrl-button-border-color-hover:
|
|
149
|
-
--mrl-button-border-color-disabled:
|
|
146
|
+
--mrl-button-border-color: transparent;
|
|
147
|
+
--mrl-button-border-color-active: transparent;
|
|
148
|
+
--mrl-button-border-color-hover: transparent;
|
|
149
|
+
--mrl-button-border-color-disabled: transparent;
|
|
150
150
|
--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
|
|
151
151
|
--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
|
|
152
152
|
--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@muraldevkit/ui-toolkit",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.27.1",
|
|
4
4
|
"description": "Mural's UI Toolkit",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@babel/preset-env": "7.21.4",
|
|
59
59
|
"@babel/preset-react": "7.18.6",
|
|
60
60
|
"@babel/preset-typescript": "7.21.4",
|
|
61
|
-
"@muraldevkit/ds-foundation": "2.3.
|
|
61
|
+
"@muraldevkit/ds-foundation": "2.3.2",
|
|
62
62
|
"@muraldevkit/ds-icons": "3.0.1",
|
|
63
63
|
"@storybook/addon-a11y": "7.0.26",
|
|
64
64
|
"@storybook/addon-docs": "7.0.26",
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { MenuPosition } from '../constants';
|
|
2
|
-
interface MenuScrollStyles {
|
|
3
|
-
className: string | null;
|
|
4
|
-
styles: AdjustedMenuStyle;
|
|
5
|
-
}
|
|
6
|
-
interface AdjustedMenuStyle {
|
|
7
|
-
maxHeight: string;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* useMenuScroll hook
|
|
11
|
-
*
|
|
12
|
-
* @param menuRef - reference to the DOM element that is the menu
|
|
13
|
-
* @param menuAlign - the alignment of the menu
|
|
14
|
-
* @returns AdjustedMenuStyle - returns the new updated style for scrolling the menu
|
|
15
|
-
*/
|
|
16
|
-
export declare const useMenuScroll: (menuRef: React.RefObject<HTMLElement>, menuAlign?: MenuPosition) => MenuScrollStyles;
|
|
17
|
-
export {};
|