docs: consistent api description refs m thru s-comps (#8545)

**Related Issue:** #7071 ## Summary Updates doc consistency across m through s-named components defined in the above issue for props, events, methods, and css vars, including: - `meter` - Also includes some inconsistencies in the prop names - `modal` - `navigation-logo` - `navigation-user` - `navigation` - `notice` - `pick-list` - `popover` - `select` - `sheet` - `shell-panel` - `slider` - `split-button`
Esri · Jan 5, 2024 · 0f1aec2 · 0f1aec2
1 parent 40ba6f0
commit 0f1aec2
Show file tree

Hide file tree

Showing 14 changed files with 25 additions and 25 deletions.
diff --git a/packages/calcite-components/src/components/meter/meter.tsx b/packages/calcite-components/src/components/meter/meter.tsx
@@ -98,13 +98,13 @@ export class Meter implements FormComponent, LoadableComponent, LocalizedCompone
   /** When `true`, displays the values of `high`, `low`, `min`, and `max`. */
   @Prop({ reflect: true }) rangeLabels = false;
 
-  /** When either `rangeLabels` is `true`, specifies the format of displayed labels. */
+  /** When `rangeLabels` is `true`, specifies the format of displayed labels. */
   @Prop({ reflect: true }) rangeLabelType: MeterLabelType = "percent";
 
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values. */
+  /** When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values. */
   @Prop() unitLabel = "";
 
   /** Specifies the current value of the component. */
@@ -113,7 +113,7 @@ export class Meter implements FormComponent, LoadableComponent, LocalizedCompone
   /** When `true`, displays the current value. */
   @Prop({ reflect: true }) valueLabel = false;
 
-  /** When either `valueLabel` is `true`, specifies the format of displayed label. */
+  /** When `valueLabel` is `true`, specifies the format of displayed label. */
   @Prop({ reflect: true }) valueLabelType: MeterLabelType = "percent";
 
   @Watch("rangeLabels")

diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
@@ -5,11 +5,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-modal-content-background: Specifies the background color of content placed in the `content` slot.
- * @prop --calcite-modal-content-padding: Specifies the padding of the modal `content` slot.
- * @prop --calcite-modal-scrim-background: Specifies the background color of the modal scrim.
- * @prop --calcite-modal-width: Specifies a width of the modal, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set.
- * @prop --calcite-modal-height: Specifies a height of the modal, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set.
+ * @prop --calcite-modal-content-background: Specifies the background color of content placed in the component's `"content"` slot.
+ * @prop --calcite-modal-content-padding: Specifies the padding of the component's `"content"` slot.
+ * @prop --calcite-modal-scrim-background: Specifies the background color of the component's scrim.
+ * @prop --calcite-modal-width: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set.
+ * @prop --calcite-modal-height: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set.
  *
  */
 

diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
@@ -133,10 +133,10 @@ export class Modal
   /** Specifies the width of the component. */
   @Prop({ reflect: true }) widthScale: Scale = "m";
 
-  /** Sets the component to always be fullscreen (overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`). */
+  /** Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */
   @Prop({ reflect: true }) fullscreen: boolean;
 
-  /** Specifies the kind of the component (will apply to top border). */
+  /** Specifies the kind of the component, which will apply to top border. */
   @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
 
   /**

diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
@@ -21,7 +21,7 @@ export class CalciteNavigationLogo implements LoadableComponent {
   //
   //--------------------------------------------------------------------------
 
-  /** When true, the component is highlighted. */
+  /** When `true`, the component is highlighted. */
   @Prop({ reflect: true }) active: boolean;
 
   /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/

diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.tsx b/packages/calcite-components/src/components/navigation-user/navigation-user.tsx
@@ -21,7 +21,7 @@ export class CalciteNavigationUser implements LoadableComponent {
   //
   //--------------------------------------------------------------------------
 
-  /** When true, the component is highlighted.*/
+  /** When `true`, the component is highlighted.*/
   @Prop({ reflect: true }) active: boolean;
 
   /** Specifies the full name of the user.*/

diff --git a/packages/calcite-components/src/components/navigation/navigation.tsx b/packages/calcite-components/src/components/navigation/navigation.tsx
@@ -87,7 +87,7 @@ export class CalciteNavigation implements LoadableComponent {
   //
   // --------------------------------------------------------------------------
 
-  /** When `navigationAction` is true, emits when the displayed action selection changes.*/
+  /** When `navigationAction` is `true`, emits when the displayed action selection changes. */
   @Event({ cancelable: false }) calciteNavigationActionSelect: EventEmitter<void>;
 
   //--------------------------------------------------------------------------
@@ -96,7 +96,7 @@ export class CalciteNavigation implements LoadableComponent {
   //
   //--------------------------------------------------------------------------
 
-  /** When `navigation-action` is `true`, sets focus on the component's action element. */
+  /** When `navigationAction` is `true`, sets focus on the component's action element. */
   @Method()
   async setFocus(): Promise<void> {
     await componentFocusable(this);

diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx
@@ -79,7 +79,7 @@ export class Notice
     onToggleOpenCloseComponent(this);
   }
 
-  /** Specifies the kind of the component (will apply to top border and icon). */
+  /** Specifies the kind of the component, which will apply to top border and icon. */
   @Prop({ reflect: true }) kind: Extract<
     "brand" | "danger" | "info" | "success" | "warning",
     Kind

diff --git a/packages/calcite-components/src/components/pick-list/pick-list.tsx b/packages/calcite-components/src/components/pick-list/pick-list.tsx
@@ -76,14 +76,14 @@ export class PickList<
   @Prop({ reflect: true }) disabled = false;
 
   /**
-   * The currently filtered items.
+   * The component's filtered items.
    *
    * @readonly
    */
   @Prop({ mutable: true }) filteredItems: HTMLCalcitePickListItemElement[] = [];
 
   /**
-   * The currently filtered data.
+   * The component's filtered data.
    *
    * @readonly
    */

diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
@@ -94,7 +94,7 @@ export class Popover
    */
   @Prop({ reflect: true }) autoClose = false;
 
-  /** When `true`, display a close button within the component. */
+  /** When `true`, displays a close button within the component. */
   @Prop({ reflect: true }) closable = false;
 
   /**

diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-select-font-size: The font size of items in the component.
+ * @prop --calcite-select-font-size: The font size of `calcite-option`s in the component.
  * @prop --calcite-select-spacing: The padding around the selected option text.
  */
 

diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx
@@ -257,7 +257,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
   //--------------------------------------------------------------------------
 
   /**
-   * Sets focus on the component's "close" button (the first focusable item).
+   * Sets focus on the component's "close" button - the first focusable item.
    *
    */
   @Method()

diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -61,7 +61,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
   /**
    * When `true`, the content area displays like a floating panel.
    *
-   * @deprecated use `displayMode` instead.
+   * @deprecated Use `displayMode` instead.
    */
   @Prop({ reflect: true }) detached = false;
 
@@ -88,7 +88,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
   /**
    * When `displayMode` is `float`, specifies the maximum height of the component.
    *
-   * @deprecated use `heightScale` instead.
+   * @deprecated Use `heightScale` instead.
    */
   @Prop({ reflect: true }) detachedHeightScale: Scale;
 

diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
@@ -920,7 +920,7 @@ export class Slider
   /**
    * Fires on all updates to the component.
    *
-   * **Note:** Will be fired frequently during drag. If you are performing any
+   * Note: Fires frequently during drag. To perform
    * expensive operations consider using a debounce or throttle to avoid
    * locking up the main thread.
    */
@@ -929,7 +929,7 @@ export class Slider
   /**
    * Fires when the thumb is released on the component.
    *
-   * **Note:** If you need to constantly listen to the drag event,
+   * Note: To constantly listen to the drag event,
    * use `calciteSliderInput` instead.
    */
   @Event({ cancelable: false }) calciteSliderChange: EventEmitter<void>;

diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -50,7 +50,7 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
     Appearance
   > = "solid";
 
-  /** Specifies the kind of the component (will apply to border and background if applicable). */
+  /** Specifies the kind of the component, which will apply to border and background, if applicable. */
   @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind> =
     "brand";