feat(module:float-button): add float-button component (#7884)

Author: OriginRing

.github/CODEOWNERS

@@ -73,6 +73,7 @@ components/water-mark/**                  @OriginRing
 components/color-picker/**                @OriginRing
 components/hash-code/**                   @OriginRing
 components/flex/**                        @ParsaArvanehPA
+components/float-button/**                @OriginRing
 
 # The `components/core/*` owners
 components/core/config/**                 @simplejason

components/back-top/doc/index.en-US.md

@@ -5,6 +5,8 @@ title: BackTop
 cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
 ---
 
+* Note: This component will be removed later. Please use `<nz-float-button-top></nz-float-button-top>` in the FloatButton component.
+
 `nz-back-top` makes it easy to go back to the top of the page.
 
 ## When To Use

components/back-top/doc/index.zh-CN.md

@@ -6,6 +6,8 @@ title: BackTop
 cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
 ---
 
+* 注意：该组件将在后续移除，请前往 FloatButton 组件中使用 `<nz-float-button-top></nz-float-button-top>`
+
 返回页面顶部的操作按钮。
 
 ## 何时使用

components/components.less

@@ -68,3 +68,4 @@
 @import './water-mark/style/entry.less';
 @import './color-picker/style/entry.less';
 @import './hash-code/style/entry.less';
+@import './float-button/style/entry.less';

components/float-button/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The most basic usage.

components/float-button/demo/basic.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-float-button-basic',
+  template: `
+    <div class="basic">
+      <nz-float-button></nz-float-button>
+    </div>
+  `,
+  styles: [
+    `
+      .basic {
+        height: 300px;
+        position: relative;
+      }
+      nz-float-button {
+        position: absolute;
+      }
+    `
+  ]
+})
+export class NzDemoFloatButtonBasicComponent {}

components/float-button/demo/description.md

@@ -0,0 +1,18 @@
+---
+order: 3
+title:
+  zh-CN: 描述
+  en-US: Description
+---
+
+## zh-CN
+
+可以通过 `nzDescription` 设置文字内容。
+
+> 仅当 `shape` 属性为 `square` 时支持。由于空间较小，推荐使用比较精简的双数文字。
+
+## en-US
+
+Setting `nzDescription` prop to show FloatButton with description.
+
+> supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.

components/float-button/demo/description.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-float-button-description',
+  template: `
+    <div class="description">
+      <nz-float-button
+        [nzIcon]="icon"
+        [nzDescription]="description"
+        nzShape="square"
+        style="right: 24px"
+      ></nz-float-button>
+      <nz-float-button [nzDescription]="description" nzShape="square" style="right: 94px"></nz-float-button>
+    </div>
+    <ng-template #description>HELP</ng-template>
+
+    <ng-template #icon>
+      <span nz-icon nzType="file-text" nzTheme="outline"></span>
+    </ng-template>
+  `,
+  styles: [
+    `
+      .description {
+        height: 300px;
+        position: relative;
+      }
+      nz-float-button {
+        position: absolute;
+      }
+    `
+  ]
+})
+export class NzDemoFloatButtonDescriptionComponent {}

components/float-button/demo/group-menu.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 菜单模式
+  en-US: Menu mode
+---
+
+## zh-CN
+
+设置 `nzTrigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。
+
+## en-US
+
+Open menu mode with `nzTrigger`, which could be `hover` or `click`.

components/float-button/demo/group-menu.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-float-button-group-menu',
+  template: `
+    <div class="menu">
+      <nz-float-button-group
+        [nzIcon]="icon"
+        nzType="primary"
+        nzTrigger="click"
+        style="right: 24px"
+        (nzOnOpenChange)="openChange($event)"
+      >
+        <nz-float-button></nz-float-button>
+        <nz-float-button [nzIcon]="inner"></nz-float-button>
+      </nz-float-button-group>
+      <nz-float-button-group
+        [nzIcon]="icon"
+        nzType="primary"
+        nzTrigger="hover"
+        style="right: 94px"
+        (nzOnOpenChange)="openChange($event)"
+      >
+        <nz-float-button></nz-float-button>
+        <nz-float-button [nzIcon]="inner"></nz-float-button>
+      </nz-float-button-group>
+    </div>
+    <ng-template #icon>
+      <span nz-icon nzType="customer-service" nzTheme="outline"></span>
+    </ng-template>
+    <ng-template #inner>
+      <span nz-icon nzType="comment" nzTheme="outline"></span>
+    </ng-template>
+  `,
+  styles: [
+    `
+      .menu {
+        height: 300px;
+        position: relative;
+      }
+      nz-float-button-group,
+      nz-float-button {
+        position: absolute;
+      }
+    `
+  ]
+})
+export class NzDemoFloatButtonGroupMenuComponent {
+  openChange(status: boolean): void {
+    console.log(status);
+  }
+}