Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(SP:5) Create Chip component #2901

Merged
merged 12 commits into from
Dec 3, 2024
+857 −0
Merged

(SP:5) Create Chip component #2901

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
14c8e8e
feat: initial chip component implementation
sandrvvu Nov 26, 2024
a1ff4b2
fix: edit filter chip and refactor
sandrvvu Nov 27, 2024
b261d8b
fix: border values
sandrvvu Nov 27, 2024
ab5dae7
feat: add chip tests
sandrvvu Nov 27, 2024
071af7d
fix: remove unneeded margin
sandrvvu Nov 27, 2024
5295ce8
fix: some sonar issues
sandrvvu Nov 27, 2024
a3c2bcb
fix: rewrite with cn utils function
sandrvvu Nov 27, 2024
7468446
fix: change div to button
sandrvvu Nov 27, 2024
d982443
fix
sandrvvu Nov 27, 2024
b981e4c
fix: cleanup
sandrvvu Nov 28, 2024
deadd9c
fix: refactoring
sandrvvu Dec 2, 2024
50b9f1d
fix: state in child component
sandrvvu Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 182 additions & 0 deletions src/design-system/components/chip/Chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
@use '~/scss/utilities' as *;

.chip {
sandrvvu marked this conversation as resolved.
Show resolved Hide resolved
margin: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--#{$prefix}space-0-5) var(--#{$prefix}space-1);
border: none;
border-radius: var(--#{$prefix}border-radius-md);
font-family: var(--#{$prefix}font-family-rubik);
cursor: pointer;

&--sm {
font-size: var(--#{$prefix}font-size-sm);
line-height: var(--#{$prefix}line-height-sm);
}

&--md {
font-size: var(--#{$prefix}font-size-md);
line-height: var(--#{$prefix}line-height-md);
}

&--lg {
font-size: var(--#{$prefix}font-size-lg);
line-height: var(--#{$prefix}line-height-lg);
}

&.disabled {
opacity: 0.7;
cursor: not-allowed;
}

&--filter {
position: relative;

&.filled {
&.selected {
background-color: var(--#{$prefix}blue-gray-100);
}

&.unselected {
background-color: var(--#{$prefix}blue-gray-50);
}
}

&.minimal {
color: var(--#{$prefix}blue-gray-600);

&:hover {
color: var(--#{$prefix}blue-gray-800);
}

&.selected,
&.unselected {
background-color: var(--#{$prefix}neutral-0);
}
}

&.minimal,
&.filled {
&:hover {
box-shadow: var(--#{$prefix}box-shadow-xs);
}

&.disabled {
opacity: 1;
color: var(--#{$prefix}blue-gray-500);
}

&.selected {
color: var(--#{$prefix}blue-gray-800);

&:hover {
background-color: var(--#{$prefix}blue-gray-100);
}

&:active {
background-color: var(--#{$prefix}blue-gray-200);
transition: background-color 0.2s;
}
}

&.unselected {
&:hover {
background-color: var(--#{$prefix}blue-gray-50);
color: var(--#{$prefix}blue-gray-800);
}

&:active {
background-color: var(--#{$prefix}blue-gray-100);
transition: background-color 0.2s;
}
}
}

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: white;
sandrvvu marked this conversation as resolved.
Show resolved Hide resolved
border: var(--#{$prefix}border-width-xs) solid
var(--#{$prefix}blue-gray-300);
border-radius: var(--#{$prefix}space-1);
padding: var(--#{$prefix}space-1) 0;
list-style: none;
margin: 0;
width: 100%;
z-index: 10;
box-shadow: var(--#{$prefix}box-shadow-xs);

.dropdown-item {
padding: var(--#{$prefix}space-1) var(--#{$prefix}space-2);
cursor: pointer;
transition: background-color 0.2s;

&:hover {
background-color: var(--#{$prefix}blue-gray-100);
}
}
}
}

&--input {
font-weight: var(--#{$prefix}font-weight-medium);

&.outlined,
&.filled-outlined {
background-color: var(--#{$prefix}neutral-0);
color: var(--#{$prefix}blue-gray-800);
border: var(--#{$prefix}border-width-sm) solid
var(--#{$prefix}blue-gray-400);

&.disabled {
opacity: 1;
color: var(--#{$prefix}blue-gray-500);
border-color: var(--#{$prefix}blue-gray-200);
}
}

&.filled-outlined {
background-color: var(--#{$prefix}blue-gray-50);
}
}

&--categories {
display: inline-flex;
gap: var(--#{$prefix}space-0-5);
}

&--category,
&--state {
font-weight: var(--#{$prefix}font-weight-regular);
letter-spacing: var(--#{$prefix}letter-spacing-xl);
text-transform: uppercase;
background-color: var(--chip-bg-color);
color: var(--chip-text-color);
}

&--state {
border: var(--#{$prefix}border-width-sm) solid var(--chip-border-color);
}

.startIcon,
.endIcon {
display: flex;
align-items: center;
font-size: inherit;
}

.startIcon {
margin-right: var(--#{$prefix}space-1);
}

.endIcon {
margin-left: var(--#{$prefix}space-1);
}

.label {
padding: var(--#{$prefix}space-0-5);
}
}
Loading