feat(elements/ino-fab): implement new fab design

packages/elements-angular/src/directives/proxies.ts

@@ -373,14 +373,14 @@ export declare interface InoDialog extends Components.InoDialog {
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'edgePosition', 'extended', 'icon', 'label', 'mini', 'tooltipPlacement']
+  inputs: ['disabled', 'edgePosition', 'label', 'shadow', 'variant']
 })
 @Component({
   selector: 'ino-fab',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'edgePosition', 'extended', 'icon', 'label', 'mini', 'tooltipPlacement'],
+  inputs: ['disabled', 'edgePosition', 'label', 'shadow', 'variant'],
 })
 export class InoFab {
   protected el: HTMLElement;
@@ -395,14 +395,14 @@ export declare interface InoFab extends Components.InoFab {}
 
 
 @ProxyCmp({
-  inputs: ['dialDirection', 'leftRightLocation', 'openDial', 'topBottomLocation']
+  inputs: ['label', 'openDial', 'orientation']
 })
 @Component({
   selector: 'ino-fab-set',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['dialDirection', 'leftRightLocation', 'openDial', 'topBottomLocation'],
+  inputs: ['label', 'openDial', 'orientation'],
 })
 export class InoFabSet {
   protected el: HTMLElement;

packages/elements-vue/src/proxies.ts

@@ -176,20 +176,17 @@ export const InoDialog = /*@__PURE__*/ defineContainer<JSX.InoDialog>('ino-dialo
 
 
 export const InoFab = /*@__PURE__*/ defineContainer<JSX.InoFab>('ino-fab', undefined, [
-  'icon',
   'label',
-  'extended',
   'edgePosition',
   'disabled',
-  'mini',
-  'tooltipPlacement'
+  'variant',
+  'shadow'
 ]);
 
 
 export const InoFabSet = /*@__PURE__*/ defineContainer<JSX.InoFabSet>('ino-fab-set', undefined, [
-  'dialDirection',
-  'topBottomLocation',
-  'leftRightLocation',
+  'label',
+  'orientation',
   'openDial'
 ]);
 

packages/elements/src/components.d.ts

@@ -5,15 +5,15 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Alignment, ButtonType, ButtonVariants, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarLabels, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
+import { Alignment, ButtonType, ButtonVariants, ChipSurface, DialogCloseAction, DialogSubmitAction, ImageDecodingTypes, InputType, KeyValue, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarLabels, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, ViewModeUnion } from "./components/types";
 import { PickerTypeKeys } from "./components/ino-datepicker/picker-factory";
-import { Placement, Props } from "tippy.js";
 import { MDCNotchedOutline } from "@material/notched-outline";
+import { Placement, Props } from "tippy.js";
 import { SortDirection, SortDirectionChangeDetails } from "./interface";
-export { Alignment, ButtonType, ButtonVariants, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarLabels, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
+export { Alignment, ButtonType, ButtonVariants, ChipSurface, DialogCloseAction, DialogSubmitAction, ImageDecodingTypes, InputType, KeyValue, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarLabels, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, ViewModeUnion } from "./components/types";
 export { PickerTypeKeys } from "./components/ino-datepicker/picker-factory";
-export { Placement, Props } from "tippy.js";
 export { MDCNotchedOutline } from "@material/notched-outline";
+export { Placement, Props } from "tippy.js";
 export { SortDirection, SortDirectionChangeDetails } from "./interface";
 export namespace Components {
     interface InoAccordion {
@@ -532,27 +532,18 @@ export namespace Components {
           * The position of the edge.
          */
         "edgePosition": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
-        /**
-          * Optional, modifies the FAB to wider size which includes a text label.
-         */
-        "extended": boolean;
-        /**
-          * Adds an icon to the Fab.
-          * @deprecated This property is deprecated and will be removed with the next major release. Instead, use the `icon-leading` slot.
-         */
-        "icon"?: string;
         /**
           * Optional, for the text label. Applicable only for Extended FAB.
          */
         "label"?: string;
         /**
-          * Optional, modifies the FAB to a smaller size
+          * Optional, displays a shadow around the button. Flat when it should be part of a button, shadow to abheben
          */
-        "mini": boolean;
+        "shadow"?: boolean;
         /**
-          * The placement of the tooltip which will be displayed when the button is not extended. Use `none`, if you don't want a tooltip to be displayed.
+          * The variant of the FAB.
          */
-        "tooltipPlacement": Placement | 'none';
+        "variant": 'small' | 'standard' | 'large' | 'extended';
     }
     /**
      * The ino-fab-set component serves as a container for multiple fab buttons. It contains actions related to the main fab
@@ -566,21 +557,17 @@ export namespace Components {
      */
     interface InoFabSet {
         /**
-          * The direction of the speed dial. Possible values: `top` (default), `bottom`, `right`, `left`.
-         */
-        "dialDirection": Locations;
-        /**
-          * The side where the Fab is displayed. Possible values: `right`, `left` (default).
+          * The label of the fab set when the variant is `stacked`.
          */
-        "leftRightLocation": HorizontalLocation;
+        "label"?: string;
         /**
           * Opens the dial (**uncontrolled**)
          */
         "openDial": boolean;
         /**
-          * The side where the Fab is displayed. Possible values: `top`, `bottom` (default).
+          * The orientation of the dial in which the secondary ino-fabs will be displayed.
          */
-        "topBottomLocation": VerticalLocation;
+        "orientation"?: 'horizontal' | 'vertical';
     }
     /**
      * A light icon component for texts and other components.
@@ -1667,7 +1654,7 @@ export namespace Components {
          */
         "arrow": boolean;
         /**
-          * Sets the color scheme of the tooltip.  Valid options include: `light`, `dark` or `primary`
+          * Sets the color scheme of the tooltip.  Valid options include: `light`, `dark`, `primary` or `transparent`.
          */
         "colorScheme": TippyThemes;
         /**
@@ -3326,27 +3313,18 @@ declare namespace LocalJSX {
           * The position of the edge.
          */
         "edgePosition"?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'none';
-        /**
-          * Optional, modifies the FAB to wider size which includes a text label.
-         */
-        "extended"?: boolean;
-        /**
-          * Adds an icon to the Fab.
-          * @deprecated This property is deprecated and will be removed with the next major release. Instead, use the `icon-leading` slot.
-         */
-        "icon"?: string;
         /**
           * Optional, for the text label. Applicable only for Extended FAB.
          */
         "label"?: string;
         /**
-          * Optional, modifies the FAB to a smaller size
+          * Optional, displays a shadow around the button. Flat when it should be part of a button, shadow to abheben
          */
-        "mini"?: boolean;
+        "shadow"?: boolean;
         /**
-          * The placement of the tooltip which will be displayed when the button is not extended. Use `none`, if you don't want a tooltip to be displayed.
+          * The variant of the FAB.
          */
-        "tooltipPlacement"?: Placement | 'none';
+        "variant"?: 'small' | 'standard' | 'large' | 'extended';
     }
     /**
      * The ino-fab-set component serves as a container for multiple fab buttons. It contains actions related to the main fab
@@ -3360,21 +3338,17 @@ declare namespace LocalJSX {
      */
     interface InoFabSet {
         /**
-          * The direction of the speed dial. Possible values: `top` (default), `bottom`, `right`, `left`.
+          * The label of the fab set when the variant is `stacked`.
          */
-        "dialDirection"?: Locations;
-        /**
-          * The side where the Fab is displayed. Possible values: `right`, `left` (default).
-         */
-        "leftRightLocation"?: HorizontalLocation;
+        "label"?: string;
         /**
           * Opens the dial (**uncontrolled**)
          */
         "openDial"?: boolean;
         /**
-          * The side where the Fab is displayed. Possible values: `top`, `bottom` (default).
+          * The orientation of the dial in which the secondary ino-fabs will be displayed.
          */
-        "topBottomLocation"?: VerticalLocation;
+        "orientation"?: 'horizontal' | 'vertical';
     }
     /**
      * A light icon component for texts and other components.
@@ -4538,7 +4512,7 @@ declare namespace LocalJSX {
          */
         "arrow"?: boolean;
         /**
-          * Sets the color scheme of the tooltip.  Valid options include: `light`, `dark` or `primary`
+          * Sets the color scheme of the tooltip.  Valid options include: `light`, `dark`, `primary` or `transparent`.
          */
         "colorScheme"?: TippyThemes;
         /**

packages/elements/src/components/base/_animation.scss

@@ -1,5 +1,6 @@
 @mixin border-radius($name, $from, $to, $duration) {
   animation: $name $duration;
+  animation-fill-mode: forwards;
 
   @keyframes #{$name} {
     from {
@@ -15,7 +16,7 @@
 @mixin button-rounding($round-border, $edged-border, $name) {
   @include border-radius($name + 'to-edged', $round-border, $edged-border, 0.3s);
 
-  &:hover {
+  &:hover:not(:focus) {
     border-radius: $round-border;
 
     @include border-radius($name + 'to-round', $edged-border, $round-border, 0.15s);

packages/elements/src/components/base/_tooltip_base.scss

@@ -54,3 +54,7 @@ $shadow-color: rgba(theme.$n-10, 0.35);
 .tippy-box[data-theme~='primary'] {
   @include tooltip(theme.$p-3, theme.$p-6);
 }
+
+.tippy-box[data-theme~='transparent'] {
+  @include tooltip(transparent, theme.$p-10);
+}

packages/elements/src/components/ino-fab-set/ino-fab-set.scss

@@ -29,22 +29,6 @@ ino-fab-set {
   display: flex;
   width: auto;
 
-  &.ino-top-bottom-location-top {
-    top: 20px;
-  }
-
-  &.ino-top-bottom-location-bottom {
-    bottom: 20px;
-  }
-
-  &.ino-left-right-location-left {
-    left: 20px;
-  }
-
-  &.ino-left-right-location-right {
-    right: 20px;
-  }
-
   .ino-fab-set-wrapper {
     display: flex;
 
@@ -58,27 +42,13 @@ ino-fab-set {
 
     .ino-speed-dial {
       display: none;
-      align-items: center;
+      align-items: flex-end;
     }
 
     .ino-fab-set-button {
       padding: $fab-set-padding;
       align-self: center;
     }
-
-    div[slot='icon-leading'] {
-      display: contents;
-    }
-
-    .ino-fab-set-icon--opened,
-    [slot='icon-opened'] {
-      display: none;
-    }
-
-    .ino-fab-set-icon--closed,
-    [slot='icon-closed'] {
-      display: block;
-    }
   }
 
   $directions: 'top', 'bottom', 'left', 'right';
@@ -99,17 +69,6 @@ ino-fab-set {
   }
 
   &.ino-fab-set--open-dial {
-    .ino-fab-set-wrapper {
-      .ino-fab-set-icon--opened,
-      [slot='icon-opened'] {
-        display: block;
-      }
-      .ino-fab-set-icon--closed,
-      [slot='icon-closed'] {
-        display: none;
-      }
-    }
-
     .ino-speed-dial {
       display: flex;
     }