js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Select component: add a suffix to .form-control-input

Browse Source
This commit is contained in:
Nic Newdigate
2024-06-11 16:55:32 +01:00
parent 6092796850
commit dbd4ba835b
3 changed files with 40 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/pages/components/select.md
View File

@@ -422,6 +422,33 @@ Use the `prefix` slot to prepend an icon to the control.
</sl-select>
```
### Suffix Icons
Use the `suffix` slot to append an icon to the control.
```html:preview
<sl-select placeholder="Small" size="small" clearable>
<sl-icon name="house" slot="suffix"></sl-icon>
<sl-option value="option-1">Option 1</sl-option>
<sl-option value="option-2">Option 2</sl-option>
<sl-option value="option-3">Option 3</sl-option>
</sl-select>
<br />
<sl-select placeholder="Medium" size="medium" clearable>
<sl-icon name="house" slot="suffix"></sl-icon>
<sl-option value="option-1">Option 1</sl-option>
<sl-option value="option-2">Option 2</sl-option>
<sl-option value="option-3">Option 3</sl-option>
</sl-select>
<br />
<sl-select placeholder="Large" size="large" clearable>
<sl-icon name="house" slot="suffix"></sl-icon>
<sl-option value="option-1">Option 1</sl-option>
<sl-option value="option-2">Option 2</sl-option>
<sl-option value="option-3">Option 3</sl-option>
</sl-select>
```
```jsx:react
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
import SlOption from '@shoelace-style/shoelace/dist/react/option';

6
src/components/select/select.component.ts
View File

@@ -36,6 +36,7 @@ import type SlOption from '../option/option.component.js';
* @slot - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
* @slot clear-icon - An icon to use in lieu of the default clear icon.
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -55,8 +56,9 @@ import type SlOption from '../option/option.component.js';
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The select's wrapper.
* @csspart form-control-help-text - The help text's wrapper.
* @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
* @csspart prefix - The container that wraps the prefix slot.
* @csspart suffix - The container that wraps the suffix slot.
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
* @csspart listbox - The listbox container where options are slotted.
* @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -862,6 +864,8 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
`
: ''}
<slot name="suffix" part="suffix" class="select__suffix"></slot>
<slot name="expand-icon" part="expand-icon" class="select__expand-icon">
<sl-icon library="system" name="chevron-down"></sl-icon>
</slot>

8
src/components/select/select.styles.ts
View File

@@ -256,6 +256,14 @@ export default css`
color: var(--sl-input-placeholder-color);
}
/* Suffix */
.select__suffix {
flex: 0;
display: inline-flex;
align-items: center;
color: var(--sl-input-placeholder-color);
}
/* Clear button */
.select__clear {
display: inline-flex;