From d609fa87b44509619ca7b8cf5839056b766db672 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 25 May 2023 10:47:44 -0400 Subject: [PATCH] reflect size; fixes #1348 --- docs/resources/changelog.md | 1 + src/components/color-picker/color-picker.ts | 2 +- src/components/select/select.ts | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 0eb4e0bd..0f1bc7af 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -11,6 +11,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added the `checkbox` part and related exported parts to `` so you can target it with CSS [#1318](https://github.com/shoelace-style/shoelace/discussions/1318) - Added the `submenu-icon` part to `` (submenus have not been implemented yet, but this part is required to allow customizations) - Fixed a bug where changing the size of `` wouldn't update the size of child elements +- Fixed a bug in `` and `` where the `size` attribute wasn't being reflected [#1318](https://github.com/shoelace-style/shoelace/issues/1348) - Improved `` so it can accept children of variable heights [#1317](https://github.com/shoelace-style/shoelace/pull/1317) - Improved the docs to more clearly explain sizing radios and radio buttons - Improved the performance of `` by partially rendering unseen icons [#1310](https://github.com/shoelace-style/shoelace/pull/1310) diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index aba32a2b..a527cabb 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -140,7 +140,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo @property({ type: Boolean, reflect: true }) inline = false; /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */ - @property() size: 'small' | 'medium' | 'large' = 'medium'; + @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; /** Removes the button that lets users toggle between format. */ @property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle = false; diff --git a/src/components/select/select.ts b/src/components/select/select.ts index dc172379..f51db5c4 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -108,7 +108,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon @defaultValue() defaultValue: string | string[] = ''; /** The select's size. */ - @property() size: 'small' | 'medium' | 'large' = 'medium'; + @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; /** Placeholder text to show as a hint when the select is empty. */ @property() placeholder = '';