GovAlta
fix(#1943): new component filterchip
A separate PR for the documentation update is also needed.
Before (the change)
After (the change)
Make sure that you've checked the boxes below before you submit the PR
- [x] I have read and followed the setup steps
- [x] I have created necessary unit tests
- [x] I have tested the functionality in both React and Angular.
Steps needed to test
Playground Angular Example Typescript
import { Component } from "@angular/core";
@Component({
selector: "abgov-chip",
templateUrl: "./filter-chip.component.html",
styleUrl: "./filter-chip.component.css",
})
export class FilterChipComponent {
chips: string[] = ["Chip 1", "Chip 2", "Chip 3"];
activeFilters: string[] = [];
typedChips: string[] = ["Typed Chip 1", "Typed Chip 2", "Typed Chip 3"];
inputValue = "";
deleteChip(chip: string): void {
this.chips = this.chips.filter((c) => c !== chip);
}
onClick(): void {
console.log("Chip clicked");
}
Html
<h1>Filter Chip</h1>
<h2>Basic</h2>
<goa-filter-chip content="Filter Chip Text"></goa-filter-chip>
<h2>Delete event</h2>
<goa-filter-chip
*ngFor="let chip of chips"
[content]="chip"
deletable="true"
(_click)="deleteChip(chip)"
mr="s"
></goa-filter-chip>
<h2>Error state</h2>
<goa-filter-chip content="Filter Chip Text" error="true" mr="s"></goa-filter-chip>
<goa-filter-chip
content="Filter Chip Text"
error="true"
deletable="true"
(_click)="onClick()"
></goa-filter-chip>
<h2>Minimum Width (56px)</h2>
<goa-filter-chip content="ABC" mr="s"></goa-filter-chip>
<goa-filter-chip content="XYZ" mr="s"></goa-filter-chip>
<goa-filter-chip content="PQR"></goa-filter-chip>
<h2>Filled Close Icon (On Hover)</h2>
<p>Hover over the chip to see the close icon change:</p>
<goa-filter-chip content="Hover Me" deletable="true"></goa-filter-chip>
<h2>No Background Fill on Hover</h2>
<p>Hover over these chips to see that there's no background color change:</p>
<goa-filter-chip content="No Background 1" mr="s"></goa-filter-chip>
<goa-filter-chip content="No Background 2"></goa-filter-chip>
<h2>Multiple Filter Chips</h2>
<div>
<goa-filter-chip content="Category 1" deletable="true" (_click)="onFilterRemove('Category 1')" mr="s"></goa-filter-chip>
<goa-filter-chip content="Category 2" deletable="true" (_click)="onFilterRemove('Category 2')" mr="s"></goa-filter-chip>
<goa-filter-chip content="Category 3" deletable="true" (_click)="onFilterRemove('Category 3')"></goa-filter-chip>
</div>
Playground React Code
import React, { useState, useRef, KeyboardEvent, ChangeEvent } from "react";
import { GoAButton, GoAFilterChip, GoAInput } from "@abgov/react-components";
export default function FilterChipComponent() {
const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);
const [activeFilters, setActiveFilters] = useState<string[]>([]);
const deleteChip = (chip: string) => {
setChips((prevChips) => prevChips.filter((c) => c !== chip));
};
const onFilterRemove = (category: string) => {
console.log(`Filter removed: ${category}`);
};
return (
<div style={{ marginTop: "2rem" }}>
<h1 className="text-2xl font-bold mb-4">GoA Filter Chip Playground</h1>
<section>
<h2>Basic</h2>
<GoAFilterChip content="Filter Chip Text" />
</section>
<section style={{ marginTop: "2rem" }}>
<h2>Delete event</h2>
<div className="flex flex-wrap gap-2">
{chips.map((chip) => (
<GoAFilterChip
key={chip}
content={chip}
deletable={true}
onClick={() => deleteChip(chip)}
mr="s"
/>
))}
</div>
</section>
<section style={{ marginTop: "2rem" }}>
<h2>Error state</h2>
<GoAFilterChip content="Filter Chip Text" error={true} mr="s" />
<GoAFilterChip
content="Filter Chip Text"
error={true}
deletable={true}
onClick={() => console.log("Chip clicked")}
/>
</section>
<section style={{ marginTop: "2rem" }}>
<h2>Minimum Width (56px)</h2>
<div className="flex gap-2">
<GoAFilterChip content="ABC" mr="s" />
<GoAFilterChip content="PQR" mr="s"/>
<GoAFilterChip content="XYZ" />
</div>
</section>
<section style={{ marginTop: "2rem" }}>
<h2>Unfilled Close Icon (Default)</h2>
<GoAFilterChip content="Hover Me" deletable={true} />
</section>
<section style={{ marginTop: "2rem" }}>
<h2>Filled Close Icon (On Hover)</h2>
<p>Hover over the chip to see the close icon change:</p>
<GoAFilterChip content="Hover Me" deletable={true} />
</section>
<section style={{ marginTop: "2rem" }}>
<h2>No Background Fill on Hover</h2>
<p>Hover over these chips to see that there's no background color change:</p>
<div className="flex gap-2">
<GoAFilterChip content="No Background 1" mr="s" />
<GoAFilterChip content="No Background 2" />
</div>
</section>
<section style={{ marginTop: "2rem" }}>
<h2>Multiple Filter Chips</h2>
<div className="flex flex-wrap gap-2">
<GoAFilterChip
content="Category 1"
deletable={true}
onClick={() => onFilterRemove("Category 1")}
mr="s"
/>
<GoAFilterChip
content="Category 2"
deletable={true}
onClick={() => onFilterRemove("Category 2")}
mr="s"
/>
<GoAFilterChip
content="Category 3"
deletable={true}
onClick={() => onFilterRemove("Category 3")}
/>
</div>
</section>
</div>
);
}
1） Figma File indicate the border color should be 666666 (--goa-color-greyscale-700). the actual boarder color 949494 (--goa-color-greyscale-500) 2） Figma File indicate the text line height should be 24, the actual line height is 28 3) Chip should be spaced 8px apart when stack together horizontally or vertically 4) For an delete able chip, when chip is highlighted, keypress on space and enter should able to delete this chip 5) The Figma File Indicate there should 8px before and 8px after the close icon, the actual is 4px before and 8px after the close icon 6) For Filter Chip, Leading Icon should not be allowed 7) Chip Base should have 3px padding top and 3px padding bottom 8) Text should have 2px padding top, currently it's 1.6 padding bottom 9) Question, as figma indicated, the min height should 32px, now give 1px border top, + 3px chip padding top + 2px text padding top + 24 px line height + 3px chip padding bottom + 1 px border bottom= 34px. which one is correct?
- Chip should be spaced 8px apart when stack together horizontally or vertically
- When Component is focused, the close icon should have hover state
- deletable="true" property should be default, and by the figma design, I think the close icon should always presented, not optional
@twjeffery Could you please confirm below? Is deletable property supposed to be true by default? Is the close icon always required or can we also have a basic chip without a close icon?
@twjeffery Could you please confirm below? Is deletable property supposed to be true by default? Is the close icon always required or can we also have a basic chip without a close icon?
For the "Filter Chip" specifically, deletable property should be true by default. Close icon is always required for the filter chip as well.
@twjeffery As discussed, I am going to remove the deletable prop and adjust the code to alwasy show close icon.
- Chip should be spaced 8px apart when stack together horizontally or vertically
- When Component is focused, the close icon should have hover state
- deletable="true" property should be default, and by the figma design, I think the close icon should always presented, not optional
@lizhuomeng71 I have fixed the 2 and 3.
@lizhuomeng71 @twjeffery For 1, I think that 8px spacing should not be part of the component. The user can always specify the 8px margin as needed, you can see that in the test code I provided.
:tada: This PR is included in version 1.17.0-alpha.120 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 5.0.0-alpha.12 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 3.0.0-alpha.9 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.29.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 3.2.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 5.4.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket: