- BsColorPicker: refactor 'outlineModeButton' props to 'modeButtonOutlined'

- Update typescript comments

Author: ahmadfajar

CHANGELOG.md

@@ -22,7 +22,7 @@ Released: December 03, 2024
 - **BsAlert**, **BsChip**, **BsChipGroup**:
   - Improve `icon` property to better accommodate **Google Material Symbols**. 
   - Improve `icon-variant` property to better accommodate **Google Material Symbols**.
-  - Change property of `icon-variant` default value to `outlined`.
+  - Change the default value of the `icon-variant` property to `outlined`.
 - **BsAvatar**, **BsTab**, **BsListTileLeading**, **BsListNavItem**, **BsButton**, **BsToggleButton**, **BsToggleField**:
   - Add new property `icon-variant` to better accommodate **Google Material Symbols**.
   - Improve `icon` property to better accommodate **Google Material Symbols**.

src/components/Avatar/types/index.d.ts

@@ -35,23 +35,23 @@ export declare type TImageProps = {
 
 export declare type TIconProps = {
     /**
-     * Android icon name, either with or without suffix. Valid suffixes are:
+     * A shortcut to insert component `BsIcon` inside this component.
+     *
+     * Use android icon name with or without suffix. Valid suffixes are:
      * `_outlined`, `_rounded`, `_sharp`, `_filled`, `_outlined_filled`,
      * `_rounded_filled`, or `_sharp_filled`. Suffix `_filled` and `_outlined_filled`
-     * will result the same icon style. Suffix will take priority over
+     * will result the same icon style variant. Suffix will take priority over
      * `iconVariant` property.
      *
-     * This is a shortcut to insert component `BsIcon` inside this component.
-     *
      * @see [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.
      */
     icon?: string;
     /**
-     * Use predefined icon style, valid values are: `outlined`, `rounded`, `sharp`,
-     * `filled`, `outlined_filled`, `rounded_filled`, and `sharp_filled`. Default
-     * is `outlined`.
+     * Use predefined icon style variant, valid values are: `outlined`, `rounded`,
+     * `sharp`, `filled`, `outlined_filled`, `rounded_filled`, and `sharp_filled`.
+     * Default is `outlined`.
      *
-     * Variant `filled` and `outlined_filled` will result the same icon style.
+     * Variant `filled` and `outlined_filled` will result the same icon style variant.
      *
      * @see [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.
      */

src/components/ColorPicker/mixins/colorPickerApi.ts

@@ -421,7 +421,7 @@ function onUpdateInputNumber(
     updateColorPreview(pickerData, emit);
 }
 
-function renderInputColorHSL(
+function createInputColorHSL(
     props: Readonly<TColorPickerOptionProps>,
     pickerData: TColorPickerData,
     cssNamePrefix: string,
@@ -453,7 +453,7 @@ function renderInputColorHSL(
     );
 }
 
-function renderInputColorRGB(
+function createInputColorRGB(
     props: Readonly<TColorPickerOptionProps>,
     pickerData: TColorPickerData,
     cssNamePrefix: string,
@@ -485,7 +485,7 @@ function renderInputColorRGB(
     );
 }
 
-function renderInputColorHEX(
+function createInputColorHEX(
     props: Readonly<TColorPickerOptionProps>,
     pickerData: TColorPickerData,
     cssNamePrefix: string,
@@ -561,10 +561,10 @@ function renderColorPickerInputs(
         },
         [
             pickerData.config.mode === 'HSL'
-                ? renderInputColorHSL(props, pickerData, cssNamePrefix, inputIDs, emit)
+                ? createInputColorHSL(props, pickerData, cssNamePrefix, inputIDs, emit)
                 : pickerData.config.mode === 'RGB'
-                  ? renderInputColorRGB(props, pickerData, cssNamePrefix, inputIDs, emit)
-                  : renderInputColorHEX(props, pickerData, cssNamePrefix, inputIDs, emit),
+                  ? createInputColorRGB(props, pickerData, cssNamePrefix, inputIDs, emit)
+                  : createInputColorHEX(props, pickerData, cssNamePrefix, inputIDs, emit),
         ]
     );
 }
@@ -589,7 +589,7 @@ function renderColorPickerModeButtons(
                 color: props.modeButtonColor as Prop<string>,
                 toggleColor: props.modeButtonToggleColor as Prop<string>,
                 // @ts-ignore
-                outlined: props.outlineModeButton as Prop<boolean>,
+                outlined: props.modeButtonOutlined as Prop<boolean>,
                 items: [
                     { value: 'HEX', label: 'HEX' },
                     { value: 'RGB', label: 'RGB' },

src/components/ColorPicker/mixins/colorPickerProps.ts

@@ -23,7 +23,7 @@ export const colorPickerProps = {
     hideAlpha: booleanProp,
     hideInputs: booleanProp,
     hideModeButton: booleanProp,
-    outlineModeButton: booleanProp,
+    modeButtonOutlined: booleanProp,
     modeButtonColor: {
         type: String,
         default: 'grey',

src/components/ColorPicker/types/index.d.ts

@@ -75,13 +75,13 @@ export declare type TColorPickerOptionProps = {
     /**
      * Render the toggle mode buttons with outlined style.
      */
-    outlineModeButton?: boolean;
+    modeButtonOutlined?: boolean;
     /**
      * Default the toggle mode button color style.
      */
     modeButtonColor?: string;
     /**
-     * Color to apply to the active button.
+     * Color to apply to the active toggle mode button.
      */
     modeButtonToggleColor?: string;
     /**

src/components/Field/types/index.d.ts

@@ -62,12 +62,11 @@ export declare type TInputFieldProps = TInputBaseProps &
         /**
          * Sets the action icon style variant.
          *
-         * Valid predefined icon style are: `outlined`, `rounded`, `sharp`,
+         * Valid predefined icon variants are: `outlined`, `rounded`, `sharp`,
          * `filled`, `outlined_filled`, `rounded_filled`, and `sharp_filled`.
          * Default is `outlined`.
          *
-         * Variant `filled` and `outlined_filled` will
-         * result the same icon style.
+         * Variant `filled` and `outlined_filled` will result the same icon style variant.
          *
          * @see [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.
          */
@@ -107,9 +106,11 @@ export declare type TInputFieldProps = TInputBaseProps &
          * Sets icon to display on inner right side. This is a shortcut to insert
          * component `BsIcon` inside this component.
          *
-         * Use android icon name with suffix: `_outlined`, `_rounded`, `_sharp`,
-         * `_filled`, `_outlined_filled`, `_rounded_filled`, or `_sharp_filled`.
-         * Suffix `_filled` and `_outlined_filled` will result the same icon style.
+         * Use android icon name with or without suffix. Valid suffixes are:
+         * `_outlined`, `_rounded`, `_sharp`, `_filled`, `_outlined_filled`,
+         * `_rounded_filled`, or `_sharp_filled`. If no suffix is given, then
+         * default (`outlined`) icon variant will be used. Suffix `_filled`
+         * and `_outlined_filled` will result the same icon style variant.
          *
          * @see [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.
          */
@@ -118,9 +119,11 @@ export declare type TInputFieldProps = TInputBaseProps &
          * Sets icon to display on outer right side. This is a shortcut to insert
          * component `BsIcon` inside this component.
          *
-         * Use android icon name with suffix: `_outlined`, `_rounded`, `_sharp`,
-         * `_filled`, `_outlined_filled`, `_rounded_filled`, or `_sharp_filled`.
-         * Suffix `_filled` and `_outlined_filled` will result the same icon style.
+         * Use android icon name with or without suffix. Valid suffixes are:
+         * `_outlined`, `_rounded`, `_sharp`, `_filled`, `_outlined_filled`,
+         * `_rounded_filled`, or `_sharp_filled`. If no suffix is given, then
+         * default (`outlined`) icon variant will be used. Suffix `_filled`
+         * and `_outlined_filled` will result the same icon style variant.
          *
          * @see [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.
          */
@@ -129,9 +132,11 @@ export declare type TInputFieldProps = TInputBaseProps &
          * Sets icon to display on inner left side. This is a shortcut to insert
          * component `BsIcon` inside this component.
          *
-         * Use android icon name with suffix: `_outlined`, `_rounded`, `_sharp`,
-         * `_filled`, `_outlined_filled`, `_rounded_filled`, or `_sharp_filled`.
-         * Suffix `_filled` and `_outlined_filled` will result the same icon style.
+         * Use android icon name with or without suffix. Valid suffixes are:
+         * `_outlined`, `_rounded`, `_sharp`, `_filled`, `_outlined_filled`,
+         * `_rounded_filled`, or `_sharp_filled`. If no suffix is given, then
+         * default (`outlined`) icon variant will be used. Suffix `_filled`
+         * and `_outlined_filled` will result the same icon style variant.
          *
          * @see [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.
          */
@@ -140,9 +145,11 @@ export declare type TInputFieldProps = TInputBaseProps &
          * Sets icon to display on outer left side. This is a shortcut to insert
          * component `BsIcon` inside this component.
          *
-         * Use android icon name with suffix: `_outlined`, `_rounded`, `_sharp`,
-         * `_filled`, `_outlined_filled`, `_rounded_filled`, or `_sharp_filled`.
-         * Suffix `_filled` and `_outlined_filled` will result the same icon style.
+         * Use android icon name with or without suffix. Valid suffixes are:
+         * `_outlined`, `_rounded`, `_sharp`, `_filled`, `_outlined_filled`,
+         * `_rounded_filled`, or `_sharp_filled`. If no suffix is given, then
+         * default (`outlined`) icon variant will be used. Suffix `_filled`
+         * and `_outlined_filled` will result the same icon style variant.
          *
          * @see [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.
          */

src/components/Icon/types/index.d.ts

@@ -61,10 +61,12 @@ export declare type TSizeOptionProps = {
 
 export declare type TIconOptionProps = TSizeOptionProps & {
     /**
-     * Android icon name with suffix: `_outlined`, `_rounded`, `_sharp`, `_filled`,
-     * `_outlined_filled`, `_rounded_filled`, or `_sharp_filled`.
+     * Android icon name with or without suffix. Valid suffixes are: `_outlined` ,
+     * `_rounded`, `_sharp`, `_filled`, `_outlined_filled`, `_rounded_filled`,
+     * or `_sharp_filled`. If no suffix is given, then default (`outlined`) icon
+     * variant will be used.
      *
-     * Suffix `_filled` and `_outlined_filled` will result the same icon style.
+     * Suffix `_filled` and `_outlined_filled` will result the same icon style variant.
      * And you can either use `*_filled` or sets property `filled` to `true` to
      * create an icon with fill style.
      *
@@ -116,11 +118,13 @@ export declare type TToggleIconOptionProps = {
     /**
      * The icon to display when `modelValue` property is `false` or `undefined`.
      *
-     * Use android icon name with suffix: `_outlined`, `_rounded`, `_sharp`,
-     * `_filled`, `_outlined_filled`, `_rounded_filled`, or `_sharp_filled`.
+     * Use android icon name with or without suffix. Valid suffixes are: `_outlined`,
+     * `_rounded`, `_sharp`, `_filled`, `_outlined_filled`, `_rounded_filled`, or
+     * `_sharp_filled`. If no suffix is given, then default (`outlined`) icon
+     * variant will be used.
      *
-     * Suffix `_filled` or `_outlined_filled` will result the same icon style.
-     * And you can either use `*_filled` or sets property `filled` to `true` to
+     * Suffix `_filled` or `_outlined_filled` will result the same icon style variant.
+     * And you can either use `*_filled` or sets the `filled` property to `true` to
      * create an icon with fill style.
      *
      * @see  [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.
@@ -129,11 +133,13 @@ export declare type TToggleIconOptionProps = {
     /**
      * The icon to display when `modelValue` property is `true`.
      *
-     * Use android icon name with suffix: `_outlined`, `_rounded`, `_sharp`,
-     * `_filled`, `_outlined_filled`, `_rounded_filled`, or `_sharp_filled`.
+     * Use android icon name with or without suffix. Valid suffixes are: `_outlined`,
+     * `_rounded`, `_sharp`, `_filled`, `_outlined_filled`, `_rounded_filled`, or
+     * `_sharp_filled`. If no suffix is given, then default (`outlined`) icon
+     * variant will be used.
      *
-     * Suffix `_filled` or `_outlined_filled` will result the same icon style.
-     * And you can either use `*_filled` or sets property `filled` to `true` to
+     * Suffix `_filled` or `_outlined_filled` will result the same icon style variant.
+     * And you can either use `*_filled` or sets the `filled` property to `true` to
      * create an icon with fill style.
      *
      * @see  [Google Material Symbol](https://fonts.google.com/icons?icon.set=Material+Symbols) for details.