@launchpad-ui/filter 0.4.26 → 0.4.27
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/index.es.js +13 -13
- package/dist/index.js +13 -13
- package/dist/style.css +100 -75
- package/package.json +7 -7
package/dist/index.es.js
CHANGED
@@ -8,24 +8,24 @@ import { Button, IconButton } from "@launchpad-ui/button";
|
|
8
8
|
import { Menu, MenuSearch, MenuDivider, MenuItem } from "@launchpad-ui/menu";
|
9
9
|
import { Tooltip } from "@launchpad-ui/tooltip";
|
10
10
|
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
11
|
-
const filter = "
|
12
|
-
const buttonContainer = "
|
13
|
-
const button = "
|
14
|
-
const appliedButton = "
|
15
|
-
const name = "
|
16
|
-
const appliedName = "
|
17
|
-
const description = "
|
18
|
-
const appliedDescription = "
|
19
|
-
const clear = "
|
20
|
-
const isClearable = "
|
21
|
-
const clearTooltip = "
|
22
|
-
const filterClearButton = "
|
11
|
+
const filter = "_filter_9quhv_1";
|
12
|
+
const buttonContainer = "_buttonContainer_9quhv_5";
|
13
|
+
const button = "_button_9quhv_5";
|
14
|
+
const appliedButton = "_appliedButton_9quhv_24";
|
15
|
+
const name = "_name_9quhv_55";
|
16
|
+
const appliedName = "_appliedName_9quhv_60";
|
17
|
+
const description = "_description_9quhv_64";
|
18
|
+
const appliedDescription = "_appliedDescription_9quhv_70";
|
19
|
+
const clear = "_clear_9quhv_78";
|
20
|
+
const isClearable = "_isClearable_9quhv_87";
|
21
|
+
const clearTooltip = "_clearTooltip_9quhv_119";
|
22
|
+
const filterClearButton = "_filterClearButton_9quhv_125";
|
23
23
|
const styles = {
|
24
24
|
filter,
|
25
25
|
buttonContainer,
|
26
26
|
button,
|
27
27
|
appliedButton,
|
28
|
-
"focus-visible": "_focus-
|
28
|
+
"focus-visible": "_focus-visible_9quhv_1",
|
29
29
|
name,
|
30
30
|
appliedName,
|
31
31
|
description,
|
package/dist/index.js
CHANGED
@@ -10,24 +10,24 @@ const button$1 = require("@launchpad-ui/button");
|
|
10
10
|
const menu = require("@launchpad-ui/menu");
|
11
11
|
const tooltip = require("@launchpad-ui/tooltip");
|
12
12
|
const visuallyHidden = require("@react-aria/visually-hidden");
|
13
|
-
const filter = "
|
14
|
-
const buttonContainer = "
|
15
|
-
const button = "
|
16
|
-
const appliedButton = "
|
17
|
-
const name = "
|
18
|
-
const appliedName = "
|
19
|
-
const description = "
|
20
|
-
const appliedDescription = "
|
21
|
-
const clear = "
|
22
|
-
const isClearable = "
|
23
|
-
const clearTooltip = "
|
24
|
-
const filterClearButton = "
|
13
|
+
const filter = "_filter_9quhv_1";
|
14
|
+
const buttonContainer = "_buttonContainer_9quhv_5";
|
15
|
+
const button = "_button_9quhv_5";
|
16
|
+
const appliedButton = "_appliedButton_9quhv_24";
|
17
|
+
const name = "_name_9quhv_55";
|
18
|
+
const appliedName = "_appliedName_9quhv_60";
|
19
|
+
const description = "_description_9quhv_64";
|
20
|
+
const appliedDescription = "_appliedDescription_9quhv_70";
|
21
|
+
const clear = "_clear_9quhv_78";
|
22
|
+
const isClearable = "_isClearable_9quhv_87";
|
23
|
+
const clearTooltip = "_clearTooltip_9quhv_119";
|
24
|
+
const filterClearButton = "_filterClearButton_9quhv_125";
|
25
25
|
const styles = {
|
26
26
|
filter,
|
27
27
|
buttonContainer,
|
28
28
|
button,
|
29
29
|
appliedButton,
|
30
|
-
"focus-visible": "_focus-
|
30
|
+
"focus-visible": "_focus-visible_9quhv_1",
|
31
31
|
name,
|
32
32
|
appliedName,
|
33
33
|
description,
|
package/dist/style.css
CHANGED
@@ -1,15 +1,15 @@
|
|
1
|
-
.
|
1
|
+
._filter_9quhv_1 {
|
2
2
|
font-family: var(--lp-font-family-base);
|
3
3
|
}
|
4
4
|
|
5
|
-
.
|
5
|
+
._buttonContainer_9quhv_5 {
|
6
6
|
cursor: pointer;
|
7
7
|
display: inline-flex;
|
8
8
|
align-items: center;
|
9
9
|
position: relative;
|
10
10
|
}
|
11
11
|
|
12
|
-
.
|
12
|
+
._button_9quhv_5 {
|
13
13
|
border-radius: var(--lp-border-radius);
|
14
14
|
padding-top: 0;
|
15
15
|
padding-bottom: 0;
|
@@ -17,21 +17,21 @@
|
|
17
17
|
display: flex;
|
18
18
|
align-items: center;
|
19
19
|
margin: 0;
|
20
|
-
color: var(--lp-color-text);
|
21
|
-
background-color: var(--lp-color-
|
20
|
+
color: var(--lp-color-text-ui-primary);
|
21
|
+
background-color: var(--lp-color-bg-interactive-secondary);
|
22
22
|
}
|
23
23
|
|
24
|
-
.
|
25
|
-
color: var(--lp-color-text);
|
24
|
+
._appliedButton_9quhv_24 {
|
25
|
+
color: var(--lp-color-text-ui-primary);
|
26
26
|
height: 2rem;
|
27
|
-
background-color: var(--lp-color-
|
27
|
+
background-color: var(--lp-color-bg-interactive-secondary-hover);
|
28
28
|
padding: 0.2rem 0.6rem;
|
29
29
|
border-radius: 0.2rem;
|
30
30
|
display: flex;
|
31
31
|
}
|
32
32
|
|
33
|
-
.
|
34
|
-
.
|
33
|
+
._button_9quhv_5,
|
34
|
+
._appliedButton_9quhv_24 {
|
35
35
|
font-family: inherit;
|
36
36
|
font-size: 1.3rem;
|
37
37
|
cursor: pointer;
|
@@ -40,57 +40,41 @@
|
|
40
40
|
border-color: var(--lp-color-white);
|
41
41
|
}
|
42
42
|
|
43
|
-
.
|
44
|
-
background-color: var(--lp-color-
|
45
|
-
border-color: var(--lp-color-border);
|
43
|
+
._button_9quhv_5:hover, ._appliedButton_9quhv_24:hover {
|
44
|
+
background-color: var(--lp-color-bg-interactive-secondary-hover);
|
45
|
+
border-color: var(--lp-color-border-ui-primary);
|
46
46
|
}
|
47
47
|
|
48
|
-
.
|
49
|
-
box-shadow: 0 0 0 2px var(--lp-color-
|
50
|
-
|
48
|
+
._button_9quhv_5._focus-visible_9quhv_1, ._appliedButton_9quhv_24._focus-visible_9quhv_1 {
|
49
|
+
box-shadow: 0 0 0 2px var(--lp-color-shadow-interactive-primary),
|
50
|
+
0 0 0 4px var(--lp-color-shadow-interactive-focus);
|
51
|
+
border-color: var(--lp-color-border-ui-primary);
|
51
52
|
outline: none;
|
52
53
|
}
|
53
54
|
|
54
|
-
.
|
55
|
-
box-shadow:
|
56
|
-
|
57
|
-
border-color: var(--lp-color-
|
58
|
-
|
59
|
-
|
60
|
-
._button_1cei5_5:focus:not(._focus-visible_1cei5_1), ._appliedButton_1cei5_24:focus:not(._focus-visible_1cei5_1) {
|
61
|
-
box-shadow: none;
|
62
|
-
box-shadow: initial;
|
63
|
-
border-color: var(--lp-color-white);
|
64
|
-
}
|
65
|
-
|
66
|
-
._button_1cei5_5:focus:not(._focus-visible_1cei5_1), ._appliedButton_1cei5_24:focus:not(._focus-visible_1cei5_1) {
|
67
|
-
box-shadow: none;
|
68
|
-
box-shadow: initial;
|
69
|
-
border-color: var(--lp-color-white);
|
70
|
-
}
|
71
|
-
|
72
|
-
._button_1cei5_5:focus:not(:focus-visible), ._appliedButton_1cei5_24:focus:not(:focus-visible) {
|
73
|
-
box-shadow: none;
|
74
|
-
box-shadow: initial;
|
75
|
-
border-color: var(--lp-color-white);
|
55
|
+
._button_9quhv_5:focus-visible, ._appliedButton_9quhv_24:focus-visible {
|
56
|
+
box-shadow: 0 0 0 2px var(--lp-color-shadow-interactive-primary),
|
57
|
+
0 0 0 4px var(--lp-color-shadow-interactive-focus);
|
58
|
+
border-color: var(--lp-color-border-ui-primary);
|
59
|
+
outline: none;
|
76
60
|
}
|
77
61
|
|
78
|
-
.
|
62
|
+
._name_9quhv_55 {
|
79
63
|
margin-right: 0.5rem;
|
80
64
|
font-weight: var(--lp-font-weight-medium);
|
81
65
|
}
|
82
66
|
|
83
|
-
.
|
67
|
+
._appliedName_9quhv_60 {
|
84
68
|
margin-right: 0.3rem;
|
85
69
|
}
|
86
70
|
|
87
|
-
.
|
88
|
-
color: var(--lp-color-text);
|
71
|
+
._description_9quhv_64 {
|
72
|
+
color: var(--lp-color-text-ui-primary);
|
89
73
|
font-weight: var(--lp-font-weight-medium);
|
90
74
|
}
|
91
75
|
|
92
|
-
.
|
93
|
-
.
|
76
|
+
._description_9quhv_64,
|
77
|
+
._appliedDescription_9quhv_70 {
|
94
78
|
margin-right: 0.5rem;
|
95
79
|
max-width: 16rem;
|
96
80
|
overflow: hidden;
|
@@ -98,92 +82,133 @@
|
|
98
82
|
white-space: nowrap;
|
99
83
|
}
|
100
84
|
|
101
|
-
.
|
85
|
+
._clear_9quhv_78 {
|
102
86
|
cursor: pointer;
|
103
87
|
padding: 0.3rem;
|
104
88
|
}
|
105
89
|
|
106
90
|
.Filter-target--usage {
|
107
|
-
border: 1px solid var(--lp-color-
|
91
|
+
border: 1px solid var(--lp-color-gray-600);
|
108
92
|
}
|
109
93
|
|
110
|
-
.
|
94
|
+
._button_9quhv_5._isClearable_9quhv_87 {
|
111
95
|
background-color: var(--lp-color-blue-200);
|
112
96
|
padding-right: 3.1rem;
|
113
97
|
}
|
114
98
|
|
115
|
-
.
|
116
|
-
.
|
117
|
-
.
|
99
|
+
._button_9quhv_5._isClearable_9quhv_87:focus,
|
100
|
+
._button_9quhv_5._isClearable_9quhv_87:hover,
|
101
|
+
._button_9quhv_5._isClearable_9quhv_87:active {
|
118
102
|
background-color: var(--lp-color-blue-300);
|
119
103
|
}
|
120
104
|
|
121
|
-
.
|
105
|
+
._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
|
122
106
|
background-color: transparent;
|
123
107
|
background-color: initial;
|
124
108
|
}
|
125
109
|
|
126
|
-
.
|
110
|
+
._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
|
127
111
|
background-color: transparent;
|
128
112
|
background-color: initial;
|
129
113
|
}
|
130
114
|
|
131
|
-
.
|
115
|
+
._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
|
132
116
|
background-color: transparent;
|
133
117
|
background-color: initial;
|
134
118
|
}
|
135
119
|
|
136
|
-
.
|
120
|
+
._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible) {
|
137
121
|
background-color: transparent;
|
138
122
|
background-color: initial;
|
139
123
|
}
|
140
124
|
|
141
|
-
.
|
125
|
+
._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1):hover {
|
142
126
|
background-color: var(--lp-color-blue-300);
|
143
127
|
}
|
144
128
|
|
145
|
-
.
|
129
|
+
._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible):hover {
|
146
130
|
background-color: var(--lp-color-blue-300);
|
147
131
|
}
|
148
132
|
|
149
|
-
.
|
150
|
-
.
|
151
|
-
[data-state='open'] .
|
152
|
-
background-color: var(--lp-color-
|
153
|
-
border-color: var(--lp-color-
|
133
|
+
._button_9quhv_5:hover:not(._isClearable_9quhv_87),
|
134
|
+
._button_9quhv_5:focus:not(._isClearable_9quhv_87),
|
135
|
+
[data-state='open'] ._button_9quhv_5:not(._isClearable_9quhv_87) {
|
136
|
+
background-color: var(--lp-color-bg-interactive-secondary-hover);
|
137
|
+
border-color: var(--lp-color-border-interactive-secondary-hover);
|
154
138
|
}
|
155
139
|
|
156
|
-
.
|
157
|
-
background-color: var(--lp-color-
|
140
|
+
._button_9quhv_5:focus:not(._focus-visible_9quhv_1):not(._isClearable_9quhv_87):hover {
|
141
|
+
background-color: var(--lp-color-bg-interactive-secondary-hover);
|
158
142
|
}
|
159
143
|
|
160
|
-
.
|
161
|
-
background-color: var(--lp-color-
|
144
|
+
._button_9quhv_5:focus:not(:focus-visible):not(._isClearable_9quhv_87):hover {
|
145
|
+
background-color: var(--lp-color-bg-interactive-secondary-hover);
|
162
146
|
}
|
163
147
|
|
164
|
-
.
|
148
|
+
._clearTooltip_9quhv_119 {
|
165
149
|
line-height: 1;
|
166
150
|
position: absolute;
|
167
151
|
right: 0.7rem;
|
168
152
|
}
|
169
153
|
|
170
|
-
.
|
154
|
+
._filterClearButton_9quhv_125 {
|
171
155
|
text-decoration: none;
|
172
|
-
color: var(--lp-color-
|
156
|
+
color: var(--lp-color-text-interactive-destructive);
|
173
157
|
font-size: 1.3rem;
|
174
158
|
font-weight: var(--lp-font-weight-medium);
|
175
159
|
padding: 1rem;
|
176
160
|
width: 100%;
|
177
|
-
border-bottom: 1px solid var(--lp-color-border);
|
161
|
+
border-bottom: 1px solid var(--lp-color-border-ui-primary);
|
178
162
|
}
|
179
163
|
|
180
|
-
.
|
181
|
-
.
|
182
|
-
.
|
164
|
+
._filterClearButton_9quhv_125:active,
|
165
|
+
._filterClearButton_9quhv_125:focus,
|
166
|
+
._filterClearButton_9quhv_125:hover {
|
183
167
|
outline: none;
|
184
168
|
box-shadow: none;
|
185
169
|
box-shadow: initial;
|
186
|
-
color: var(--lp-color-
|
187
|
-
border-bottom-color: var(--lp-color-border);
|
188
|
-
background-color: var(--lp-color-
|
170
|
+
color: var(--lp-color-text-interactive-destructive);
|
171
|
+
border-bottom-color: var(--lp-color-border-ui-primary);
|
172
|
+
background-color: var(--lp-color-bg-interactive-secondary-hover);
|
189
173
|
}
|
174
|
+
|
175
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
176
|
+
|
177
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87 {
|
178
|
+
background-color: var(--lp-color-cyan-900);
|
179
|
+
padding-right: 3.1rem;
|
180
|
+
}
|
181
|
+
|
182
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus,
|
183
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:hover,
|
184
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:active {
|
185
|
+
background-color: var(--lp-color-cyan-800);
|
186
|
+
}
|
187
|
+
|
188
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
|
189
|
+
background-color: transparent;
|
190
|
+
background-color: initial;
|
191
|
+
}
|
192
|
+
|
193
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
|
194
|
+
background-color: transparent;
|
195
|
+
background-color: initial;
|
196
|
+
}
|
197
|
+
|
198
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
|
199
|
+
background-color: transparent;
|
200
|
+
background-color: initial;
|
201
|
+
}
|
202
|
+
|
203
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible) {
|
204
|
+
background-color: transparent;
|
205
|
+
background-color: initial;
|
206
|
+
}
|
207
|
+
|
208
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1):hover {
|
209
|
+
background-color: var(--lp-color-cyan-900);
|
210
|
+
}
|
211
|
+
|
212
|
+
:root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible):hover {
|
213
|
+
background-color: var(--lp-color-cyan-900);
|
214
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@launchpad-ui/filter",
|
3
|
-
"version": "0.4.
|
3
|
+
"version": "0.4.27",
|
4
4
|
"status": "beta",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -26,12 +26,12 @@
|
|
26
26
|
},
|
27
27
|
"source": "src/index.ts",
|
28
28
|
"dependencies": {
|
29
|
-
"@launchpad-ui/button": "~0.7.
|
30
|
-
"@launchpad-ui/dropdown": "~0.6.
|
31
|
-
"@launchpad-ui/icons": "~0.6.
|
32
|
-
"@launchpad-ui/menu": "~0.6.
|
33
|
-
"@launchpad-ui/tokens": "~0.
|
34
|
-
"@launchpad-ui/tooltip": "~0.6.
|
29
|
+
"@launchpad-ui/button": "~0.7.8",
|
30
|
+
"@launchpad-ui/dropdown": "~0.6.3",
|
31
|
+
"@launchpad-ui/icons": "~0.6.1",
|
32
|
+
"@launchpad-ui/menu": "~0.6.26",
|
33
|
+
"@launchpad-ui/tokens": "~0.3.0",
|
34
|
+
"@launchpad-ui/tooltip": "~0.6.21",
|
35
35
|
"@react-aria/visually-hidden": "^3.5.0",
|
36
36
|
"classix": "^2.1.13"
|
37
37
|
},
|