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(fab-button): adding size prop instead of [mini] (#16692)

Browse Source 
- Consistency with rest of API
- Auto docs
- Helps react

fixes #16680
This commit is contained in:
Manu MA
2018-12-14 23:16:20 +01:00
committed by GitHub
parent c2ada8445c
commit e8cec60faf
16 changed files with 484 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@@ -236,7 +236,7 @@ export class IonFab {
}
export declare interface IonFabButton extends StencilComponents<'IonFabButton'> {}
@Component({ selector: 'ion-fab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type'] })
@Component({ selector: 'ion-fab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type', 'size'] })
export class IonFabButton {
ionFocus!: EventEmitter<CustomEvent>;
ionBlur!: EventEmitter<CustomEvent>;
@@ -244,7 +244,7 @@ export class IonFabButton {
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type']);
proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type', 'size']);
proxyOutputs(this, el, ['ionFocus', 'ionBlur']);
}
}

873
core/api.txt
View File

File diff suppressed because it is too large Load Diff

2
core/scripts/api-spec-generator.js
View File

@@ -20,7 +20,7 @@ function generateComponent(component, content) {
content.push(component.tag);
component.props.forEach(prop => {
content.push(`${component.tag},prop,${prop.name},${prop.type},${prop.default},${prop.required}`);
content.push(`${component.tag},prop,${prop.name},${prop.type},${prop.default},${prop.required},${prop.reflectToAttr}`);
});
component.methods.forEach(prop => {
content.push(`${component.tag},method,${prop.name},${prop.signature}`);

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

@@ -1359,6 +1359,10 @@ export namespace Components {
*/
'show': boolean;
/**
* The size of the button. Set this to `small` in order to have a mini fab.
*/
'size'?: 'small';
/**
* If `true`, the fab button will be translucent.
*/
'translucent': boolean;
@@ -1405,6 +1409,10 @@ export namespace Components {
*/
'show'?: boolean;
/**
* The size of the button. Set this to `small` in order to have a mini fab.
*/
'size'?: 'small';
/**
* If `true`, the fab button will be translucent.
*/
'translucent'?: boolean;

10
core/src/components/fab-button/fab-button.scss
View File

@@ -164,14 +164,14 @@
}
// FAB Mini
// FAB small (mini
// --------------------------------------------------
:host([mini]) {
@include margin(($fab-size - $fab-mini-size) / 2);
:host(.fab-button-small) {
@include margin(($fab-size - $fab-small-size) / 2);
width: #{$fab-mini-size};
height: #{$fab-mini-size};
width: #{$fab-small-size};
height: #{$fab-small-size};
}
// FAB Close Icon

25
core/src/components/fab-button/fab-button.tsx
View File

@@ -67,6 +67,11 @@ export class FabButton implements ComponentInterface {
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
/**
* The size of the button. Set this to `small` in order to have a mini fab.
*/
@Prop() size?: 'small';
/**
* Emitted when the button has focus.
*/
@@ -91,19 +96,21 @@ export class FabButton implements ComponentInterface {
}
hostData() {
const inList = hostContext('ion-fab-list', this.el);
const { el, disabled, color, activated, show, translucent, size, keyFocus } = this;
const inList = hostContext('ion-fab-list', el);
return {
'aria-disabled': this.disabled ? 'true' : null,
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
...createColorClasses(color),
'fab-button-in-list': inList,
'fab-button-translucent-in-list': inList && this.translucent,
'fab-button-close-active': this.activated,
'fab-button-show': this.show,
'fab-button-disabled': this.disabled,
'fab-button-translucent': this.translucent,
'fab-button-translucent-in-list': inList && translucent,
'fab-button-close-active': activated,
'fab-button-show': show,
'fab-button-disabled': disabled,
'fab-button-translucent': translucent,
'ion-activatable': true,
'focused': this.keyFocus,
'focused': keyFocus,
[`fab-button-${size}`]: size !== undefined,
}
};
}

2
core/src/components/fab-button/fab-button.vars.scss
View File

@@ -7,7 +7,7 @@
$fab-size: 56px !default;
/// @prop - Width and height of the mini FAB button
$fab-mini-size: 40px !default;
$fab-small-size: 40px !default;
/// @prop - Border radius of the FAB button
$fab-border-radius: 50% !default;

3
core/src/components/fab-button/readme.md
View File

@@ -23,7 +23,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button size="small">Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>
@@ -48,6 +48,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |

8
core/src/components/fab-button/test/standalone/index.html
View File

@@ -15,13 +15,13 @@
<p>
<ion-fab-button>Default</ion-fab-button>
<ion-fab-button><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button mini><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button size="small">Mini</ion-fab-button>
<ion-fab-button size="small"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
<ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button mini class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
<ion-fab-button mini class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
<ion-fab-button size="small" class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
</p>
<h3>Colors</h3>

2
core/src/components/fab-button/usage/angular.md
View File

@@ -10,7 +10,7 @@
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button size="small">Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>

2
core/src/components/fab-button/usage/javascript.md
View File

@@ -10,7 +10,7 @@
<ion-fab-button>Default</ion-fab-button>
<!-- Mini -->
<ion-fab-button mini>Mini</ion-fab-button>
<ion-fab-button size="small">Mini</ion-fab-button>
<!-- Colors -->
<ion-fab-button color="primary">Primary</ion-fab-button>

4
core/src/components/fab-list/fab-list.scss
View File

@@ -24,8 +24,8 @@
::slotted(.fab-button-in-list) {
@include margin(8px, 0);
width: #{$fab-mini-size};
height: #{$fab-mini-size};
width: #{$fab-small-size};
height: #{$fab-small-size};
transform: scale(0);

2
core/src/components/fab/test/basic/index.html
View File

@@ -28,7 +28,7 @@
<ion-fab-button disabled onclick="throw 'no clickable'">FAB</ion-fab-button>
<ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight">
<ion-fab-button onclick="clickMainFAB('fab1')" size="small" class="e2eFabTopRight">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list>

2
core/src/components/fab/test/preview/index.html
View File

@@ -28,7 +28,7 @@
<ion-fab-button>FAB</ion-fab-button>
<ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight">
<ion-fab-button onclick="clickMainFAB('fab1')" size="small" class="e2eFabTopRight">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-list>

2
core/src/components/fab/test/translucent/index.html
View File

@@ -37,7 +37,7 @@
<ion-button>Test</ion-button>
<ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
<ion-fab-button translucent onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="clickMainFAB('fab1')" size="small" class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
<ion-fab-list>
<ion-fab-button translucent onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>

2
core/src/themes/test/css-variables/index.html
View File

@@ -392,7 +392,7 @@
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
<ion-fab-button mini>
<ion-fab-button size="small">
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button color="secondary">