docs(button): update docs for properties to describe options better (#…

…25940)
ionic-team · Sep 14, 2022 · 0855f8d · 0855f8d
1 parent 5f1346e
commit 0855f8d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -372,11 +372,11 @@ export namespace Components {
          */
         "download": string | undefined;
         /**
-          * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
+          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -400,11 +400,11 @@ export namespace Components {
          */
         "routerDirection": RouterDirection;
         /**
-          * The button shape.
+          * Set to `"round"` for a button with more rounded corners.
          */
         "shape"?: 'round';
         /**
-          * The button size.
+          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
         "size"?: 'small' | 'default' | 'large';
         /**
@@ -4332,11 +4332,11 @@ declare namespace LocalJSX {
          */
         "download"?: string | undefined;
         /**
-          * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
+          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -4368,11 +4368,11 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * The button shape.
+          * Set to `"round"` for a button with more rounded corners.
          */
         "shape"?: 'round';
         /**
-          * The button size.
+          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
         "size"?: 'small' | 'default' | 'large';
         /**

diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
@@ -53,14 +53,14 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
   /**
    * Set to `"block"` for a full-width button or to `"full"` for a full-width button
-   * without left and right borders.
+   * with square corners and no left or right borders.
    */
   @Prop({ reflect: true }) expand?: 'full' | 'block';
 
   /**
-   * Set to `"clear"` for a transparent button, to `"outline"` for a transparent
-   * button with a border, or to `"solid"`. The default style is `"solid"` except inside of
-   * a toolbar, where the default is `"clear"`.
+   * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
+   * for a transparent button with a border, or to `"solid"` for a button with a filled background.
+   * The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
    */
   @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
 
@@ -97,12 +97,16 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   @Prop() rel: string | undefined;
 
   /**
-   * The button shape.
+   * Set to `"round"` for a button with more rounded corners.
    */
   @Prop({ reflect: true }) shape?: 'round';
 
   /**
-   * The button size.
+   * Set to `"small"` for a button with less height and padding, to `"default"`
+   * for a button with the default height and padding, or to `"large"` for a button
+   * with more height and padding. By default the size is unset, unless the button
+   * is inside of an item, where the size is `"small"` by default. Set the size to
+   * `"default"` inside of an item to make it a standard size button.
    */
   @Prop({ reflect: true }) size?: 'small' | 'default' | 'large';