fix: update chip styles and input handling for better usability#1041
Merged
Conversation
|
Great job, no security vulnerabilities found in this Pull Request |
lucasoares
force-pushed
the
fix/input-chips
branch
from
8fbd3a6 to
0b689f8
Compare
lucasoares
temporarily deployed
to
storybook-preview
GitHub Actions
Inactive
|
godrien
approved these changes
Jun 11, 2025
diogobarrel
approved these changes
Jun 11, 2025
lucasoares
temporarily deployed
to
storybook-preview
GitHub Actions
Inactive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request focuses on improving the design and functionality of the
chip-clickableandinput-chipscomponents. Key changes include adjustments to styling for better alignment and spacing, updates to prevent UI breaking issues, and improvements to the layout and behavior of chips within the input field.#Screenshots
Invalid scroll for chips with big texts
Before
After
Chips were floating outside their container
Before
After
Changes detail
Styling Updates for
chip-clickableComponent:height: 24px,border-radius: 12px) and padding for a more compact appearance. Also addedflex-shrink: 0to prevent chips from shrinking in flex layouts. (src/components/chip-clickable/chip-clickable.scss, src/components/chip-clickable/chip-clickable.scssL12-R20)&--textclass for text alignment and styling within chips, and updated dimensions for&--iconand&--closeclasses to ensure consistency. (src/components/chip-clickable/chip-clickable.scss, src/components/chip-clickable/chip-clickable.scssR88-R109)&--tallvariant for larger chips with updated dimensions and padding, and nested styles for text, icons, and close buttons. (src/components/chip-clickable/chip-clickable.scss, src/components/chip-clickable/chip-clickable.scssL114-L124)Layout and Functionality Improvements for
input-chipsComponent:&__wrapperto align items, add spacing (gap: 6px), and enforce no horizontal scrolling. Introducedword-break: break-wordto handle long text gracefully. (src/components/input-chips/input-chips.scss, src/components/input-chips/input-chips.scssL274-R280)&__textto80pxand added styling to prevent text overflow. (src/components/input-chips/input-chips.scss, src/components/input-chips/input-chips.scssL291-R299).inside-input-left,.input-chips__chip,.input-chips__chips) to simplify the codebase. (src/components/input-chips/input-chips.scss, src/components/input-chips/input-chips.scssL340-L356)Functional Enhancements for
input-chipsComponent:20to prevent excessive width and scrolling issues. (src/components/input-chips/input-chips.tsx, src/components/input-chips/input-chips.tsxL452-R453)maxHeightfor the container to avoid UI breaking when no height is explicitly set. (src/components/input-chips/input-chips.tsx, src/components/input-chips/input-chips.tsxR549-R551)src/components/input-chips/input-chips.tsx, src/components/input-chips/input-chips.tsxL567-R580)src/components/input-chips/input-chips.tsx, src/components/input-chips/input-chips.tsxL587-R591)