add transparent tooltip theme, remove variant for ino-fab-set WIP

inovex · May 2, 2024 · 2a70f08 · 2a70f08
1 parent e95d65b
commit 2a70f08
Show file tree

Hide file tree

Showing 17 changed files with 177 additions and 132 deletions.
diff --git a/packages/elements-angular/src/directives/proxies.ts b/packages/elements-angular/src/directives/proxies.ts
@@ -373,14 +373,14 @@ export declare interface InoDialog extends Components.InoDialog {
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'edgePosition', 'extended', 'label', 'shadow', 'tooltipPlacement', 'variant']
+  inputs: ['disabled', 'edgePosition', 'extended', 'label', 'shadow', 'tooltipPlacement', 'tooltipTheme', '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', 'label', 'shadow', 'tooltipPlacement', 'variant'],
+  inputs: ['disabled', 'edgePosition', 'extended', 'label', 'shadow', 'tooltipPlacement', 'tooltipTheme', 'variant'],
 })
 export class InoFab {
   protected el: HTMLElement;
@@ -395,14 +395,14 @@ export declare interface InoFab extends Components.InoFab {}
 
 
 @ProxyCmp({
-  inputs: ['dialDirection', 'icon', 'label', 'leftRightLocation', 'openDial', 'topBottomLocation', 'variant']
+  inputs: ['dialDirection', 'label', 'leftRightLocation', 'openDial', 'topBottomLocation']
 })
 @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', 'icon', 'label', 'leftRightLocation', 'openDial', 'topBottomLocation', 'variant'],
+  inputs: ['dialDirection', 'label', 'leftRightLocation', 'openDial', 'topBottomLocation'],
 })
 export class InoFabSet {
   protected el: HTMLElement;

diff --git a/packages/elements-vue/src/proxies.ts b/packages/elements-vue/src/proxies.ts
@@ -182,14 +182,13 @@ export const InoFab = /*@__PURE__*/ defineContainer<JSX.InoFab>('ino-fab', undef
   'disabled',
   'variant',
   'shadow',
+  'tooltipTheme',
   'tooltipPlacement'
 ]);
 
 
 export const InoFabSet = /*@__PURE__*/ defineContainer<JSX.InoFabSet>('ino-fab-set', undefined, [
-  'variant',
   'label',
-  'icon',
   'dialDirection',
   'topBottomLocation',
   'leftRightLocation',

diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts
@@ -548,6 +548,10 @@ export namespace Components {
           * 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.
          */
         "tooltipPlacement": Placement | 'none';
+        /**
+          * The theme of the tooltip which will be displayed when the button is not extended.
+         */
+        "tooltipTheme"?: TippyThemes;
         /**
           * The variant of the FAB.
          */
@@ -568,10 +572,6 @@ export namespace Components {
           * The direction of the speed dial. Possible values: `top` (default), `bottom`, `right`, `left`.
          */
         "dialDirection": Locations;
-        /**
-          * The icon of the fab set.
-         */
-        "icon"?: string;
         /**
           * The label of the fab set when the variant is `stacked`.
          */
@@ -588,10 +588,6 @@ export namespace Components {
           * The side where the Fab is displayed. Possible values: `top`, `bottom` (default).
          */
         "topBottomLocation": VerticalLocation;
-        /**
-          * The variant of the fab set.
-         */
-        "variant": 'menu' | 'stacked';
     }
     /**
      * A light icon component for texts and other components.
@@ -1678,7 +1674,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;
         /**
@@ -3353,6 +3349,10 @@ declare namespace LocalJSX {
           * 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.
          */
         "tooltipPlacement"?: Placement | 'none';
+        /**
+          * The theme of the tooltip which will be displayed when the button is not extended.
+         */
+        "tooltipTheme"?: TippyThemes;
         /**
           * The variant of the FAB.
          */
@@ -3373,10 +3373,6 @@ declare namespace LocalJSX {
           * The direction of the speed dial. Possible values: `top` (default), `bottom`, `right`, `left`.
          */
         "dialDirection"?: Locations;
-        /**
-          * The icon of the fab set.
-         */
-        "icon"?: string;
         /**
           * The label of the fab set when the variant is `stacked`.
          */
@@ -3393,10 +3389,6 @@ declare namespace LocalJSX {
           * The side where the Fab is displayed. Possible values: `top`, `bottom` (default).
          */
         "topBottomLocation"?: VerticalLocation;
-        /**
-          * The variant of the fab set.
-         */
-        "variant"?: 'menu' | 'stacked';
     }
     /**
      * A light icon component for texts and other components.
@@ -4560,7 +4552,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;
         /**

diff --git a/packages/elements/src/components/base/_tooltip_base.scss b/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);
+}
diff --git a/packages/elements/src/components/ino-fab-set/ino-fab-set.tsx b/packages/elements/src/components/ino-fab-set/ino-fab-set.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, h, Host, Prop } from '@stencil/core';
 import classNames from 'classnames';
-
+import { hasSlotContent } from '../../util/component-utils';
 import { HorizontalLocation, Locations, VerticalLocation } from '../types';
 
 /**
@@ -28,21 +28,11 @@ import { HorizontalLocation, Locations, VerticalLocation } from '../types';
 export class FabSet implements ComponentInterface {
   @Element() el!: HTMLInoFabSetElement;
 
-  /**
-   * The variant of the fab set.
-   */
-  @Prop() variant: 'menu' | 'stacked' = 'menu';
-
   /**
    * The label of the fab set when the variant is `stacked`.
    */
   @Prop() label?: string;
 
-  /**
-   * The icon of the fab set.
-   */
-  @Prop() icon? = 'options_dotted';
-
   /**
    * The direction of the speed dial.
    * Possible values: `top` (default), `bottom`, `right`, `left`.
@@ -81,14 +71,18 @@ export class FabSet implements ComponentInterface {
 
     const directionClasses = classNames('ino-fab-set-wrapper', 'ino-direction-' + this.dialDirection);
 
+    const hasPrimaryFab = hasSlotContent(this.el, 'primary-fab');
+
     return (
       <Host class={hostClasses}>
         <div class={directionClasses}>
           <div class={speedDialClasses}>
             <slot></slot>
           </div>
 
-          {this.variant === 'stacked' ? (
+          {hasPrimaryFab ? (
+            <slot name="primary-fab"></slot>
+          ) : (
             <ino-fab
               id={'primary-fab'}
               class="ino-fab-set-button"
@@ -97,11 +91,7 @@ export class FabSet implements ComponentInterface {
               extended
               label={this.label}
             >
-              <ino-icon class="ino-fab-set-icon" slot="icon-leading" icon={this.icon} />
-            </ino-fab>
-          ) : (
-            <ino-fab id={'primary-fab'} class="ino-fab-set-button" edge-position="top-right" tooltip-placement="none">
-              <ino-icon class="ino-fab-set-icon" slot="icon-leading" icon={this.icon} />
+              <ino-icon class="ino-fab-set-icon" slot="icon-leading" icon="options_dotted" />
             </ino-fab>
           )}
         </div>

diff --git a/packages/elements/src/components/ino-fab-set/readme.md b/packages/elements/src/components/ino-fab-set/readme.md
@@ -21,15 +21,13 @@ your local state and pass the state to the component again to open/close the fab
 
 ## Properties
 
-| Property            | Attribute             | Description                                                                                   | Type                                     | Default            |
-| ------------------- | --------------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
-| `dialDirection`     | `dial-direction`      | The direction of the speed dial. Possible values: `top` (default), `bottom`, `right`, `left`. | `"bottom" \| "left" \| "right" \| "top"` | `'top'`            |
-| `icon`              | `icon`                | The icon of the fab set.                                                                      | `string`                                 | `'options_dotted'` |
-| `label`             | `label`               | The label of the fab set when the variant is `stacked`.                                       | `string`                                 | `undefined`        |
-| `leftRightLocation` | `left-right-location` | The side where the Fab is displayed. Possible values: `right`, `left` (default).              | `"left" \| "right"`                      | `'left'`           |
-| `openDial`          | `open-dial`           | Opens the dial (**uncontrolled**)                                                             | `boolean`                                | `false`            |
-| `topBottomLocation` | `top-bottom-location` | The side where the Fab is displayed. Possible values: `top`, `bottom` (default).              | `"bottom" \| "top"`                      | `'bottom'`         |
-| `variant`           | `variant`             | The variant of the fab set.                                                                   | `"menu" \| "stacked"`                    | `'menu'`           |
+| Property            | Attribute             | Description                                                                                   | Type                                     | Default     |
+| ------------------- | --------------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
+| `dialDirection`     | `dial-direction`      | The direction of the speed dial. Possible values: `top` (default), `bottom`, `right`, `left`. | `"bottom" \| "left" \| "right" \| "top"` | `'top'`     |
+| `label`             | `label`               | The label of the fab set when the variant is `stacked`.                                       | `string`                                 | `undefined` |
+| `leftRightLocation` | `left-right-location` | The side where the Fab is displayed. Possible values: `right`, `left` (default).              | `"left" \| "right"`                      | `'left'`    |
+| `openDial`          | `open-dial`           | Opens the dial (**uncontrolled**)                                                             | `boolean`                                | `false`     |
+| `topBottomLocation` | `top-bottom-location` | The side where the Fab is displayed. Possible values: `top`, `bottom` (default).              | `"bottom" \| "top"`                      | `'bottom'`  |
 
 
 ## Slots

diff --git a/packages/elements/src/components/ino-fab/ino-fab.scss b/packages/elements/src/components/ino-fab/ino-fab.scss
@@ -96,6 +96,8 @@ ino-fab {
   --fab-background-color-disabled: var(--ino-background-color-disabled, #{theme.$n-4});
   --fab-icon-color-disabled: var(--ino-fab-icon-color-disabled, #{theme.$white});
 
+  display: inline-block;
+
   // colors
   .mdc-fab {
     @include typography.typo(title-l);

diff --git a/packages/elements/src/components/ino-fab/ino-fab.tsx b/packages/elements/src/components/ino-fab/ino-fab.tsx
@@ -4,6 +4,8 @@ import classNames from 'classnames';
 import { Placement } from 'tippy.js';
 import { hasSlotContent } from '../../util/component-utils';
 
+import { TippyThemes } from '../types';
+
 /**
  * A floating action button represents the primary action in an application. [Floating Action Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab) component.
  * It appears in front of all screen content, typically as a circular shape with an icon in its center.
@@ -59,6 +61,11 @@ export class Fab implements ComponentInterface {
    */
   @Prop() shadow? = false;
 
+  /**
+   * The theme of the tooltip which will be displayed when the button is not extended.
+   */
+  @Prop() tooltipTheme?: TippyThemes = 'transparent'
+
   /**
    * 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.
@@ -98,6 +105,7 @@ export class Fab implements ComponentInterface {
 
     const tooltip = document.createElement('ino-tooltip');
     Object.keys(attributes).forEach(key => tooltip.setAttribute(key, attributes[key]));
+    tooltip.setAttribute('color-scheme', this.tooltipTheme)
     this.el.appendChild(tooltip);
     this.tooltip = tooltip;
   }