Skip to content

Commit e8cec60

Browse files
manucorporatmanucorporat
authored
fix(fab-button): adding size prop instead of [mini] (#16692)
- Consistency with rest of API - Auto docs - Helps react fixes #16680
1 parent c2ada84 commit e8cec60

File tree

16 files changed

+484
-467
lines changed

16 files changed

+484
-467
lines changed

‎angular/src/directives/proxies.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -236,15 +236,15 @@ export class IonFab {
236236
}
237237

238238
export declare interface IonFabButton extends StencilComponents<'IonFabButton'> {}
239-
@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'] })
239+
@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'] })
240240
export class IonFabButton {
241241
ionFocus!: EventEmitter<CustomEvent>;
242242
ionBlur!: EventEmitter<CustomEvent>;
243243

244244
constructor(c: ChangeDetectorRef, r: ElementRef) {
245245
c.detach();
246246
const el = r.nativeElement;
247-
proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type']);
247+
proxyInputs(this, el, ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type', 'size']);
248248
proxyOutputs(this, el, ['ionFocus', 'ionBlur']);
249249
}
250250
}

‎core/api.txt

Lines changed: 437 additions & 436 deletions
Large diffs are not rendered by default.

‎core/scripts/api-spec-generator.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function generateComponent(component, content) {
2020
content.push(component.tag);
2121

2222
component.props.forEach(prop => {
23-
content.push(`${component.tag},prop,${prop.name},${prop.type},${prop.default},${prop.required}`);
23+
content.push(`${component.tag},prop,${prop.name},${prop.type},${prop.default},${prop.required},${prop.reflectToAttr}`);
2424
});
2525
component.methods.forEach(prop => {
2626
content.push(`${component.tag},method,${prop.name},${prop.signature}`);

‎core/src/components.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1359,6 +1359,10 @@ export namespace Components {
13591359
*/
13601360
'show': boolean;
13611361
/**
1362+
* The size of the button. Set this to `small` in order to have a mini fab.
1363+
*/
1364+
'size'?: 'small';
1365+
/**
13621366
* If `true`, the fab button will be translucent.
13631367
*/
13641368
'translucent': boolean;
@@ -1405,6 +1409,10 @@ export namespace Components {
14051409
*/
14061410
'show'?: boolean;
14071411
/**
1412+
* The size of the button. Set this to `small` in order to have a mini fab.
1413+
*/
1414+
'size'?: 'small';
1415+
/**
14081416
* If `true`, the fab button will be translucent.
14091417
*/
14101418
'translucent'?: boolean;

‎core/src/components/fab-button/fab-button.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -164,14 +164,14 @@
164164
}
165165

166166

167-
// FAB Mini
167+
// FAB small (mini
168168
// --------------------------------------------------
169169

170-
:host([mini]) {
171-
@include margin(($fab-size - $fab-mini-size) / 2);
170+
:host(.fab-button-small) {
171+
@include margin(($fab-size - $fab-small-size) / 2);
172172

173-
width: #{$fab-mini-size};
174-
height: #{$fab-mini-size};
173+
width: #{$fab-small-size};
174+
height: #{$fab-small-size};
175175
}
176176

177177
// FAB Close Icon

‎core/src/components/fab-button/fab-button.tsx

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ export class FabButton implements ComponentInterface {
6767
*/
6868
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
6969

70+
/**
71+
* The size of the button. Set this to `small` in order to have a mini fab.
72+
*/
73+
@Prop() size?: 'small';
74+
7075
/**
7176
* Emitted when the button has focus.
7277
*/
@@ -91,19 +96,21 @@ export class FabButton implements ComponentInterface {
9196
}
9297

9398
hostData() {
94-
const inList = hostContext('ion-fab-list', this.el);
99+
const { el, disabled, color, activated, show, translucent, size, keyFocus } = this;
100+
const inList = hostContext('ion-fab-list', el);
95101
return {
96-
'aria-disabled': this.disabled ? 'true' : null,
102+
'aria-disabled': disabled ? 'true' : null,
97103
class: {
98-
...createColorClasses(this.color),
104+
...createColorClasses(color),
99105
'fab-button-in-list': inList,
100-
'fab-button-translucent-in-list': inList && this.translucent,
101-
'fab-button-close-active': this.activated,
102-
'fab-button-show': this.show,
103-
'fab-button-disabled': this.disabled,
104-
'fab-button-translucent': this.translucent,
106+
'fab-button-translucent-in-list': inList && translucent,
107+
'fab-button-close-active': activated,
108+
'fab-button-show': show,
109+
'fab-button-disabled': disabled,
110+
'fab-button-translucent': translucent,
105111
'ion-activatable': true,
106-
'focused': this.keyFocus,
112+
'focused': keyFocus,
113+
[`fab-button-${size}`]: size !== undefined,
107114
}
108115
};
109116
}

‎core/src/components/fab-button/fab-button.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
$fab-size: 56px !default;
88

99
/// @prop - Width and height of the mini FAB button
10-
$fab-mini-size: 40px !default;
10+
$fab-small-size: 40px !default;
1111

1212
/// @prop - Border radius of the FAB button
1313
$fab-border-radius: 50% !default;

‎core/src/components/fab-button/readme.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
2323
<ion-fab-button>Default</ion-fab-button>
2424

2525
<!-- Mini -->
26-
<ion-fab-button mini>Mini</ion-fab-button>
26+
<ion-fab-button size="small">Mini</ion-fab-button>
2727

2828
<!-- Colors -->
2929
<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
4848
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
4949
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
5050
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
51+
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
5152
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
5253
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
5354

‎core/src/components/fab-button/test/standalone/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ <h3>Default</h3>
1515
<p>
1616
<ion-fab-button>Default</ion-fab-button>
1717
<ion-fab-button><ion-icon name="star"></ion-icon></ion-fab-button>
18-
<ion-fab-button mini>Mini</ion-fab-button>
19-
<ion-fab-button mini><ion-icon name="star"></ion-icon></ion-fab-button>
18+
<ion-fab-button size="small">Mini</ion-fab-button>
19+
<ion-fab-button size="small"><ion-icon name="star"></ion-icon></ion-fab-button>
2020
<ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
2121
<ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
22-
<ion-fab-button mini class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
22+
<ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
2323
<ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
24-
<ion-fab-button mini class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
24+
<ion-fab-button size="small" class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
2525
</p>
2626

2727
<h3>Colors</h3>

‎core/src/components/fab-button/usage/angular.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<ion-fab-button>Default</ion-fab-button>
1111

1212
<!-- Mini -->
13-
<ion-fab-button mini>Mini</ion-fab-button>
13+
<ion-fab-button size="small">Mini</ion-fab-button>
1414

1515
<!-- Colors -->
1616
<ion-fab-button color="primary">Primary</ion-fab-button>

0 commit comments

Comments
 (0)