From 975ac03c434117a4a3e5ee06e632a50bbfde3040 Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Fri, 5 Sep 2025 09:45:51 -0500 Subject: [PATCH 1/4] docs: boolean property context consistency --- .../src/components/carousel/carousel.tsx | 2 +- .../components/color-picker/color-picker.tsx | 24 ++++++++++--------- .../sortable-list/sortable-list.tsx | 4 ++-- .../src/components/tab-title/tab-title.tsx | 2 +- .../src/components/table/table.tsx | 2 +- 5 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index ab78315af9a..a97345cb53e 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -124,7 +124,7 @@ export class Carousel extends LitElement implements InteractiveComponent { /** Specifies how and if the "previous" and "next" arrows are displayed. */ @property({ reflect: true }) arrowType: ArrowType = "inline"; - /** When `true`, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. */ + /** When present, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. */ @property({ reflect: true }) autoplay: AutoplayType = false; /** When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item. */ diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index ff00e0f8144..4e9fb5f98df 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -251,6 +251,16 @@ export class ColorPicker extends LitElement implements InteractiveComponent { private focusSetter = useSetFocus()(this); + s; + + private get baseColorFieldColor(): ColorInstance { + return this.color || this.previousColor || DEFAULT_COLOR; + } + + private get effectiveSliderWidth(): number { + return this.dynamicDimensions.slider.width; + } + //#endregion //#region State Properties @@ -338,7 +348,7 @@ export class ColorPicker extends LitElement implements InteractiveComponent { /** Specifies the Unicode numeral system used by the component for localization. */ @property({ reflect: true }) numberingSystem: NumberingSystem; - /** When `true`, hides the saved colors section. */ + /** When present, hides the saved colors section. */ @property({ reflect: true }) savedDisabled = false; /** Specifies the size of the component. */ @@ -386,9 +396,9 @@ export class ColorPicker extends LitElement implements InteractiveComponent { }, options); } - // #endregion + //#endregion - // #region Events + //#region Events /** Fires when the color value has changed. */ calciteColorPickerChange = createEvent({ cancelable: false }); @@ -505,14 +515,6 @@ export class ColorPicker extends LitElement implements InteractiveComponent { //#region Private Methods - private get baseColorFieldColor(): ColorInstance { - return this.color || this.previousColor || DEFAULT_COLOR; - } - - private get effectiveSliderWidth(): number { - return this.dynamicDimensions.slider.width; - } - private observeResize(): void { this.resizeObserver?.observe(this.el); } diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx index dc4228c5b25..24f1334f78f 100644 --- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx +++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx @@ -59,7 +59,7 @@ export class SortableList extends LitElement implements InteractiveComponent, So /** When provided, the method will be called to determine whether the element can be added from another list. */ @property() canPut: (detail: DragDetail) => boolean; - /** When true, disabled prevents interaction. This state shows items with lower opacity/grayed. */ + /** When present, disabled prevents interaction. This state shows items with lower opacity/grayed. */ @property({ reflect: true }) disabled = false; /** Specifies which items inside the element should be draggable. */ @@ -79,7 +79,7 @@ export class SortableList extends LitElement implements InteractiveComponent, So @property({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "vertical"; - /** When true, content is waiting to be loaded. This state shows a busy indicator. */ + /** When present, content is waiting to be loaded. This state shows a busy indicator. */ @property({ reflect: true }) loading = false; // #endregion diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index 8b36a4a6b59..41ac441522e 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -128,7 +128,7 @@ export class TabTitle extends LitElement implements InteractiveComponent { @property() scale: Scale = "m"; /** - * When `true`, the component and its respective `calcite-tab` contents are selected. + * When present, the component and its respective `calcite-tab` contents are selected. * * Only one tab can be selected within the `calcite-tabs` parent. */ diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index ddbb12b77e7..661e772ff11 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -110,7 +110,7 @@ export class Table extends LitElement { /** Specifies the Unicode numeral system used by the component for localization. */ @property({ reflect: true }) numberingSystem?: NumberingSystem; - /** Specifies the page size of the component. When `true`, renders `calcite-pagination`. */ + /** Specifies the page size of the component. When present, renders `calcite-pagination`. */ @property({ reflect: true }) pageSize = 0; /** Specifies the size of the component. */ From e43da90f75a0bdda0879f7baec01601c575cf6f2 Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Fri, 5 Sep 2025 09:55:26 -0500 Subject: [PATCH 2/4] remove addition --- .../src/components/color-picker/color-picker.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 4e9fb5f98df..73f48435b38 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -251,16 +251,6 @@ export class ColorPicker extends LitElement implements InteractiveComponent { private focusSetter = useSetFocus()(this); - s; - - private get baseColorFieldColor(): ColorInstance { - return this.color || this.previousColor || DEFAULT_COLOR; - } - - private get effectiveSliderWidth(): number { - return this.dynamicDimensions.slider.width; - } - //#endregion //#region State Properties From 10d014b01718d4eb547fed03404926687a793197 Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Fri, 5 Sep 2025 10:01:05 -0500 Subject: [PATCH 3/4] reset file --- .../src/components/color-picker/color-picker.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 73f48435b38..02bba78663d 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -386,9 +386,9 @@ export class ColorPicker extends LitElement implements InteractiveComponent { }, options); } - //#endregion + // #endregion - //#region Events + // #region Events /** Fires when the color value has changed. */ calciteColorPickerChange = createEvent({ cancelable: false }); @@ -505,6 +505,14 @@ export class ColorPicker extends LitElement implements InteractiveComponent { //#region Private Methods + private get baseColorFieldColor(): ColorInstance { + return this.color || this.previousColor || DEFAULT_COLOR; + } + + private get effectiveSliderWidth(): number { + return this.dynamicDimensions.slider.width; + } + private observeResize(): void { this.resizeObserver?.observe(this.el); } From 9505e76e6cf887c693755d741e353bb3f0dad8de Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Fri, 5 Sep 2025 12:10:27 -0500 Subject: [PATCH 4/4] docs(carousel): update autoplayDuration description --- .../calcite-components/src/components/carousel/carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index a97345cb53e..0639c27f47c 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -127,7 +127,7 @@ export class Carousel extends LitElement implements InteractiveComponent { /** When present, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. */ @property({ reflect: true }) autoplay: AutoplayType = false; - /** When `autoplay` is `true`, specifies in milliseconds the length of time to display each Carousel Item. */ + /** When `autoplay` is present, specifies in milliseconds the length of time to display each Carousel Item. */ @property({ type: Number, reflect: true }) autoplayDuration = DURATION; /** When present, the component's controls are positioned absolutely on top of slotted Carousel Items. */