Skip to content

Commit

Permalink
Merge pull request #12843 from primefaces/issue-12842
Browse files Browse the repository at this point in the history 
Fix: #12842 MultiSelect | Add gap and text ellipsis to multiselect-chip
  • Loading branch information
@cetincakiroglu
cetincakiroglu authored Apr 3, 2023
2 parents c2e8dba + b2a8fe8 commit 0876253
Show file tree
Hide file tree
Showing 49 changed files with 731 additions and 878 deletions.
4 changes: 0 additions & 4 deletions src/app/components/multiselect/multiselect.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,6 @@
text-overflow: ellipsis;
}

.p-multiselect-chip .p-multiselect-label {
display: flex;
}

.p-multiselect-label-empty {
overflow: hidden;
visibility: hidden;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/arya-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
background: rgba(100, 181, 246, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/arya-green/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
background: rgba(129, 199, 132, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/arya-orange/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
background: rgba(255, 213, 79, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/arya-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
background: rgba(186, 104, 200, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 3px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/bootstrap4-dark-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1346,14 +1346,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
background: #8dd0ff;
color: #151515;
border-radius: 4px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/bootstrap4-dark-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1346,14 +1346,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
background: #c298d8;
color: #151515;
border-radius: 4px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/bootstrap4-light-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1346,14 +1346,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
background: #007bff;
color: #ffffff;
border-radius: 4px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/bootstrap4-light-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1346,14 +1346,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.75rem;
background: #883cae;
color: #ffffff;
border-radius: 4px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/fluent-light/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: #605e5c;
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.25rem 0.5rem;
background: #edebe9;
color: #323130;
border-radius: 2px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/lara-dark-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
background: rgba(147, 197, 253, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 6px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/lara-dark-indigo/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
background: rgba(165, 180, 252, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 6px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/lara-dark-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
background: rgba(196, 181, 253, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 6px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/components/themes/lara-dark-teal/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
background: rgba(94, 234, 212, 0.16);
color: rgba(255, 255, 255, 0.87);
border-radius: 6px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down
18 changes: 8 additions & 10 deletions src/assets/components/themes/lara-light-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
background: #EFF6FF;
color: #1D4ED8;
border-radius: 6px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down Expand Up @@ -6270,25 +6268,25 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
}

.p-button:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-secondary:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-success:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-info:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-warning:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-help:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-danger:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
}

.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
Expand Down
18 changes: 8 additions & 10 deletions src/assets/components/themes/lara-light-indigo/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
background: #EEF2FF;
color: #4338CA;
border-radius: 6px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down Expand Up @@ -6270,25 +6268,25 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
}

.p-button:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-secondary:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-success:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-info:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-warning:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-help:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-danger:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
}

.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
Expand Down
18 changes: 8 additions & 10 deletions src/assets/components/themes/lara-light-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1342,14 +1342,12 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
.p-multiselect .p-multiselect-label.p-placeholder {
color: #6c757d;
}
.p-multiselect.p-multiselect-chip .p-multiselect-label {
gap: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
background: #F5F3FF;
color: #6D28D9;
border-radius: 6px;
margin-right: 0.5rem;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
margin-left: 0.5rem;
Expand Down Expand Up @@ -6270,25 +6268,25 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
}

.p-button:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-secondary:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-success:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-info:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-warning:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-help:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-danger:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
}

.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
Expand Down
Loading

1 comment on commit 0876253

@vercel
Copy link

@vercel vercel bot commented on 0876253 Apr 3, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test-primeng-test.vercel.app
primeng-ssr-test-git-master-primeng-test.vercel.app
primeng-ssr-test.vercel.app

Please sign in to comment.