diff --git a/docs/components/input.md b/docs/components/input.md index 0c132632f..6e5e3126c 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -262,4 +262,31 @@ const App = () => ( ); ``` +### Customizing Label Position + +Use parts to to customize the label's position. + +```html preview +
+ + + +``` + [component-metadata:sl-input] diff --git a/docs/components/select.md b/docs/components/select.md index 827dc81db..2796bb25a 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -36,6 +36,54 @@ const App = () => ( ## Examples +### Labels + +Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead. + +```html preview + + Option 1 + Option 2 + Option 3 + +``` + +```jsx react +import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + + Option 1 + Option 2 + Option 3 + +); +``` + +### Help Text + +Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. + +```html preview + + Novice + Intermediate + Advanced + +``` + +```jsx react +import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + + Novice + Intermediate + Advanced + +); +``` + ### Placeholders Use the `placeholder` attribute to add a placeholder. @@ -364,54 +412,6 @@ const App = () => ( ); ``` -### Labels - -Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead. - -```html preview - - Option 1 - Option 2 - Option 3 - -``` - -```jsx react -import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - - Option 1 - Option 2 - Option 3 - -); -``` - -### Help Text - -Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. - -```html preview - - Novice - Intermediate - Advanced - -``` - -```jsx react -import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - - Novice - Intermediate - Advanced - -); -``` - ### Placement The preferred placement of the select's menu can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport. Valid placements are `top` and `bottom`. diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 05d59314f..6d51f22d9 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -8,6 +8,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- 🚨 BREAKING: refactored parts in ``, ``, ``, and `` to allow you to customize the label and help text position + - Added `form-control-input` part + - Renamed `label` to `form-control-label` + - Renamed `help-text` to `form-control-help-text` - 🚨 BREAKING: removed status from the `sl-error` event payload in `` - Added the experimental `` component - Added `button-group` and `button-group__base` parts to `` diff --git a/src/components/button/button.ts b/src/components/button/button.ts index d98ce3dcd..1b84c2d1c 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { html, literal } from 'lit/static-html.js'; import '~/components/spinner/spinner'; import { emit } from '~/internal/event'; -import { FormSubmitController } from '~/internal/form-control'; +import { FormSubmitController } from '~/internal/form'; import { HasSlotController } from '~/internal/slot'; import styles from './button.styles'; diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index cfa151c07..1d49e384d 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { emit } from '~/internal/event'; -import { FormSubmitController } from '~/internal/form-control'; +import { FormSubmitController } from '~/internal/form'; import { watch } from '~/internal/watch'; import styles from './checkbox.styles'; diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 6a754bfdf..2fa047859 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -15,7 +15,7 @@ import type SlInput from '~/components/input/input'; import '~/components/visually-hidden/visually-hidden'; import { drag } from '~/internal/drag'; import { emit } from '~/internal/event'; -import { FormSubmitController } from '~/internal/form-control'; +import { FormSubmitController } from '~/internal/form'; import { clamp } from '~/internal/math'; import { watch } from '~/internal/watch'; import { LocalizeController } from '~/utilities/localize'; diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts index 216c2daef..53b8358eb 100644 --- a/src/components/input/input.test.ts +++ b/src/components/input/input.test.ts @@ -42,7 +42,7 @@ describe('', () => { it('should focus the input when clicking on the label', async () => { const el = await fixture(html` `); - const label = el.shadowRoot!.querySelector('[part="label"]')!; + const label = el.shadowRoot!.querySelector('[part="form-control-label"]')!; const submitHandler = sinon.spy(); el.addEventListener('sl-focus', submitHandler); diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 6170fd6c5..d3f23c164 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import '~/components/icon/icon'; import { emit } from '~/internal/event'; -import { FormSubmitController } from '~/internal/form-control'; +import { FormSubmitController } from '~/internal/form'; import { HasSlotController } from '~/internal/slot'; import { watch } from '~/internal/watch'; import styles from './input.styles'; @@ -30,15 +30,16 @@ import styles from './input.styles'; * @event sl-focus - Emitted when the control gains focus. * @event sl-blur - Emitted when the control loses focus. * - * @csspart base - The component's internal wrapper. * @csspart form-control - The form control that wraps the label, input, and help-text. - * @csspart label - The input label. + * @csspart form-control-label - The label's wrapper. + * @csspart form-control-input - The input's wrapper. + * @csspart form-control-help-text - The help text's wrapper. + * @csspart base - The component's internal wrapper. * @csspart input - The input control. * @csspart prefix - The input prefix container. * @csspart clear-button - The clear button. * @csspart password-toggle-button - The password toggle button. * @csspart suffix - The input suffix container. - * @csspart help-text - The input help text. */ @customElement('sl-input') export default class SlInput extends LitElement { @@ -293,11 +294,16 @@ export default class SlInput extends LitElement { 'form-control--has-help-text': hasHelpText })} > -