From cc365f829d08b3f958032709a5817eb0655fe1f3 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 7 Mar 2018 17:31:05 -0500 Subject: [PATCH] refactor(fab): combine boolean position attributes to string props fixes #13596 --- BREAKING.md | 57 ++++++++++-- packages/core/src/components.d.ts | 4 +- packages/core/src/components/fab/fab.scss | 93 ++++++++++--------- packages/core/src/components/fab/fab.tsx | 32 ++++++- packages/core/src/components/fab/readme.md | 54 +++++++++++ .../src/components/fab/test/basic/index.html | 12 +-- .../components/fab/test/standalone/index.html | 12 +-- .../fab/test/translucent/index.html | 12 +-- 8 files changed, 203 insertions(+), 73 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index a5e6dcbb89..f88688db4d 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -79,7 +79,7 @@ The `small` and `large` attributes are now combined under the `size` attribute. | Old Property | New Property | Property Behavior | | --------------------------- | ------------ | --------------------------- | -| `small`, `large` | `size` | Sets the button size. | +| `small`, `large` | `size` | Sets the button size. | | `clear`, `outline`, `solid` | `fill` | Sets the button fill style. | | `full`, `block`             | `expand` | Sets the button width. | @@ -253,7 +253,7 @@ Buttons inside of an `` container should now be written as an ` + @@ -274,9 +274,52 @@ Buttons inside of an `` container should now be written as an ` ``` +### Attributes Renamed + +The mutually exclusive boolean attributes to position the fab have been combined into two single string attributes. + +The attributes to align the fab horizontally are now combined under the `horizontal` attribute and the attributes to align the fab vertically are now combined under the `vertical` attribute: + +| Old Property | New Property | Property Behavior | +|--------------|----------------------|-------------------------------------------------------------------------| +| left | `horizontal="left"` | Positions to the left of the viewport. | +| right | `horizontal="right"` | Positions to the right of the viewport. | +| center | `horizontal="center"`| Positions to the center of the viewport. | +| start | `horizontal="start"` | Positions to the left of the viewport in LTR, and to the right in RTL. | +| end | `horizontal="end"` | Positions to the right of the viewport in LTR, and to the left in RTL. | +| top | `vertical="top"` | Positions at the top of the viewport. | +| bottom | `vertical="bottom"` | Positions at the bottom of the viewport. | +| middle | `vertical="center"` | Positions at the center of the viewport. | + +_Note that `middle` has been changed to `center` for the vertical positioning._ + +**Old Usage Example:** + +```html + + + + + + + +``` + +**New Usage Example:** + +```html + + + + + + + +``` + ### Fixed Content -The `` container was previously placed inside of the fixed content by default. Now, any fixed content should go inside of the `` container. +The `` container was previously placed inside of the fixed content by default. Now, any fixed content should use the `fixed` slot. **Old Usage Example:** @@ -292,11 +335,9 @@ The `` container was previously placed inside of the fixed content by d **New Usage Example:** ```html - - - - - + + + Scrollable Content diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 628ab95afe..105eb77dcd 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -937,7 +937,9 @@ declare global { } namespace JSXElements { export interface IonFabAttributes extends HTMLAttributes { - + edge?: boolean; + horizontal?: 'left' | 'right' | 'center' | 'start' | 'end'; + vertical?: 'top' | 'center' | 'bottom'; } } } diff --git a/packages/core/src/components/fab/fab.scss b/packages/core/src/components/fab/fab.scss index e6d3278c3d..c8a550ec3d 100644 --- a/packages/core/src/components/fab/fab.scss +++ b/packages/core/src/components/fab/fab.scss @@ -6,66 +6,69 @@ ion-fab { position: absolute; z-index: $z-index-fixed-content; +} - &[center] { - @include position(null, null, null, 50%); - @include margin-horizontal(-$fab-size / 2, null); + +// FAB Horizontal Positioning +// -------------------------------------------------- + +.fab-horizontal-left { + // scss-lint:disable PropertySpelling + @include multi-dir() { + left: $fab-content-margin; + + left: calc(#{$fab-content-margin} + constant(safe-area-inset-left)); + left: calc(#{$fab-content-margin} + env(safe-area-inset-left)); } +} - &[middle] { - @include margin(-$fab-size / 2, null, null, null); +.fab-horizontal-right { + // scss-lint:disable PropertySpelling + @include multi-dir() { + right: $fab-content-margin; - top: 50%; + right: calc(#{$fab-content-margin} + constant(safe-area-inset-right)); + right: calc(#{$fab-content-margin} + env(safe-area-inset-right)); } +} - &[top] { - top: $fab-content-margin; - } +.fab-horizontal-center { + @include position(null, null, null, 50%); + @include margin-horizontal(-$fab-size / 2, null); +} - &[right] { - // scss-lint:disable PropertySpelling - @include multi-dir() { - right: $fab-content-margin; - } +.fab-horizontal-start { + @include position-horizontal($fab-content-margin, null); + @include safe-position-horizontal($fab-content-margin, null); +} - @include multi-dir() { - right: calc(#{$fab-content-margin} + constant(safe-area-inset-right)); - right: calc(#{$fab-content-margin} + env(safe-area-inset-right)); - } - } - - &[end] { - @include position-horizontal(null, $fab-content-margin); - @include safe-position-horizontal(null, $fab-content-margin); - } - - &[bottom] { - bottom: $fab-content-margin; - } - - &[left] { - // scss-lint:disable PropertySpelling - @include multi-dir() { - left: $fab-content-margin; - } +.fab-horizontal-end { + @include position-horizontal(null, $fab-content-margin); + @include safe-position-horizontal(null, $fab-content-margin); +} - @include multi-dir() { - left: calc(#{$fab-content-margin} + constant(safe-area-inset-left)); - left: calc(#{$fab-content-margin} + env(safe-area-inset-left)); - } - } +// FAB Vertical Positioning +// -------------------------------------------------- - &[start] { - @include position-horizontal($fab-content-margin, null); - @include safe-position-horizontal($fab-content-margin, null); - } +.fab-vertical-top { + top: $fab-content-margin; - &[top][edge] { + &.fab-edge { top: -$fab-size / 2; } +} - &[bottom][edge] { +.fab-vertical-bottom { + bottom: $fab-content-margin; + + &.fab-edge { bottom: -$fab-size / 2; } } + +.fab-vertical-center { + @include margin(-$fab-size / 2, null, null, null); + + top: 50%; +} \ No newline at end of file diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx index 9d91638c00..f3d27152f2 100644 --- a/packages/core/src/components/fab/fab.tsx +++ b/packages/core/src/components/fab/fab.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Method, State } from '@stencil/core'; +import { Component, Element, Method, Prop, State } from '@stencil/core'; @Component({ @@ -10,6 +10,26 @@ export class Fab { @State() activated = false; + /** + * Where to align the fab horizontally in the viewport. + * Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`. + */ + @Prop() horizontal: 'left' | 'right' | 'center' | 'start' | 'end'; + + /** + * Where to align the fab vertically in the viewport. + * Possible values are: `"top"`, `"center"`, `"bottom"`. + */ + @Prop() vertical: 'top' | 'center' | 'bottom'; + + /** + * If true, the fab will display on the edge of the header if + * `vertical` is `"top"`, and on the edge of the footer if + * it is `"bottom"`. Should be used with a `fixed` slot. + */ + @Prop() edge: boolean; + + /** * Close an active FAB list container */ @@ -22,6 +42,16 @@ export class Fab { this.activated = !this.activated; } + hostData() { + return { + class: { + [`fab-horizontal-${this.horizontal}`]: this.horizontal, + [`fab-vertical-${this.vertical}`]: this.vertical, + ['fab-edge']: this.edge + } + }; + } + render() { const fab = this.el.querySelector('ion-fab-button'); if (fab) { diff --git a/packages/core/src/components/fab/readme.md b/packages/core/src/components/fab/readme.md index 28ffabbdc5..8cf2286274 100644 --- a/packages/core/src/components/fab/readme.md +++ b/packages/core/src/components/fab/readme.md @@ -98,6 +98,60 @@ The fab should have one main fab button. Fabs can also contain fab lists which c +## Properties + +#### edge + +boolean + +If true, the fab will display on the edge of the header if +`vertical` is `"top"`, and on the edge of the footer if +it is `"bottom"`. Should be used with a `fixed` slot. + + +#### horizontal + + + +Where to align the fab horizontally in the viewport. +Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`. + + +#### vertical + + + +Where to align the fab vertically in the viewport. +Possible values are: `"top"`, `"center"`, `"bottom"`. + + +## Attributes + +#### edge + +boolean + +If true, the fab will display on the edge of the header if +`vertical` is `"top"`, and on the edge of the footer if +it is `"bottom"`. Should be used with a `fixed` slot. + + +#### horizontal + + + +Where to align the fab horizontally in the viewport. +Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`. + + +#### vertical + + + +Where to align the fab vertically in the viewport. +Possible values are: `"top"`, `"center"`, `"bottom"`. + + ## Methods #### close() diff --git a/packages/core/src/components/fab/test/basic/index.html b/packages/core/src/components/fab/test/basic/index.html index 11eecdfed0..0a9f1df504 100644 --- a/packages/core/src/components/fab/test/basic/index.html +++ b/packages/core/src/components/fab/test/basic/index.html @@ -23,7 +23,7 @@ Test FAB - + @@ -33,7 +33,7 @@ - + @@ -43,7 +43,7 @@ - + @@ -53,7 +53,7 @@ - + @@ -63,7 +63,7 @@ - + @@ -79,7 +79,7 @@ - + diff --git a/packages/core/src/components/fab/test/standalone/index.html b/packages/core/src/components/fab/test/standalone/index.html index fe938f2da3..0e1b8061b8 100644 --- a/packages/core/src/components/fab/test/standalone/index.html +++ b/packages/core/src/components/fab/test/standalone/index.html @@ -13,7 +13,7 @@ FAB - + @@ -23,7 +23,7 @@ - + @@ -33,7 +33,7 @@ - + @@ -43,7 +43,7 @@ - + @@ -53,7 +53,7 @@ - + @@ -69,7 +69,7 @@ - + diff --git a/packages/core/src/components/fab/test/translucent/index.html b/packages/core/src/components/fab/test/translucent/index.html index 4a7c1db768..3b7c51ee30 100644 --- a/packages/core/src/components/fab/test/translucent/index.html +++ b/packages/core/src/components/fab/test/translucent/index.html @@ -32,7 +32,7 @@ 
log
Test - + @@ -42,7 +42,7 @@ - + @@ -52,7 +52,7 @@ - + @@ -62,7 +62,7 @@ - + @@ -72,7 +72,7 @@ - + @@ -88,7 +88,7 @@ - +