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

feat(combobox): limit display of selected items with new selection-display prop #7912

Merged
merged 83 commits into from
Nov 21, 2023
Merged

feat(combobox): limit display of selected items with new selection-display prop #7912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
83 commits
Select commit Hold shift + click to select a range
485f247
feat(combobox): first commit introducing displayMode prop to limit re…
eriklharper Sep 29, 2023
f11ed63
Got fit-to-line kinda working. Need to track visibly selected items,…
eriklharper Oct 3, 2023
ef2aef9
moving 2 new width measuring functions to dom util
eriklharper Oct 3, 2023
fa4ad1c
rendering the correct amount of invisible selected chips
eriklharper Oct 3, 2023
f0ad387
Merge branch 'main' of github.com:Esri/calcite-design-system into eri…
eriklharper Oct 4, 2023
313d355
better alpha position
eriklharper Oct 4, 2023
cf8b983
refactoring refreshDisplayMode to toggle rendering of indicator chip …
eriklharper Oct 4, 2023
f88b258
updating selected indicator chip on resize
eriklharper Oct 5, 2023
2189d0f
creating show and hide chip functions
eriklharper Oct 5, 2023
ee45cca
getting show-all display mode to work again
eriklharper Oct 5, 2023
b3369d8
displayMode="single" working alongside others
eriklharper Oct 5, 2023
ac519e0
functionally complete! Probably could use a refactor to set state in…
eriklharper Oct 6, 2023
2bc08ea
reverting background color on input
eriklharper Oct 6, 2023
a04a594
updating demo
eriklharper Oct 6, 2023
8223f8b
disabling chip's close animation from the combobox styles
eriklharper Oct 10, 2023
6962512
refactoring away from inline styles to adding css classes to toggle c…
eriklharper Oct 10, 2023
649f546
adding additional info about rest of displayMode prop options
eriklharper Oct 10, 2023
a928301
adding single-persist to doc comment
eriklharper Oct 10, 2023
50bee2e
Merge branch 'main' of github.com:Esri/calcite-design-system into eri…
eriklharper Oct 10, 2023
3580a8f
calling refreshDisplayMode in componentDidLoad
eriklharper Oct 12, 2023
4214b81
setting chip container div to relative positioning
eriklharper Oct 12, 2023
edc8445
checking presence of visible and invisible css classes instead of usi…
eriklharper Oct 13, 2023
9f43743
updating stories to add new display modes
eriklharper Oct 13, 2023
a01f3c0
handling case when placeholder text isn't supplied by providing a fal…
eriklharper Oct 13, 2023
213f149
DRYing up the chipEls selector results to filter out the indicator ch…
eriklharper Oct 13, 2023
8ed691b
Merge branch 'main' of github.com:Esri/calcite-design-system into eri…
eriklharper Oct 17, 2023
34852e2
Merge branch 'main' of github.com:Esri/calcite-design-system into eri…
eriklharper Oct 24, 2023
9a1ebc0
Merge branch 'main' of github.com:Esri/calcite-design-system into eri…
eriklharper Oct 24, 2023
985f599
refactor to use IntersectionObserver
eriklharper Oct 26, 2023
318dbfc
renaming inputContainer to chipContainer
eriklharper Oct 26, 2023
d4489e3
Revert "refactor to use IntersectionObserver"
eriklharper Oct 27, 2023
90de998
fixing display logic for the indicator chip in single, fit-to-line modes
eriklharper Oct 30, 2023
67fab9b
displaying chips in selection order for fit-to-line
eriklharper Oct 30, 2023
afd3e58
Merge branch 'main' of github.com:Esri/calcite-design-system into eri…
eriklharper Oct 30, 2023
1440f87
first start to fit-to-line compact mode with an IntersectionObserver …
eriklharper Nov 2, 2023
13f5afe
fine tuning the calculation for available horizontal space by taking …
eriklharper Nov 3, 2023
7a97281
removed IntersectionObserver on textInput, moved indicator chip label…
eriklharper Nov 6, 2023
218c1f3
Only include indicator chip width in calculation if its actually visible
eriklharper Nov 6, 2023
c8583b3
Just measure placeholder text in input width calculation
eriklharper Nov 7, 2023
e3301c9
wip: this is an attempt to render all the indicator chips so we can s…
eriklharper Nov 9, 2023
61105a0
got the rendering logic working for each indicator chip, but we still…
eriklharper Nov 10, 2023
9530fa9
Merge branch 'main' of github.com:Esri/calcite-design-system into eri…
eriklharper Nov 14, 2023
a9e772c
got rid of the flashing!
eriklharper Nov 15, 2023
bd50d39
removing some unused refs, fixing display logic for selected indicato…
eriklharper Nov 16, 2023
0c54dbd
moving all the spacing vars we need for single out of the fit-to-line…
eriklharper Nov 16, 2023
fd8c118
getting single display mode working right for both compact and non-co…
eriklharper Nov 16, 2023
9d3d331
fixing chip display for when no items are selected
eriklharper Nov 16, 2023
4239a18
placeholder ellipses!
eriklharper Nov 16, 2023
b4829ae
Merge branch 'main' of github.com:Esri/calcite-design-system into eri…
eriklharper Nov 16, 2023
a31492b
removing unused branch
eriklharper Nov 16, 2023
21b0b97
applying ellipses with tailwind
eriklharper Nov 17, 2023
b7706da
applying text-ellipsis to input and alpha sorting tailwind apply rules
eriklharper Nov 17, 2023
c89286a
adding all new display mode variants to a single story for chromatic …
eriklharper Nov 17, 2023
b7a4fdb
Merge branch 'eriklharper/4326-combobox-display-mode' of github.com:E…
eriklharper Nov 17, 2023
e5487d4
Merge branch 'main' into eriklharper/4326-combobox-display-mode
eriklharper Nov 17, 2023
7c223e0
renaming simple story to single
eriklharper Nov 17, 2023
6bf7420
syncing messages_en
eriklharper Nov 17, 2023
6ef3b32
moving DisplayMode type to interfaces file
eriklharper Nov 17, 2023
4da1c7d
reflecting display-mode
eriklharper Nov 17, 2023
4752caa
privatizing resizeObserver
eriklharper Nov 17, 2023
10122ca
alpha sorting private props/state
eriklharper Nov 17, 2023
2eeeab3
moving 2 private vars to private section
eriklharper Nov 17, 2023
cb13ecc
removing unnecessary var assignment
eriklharper Nov 17, 2023
cca51b7
using pre-declared variables where necessary
eriklharper Nov 17, 2023
04edfc3
using property access for closable instead of attribute
eriklharper Nov 17, 2023
44de454
removing allselected messages fallback
eriklharper Nov 17, 2023
7f99abb
adding translation string message for selected
eriklharper Nov 17, 2023
ff6d6f2
returning 0 when no element is referenced in both width util funcs
eriklharper Nov 17, 2023
99df189
simplifying getElementWidth logic
eriklharper Nov 17, 2023
300475e
removing rounding for getTextWidth result
eriklharper Nov 17, 2023
22a42e8
converting isAllSelected to a class function
eriklharper Nov 17, 2023
ec03bc7
extracting a few long lines of logic from refreshDisplayMode into the…
eriklharper Nov 18, 2023
2d20e4e
refactoring refreshChipDisplay to return early
eriklharper Nov 18, 2023
fbacc27
grouping related render calls
eriklharper Nov 18, 2023
a3d69c5
using coresizing15 design token for the min input width
eriklharper Nov 18, 2023
f078692
fixing the spacing between placeholder-icon and text input based on t…
eriklharper Nov 20, 2023
f7b0a2f
renaming fit-to-line to auto
eriklharper Nov 20, 2023
13ba52b
renaming show-all to all
eriklharper Nov 20, 2023
56b5946
Merge branch 'main' into eriklharper/4326-combobox-display-mode
eriklharper Nov 20, 2023
dcc00fc
renaming display-mode to selection-display and "auto" to "fit"
eriklharper Nov 21, 2023
2e87912
Merge branch 'main' into eriklharper/4326-combobox-display-mode
eriklharper Nov 21, 2023
7f511ab
updating prop docs per kitty's update [skip-ci]
eriklharper Nov 21, 2023
f654003
Merge branch 'main' into eriklharper/4326-combobox-display-mode
eriklharper Nov 21, 2023
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
5 changes: 4 additions & 1 deletion packages/calcite-components/src/components/combobox/assets/combobox/t9n/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sidebar: @anveshmekala These look like candidates for the common bundle.

