javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): default shape and add support for other themes

Browse Source
This commit is contained in:
Brandy Carney
2024-04-12 10:20:56 -04:00
parent 940e96d41f
commit 33a7186575
8 changed files with 101 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components.d.ts vendored
View File

@@ -543,9 +543,9 @@ export namespace Components {
*/
"routerDirection": RouterDirection;
/**
* Set to `"round"` for a button with more rounded corners.
* Set to `"soft"` for a button with soft rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular" for a button without rounded corners. Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
*/
"shape"?: 'round' | 'rectangular';
"shape"?: 'soft' | 'round' | 'rectangular';
/**
* 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.
*/
@@ -5775,9 +5775,9 @@ declare namespace LocalJSX {
*/
"routerDirection"?: RouterDirection;
/**
* Set to `"round"` for a button with more rounded corners.
* Set to `"soft"` for a button with soft rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular" for a button without rounded corners. Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
*/
"shape"?: 'round' | 'rectangular';
"shape"?: 'soft' | 'round' | 'rectangular';
/**
* 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.
*/

12
core/src/components/button/button.ionic.scss
View File

@@ -5,7 +5,6 @@
// -------------------------------------------------------------------------------
:host {
--border-radius: #{$button-ionic-border-radius};
--padding-bottom: var(--padding-top);
--padding-end: #{$button-ionic-padding-end};
--padding-start: var(--padding-end);
@@ -155,13 +154,20 @@
// -------------------------------------------------------------------------------
:host(.button-rectangular) {
--border-radius: #{$button-ionic-rectangular-border};
--border-radius: #{$button-ionic-rectangular-border-radius};
}
// Button Shape Soft
// -------------------------------------------------------------------------------
:host(.button-soft) {
--border-radius: #{$button-ionic-soft-border-radius};
}
// Button Shape Round
// -------------------------------------------------------------------------------
:host(.button-round) {
--border-radius: #{$button-ionic-round-border};
--border-radius: #{$button-ionic-round-border-radius};
}
// Button Focused

13
core/src/components/button/button.ionic.vars.scss
View File

@@ -3,9 +3,6 @@
// Ionic Button
// -------------------------------------------------------------------------------
/// @prop - Border radius of the button
$button-ionic-border-radius: px-to-rem(8) !default;
/// @prop - Padding top of the button
$button-ionic-padding-top: px-to-rem(12) !default;
@@ -128,13 +125,19 @@ $button-ionic-xlarge-font-size: dynamic-font-max(2
// -------------------------------------------------------------------------------
/// @prop - Border radius of the rectangular button
$button-ionic-rectangular-border: 0 !default;
$button-ionic-rectangular-border-radius: 0 !default;
// Ionic Soft Button
// -------------------------------------------------------------------------------
/// @prop - Border radius of the soft button
$button-ionic-soft-border-radius: px-to-rem(8) !default;
// Ionic Round Button
// -------------------------------------------------------------------------------
/// @prop - Border radius of the round button
$button-ionic-round-border: px-to-rem(999) !default;
$button-ionic-round-border-radius: px-to-rem(999) !default;
// Ionic Outline Button
// -------------------------------------------------------------------------------

21
core/src/components/button/button.ios.scss
View File

@@ -7,7 +7,6 @@
// --------------------------------------------------
:host {
--border-radius: #{$button-ios-border-radius};
--padding-top: #{$button-ios-padding-top};
--padding-bottom: #{$button-ios-padding-bottom};
--padding-start: #{$button-ios-padding-start};
@@ -42,7 +41,6 @@
// --------------------------------------------------
:host(.button-outline) {
--border-radius: #{$button-ios-outline-border-radius};
--border-width: #{$button-ios-outline-border-width};
--border-style: #{$button-ios-outline-border-style};
--background-activated: #{ion-color(primary, base)};
@@ -114,6 +112,12 @@
font-size: #{$button-ios-small-font-size};
}
// iOS Soft Button
// --------------------------------------------------
:host(.button-soft) {
--border-radius: #{$button-ios-soft-border-radius};
}
// iOS Round Button
// --------------------------------------------------
@@ -126,6 +130,13 @@
--padding-bottom: #{$button-ios-round-padding-bottom};
}
// iOS Rectangular Button
// --------------------------------------------------
:host(.button-rectangular) {
--border-radius: #{$button-ios-rectangular-border-radius};
}
// iOS Strong Button
// --------------------------------------------------
@@ -155,7 +166,7 @@
*
* Since the `ion-button` uses `rem` for the font size, we can't
* just pass the desired icon font size in `em` to the `
* dynamic-font-clamp`. Instead, we need to adjust the base size
* dynamic-font-clamp`. Instead, we need to adjust the base size
* to account for the ion-button` font size.
*
* For example, if the default font size of `ion-button` is 16px
@@ -179,7 +190,7 @@
*
* Since the `ion-button` uses `rem` for the font size, we can't
* just pass the desired icon font size in `em` to the `
* dynamic-font-clamp`. Instead, we need to adjust the base size
* dynamic-font-clamp`. Instead, we need to adjust the base size
* to account for the ion-button` font size.
*
* For example, if the default font size of `ion-button` is 13px
@@ -203,7 +214,7 @@
*
* Since the `ion-button` uses `rem` for the font size, we can't
* just pass the desired icon font size in `em` to the `
* dynamic-font-clamp`. Instead, we need to adjust the base size
* dynamic-font-clamp`. Instead, we need to adjust the base size
* to account for the ion-button` font size.
*
* For example, if the default font size of `ion-button` is 20px

19
core/src/components/button/button.ios.vars.scss
View File

@@ -30,9 +30,6 @@ $button-ios-padding-start: $button-ios-padding-end !d
/// @prop - Minimum height of the button
$button-ios-min-height: 3.1em !default;
/// @prop - Border radius of the button
$button-ios-border-radius: 14px !default;
/// @prop - Font size of the button text
/// The maximum font size is calculated by taking the default font size
/// and multiplying it by 3, since 310% of the default is the maximum
@@ -104,8 +101,6 @@ $button-ios-outline-border-width: 1px !default;
/// @prop - Border style of the outline button
$button-ios-outline-border-style: solid !default;
/// @prop - Border radius of the outline button
$button-ios-outline-border-radius: $button-ios-border-radius !default;
// iOS Clear Button
// --------------------------------------------------
@@ -127,6 +122,13 @@ $button-ios-clear-opacity-activated: .4 !default;
/// @prop - Opacity of the clear button on hover
$button-ios-clear-opacity-hover: .6 !default;
// iOS Soft Button
// --------------------------------------------------
/// @prop - Border radius of the soft button
$button-ios-soft-border-radius: 14px !default;
// iOS Round Button
// --------------------------------------------------
@@ -146,6 +148,13 @@ $button-ios-round-padding-start: $button-round-padding-star
$button-ios-round-border-radius: $button-round-border-radius !default;
// iOS Rectangular Button
// --------------------------------------------------
/// @prop - Border radius of the rectangular button
$button-ios-rectangular-border-radius: 0 !default;
// iOS Decorator Button
// --------------------------------------------------

20
core/src/components/button/button.md.scss
View File

@@ -5,7 +5,6 @@
// --------------------------------------------------
:host {
--border-radius: #{$button-md-border-radius};
--padding-top: #{$button-md-padding-top};
--padding-bottom: #{$button-md-padding-bottom};
--padding-start: #{$button-md-padding-start};
@@ -76,6 +75,13 @@
}
// Material Design Soft Button
// --------------------------------------------------
:host(.button-soft) {
--border-radius: #{$button-md-soft-border-radius};
}
// Material Design Round Button
// --------------------------------------------------
@@ -87,6 +93,12 @@
--padding-bottom: #{$button-md-round-padding-bottom};
}
// Material Design Rectangular Button
// --------------------------------------------------
:host(.button-rectangular) {
--border-radius: #{$button-md-rectangular-border-radius};
}
// Material Design Button Sizes
// --------------------------------------------------
@@ -149,7 +161,7 @@
*
* Since the `ion-button` uses `rem` for the font size, we can't
* just pass the desired icon font size in `em` to the `
* dynamic-font-clamp`. Instead, we need to adjust the base size
* dynamic-font-clamp`. Instead, we need to adjust the base size
* to account for the ion-button` font size.
*
* For example, if the default font size of `ion-button` is 14px
@@ -174,7 +186,7 @@
*
* Since the `ion-button` uses `rem` for the font size, we can't
* just pass the desired icon font size in `em` to the `
* dynamic-font-clamp`. Instead, we need to adjust the base size
* dynamic-font-clamp`. Instead, we need to adjust the base size
* to account for the ion-button` font size.
*
* For example, if the default font size of `ion-button` is 13px
@@ -199,7 +211,7 @@
*
* Since the `ion-button` uses `rem` for the font size, we can't
* just pass the desired icon font size in `em` to the `
* dynamic-font-clamp`. Instead, we need to adjust the base size
* dynamic-font-clamp`. Instead, we need to adjust the base size
* to account for the ion-button` font size.
*
* For example, if the default font size of `ion-button` is 20px

17
core/src/components/button/button.md.vars.scss
View File

@@ -30,9 +30,6 @@ $button-md-padding-start: 1.1em !default;
/// @prop - Minimum height of the button
$button-md-min-height: 36px !default;
/// @prop - Border radius of the button
$button-md-border-radius: 4px !default;
/// @prop - Font size of the button text
$button-md-font-size: dynamic-font(14px) !default;
@@ -93,6 +90,13 @@ $button-md-small-min-height: 2.1em !default;
/// @prop - Font size of the small button
$button-md-small-font-size: dynamic-font(13px) !default;
// Material Design Round Button
// --------------------------------------------------
/// @prop - Border radius of the soft button
$button-md-soft-border-radius: 4px !default;
// Material Design Round Button
// --------------------------------------------------
@@ -112,6 +116,13 @@ $button-md-round-padding-start: $button-round-padding-st
$button-md-round-border-radius: $button-round-border-radius !default;
// Material Design Rectangular Button
// --------------------------------------------------
/// @prop - Border radius of the rectangular button
$button-md-rectangular-border-radius: 0 !default;
// Material Design Decorator Button
// --------------------------------------------------

24
core/src/components/button/button.tsx
View File

@@ -115,9 +115,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
@Prop() rel: string | undefined;
/**
* Set to `"round"` for a button with more rounded corners.
* Set to `"soft"` for a button with soft rounded corners, `"round"` for a button
* with fully rounded corners, or `"rectangular" for a button without rounded corners.
* Defaults to `"soft"` for the `"ios`" and `"ionic"` themes and `"round"` for the `"md"` theme.
*/
@Prop({ reflect: true }) shape?: 'round' | 'rectangular';
@Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular';
/**
* Set to `"small"` for a button with less height and padding, to `"default"`
@@ -216,6 +218,20 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
return 'bounded';
}
/**
* Set the default shape for the different themes
*/
private getShape(): string | undefined {
const theme = getIonTheme(this);
const { shape } = this;
if (shape === undefined) {
return theme === 'md' ? 'round' : 'soft';
}
return shape;
}
/**
* Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
*/
@@ -343,13 +359,13 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
color,
expand,
hasIconOnly,
shape,
strong,
inheritedAttributes,
} = this;
const theme = getIonTheme(this);
const finalSize = this.getSize();
const finalShape = this.getShape();
const TagType = href === undefined ? 'button' : ('a' as any);
const attrs =
TagType === 'button'
@@ -389,7 +405,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
[buttonType]: true,
[`${buttonType}-${expand}`]: expand !== undefined,
[`${buttonType}-${finalSize}`]: finalSize !== undefined,
[`${buttonType}-${shape}`]: shape !== undefined,
[`${buttonType}-${finalShape}`]: finalShape !== undefined,
[`${buttonType}-${fill}`]: true,
[`${buttonType}-strong`]: strong,
'in-toolbar': hostContext('ion-toolbar', this.el),