@muraldevkit/ui-toolkit 1.15.8 → 1.16.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/form/constants.d.ts +2 -1
- package/dist/components/form/index.d.ts +1 -0
- package/dist/components/form/text-input/MrlTextInput/MrlTextInput.d.ts +36 -0
- package/dist/components/form/text-input/MrlTextInput/MrlTextInputRightIcon.d.ts +23 -0
- package/dist/components/form/text-input/MrlTextInput/index.d.ts +1 -0
- package/dist/components/form/text-input/MrlTextInput/useActiveColor.d.ts +13 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlTextInput/module.scss +97 -0
- package/dist/styles/MrlTextInput/variables.scss +6 -0
- package/dist/utils/checkInvalidAttributes/index.d.ts +7 -0
- package/package.json +4 -5
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
|
|
2
|
+
@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
|
|
3
|
+
@use '../../forms.global.scss' as *;
|
|
4
|
+
@use './MrlTextInput.variables.scss';
|
|
5
|
+
|
|
6
|
+
/* stylelint-disable scss/operator-no-newline-after */
|
|
7
|
+
|
|
8
|
+
.MrlTextInput {
|
|
9
|
+
@include mrl-text-inputs;
|
|
10
|
+
@include mrl-focus($is-inline-element: 'true');
|
|
11
|
+
|
|
12
|
+
// Focus state
|
|
13
|
+
&.mrl-u-focus-wrapper {
|
|
14
|
+
// When used within a grid layout not setting an
|
|
15
|
+
// explicit height can create rendering issues with
|
|
16
|
+
// the focus indicator.
|
|
17
|
+
height: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/*
|
|
21
|
+
* Since we have built a custom clearable functionality,
|
|
22
|
+
* we should hide the default search clear from certain browsers
|
|
23
|
+
*/
|
|
24
|
+
&::-ms-clear,
|
|
25
|
+
&::-ms-reveal {
|
|
26
|
+
display: none;
|
|
27
|
+
height: 0;
|
|
28
|
+
width: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* clears the ‘X’ from Chrome */
|
|
32
|
+
&::-webkit-search-decoration,
|
|
33
|
+
&::-webkit-search-cancel-button,
|
|
34
|
+
&::-webkit-search-results-button,
|
|
35
|
+
&::-webkit-search-results-decoration {
|
|
36
|
+
display: none;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Icon support
|
|
41
|
+
.MrlTextInput--dynamicIcon {
|
|
42
|
+
padding-right: calc(
|
|
43
|
+
var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
|
|
44
|
+
var(--mrl-text-input-icon-offset)
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.MrlTextInput--persistIcon {
|
|
49
|
+
padding-left: calc(
|
|
50
|
+
var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
|
|
51
|
+
var(--mrl-text-input-icon-offset)
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// This class is used when we hover over icons within the input
|
|
56
|
+
// and can't directly target it via CSS
|
|
57
|
+
.MrlTextInput--active {
|
|
58
|
+
border-color: var(--mrl-text-input-border-color-hover);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.MrlTextInput-dynamicIcon,
|
|
62
|
+
.MrlTextInput-persistIcon {
|
|
63
|
+
color: var(--mrl-text-input-border-color);
|
|
64
|
+
position: absolute;
|
|
65
|
+
top: calc(var(--mrl-text-input-inset-vertical) + var(--mrl-line-width-border));
|
|
66
|
+
z-index: $mrl-zIndex-focus + 1;
|
|
67
|
+
|
|
68
|
+
&--disabled {
|
|
69
|
+
color: var(--mrl-text-input-border-color-disabled);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.MrlTextInput-dynamicIcon {
|
|
74
|
+
right: var(--mrl-text-input-inset-horizontal);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.MrlTextInput-persistIcon {
|
|
78
|
+
left: var(--mrl-text-input-inset-horizontal);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.MrlTextInput-persistIcon--active,
|
|
82
|
+
.MrlTextInput-dynamicIcon--active {
|
|
83
|
+
color: var(--mrl-text-input-border-color-hover);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// @todo this needs replaced with a "nested" size button once available
|
|
87
|
+
.MrlTextInput-dynamicIcon > button {
|
|
88
|
+
@include mrl-focus;
|
|
89
|
+
|
|
90
|
+
background: none;
|
|
91
|
+
border: none;
|
|
92
|
+
color: inherit;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
height: 20px;
|
|
95
|
+
outline: none;
|
|
96
|
+
padding: 0;
|
|
97
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { AttrsObject } from '../setAttributes';
|
|
2
|
+
/**
|
|
3
|
+
* Checks attrs object for invalid properties and provides a warning
|
|
4
|
+
*
|
|
5
|
+
* @param {AttrsObject} attrs - attrs object from a component
|
|
6
|
+
*/
|
|
7
|
+
export declare const checkInvalidAttributes: (attrs: AttrsObject | undefined) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@muraldevkit/ui-toolkit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.16.1",
|
|
4
4
|
"description": "Mural's UI Toolkit",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -37,10 +37,9 @@
|
|
|
37
37
|
"license": "https://www.mural.co/terms/developer-addendum",
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@muraldevkit/ds-foundation": ">=1.4.0",
|
|
40
|
-
"@muraldevkit/ds-icons": "1.1.0",
|
|
41
|
-
"@muraldevkit/ds-icons-animated": "1.0.1",
|
|
42
|
-
"
|
|
43
|
-
"lottie-web": "5.11.0",
|
|
40
|
+
"@muraldevkit/ds-icons": "^1.1.0",
|
|
41
|
+
"@muraldevkit/ds-icons-animated": "^1.0.1",
|
|
42
|
+
"lottie-web": "^5.9.6",
|
|
44
43
|
"react": ">=16.9",
|
|
45
44
|
"react-dom": ">=16.9"
|
|
46
45
|
},
|