"all": "All",
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
"allSelected": "All selected",
"clear": "Clear value",
"removeTag": "Remove tag"
"removeTag": "Remove tag",
"selected": "selected"
}
5 changes: 4 additions & 1 deletion packages/calcite-components/src/components/combobox/assets/combobox/t9n/messages_en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
{
"all": "All",
"allSelected": "All selected",
"clear": "Clear value",
"removeTag": "Remove tag"
"removeTag": "Remove tag",
"selected": "selected"
}
43 changes: 34 additions & 9 deletions packages/calcite-components/src/components/combobox/combobox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
--calcite-internal-combobox-input-margin-block: calc(theme("spacing.1") - theme("borderWidth.DEFAULT"));

.x-button {
margin-inline-end: theme("spacing.2");
margin-inline: theme("spacing.2");
}
}

Expand Down Expand Up @@ -77,26 +77,39 @@
flex-grow
flex-wrap
items-center
relative
truncate
p-0;

gap: var(--calcite-combobox-item-spacing-unit-s);

&.selection-display-fit,
&.selection-display-single {
@apply flex-nowrap overflow-hidden;
}
}

.input {
@apply font-inherit
text-color-1
flex-grow
appearance-none
border-none
@apply appearance-none
bg-transparent
border-none
flex-grow
font-inherit
text-color-1
text-ellipsis
p-0;
font-size: inherit;
block-size: var(--calcite-combobox-input-height);
line-height: var(--calcite-combobox-input-height);
min-inline-size: 120px;
inline-size: 100%;
margin-block-end: var(--calcite-combobox-item-spacing-unit-s);
min-inline-size: 4.8125rem;
&:focus {
@apply outline-none;
}
&:placeholder-shown {
@apply text-ellipsis;
}
}

.input--transparent {
Expand All @@ -121,7 +134,12 @@

.input--icon {
padding-block: 0;
padding-inline: var(--calcite-combobox-item-spacing-unit-l);
padding-inline: var(--calcite-combobox-item-spacing-unit-s);
}

:host([scale="m"]) .input--icon,
:host([scale="l"]) .input--icon {
padding-inline: 0.25rem;
}

.input-wrap {
Expand Down Expand Up @@ -195,16 +213,23 @@
@apply h-0 overflow-hidden;
}

calcite-chip {
--calcite-animation-timing: 0;
}

.chip {
margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
margin-inline: 0 var(--calcite-combobox-item-spacing-unit-s);
max-inline-size: 100%;
}

.chip--active {
@apply bg-foreground-3;
}

.chip--invisible {
@apply absolute invisible;
}

.item {
@apply block;
}
Expand Down
Loading
Loading