From 0855f8dc79e07c71426bb28fe6545024ba450aba Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 14 Sep 2022 17:55:24 -0400 Subject: [PATCH] docs(button): update docs for properties to describe options better (#25940) --- core/src/components.d.ts | 16 ++++++++-------- core/src/components/button/button.tsx | 16 ++++++++++------ 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 9472e17678..75efd98dec 100644 --- 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 index 428038ab12..d131adb857 100644 --- 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';