Skip to content

Commit 3aede37

Browse files
bdfranckbdfranck
committed
feat(#2952): update filter chip to v2
1 parent 9215e45 commit 3aede37

File tree

1 file changed

+150
-44
lines changed

1 file changed

+150
-44
lines changed

‎libs/web-components/src/components/filter-chip/FilterChip.svelte‎

Lines changed: 150 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import { toBoolean } from "../../common/utils";
66
import type { Spacing } from "../../common/styling";
77
import { calculateMargin } from "../../common/styling";
8+
import type { GoAIconType } from "../icon/Icon.svelte";
89
910
// margin
1011
export let mt: Spacing = null;
@@ -15,8 +16,11 @@
1516
// Props
1617
export let error: string = "false";
1718
export let content: string;
19+
export let secondarytext: string = "";
20+
export let leadingicon: GoAIconType | null = null;
1821
export let testid: string = "";
1922
export let ariaLabel: string = "";
23+
export let version: "1" | "2" = "1";
2024
2125
// Private variables
2226
let el: HTMLElement;
@@ -47,53 +51,108 @@
4751
</script>
4852

4953
<!-- HTML -->
50-
<div
51-
bind:this={el}
52-
data-testid={testid}
53-
class="chip"
54-
class:error={_error}
55-
class:focused={_focused}
56-
style={calculateMargin(mt, mr, mb, ml)}
57-
tabindex="0"
58-
role="button"
59-
aria-label={chipAriaLabel}
60-
on:click={onDelete}
61-
on:keydown={handleKeyDown}
62-
on:mouseover={() => (_hovering = true)}
63-
on:mouseout={() => (_hovering = false)}
64-
on:focus={() => (_focused = true)}
65-
on:blur={() => (_focused = false)}
66-
>
67-
<div class="text">
68-
{content}
54+
{#if version === "2"}
55+
<div
56+
bind:this={el}
57+
data-testid={testid}
58+
class="v2 chip"
59+
class:error={_error}
60+
role="presentation"
61+
aria-label={chipAriaLabel}
62+
style={calculateMargin(mt, mr, mb, ml)}
63+
>
64+
<div class="label-container">
65+
{#if leadingicon}
66+
<goa-icon
67+
class="leading-icon"
68+
size="small"
69+
type={leadingicon}
70+
fillcolor={_error
71+
? "var(--goa-filter-chip-icon-color-error)"
72+
: "var(--goa-filter-chip-icon-color)"}
73+
/>
74+
{/if}
75+
{#if secondarytext}
76+
<div class="secondary-text">
77+
{secondarytext}
78+
</div>
79+
{/if}
80+
<div class="text">
81+
{content}
82+
</div>
83+
</div>
84+
<goa-icon-button
85+
size="3"
86+
icon="close"
87+
onclick={onDelete}
88+
arialabel="Remove filter"
89+
variant={_error ? "destructive" : "dark"}
90+
testid="delete-button"
91+
>
92+
</goa-icon-button>
6993
</div>
70-
<goa-icon
71-
class="delete-icon"
72-
size="medium"
73-
theme={_error ? "filled" : _hovering || _focused ? "filled" : "outline"}
74-
type="close-circle"
75-
fillcolor={_error
76-
? "var(--goa-color-emergency-default)"
77-
: "var(--goa-color-greyscale-700)"}
78-
opacity={_error ? (_hovering || _focused ? 1 : 0.5) : 1}
79-
/>
80-
</div>
94+
{:else}
95+
<div
96+
bind:this={el}
97+
data-testid={testid}
98+
class="chip"
99+
class:error={_error}
100+
class:focused={_focused}
101+
style={calculateMargin(mt, mr, mb, ml)}
102+
tabindex="0"
103+
role="button"
104+
aria-label={chipAriaLabel}
105+
on:click={onDelete}
106+
on:keydown={handleKeyDown}
107+
on:mouseover={() => (_hovering = true)}
108+
on:mouseout={() => (_hovering = false)}
109+
on:focus={() => (_focused = true)}
110+
on:blur={() => (_focused = false)}
111+
>
112+
<div class="text">
113+
{content}
114+
</div>
115+
<goa-icon
116+
class="delete-icon"
117+
size="medium"
118+
theme={_error ? "filled" : _hovering || _focused ? "filled" : "outline"}
119+
type="close-circle"
120+
fillcolor={_error
121+
? "var(--goa-color-emergency-default)"
122+
: "var(--goa-color-greyscale-700)"}
123+
opacity={_error ? (_hovering || _focused ? 1 : 0.5) : 1}
124+
/>
125+
</div>
126+
{/if}
81127

82128
<!-- Style -->
83129
<style>
84130
.chip {
85131
display: inline-flex;
86132
align-items: center;
87-
background-color: var(--goa-color-greyscale-white);
88-
border-radius: 1rem;
89-
border: var(--goa-border-width-s) solid var(--goa-color-greyscale-700);
133+
background-color: var(
134+
--goa-filter-chip-bg-color,
135+
var(--goa-color-greyscale-white)
136+
);
137+
border-radius: var(--goa-filter-chip-border-radius, 1rem);
138+
border: var(
139+
--goa-filter-chip-border,
140+
var(--goa-border-width-s) solid var(--goa-color-greyscale-700)
141+
);
90142
box-sizing: border-box;
91-
color: var(--goa-color-text-default);
92-
font: var(--goa-typography-body-s);
93-
gap: 0.5rem;
94-
min-height: 2rem;
95-
padding: 3px 8px 3px 12px;
96-
min-width: 56px;
143+
color: var(--goa-filter-chip-text-color, var(--goa-color-text-default));
144+
font: var(--goa-filter-chip-typography, var(--goa-typography-body-s));
145+
gap: var(--goa-filter-chip-gap, 0.5rem);
146+
min-height: var(--goa-filter-chip-min-height, 2rem);
147+
padding-top: var(--goa-filter-chip-padding-vertical, 3px);
148+
padding-right: var(--goa-filter-chip-padding-horizontal-right, 8px);
149+
padding-bottom: var(--goa-filter-chip-padding-vertical, 3px);
150+
padding-left: var(--goa-filter-chip-padding-horizontal-left, 12px);
151+
min-width: var(--goa-filter-chip-min-width, 56px);
152+
}
153+
154+
/* V1: Entire chip is clickable */
155+
.chip[role="button"] {
97156
cursor: pointer;
98157
touch-action: manipulation;
99158
}
@@ -103,9 +162,22 @@
103162
}
104163
105164
.chip.error {
165+
background-color: var(
166+
--goa-filter-chip-bg-color-error,
167+
var(--goa-color-emergency-light)
168+
);
169+
border-color: var(
170+
--goa-filter-chip-border-color-error,
171+
var(--goa-color-emergency-default)
172+
);
173+
color: var(
174+
--goa-filter-chip-text-color-error,
175+
var(--goa-color-emergency-default)
176+
);
177+
}
178+
179+
.chip:not(.v2).error:hover {
106180
background-color: var(--goa-color-emergency-light);
107-
border-color: var(--goa-color-emergency-default);
108-
color: var(--goa-color-emergency-default);
109181
}
110182
111183
.delete-icon {
@@ -114,8 +186,23 @@
114186
align-items: center;
115187
}
116188
189+
.label-container {
190+
display: flex;
191+
align-items: center;
192+
gap: var(--goa-filter-chip-label-gap, 6px);
193+
}
194+
195+
.leading-icon {
196+
flex-shrink: 0;
197+
display: flex;
198+
align-items: center;
199+
}
200+
117201
.text {
118-
line-height: var(--goa-line-height-2); /* 24px */
202+
line-height: var(
203+
--goa-filter-chip-line-height,
204+
var(--goa-line-height-2)
205+
); /* 24px */
119206
padding-top: 0;
120207
display: flex;
121208
align-items: center;
@@ -127,7 +214,26 @@
127214
word-wrap: break-word;
128215
}
129216
130-
.error:hover {
131-
background-color: var(--goa-color-emergency-light);
217+
/* Version 2 */
218+
.v2 .secondary-text {
219+
line-height: var(--goa-filter-chip-line-height);
220+
color: var(--goa-filter-chip-secondary-text-color);
221+
overflow-wrap: break-word;
222+
word-wrap: break-word;
223+
}
224+
225+
.v2.error .secondary-text {
226+
color: var(--goa-filter-chip-secondary-text-color-error);
132227
}
228+
229+
.v2 .text,
230+
.v2 .secondary-text {
231+
padding-bottom: 0;
232+
}
233+
234+
/* V2 Icon Button */
235+
.v2 {
236+
--padding: 0.125rem;
237+
--goa-icon-button-destructive-hover-color-bg: var(--goa-filter-chip-close-button-error-hover-bg-color);
238+
}
133239
</style>

0 commit comments

Comments
 (0)