@phillips/seldon 1.219.0 → 1.220.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/dist/components/IconButton/IconButton.stories.d.ts +3 -0
- package/dist/scss/_utils.scss +18 -0
- package/dist/scss/components/Button/_button.scss +4 -4
- package/dist/scss/components/FavoritingTileButton/_favoritingTileButton.scss +1 -1
- package/dist/scss/components/IconButton/_iconButton.scss +6 -3
- package/package.json +1 -1
|
@@ -2,6 +2,9 @@ import { ButtonVariants } from '../Button/types';
|
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
4
|
component: import('react').ForwardRefExoticComponent<import('./IconButton').IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
5
|
+
args: {
|
|
6
|
+
onClick: () => void;
|
|
7
|
+
};
|
|
5
8
|
argTypes: {
|
|
6
9
|
variant: {
|
|
7
10
|
options: ButtonVariants[];
|
package/dist/scss/_utils.scss
CHANGED
|
@@ -221,3 +221,21 @@
|
|
|
221
221
|
@mixin cursorPointer() {
|
|
222
222
|
cursor: pointer;
|
|
223
223
|
}
|
|
224
|
+
|
|
225
|
+
// Provides pointer-aware interaction states that adapt to the user's input device:
|
|
226
|
+
// - Fine pointer devices (mouse/trackpad): shows styles on :hover
|
|
227
|
+
// - Coarse pointer devices (touch screens): shows styles on :active
|
|
228
|
+
// This prevents sticky hover states on touch devices and ensures proper feedback for all users.
|
|
229
|
+
@mixin hoverOrActive() {
|
|
230
|
+
@media (pointer: fine) and (hover: hover) {
|
|
231
|
+
&:hover {
|
|
232
|
+
@content;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
@media (pointer: coarse) {
|
|
237
|
+
&:active {
|
|
238
|
+
@content;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
@include hoverOrActive {
|
|
61
61
|
background-color: $button-hover;
|
|
62
62
|
|
|
63
63
|
svg {
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
&--secondary {
|
|
135
135
|
transition: box-shadow 0.25s;
|
|
136
136
|
|
|
137
|
-
|
|
137
|
+
@include hoverOrActive {
|
|
138
138
|
background-color: transparent;
|
|
139
139
|
box-shadow: 0 0 0 1px rgba($pure-black, 1);
|
|
140
140
|
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
&--ghost {
|
|
148
148
|
border-color: transparent;
|
|
149
149
|
|
|
150
|
-
|
|
150
|
+
@include hoverOrActive {
|
|
151
151
|
background-color: transparent;
|
|
152
152
|
border: 1px solid transparent;
|
|
153
153
|
color: $pure-white;
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
|
|
187
|
+
@include hoverOrActive {
|
|
188
188
|
background-color: transparent;
|
|
189
189
|
color: $button-hover;
|
|
190
190
|
|
|
@@ -10,9 +10,10 @@
|
|
|
10
10
|
|
|
11
11
|
& svg {
|
|
12
12
|
height: $button-label-line-height;
|
|
13
|
+
pointer-events: none;
|
|
13
14
|
width: $button-label-line-height;
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
@include hoverOrActive {
|
|
16
17
|
color: $white-100;
|
|
17
18
|
}
|
|
18
19
|
}
|
|
@@ -44,11 +45,12 @@
|
|
|
44
45
|
}
|
|
45
46
|
}
|
|
46
47
|
|
|
47
|
-
|
|
48
|
+
@include hoverOrActive {
|
|
48
49
|
svg {
|
|
49
50
|
color: $pure-white;
|
|
50
51
|
|
|
51
52
|
path {
|
|
53
|
+
color: $pure-white;
|
|
52
54
|
fill: $pure-white;
|
|
53
55
|
}
|
|
54
56
|
}
|
|
@@ -56,6 +58,7 @@
|
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
&--ghost {
|
|
61
|
+
border: 1px solid transparent;
|
|
59
62
|
border-color: transparent;
|
|
60
63
|
|
|
61
64
|
svg {
|
|
@@ -94,7 +97,7 @@
|
|
|
94
97
|
border-radius: $radius-3xl;
|
|
95
98
|
}
|
|
96
99
|
|
|
97
|
-
|
|
100
|
+
@include hoverOrActive {
|
|
98
101
|
& svg {
|
|
99
102
|
color: $cta-hover;
|
|
100
103
|
fill: $cta-hover;
|