Skip to content

Commit

Permalink
style(elements|ino-popover): update design (#974)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: The `colorScheme` was updated with its possibilities now being `light`, `dark`, and `primary` (default). The equivalent of the old `transparent` option is `light` and needs to be updated accordingly.
  • Loading branch information
@MariaLStefan
MariaLStefan authored Sep 7, 2023
1 parent 5ad5f90 commit 3b6a756
Show file tree
Hide file tree
Showing 18 changed files with 281 additions and 114 deletions.
4 changes: 2 additions & 2 deletions packages/elements-angular/src/directives/proxies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -816,14 +816,14 @@ and emits with `false` when the target or the outside is clicked.

@ProxyCmp({
defineCustomElementFn: undefined,
inputs: ['attachToBody', 'colorScheme', 'controlled', 'delay', 'distance', 'followCursor', 'for', 'hideOnBlur', 'hideOnEsc', 'interactive', 'placement', 'trigger', 'visible'],
inputs: ['arrow', 'attachToBody', 'colorScheme', 'controlled', 'delay', 'distance', 'followCursor', 'for', 'hideOnBlur', 'hideOnEsc', 'interactive', 'placement', 'trigger', 'visible'],
methods: ['getTippyInstance']
})
@Component({
selector: 'ino-popover',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
inputs: ['attachToBody', 'colorScheme', 'controlled', 'delay', 'distance', 'followCursor', 'for', 'hideOnBlur', 'hideOnEsc', 'interactive', 'placement', 'trigger', 'visible']
inputs: ['arrow', 'attachToBody', 'colorScheme', 'controlled', 'delay', 'distance', 'followCursor', 'for', 'hideOnBlur', 'hideOnEsc', 'interactive', 'placement', 'trigger', 'visible']
})
export class InoPopover {
protected el: HTMLElement;
Expand Down
1 change: 1 addition & 0 deletions packages/elements-vue/src/proxies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,7 @@ export const InoOptionGroup = /*@__PURE__*/ defineContainer<JSX.InoOptionGroup>(

export const InoPopover = /*@__PURE__*/ defineContainer<JSX.InoPopover>('ino-popover', undefined, [
'placement',
'arrow',
'attachToBody',
'for',
'hideOnBlur',
Expand Down
22 changes: 15 additions & 7 deletions packages/elements/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { Alignment, ButtonType, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarType, SpinnerType, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
import { Alignment, ButtonType, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
import { Variants } from "./components/ino-button/ino-button";
import { PickerTypeKeys } from "./components/ino-datepicker/picker-factory";
import { Placement, Props } from "tippy.js";
Expand Down Expand Up @@ -883,20 +883,24 @@ export namespace Components {
"label"?: string;
}
interface InoPopover {
/**
* Shows an arrow pointing towards its trigger-element
*/
"arrow": boolean;
/**
* If set, attaches the popover element to the body. Useful to avoid overflow or z-index issues.
*/
"attachToBody": boolean;
/**
* Sets the color scheme of the popup Valid options include: 'primary', 'transparent'
* Sets the color scheme of the popup. Valid options include: `primary`, `light` and `dark`.
*/
"colorScheme": 'primary' | 'transparent';
"colorScheme": TippyThemes;
/**
* Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`)
*/
"controlled": boolean;
/**
* The delay in milliseconds before `ino-tooltip` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms.
* The delay in milliseconds before `ino-popover` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms.
*/
"delay"?: number | [number, number];
/**
Expand Down Expand Up @@ -2767,20 +2771,24 @@ declare namespace LocalJSX {
"label"?: string;
}
interface InoPopover {
/**
* Shows an arrow pointing towards its trigger-element
*/
"arrow"?: boolean;
/**
* If set, attaches the popover element to the body. Useful to avoid overflow or z-index issues.
*/
"attachToBody"?: boolean;
/**
* Sets the color scheme of the popup Valid options include: 'primary', 'transparent'
* Sets the color scheme of the popup. Valid options include: `primary`, `light` and `dark`.
*/
"colorScheme"?: 'primary' | 'transparent';
"colorScheme"?: TippyThemes;
/**
* Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`)
*/
"controlled"?: boolean;
/**
* The delay in milliseconds before `ino-tooltip` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms.
* The delay in milliseconds before `ino-popover` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms.
*/
"delay"?: number | [number, number];
/**
Expand Down
55 changes: 55 additions & 0 deletions packages/elements/src/components/base/_tooltip-base.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
@use '../base/mdc-customize';
@use './new-theme' as theme;
@import '~tippy.js/animations/scale-subtle.css';
@import '~tippy.js/dist/svg-arrow.css';
@import '~tippy.js/dist/tippy.css';
@import '../base/typography';

$border-radius: 10px;
$shadow-color: rgba(93, 91, 105, 0.3);

@mixin tooltip($background-color, $font-color) {
background: $background-color;
color: $font-color;

& .tippy-content {
background-color: $background-color;
}

& > .tippy-svg-arrow {
fill: $background-color;

svg {
fill: $background-color;
}
}
}

// global styles
.tippy-box {
@include font(sans-serif, m, regular);
border-radius: $border-radius;
z-index: 9999;
}

.tippy-content {
border-radius: $border-radius;
}

// set up custom themes for tippy.js
.tippy-box[data-theme~='light'] {
box-shadow: 0 0 15px 0 $shadow-color;
@include tooltip(theme.$white, theme.$black);

& > .tippy-svg-arrow svg {
filter: drop-shadow(0 -6px 3px $shadow-color);
}
}

.tippy-box[data-theme~='dark'] {
@include tooltip(theme.$n-9, theme.$white);
}

.tippy-box[data-theme~='primary'] {
@include tooltip(theme.$p-3, theme.$p-6);
}
2 changes: 1 addition & 1 deletion packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ export class MarkdownEditor implements ComponentInterface {
<ino-popover
placement="top-start"
controlled={true}
color-scheme="transparent"
colorScheme="light"
visible={Boolean(this.errorMessage)}>
<span class="markdown-editor__error-text">{this.errorMessage}</span>
</ino-popover>
Expand Down
4 changes: 2 additions & 2 deletions packages/elements/src/components/ino-menu/ino-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ export class Menu implements ComponentInterface {
return (
<Host>
<ino-popover
colorScheme="light"
ref={(el) => (this.popoverEl = el)}
color-scheme="transparent"
interactive
interactive={true}
for={this.el.parentElement.id}
placement={this.placement}
trigger={'click'}
Expand Down
25 changes: 4 additions & 21 deletions packages/elements/src/components/ino-popover/ino-popover.scss
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,6 @@
@use '../base/mdc-customize';
@use '../ino-tooltip/mixins' as tooltip-mixins;
@use '../base/theme';
@import '~tippy.js/animations/scale-subtle.css';
// ino-popover & ino-tooltip use the same base-design
@use '../base/tooltip-base';

$color-schemes: 'primary', 'secondary', 'light';

.ino-popover > * {
border-radius: 6px;
}

@each $color in $color-schemes {
.ino-popover.ino-popover--color-scheme-#{$color} > * {
@include tooltip-mixins.tooltip(
theme.color($color, light),
theme.color($color, contrast)
);
}
}

.ino-popover.ino-popover--color-scheme-transparent > * {
@include tooltip-mixins.tooltip(#fff, theme.color(dark));
.tippy-content {
padding: 0;
}
43 changes: 25 additions & 18 deletions packages/elements/src/components/ino-popover/ino-popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@ import {
} from '@stencil/core';
import classNames from 'classnames';
import TippyJS, {
followCursor,
Instance as Tippy,
Placement,
Props,
followCursor,
roundArrow,
} from 'tippy.js';
import { getSlotContent } from '../../util/component-utils';
import { TooltipTrigger } from '../types';
import { TippyThemes, TooltipTrigger } from '../types';
import { closest } from '@material/dom/ponyfill';
import { hideOnEsc, hideOnPopperBlur } from './plugins';

Expand Down Expand Up @@ -53,6 +54,11 @@ export class Popover implements ComponentInterface {
});
}

/**
* Shows an arrow pointing towards its trigger-element
*/
@Prop() arrow = false;

/**
* If set, attaches the popover element to the body.
* Useful to avoid overflow or z-index issues.
Expand Down Expand Up @@ -110,11 +116,11 @@ export class Popover implements ComponentInterface {
}

/**
* Sets the color scheme of the popup
* Valid options include: 'primary', 'transparent'
* Sets the color scheme of the popup.
*
* Valid options include: `primary`, `light` and `dark`.
*/
@Prop() colorScheme: 'primary' | 'transparent' =
'primary';
@Prop() colorScheme: TippyThemes = 'primary';

/**
* Use this if you want to interact with the popover content (e.g. button clicks)
Expand Down Expand Up @@ -150,7 +156,7 @@ export class Popover implements ComponentInterface {
}

/**
* The delay in milliseconds before `ino-tooltip` shows up or hides.
* The delay in milliseconds before `ino-popover` shows up or hides.
*
* If only one number is given, the show and hide delay get the given delay duration.
*
Expand All @@ -164,8 +170,8 @@ export class Popover implements ComponentInterface {
@Watch('delay')
onDelayChange() {
this.tippyInstance?.setProps({
delay: this.delay
})
delay: this.delay,
});
}

/**
Expand Down Expand Up @@ -233,17 +239,22 @@ export class Popover implements ComponentInterface {
plugins.push(hideOnEsc);
}

// in HTML to check if "false" was provided
const shouldFollowCursor = this.followCursor && (this.followCursor as any) !== "false";
const shouldFollowCursor =
(typeof this.followCursor == 'boolean' && this.followCursor) ||
['horizontal', 'vertical', 'initial'].includes(
this.followCursor as string
);

if(shouldFollowCursor) {
plugins.push(followCursor)
if (shouldFollowCursor) {
plugins.push(followCursor);
}

const options: Partial<Props> = {
allowHTML: true,
theme: this.colorScheme,
animation: 'scale-subtle',
appendTo: this.attachToBody ? document.body : this.popoverContainer,
arrow: this.arrow ? roundArrow : false,
content: this.popoverContent,
duration: 100,
delay: this.delay,
Expand Down Expand Up @@ -335,11 +346,7 @@ export class Popover implements ComponentInterface {
}

render() {
const popoverClasses = classNames(
'ino-popover',
`ino-popover--color-scheme-${this.colorScheme}`,
'ino-popover__content'
);
const popoverClasses = classNames('ino-popover', 'ino-popover__content');

return (
<Host>
Expand Down
5 changes: 3 additions & 2 deletions packages/elements/src/components/ino-popover/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,10 +204,11 @@ class MyComponent extends Component {

| Property | Attribute | Description | Type | Default |
| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `arrow` | `arrow` | Shows an arrow pointing towards its trigger-element | `boolean` | `false` |
| `attachToBody` | `attach-to-body` | If set, attaches the popover element to the body. Useful to avoid overflow or z-index issues. | `boolean` | `false` |
| `colorScheme` | `color-scheme` | Sets the color scheme of the popup Valid options include: 'primary', 'transparent' | `"primary" \| "transparent"` | `'primary'` |
| `colorScheme` | `color-scheme` | Sets the color scheme of the popup. Valid options include: `primary`, `light` and `dark`. | `"dark" \| "light" \| "primary"` | `'primary'` |
| `controlled` | `controlled` | Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`) | `boolean` | `false` |
| `delay` | `delay` | The delay in milliseconds before `ino-tooltip` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms. | `[number, number] \| number` | `0` |
| `delay` | `delay` | The delay in milliseconds before `ino-popover` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms. | `[number, number] \| number` | `0` |
| `distance` | `distance` | Displaces the popover away from, or toward, the anchor element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the anchor. | `number` | `10` |
| `followCursor` | `follow-cursor` | Determines if and how the popover follows the user's mouse cursor. | `"horizontal" \| "initial" \| "vertical" \| boolean` | `false` |
| `for` | `for` | The target id the popover belongs to. If not given, the popover is attached to the element provided in the named slot (`popover-trigger`) or the parent component if a slot element does not exist. | `string` | `undefined` |
Expand Down
8 changes: 4 additions & 4 deletions packages/elements/src/components/ino-table-header-cell/ino-table-header-cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,16 +216,16 @@ export class InoTableHeaderCell implements ComponentInterface {
<ino-popover
trigger="focus click"
placement="bottom-start"
controlled
color-scheme="transparent"
controlled={true}
colorScheme="light"
visible={this.searchActivated}
onVisibleChanged={e => (this.searchActivated = e.detail)}
ref={popover =>
(this.popoverElement = popover as HTMLInoPopoverElement)
}
interactive
interactive={true}
distance={8}
hideOnBlur
hideOnBlur={true}
>
<div
class="mdc-data-table__header-cell-wrapper"
Expand Down
Loading

0 comments on commit 3b6a756

Please sign in to comment.