diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md index 33f1b7586..e2bcbd745 100644 --- a/docs/getting-started/changelog.md +++ b/docs/getting-started/changelog.md @@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Fixed a bug in `sl-select` where removing a tag would toggle the dropdown - Updated `sl-menu-item` focus styles +- Updated `sl-select` so tags will wrap when `multiple` is true ## 2.0.0-beta.26 diff --git a/src/components/select/select.scss b/src/components/select/select.scss index 4c1cc435b..b860c46ea 100644 --- a/src/components/select/select.scss +++ b/src/components/select/select.scss @@ -102,7 +102,8 @@ .select__tags { display: inline-flex; align-items: center; - justify-content: center; + flex-wrap: wrap; + justify-content: left; margin-left: var(--sl-spacing-xx-small); } @@ -124,7 +125,7 @@ .select__box { border-radius: var(--sl-input-border-radius-small); font-size: var(--sl-input-font-size-small); - height: var(--sl-input-height-small); + min-height: var(--sl-input-height-small); } .select__label { @@ -140,6 +141,12 @@ } .select__tags { + padding-bottom: 2px; + + sl-tag { + padding-top: 2px; + } + sl-tag:not(:last-of-type) { margin-right: var(--sl-spacing-xx-small); } @@ -154,7 +161,7 @@ .select__box { border-radius: var(--sl-input-border-radius-medium); font-size: var(--sl-input-font-size-medium); - height: var(--sl-input-height-medium); + min-height: var(--sl-input-height-medium); } .select__label { @@ -170,6 +177,12 @@ } .select__tags { + padding-bottom: 3px; + + sl-tag { + padding-top: 3px; + } + sl-tag:not(:last-of-type) { margin-right: var(--sl-spacing-xx-small); } @@ -184,7 +197,7 @@ .select__box { border-radius: var(--sl-input-border-radius-large); font-size: var(--sl-input-font-size-large); - height: var(--sl-input-height-large); + min-height: var(--sl-input-height-large); } .select__label { @@ -200,6 +213,12 @@ } .select__tags { + padding-bottom: 4px; + + sl-tag { + padding-top: 4px; + } + sl-tag:not(:last-of-type) { margin-right: var(--sl-spacing-xx-small); }