From 938f1cd2d4da74a35862c8ad94148199f67e1e1b Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Thu, 10 Nov 2022 20:02:22 +0100 Subject: [PATCH 01/86] feat(chip): init component --- .../components/src/components/chip/chip.css | 102 ++++++++++++++++++ .../components/src/components/chip/chip.tsx | 101 +++++++++++++++++ 2 files changed, 203 insertions(+) create mode 100644 packages/components/src/components/chip/chip.css create mode 100644 packages/components/src/components/chip/chip.tsx diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css new file mode 100644 index 0000000000..517e1bb017 --- /dev/null +++ b/packages/components/src/components/chip/chip.css @@ -0,0 +1,102 @@ +/** + * @license + * Scale https://github.com/telekom/scale + * + * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +:host { + --background: var(--telekom-color-ui-faint); + --color: var(--telekom-color-text-and-icon-standard); + --font-size: var(--telekom-typography-font-size-body); + --line-height: 24px; + --font-weight: var(--telekom-typography-font-weight-bold); +} + +.chip { + display: inline-flex; + outline: none; + padding: 0 10px 0 5.5px; + text-align: center; + transition: all 0.15s ease-in-out; + align-items: center; + white-space: nowrap; + border-radius: 20px; + vertical-align: baseline; + justify-content: center; + font-size: var(--font-size); + line-height: var(--line-height); + font-weight: var(--font-weight); + background: var(--background); + color: var(--color); + cursor: default; +} + +.chip--dismissable { + background-color: transparent; + padding: 0; +} + +.chip svg { + color: var(--color); + /*TODO: -clarify magic number*/ + padding: 4.5px; +} + +.chip.chip--dismissable svg { + color: var(--telekom-color-text-and-icon-black-additional); + /*TODO: -clarify magic number*/ + padding: 4.5px; +} + +.chip button { + height: 24px; + width: 24px; + align-items: center; + justify-content: center; + margin: 0; + padding: 0; + border: 0; + background-color: transparent; +} + +.chip.chip--dismissable button { + border-radius: 20px; +} + +/** hover */ +.chip.chip--dismissable svg:hover { + color: var(--telekom-color-text-and-icon-black-standard); + background-color: var(--telekom-color-ui-state-fill-hovered); +} +/** active */ +.chip.chip--dismissable svg:active { + background-color: var(--telekom-color-ui-state-fill-pressed); +} + +/** color-black */ + +.chip.chip--color-magenta { + background: var(--telekom-color-background-canvas); + color: var(--telekom-color-text-and-icon-primary-standard); + border: 1px var(--telekom-color-text-and-icon-primary-standard) solid; +} + +.chip:not(.chip--dismissable).chip--color-black svg { + color: var(--telekom-color-text-and-icon-inverted-standard); +} + +/** color-magenta */ + +.chip.chip--color-black { + background: var(--telekom-color-ui-extra-strong); + color: var(--telekom-color-text-and-icon-inverted-standard); +} + +.chip:not(.chip--dismissable).chip--color-magenta svg { + color: var(--telekom-color-text-and-icon-primary-standard); +} diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx new file mode 100644 index 0000000000..518d229fbd --- /dev/null +++ b/packages/components/src/components/chip/chip.tsx @@ -0,0 +1,101 @@ +/** + * @license + * Scale https://github.com/telekom/scale + * + * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core'; +import classNames from 'classnames'; +import { emitEvent } from '../../utils/utils'; +@Component({ + tag: 'scale-chip', + styleUrl: './chip.css', + shadow: true, +}) +export class Chip { + /** (optional) Chip href */ + @Prop() href?: string = ''; + /** (optional) Chip target */ + @Prop() target?: string = '_self'; + /** (optional) Chip dismissable */ + @Prop() dismissable?: boolean = false; + /** (optional) Chip icon only */ + @Prop() iconOnly?: boolean = false; + /** (optional) Chip color */ + @Prop() color?: 'black' | 'magenta' | 'default' = 'default'; + /** (optional) Chip disabled */ + @Prop() disabled?: boolean = false; + /** (optional) Injected CSS styles */ + @Prop() styles?: string; + + /** (optional) Close icon click event */ + @Event({ eventName: 'scale-close' }) scaleClose: EventEmitter; + /** @deprecated in v3 in favor of kebab-case event names */ + @Event({ eventName: 'scaleClose' }) + scaleCloseLegacy: EventEmitter; + + componentWillUpdate() {} + disconnectedCallback() {} + + handleClose = (event: MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + if (this.disabled) { + return; + } + emitEvent(this, 'scaleClose', event); + }; + + render() { + const Element = !!this.href && !this.disabled ? 'a' : 'span'; + const linkProps = !!this.href + ? { + href: this.href, + target: this.target, + } + : {}; + + return ( + + {this.styles && } + + + + {!this.dismissable && } + + + ); + } + + getBasePartMap() { + return this.getCssOrBasePartMap('basePart'); + } + + getCssClassMap() { + return this.getCssOrBasePartMap('css'); + } + + getCssOrBasePartMap(mode: 'basePart' | 'css') { + const component = 'chip'; + const prefix = mode === 'basePart' ? '' : `${component}--`; + + return classNames( + mode === 'basePart' ? 'base' : component, + this.color && `${prefix}color-${this.color}`, + !!this.href && `${prefix}link`, + !!this.dismissable && `${prefix}dismissable`, + !!this.disabled && `${prefix}disabled` + ); + } +} From b6986965c6186072da675b491b8e7e82f231b43d Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 14 Nov 2022 10:22:26 +0100 Subject: [PATCH 02/86] refactor: cleaning up component --- .../components/src/components/chip/chip.css | 99 ++++++++++++++----- .../components/src/components/chip/chip.tsx | 19 +++- .../components/src/components/chip/readme.md | 46 +++++++++ 3 files changed, 134 insertions(+), 30 deletions(-) create mode 100644 packages/components/src/components/chip/readme.md diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css index 517e1bb017..ece5412f7b 100644 --- a/packages/components/src/components/chip/chip.css +++ b/packages/components/src/components/chip/chip.css @@ -12,9 +12,33 @@ :host { --background: var(--telekom-color-ui-faint); --color: var(--telekom-color-text-and-icon-standard); - --font-size: var(--telekom-typography-font-size-body); + --font-size: var(--telekom-typography-font-size-caption); --line-height: 24px; --font-weight: var(--telekom-typography-font-weight-bold); + + --color-svg-hover: var(--telekom-color-text-and-icon-black-standard); + --background-svg-hover: var(--telekom-color-ui-state-fill-hovered); + --background-svg-active: var(--telekom-color-ui-state-fill-pressed); + + /** color: magenta */ + --background-magenta: var(--telekom-color-background-canvas); + --color-magenta: var(--telekom-color-text-and-icon-primary-standard); + --border-magenta: 1px var(--telekom-color-text-and-icon-primary-standard) + solid; + + --color-magenta-svg: var(--telekom-color-text-and-icon-primary-standard); + + /** color: black */ + --background-black: var(--telekom-color-ui-extra-strong); + --color-black: var(--telekom-color-text-and-icon-inverted-standard); + + --color-black-svg: var(--telekom-color-text-and-icon-inverted-standard); + + /** disabled */ + --background-disabled: var(--telekom-color-ui-faint); + --color-disabled: var(--telekom-color-text-and-icon-disabled); + + --color-disabled-svg: var(--telekom-color-text-and-icon-disabled); } .chip { @@ -36,20 +60,8 @@ cursor: default; } -.chip--dismissable { - background-color: transparent; - padding: 0; -} - .chip svg { color: var(--color); - /*TODO: -clarify magic number*/ - padding: 4.5px; -} - -.chip.chip--dismissable svg { - color: var(--telekom-color-text-and-icon-black-additional); - /*TODO: -clarify magic number*/ padding: 4.5px; } @@ -59,44 +71,77 @@ align-items: center; justify-content: center; margin: 0; + margin-right: 1.5px; padding: 0; border: 0; background-color: transparent; } +/** + dismissable +*/ + +.chip--dismissable { + background-color: transparent; + padding: 0; +} + +.chip.chip--dismissable svg { + color: var(--telekom-color-text-and-icon-black-additional); + padding: 4.5px; +} + .chip.chip--dismissable button { border-radius: 20px; } /** hover */ .chip.chip--dismissable svg:hover { - color: var(--telekom-color-text-and-icon-black-standard); - background-color: var(--telekom-color-ui-state-fill-hovered); + color: var(--color-svg-hover); + background: var(--background-svg-hover); } /** active */ .chip.chip--dismissable svg:active { - background-color: var(--telekom-color-ui-state-fill-pressed); + background: var(--background-svg-active); } -/** color-black */ +/** + color-black +*/ -.chip.chip--color-magenta { - background: var(--telekom-color-background-canvas); - color: var(--telekom-color-text-and-icon-primary-standard); - border: 1px var(--telekom-color-text-and-icon-primary-standard) solid; +.chip.chip--color-black { + background: var(--background-black); + color: var(--color-black); } .chip:not(.chip--dismissable).chip--color-black svg { - color: var(--telekom-color-text-and-icon-inverted-standard); + color: var(--color-black-svg); } -/** color-magenta */ +/** + color-magenta +*/ -.chip.chip--color-black { - background: var(--telekom-color-ui-extra-strong); - color: var(--telekom-color-text-and-icon-inverted-standard); +.chip.chip--color-magenta { + background: var(--background-magenta); + color: var(--color-magenta); + border: var(--border-magenta); } .chip:not(.chip--dismissable).chip--color-magenta svg { - color: var(--telekom-color-text-and-icon-primary-standard); + color: var(--color-magenta-svg); +} + +/** + disabled +*/ + +.chip.chip--disabled { + background: var(--background-disabled); + color: var(--color-disabled); + border: var(--border-disabled); +} + +.chip:not(.chip--dismissable).chip--disabled svg { + color: var(--color-disabled-svg); } diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx index 518d229fbd..7afcbf49cc 100644 --- a/packages/components/src/components/chip/chip.tsx +++ b/packages/components/src/components/chip/chip.tsx @@ -69,9 +69,22 @@ export class Chip { class={this.getCssClassMap()} {...linkProps} > - + {this.dismissable && ( + + )} + {!this.dismissable && ( + + )} {!this.dismissable && } diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md new file mode 100644 index 0000000000..1eceaf4d42 --- /dev/null +++ b/packages/components/src/components/chip/readme.md @@ -0,0 +1,46 @@ +# scale-chip + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | ------------------------------ | ----------------------------------- | ----------- | +| `color` | `color` | (optional) Chip color | `"black" \| "default" \| "magenta"` | `'default'` | +| `disabled` | `disabled` | (optional) Chip disabled | `boolean` | `false` | +| `dismissable` | `dismissable` | (optional) Chip dismissable | `boolean` | `false` | +| `href` | `href` | (optional) Chip href | `string` | `''` | +| `iconOnly` | `icon-only` | (optional) Chip icon only | `boolean` | `false` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `target` | `target` | (optional) Chip target | `string` | `'_self'` | + + +## Events + +| Event | Description | Type | +| ------------- | -------------------------------------------------------------------------------------------------- | ------------------------- | +| `scale-close` | (optional) Close icon click event | `CustomEvent` | +| `scaleClose` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | + + +## Dependencies + +### Depends on + +- [scale-icon-action-circle-close](../icons/action-circle-close) +- [scale-icon-device-mobile-services](../icons/device-mobile-services) + +### Graph +```mermaid +graph TD; + scale-chip --> scale-icon-action-circle-close + scale-chip --> scale-icon-device-mobile-services + style scale-chip fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* From 4772c4993a4da55b4f564cf08b8c36d4bebe65ec Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 14 Nov 2022 15:37:13 +0100 Subject: [PATCH 03/86] feat: init new chip concept --- .../components/src/components/chip/chip.css | 237 +++++++++++------- .../components/src/components/chip/chip.tsx | 59 +++-- 2 files changed, 177 insertions(+), 119 deletions(-) diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css index ece5412f7b..a6a4759129 100644 --- a/packages/components/src/components/chip/chip.css +++ b/packages/components/src/components/chip/chip.css @@ -10,138 +10,187 @@ */ :host { - --background: var(--telekom-color-ui-faint); - --color: var(--telekom-color-text-and-icon-standard); - --font-size: var(--telekom-typography-font-size-caption); - --line-height: 24px; + --background: var(--telekom-color-ui-extra-strong); + --color: var(--telekom-color-text-and-icon-inverted-standard); + --font-size: var(--telekom-typography-font-size-body); + --line-height: var(--telekom-typography-line-spacing-standard); --font-weight: var(--telekom-typography-font-weight-bold); + --focus-outline: var(--telekom-line-weight-highlight) solid + var(--telekom-color-functional-focus); - --color-svg-hover: var(--telekom-color-text-and-icon-black-standard); - --background-svg-hover: var(--telekom-color-ui-state-fill-hovered); - --background-svg-active: var(--telekom-color-ui-state-fill-pressed); + --icon-color: var(--color); + --icon-color-hover: var(--color); - /** color: magenta */ - --background-magenta: var(--telekom-color-background-canvas); - --color-magenta: var(--telekom-color-text-and-icon-primary-standard); - --border-magenta: 1px var(--telekom-color-text-and-icon-primary-standard) - solid; - - --color-magenta-svg: var(--telekom-color-text-and-icon-primary-standard); - - /** color: black */ - --background-black: var(--telekom-color-ui-extra-strong); - --color-black: var(--telekom-color-text-and-icon-inverted-standard); - - --color-black-svg: var(--telekom-color-text-and-icon-inverted-standard); - - /** disabled */ - --background-disabled: var(--telekom-color-ui-faint); + --background-disabled: var(--telekom-color-ui-disabled); --color-disabled: var(--telekom-color-text-and-icon-disabled); - - --color-disabled-svg: var(--telekom-color-text-and-icon-disabled); } .chip { + border: 1px solid transparent; display: inline-flex; outline: none; - padding: 0 10px 0 5.5px; + padding: 0 8px; text-align: center; transition: all 0.15s ease-in-out; align-items: center; white-space: nowrap; border-radius: 20px; + height: 32px; vertical-align: baseline; justify-content: center; - font-size: var(--font-size); - line-height: var(--line-height); - font-weight: var(--font-weight); background: var(--background); color: var(--color); cursor: default; } -.chip svg { - color: var(--color); - padding: 4.5px; -} +/** +link +**/ -.chip button { - height: 24px; - width: 24px; - align-items: center; - justify-content: center; - margin: 0; - margin-right: 1.5px; - padding: 0; - border: 0; - background-color: transparent; +.chip--link { + text-decoration: none; } - -/** - dismissable -*/ - -.chip--dismissable { - background-color: transparent; - padding: 0; +.chip--link:focus { + border: 1px solid white; + outline: var(--focus-outline); } - -.chip.chip--dismissable svg { - color: var(--telekom-color-text-and-icon-black-additional); - padding: 4.5px; +.chip--link { + background: var(--background-secondary); } - -.chip.chip--dismissable button { - border-radius: 20px; +.chip--link:hover { + background: var(--background-secondary); } -/** hover */ -.chip.chip--dismissable svg:hover { - color: var(--color-svg-hover); - background: var(--background-svg-hover); -} -/** active */ -.chip.chip--dismissable svg:active { - background: var(--background-svg-active); +.chip--link:focus { + border: 1px solid white; } -/** - color-black -*/ +/** +label +**/ + +.chip-label { + padding: 0 12px 0 12px; + font-weight: 700; + font-size: 16px; + line-height: 100%; +} -.chip.chip--color-black { - background: var(--background-black); - color: var(--color-black); +/*icon slot front*/ +.chip slot[name='left-icon']::slotted(*) { + height: 16px; + width: 16px; + padding-left: 4px; } -.chip:not(.chip--dismissable).chip--color-black svg { - color: var(--color-black-svg); +/*icon slot end*/ +.chip slot[name='right-icon']::slotted(*) { + height: 16px; + width: 16px; + padding-right: 4px; } -/** - color-magenta -*/ +/** +standard type +**/ -.chip.chip--color-magenta { - background: var(--background-magenta); - color: var(--color-magenta); - border: var(--border-magenta); +/*standard*/ +.chip--type-standard.chip--color-grey { + background-color: var(--telekom-color-ui-faint); + color: var(--telekom-color-text-and-icon-standard); } - -.chip:not(.chip--dismissable).chip--color-magenta svg { - color: var(--color-magenta-svg); +/*cyan*/ +.chip--type-standard.chip--color-cyan { + background-color: var(--telekom-color-additional-cyan-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-cyan); +} +/*yellow*/ +.chip--type-standard.chip--color-yellow { + background-color: var(--telekom-color-additional-yellow-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-yellow); +} +/*green*/ +.chip--type-standard.chip--color-green { + background-color: var(--telekom-color-functional-success-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-success); +} +/*orange*/ +.chip--type-standard.chip--color-orange { + background-color: var(--telekom-color-functional-warning-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-warning); +} +/*red*/ +.chip--type-standard.chip--color-red { + background-color: var(--telekom-color-functional-danger-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-danger); +} +/*violet*/ +.chip--type-standard.chip--color-violet { + background-color: var(--telekom-color-additional-violet-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-violet); +} +/*brown*/ +.chip--type-standard.chip--color-brown { + background-color: var(--telekom-color-additional-brown-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-brown); +} +/*olive*/ +.chip--type-standard.chip--color-olive { + background-color: var(--telekom-color-additional-olive-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-olive); +} +/*teal*/ +.chip--type-standard.chip--color-teal { + background-color: var(--telekom-color-additional-teal-subtle); + color: var(--telekom-color-text-and-icon-on-subtle-teal); } -/** - disabled +/* +* +strong type +* */ - -.chip.chip--disabled { - background: var(--background-disabled); - color: var(--color-disabled); - border: var(--border-disabled); +.chip--type-strong { + color: var(--telekom-color-text-and-icon-standard); } - -.chip:not(.chip--dismissable).chip--disabled svg { - color: var(--color-disabled-svg); +/*standard*/ +.chip--type-strong.chip--color-grey { + background-color: var(--telekom-color-ui-extra-strong); + color: var(--telekom-color-text-and-icon-inverted-standard); +} +/*cyan*/ +.chip--type-strong.chip--color-cyan { + background-color: var(--telekom-color-additional-cyan-400); +} +/*yellow*/ +.chip--type-strong.chip--color-yellow { + background-color: var(--telekom-color-additional-yellow-400); +} +/*green*/ +.chip--type-strong.chip--color-green { + background-color: var(--telekom-color-functional-success-standard); +} +/*orange*/ +.chip--type-strong.chip--color-orange { + background-color: var(--telekom-color-functional-warning-standard); +} +/*red*/ +.chip--type-strong.chip--color-red { + background-color: var(--telekom-color-functional-danger-standard); +} +/*violet*/ +.chip--type-strong.chip--color-violet { + background-color: var(--telekom-color-additional-violet-300); +} +/*brown*/ +.chip--type-strong.chip--color-brown { + background-color: var(--telekom-color-additional-brown-400); +} +/*olive*/ +.chip--type-strong.chip--color-olive { + background-color: var(--telekom-color-additional-olive-400); +} +/*teal*/ +.chip--type-strong.chip--color-teal { + background-color: var(--telekom-color-additional-teal-400); } diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx index 7afcbf49cc..c6b1c78a27 100644 --- a/packages/components/src/components/chip/chip.tsx +++ b/packages/components/src/components/chip/chip.tsx @@ -18,18 +18,32 @@ import { emitEvent } from '../../utils/utils'; shadow: true, }) export class Chip { - /** (optional) Chip href */ + /** (optional) chip type */ + @Prop() type?: 'standard' | 'strong' | 'inversed' | 'colored' = 'standard'; + /** (optional) chip color */ + @Prop() color?: + | 'cyan' + | 'yellow' + | 'green' + | 'orange' + | 'red' + | 'violet' + | 'brown' + | 'olive' + | 'teal' + | 'black' + | 'grey'; + /** (optional) chip href */ @Prop() href?: string = ''; - /** (optional) Chip target */ + @Prop() label?: string; + /** (optional) chip target */ @Prop() target?: string = '_self'; - /** (optional) Chip dismissable */ + /** (optional) chip dismissable */ @Prop() dismissable?: boolean = false; - /** (optional) Chip icon only */ - @Prop() iconOnly?: boolean = false; - /** (optional) Chip color */ - @Prop() color?: 'black' | 'magenta' | 'default' = 'default'; - /** (optional) Chip disabled */ + /** (optional) chip disabled */ @Prop() disabled?: boolean = false; + /** (optional) Dismiss label */ + @Prop() dismissText?: string = 'dismiss'; /** (optional) Injected CSS styles */ @Prop() styles?: string; @@ -51,6 +65,13 @@ export class Chip { emitEvent(this, 'scaleClose', event); }; + handleClick = (event: MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + console.log('hey'); + emitEvent(this, 'scaleClose', event); + }; + render() { const Element = !!this.href && !this.disabled ? 'a' : 'span'; const linkProps = !!this.href @@ -68,24 +89,11 @@ export class Chip { part={this.getBasePartMap()} class={this.getCssClassMap()} {...linkProps} + onClick={this.handleClick} > - {this.dismissable && ( - - )} - {!this.dismissable && ( - - )} - {!this.dismissable && } + +

{this.label}

+ ); @@ -105,6 +113,7 @@ export class Chip { return classNames( mode === 'basePart' ? 'base' : component, + this.type && `${prefix}type-${this.type}`, this.color && `${prefix}color-${this.color}`, !!this.href && `${prefix}link`, !!this.dismissable && `${prefix}dismissable`, From fcf9f7aa005a7b8e8a3effa1f163116e7d22a33b Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 14 Nov 2022 18:33:22 +0100 Subject: [PATCH 04/86] feat: adding dismissible and selected functionality's --- .../components/src/components/chip/chip.tsx | 45 +++++++++++++++---- 1 file changed, 36 insertions(+), 9 deletions(-) diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx index c6b1c78a27..f8766cc4f2 100644 --- a/packages/components/src/components/chip/chip.tsx +++ b/packages/components/src/components/chip/chip.tsx @@ -20,6 +20,8 @@ import { emitEvent } from '../../utils/utils'; export class Chip { /** (optional) chip type */ @Prop() type?: 'standard' | 'strong' | 'inversed' | 'colored' = 'standard'; + /** (optional) */ + @Prop() selected?: boolean = false; /** (optional) chip color */ @Prop() color?: | 'cyan' @@ -35,25 +37,33 @@ export class Chip { | 'grey'; /** (optional) chip href */ @Prop() href?: string = ''; + /** (optional) chip dismissible */ + @Prop() dismissible?: boolean = false; + /** (optional) chip label */ @Prop() label?: string; /** (optional) chip target */ @Prop() target?: string = '_self'; - /** (optional) chip dismissable */ - @Prop() dismissable?: boolean = false; /** (optional) chip disabled */ @Prop() disabled?: boolean = false; - /** (optional) Dismiss label */ - @Prop() dismissText?: string = 'dismiss'; /** (optional) Injected CSS styles */ @Prop() styles?: string; + /** (optional) Change icon click event */ + @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter; + /** @deprecated in v3 in favor of kebab-case event names */ + @Event({ eventName: 'scaleChange' }) + scaleChangeLegacy: EventEmitter; /** (optional) Close icon click event */ @Event({ eventName: 'scale-close' }) scaleClose: EventEmitter; /** @deprecated in v3 in favor of kebab-case event names */ @Event({ eventName: 'scaleClose' }) scaleCloseLegacy: EventEmitter; - componentWillUpdate() {} + componentWillLoad() { + if (this.dismissible) { + this.selected = true; + } + } disconnectedCallback() {} handleClose = (event: MouseEvent) => { @@ -63,15 +73,33 @@ export class Chip { return; } emitEvent(this, 'scaleClose', event); + console.log('close'); }; handleClick = (event: MouseEvent) => { + if (this.dismissible) { + this.handleClose(event); + return; + } event.preventDefault(); event.stopPropagation(); - console.log('hey'); - emitEvent(this, 'scaleClose', event); + if (this.disabled) { + return; + } + emitEvent(this, 'scaleChange', event); + console.log('change'); }; + getIcon() { + if (this.dismissible) { + return ; + } else if (!this.dismissible) { + return ( + + ); + } + } + render() { const Element = !!this.href && !this.disabled ? 'a' : 'span'; const linkProps = !!this.href @@ -93,7 +121,7 @@ export class Chip { >

{this.label}

- + {this.selected ? this.getIcon() : null} ); @@ -116,7 +144,6 @@ export class Chip { this.type && `${prefix}type-${this.type}`, this.color && `${prefix}color-${this.color}`, !!this.href && `${prefix}link`, - !!this.dismissable && `${prefix}dismissable`, !!this.disabled && `${prefix}disabled` ); } From 3ca6b13f5a1129adb4e2a4c493bbee90b602de96 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Thu, 17 Nov 2022 18:51:27 +0100 Subject: [PATCH 05/86] feat: adding possibility for icons --- .../components/src/components/chip/chip.css | 37 ++++++++++----- .../components/src/components/chip/chip.tsx | 46 ++++++++++++++++--- 2 files changed, 66 insertions(+), 17 deletions(-) diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css index a6a4759129..d7566294f2 100644 --- a/packages/components/src/components/chip/chip.css +++ b/packages/components/src/components/chip/chip.css @@ -10,8 +10,8 @@ */ :host { - --background: var(--telekom-color-ui-extra-strong); - --color: var(--telekom-color-text-and-icon-inverted-standard); + --background: var(--telekom-color-ui-subtle); + --color: var(--telekom-color-text-and-icon-standard); --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); --font-weight: var(--telekom-typography-font-weight-bold); @@ -34,13 +34,19 @@ transition: all 0.15s ease-in-out; align-items: center; white-space: nowrap; - border-radius: 20px; + border-radius: 16px; height: 32px; vertical-align: baseline; justify-content: center; + background: var(--telekom-color-ui-base); + color: var(--telekom-color-ui-bold); + cursor: default; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.1); +} + +.chip--selected { background: var(--background); color: var(--color); - cursor: default; } /** @@ -77,19 +83,28 @@ label } /*icon slot front*/ -.chip slot[name='left-icon']::slotted(*) { - height: 16px; - width: 16px; +.chip slot[name='chip-icon']::slotted(*) { padding-left: 4px; + padding-top: 4px; +} + +/*icon end*/ +.chip scale-icon-action-success { + padding-right: 4px; } -/*icon slot end*/ -.chip slot[name='right-icon']::slotted(*) { - height: 16px; - width: 16px; +.chip scale-icon-action-close { padding-right: 4px; } +/** +inversed type +**/ +.chip.chip--type-inversed { + color: var(--telekom-color-text-and-icon-inverted-standard); + background: var(--telekom-color-ui-extra-strong); +} + /** standard type **/ diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx index f8766cc4f2..04af822842 100644 --- a/packages/components/src/components/chip/chip.tsx +++ b/packages/components/src/components/chip/chip.tsx @@ -9,7 +9,15 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core'; +import { + Component, + Prop, + h, + Host, + Event, + EventEmitter, + Element, +} from '@stencil/core'; import classNames from 'classnames'; import { emitEvent } from '../../utils/utils'; @Component({ @@ -18,8 +26,10 @@ import { emitEvent } from '../../utils/utils'; shadow: true, }) export class Chip { + @Element() hostElement: HTMLElement; /** (optional) chip type */ - @Prop() type?: 'standard' | 'strong' | 'inversed' | 'colored' = 'standard'; + //TODO: Inversed + @Prop() type?: 'standard' | 'strong' = 'standard'; /** (optional) */ @Prop() selected?: boolean = false; /** (optional) chip color */ @@ -47,6 +57,8 @@ export class Chip { @Prop() disabled?: boolean = false; /** (optional) Injected CSS styles */ @Prop() styles?: string; + /** (optional) chip icon size */ + @Prop() iconSize?: number = 16; /** (optional) Change icon click event */ @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter; @@ -60,10 +72,23 @@ export class Chip { scaleCloseLegacy: EventEmitter; componentWillLoad() { + //TODO other logic needed if (this.dismissible) { this.selected = true; } } + componentDidRender() { + //handle no setted icon size attribute + const defaultIconSize = 24; + const iconSlot = this.hostElement.querySelector( + '[slot="chip-icon"]' + ) as HTMLElement; + if (iconSlot !== null) { + console.log(iconSlot.children[0]); + if (iconSlot.children[0].getAttribute('size') == String(defaultIconSize)) + iconSlot.children[0].setAttribute('size', String(this.iconSize)); + } + } disconnectedCallback() {} handleClose = (event: MouseEvent) => { @@ -81,6 +106,7 @@ export class Chip { this.handleClose(event); return; } + this.selected = !this.selected; event.preventDefault(); event.stopPropagation(); if (this.disabled) { @@ -92,10 +118,18 @@ export class Chip { getIcon() { if (this.dismissible) { - return ; + return ( + + ); } else if (!this.dismissible) { return ( - + ); } } @@ -112,14 +146,13 @@ export class Chip { return ( {this.styles && } - - +

{this.label}

{this.selected ? this.getIcon() : null}
@@ -144,6 +177,7 @@ export class Chip { this.type && `${prefix}type-${this.type}`, this.color && `${prefix}color-${this.color}`, !!this.href && `${prefix}link`, + !!this.selected && `${prefix}selected`, !!this.disabled && `${prefix}disabled` ); } From d39c6f0e42b0073a0f8ec50934f7d9e2aaf3d522 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Thu, 17 Nov 2022 18:52:14 +0100 Subject: [PATCH 06/86] feat: adding unit test and storybook init --- .../chip/__snapshots__/chip.spec.ts.snap | 14 + .../src/components/chip/chip.spec.ts | 37 ++ .../components/src/components/chip/readme.md | 39 +- .../stories/components/chip/Chip.stories.mdx | 359 ++++++++++++++++++ .../stories/components/chip/ScaleChip.vue | 69 ++++ 5 files changed, 501 insertions(+), 17 deletions(-) create mode 100644 packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap create mode 100644 packages/components/src/components/chip/chip.spec.ts create mode 100644 packages/storybook-vue/stories/components/chip/Chip.stories.mdx create mode 100644 packages/storybook-vue/stories/components/chip/ScaleChip.vue diff --git a/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap b/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap new file mode 100644 index 0000000000..2c47d03a5f --- /dev/null +++ b/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Chip should match snapshot 1`] = ` + + + + +

+ Label Text +

+
+
+
+`; diff --git a/packages/components/src/components/chip/chip.spec.ts b/packages/components/src/components/chip/chip.spec.ts new file mode 100644 index 0000000000..2b1556cb01 --- /dev/null +++ b/packages/components/src/components/chip/chip.spec.ts @@ -0,0 +1,37 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { Chip } from './chip'; + +describe('Chip', () => { + let element; + + beforeEach(async () => { + element = new Chip(); + }); + + it('should match snapshot', async () => { + const page = await newSpecPage({ + components: [Chip], + html: ``, + }); + expect(page.root).toMatchSnapshot(); + }); + it('should handle css classes', () => { + element.type = 'strong'; + expect(element.getCssClassMap()).toContain('chip--type-strong'); + + element.color = 'green'; + expect(element.getCssClassMap()).toContain('chip--color-green'); + + element.type = 'strong'; + expect(element.getCssClassMap()).toContain('chip--type-strong'); + + element.selected = true; + expect(element.getCssClassMap()).toContain('chip--selected'); + + element.disabled = true; + expect(element.getCssClassMap()).toContain('chip--disabled'); + + element.href = 'http://example.com'; + expect(element.getCssClassMap()).toContain('chip--link'); + }); +}); diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md index 1eceaf4d42..d57c8c348c 100644 --- a/packages/components/src/components/chip/readme.md +++ b/packages/components/src/components/chip/readme.md @@ -7,37 +7,42 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ------------------------------ | ----------------------------------- | ----------- | -| `color` | `color` | (optional) Chip color | `"black" \| "default" \| "magenta"` | `'default'` | -| `disabled` | `disabled` | (optional) Chip disabled | `boolean` | `false` | -| `dismissable` | `dismissable` | (optional) Chip dismissable | `boolean` | `false` | -| `href` | `href` | (optional) Chip href | `string` | `''` | -| `iconOnly` | `icon-only` | (optional) Chip icon only | `boolean` | `false` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `target` | `target` | (optional) Chip target | `string` | `'_self'` | +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------ | +| `color` | `color` | (optional) chip color | `"black" \| "brown" \| "cyan" \| "green" \| "grey" \| "olive" \| "orange" \| "red" \| "teal" \| "violet" \| "yellow"` | `undefined` | +| `disabled` | `disabled` | (optional) chip disabled | `boolean` | `false` | +| `dismissible` | `dismissible` | (optional) chip dismissible | `boolean` | `false` | +| `href` | `href` | (optional) chip href | `string` | `''` | +| `iconSize` | `icon-size` | (optional) chip icon size | `number` | `16` | +| `label` | `label` | (optional) chip label | `string` | `undefined` | +| `selected` | `selected` | (optional) | `boolean` | `false` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `target` | `target` | (optional) chip target | `string` | `'_self'` | +| `type` | `type` | (optional) chip type | `"standard" \| "strong"` | `'standard'` | ## Events -| Event | Description | Type | -| ------------- | -------------------------------------------------------------------------------------------------- | ------------------------- | -| `scale-close` | (optional) Close icon click event | `CustomEvent` | -| `scaleClose` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | +| Event | Description | Type | +| -------------- | -------------------------------------------------------------------------------------------------- | ------------------------- | +| `scale-change` | (optional) Change icon click event | `CustomEvent` | +| `scale-close` | (optional) Close icon click event | `CustomEvent` | +| `scaleChange` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | +| `scaleClose` | **[DEPRECATED]** in v3 in favor of kebab-case event names

| `CustomEvent` | ## Dependencies ### Depends on -- [scale-icon-action-circle-close](../icons/action-circle-close) -- [scale-icon-device-mobile-services](../icons/device-mobile-services) +- [scale-icon-action-close](../icons/action-close) +- [scale-icon-action-success](../icons/action-success) ### Graph ```mermaid graph TD; - scale-chip --> scale-icon-action-circle-close - scale-chip --> scale-icon-device-mobile-services + scale-chip --> scale-icon-action-close + scale-chip --> scale-icon-action-success style scale-chip fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx new file mode 100644 index 0000000000..5ea143e321 --- /dev/null +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -0,0 +1,359 @@ +import { + Meta, + Story, + ArgsTable, + Canvas, + Description, +} from '@storybook/addon-docs'; +import ScaleChip from './ScaleChip.vue'; +import { action } from '@storybook/addon-actions'; + + + +export const Template = (args, { argTypes }) => ({ + props: { + label: String, + ...ScaleChip.props, + }, + template: ` + + `, + methods: { + action, + }, +}); + +export const TemplateIcon = (args, { argTypes }) => ({ + props: { + label: String, + ...ScaleChip.props, + }, + template: ` + + `, + methods: { + action, + }, +}); + +export const TemplateInteractive = (args, { argTypes }) => ({ + template: ` +
    +
  • + + +
    + + +
  • +
+ `, + methods: { + action: action('scaleChange'), + }, + data: () => ({ + colors: [ + 'grey', + 'cyan', + 'yellow', + 'green', + 'orange', + 'red', + 'violet', + 'brown', + 'olive', + 'teal', + ], + }), +}); + +export const TemplateClose = (args, { argTypes }) => ({ + template: ` +
    +
  • + + +
  • +
+ `, + methods: { + action: action('scaleClose'), + removeColor(color) { + this.action(); + this.colors = this.colors.filter((x) => x !== color); + setTimeout(() => { + this.$el.querySelector('#root > ul > li > scale-chip') && + this.$el + .querySelector('#root > ul > li > scale-chip') + .shadowRoot.querySelector('span > button') + .focus(); + }); + }, + }, + data: () => ({ + colors: ['grey'], + }), +}); + +
+

Dropdown Select

+ Beta Component +
+ +## Standard + + + + {Template.bind({})} + + + + + +## Icon Chip + + + + {TemplateIcon.bind({})} + + + +```html +
+ +
+
+``` + +## Dismissible Chip + + + + {Template.bind({})} + + + +```html + +``` + +## Selected Chip + +### Selected Chip + + + + {Template.bind({})} + + + +```html + +``` + +### Dismissible Selected Chip + + + + {Template.bind({})} + + + +```html + +``` + +## Colored Chip + +### Color Standard Chip + + + + {Template.bind({})} + + + +```html + +``` + +### Color Strong Chip + + + + {Template.bind({})} + + + +```html + +``` + +## Color Variety + + + {TemplateInteractive.bind({})} + + +## Change Action Chip + + + + {Template.bind({})} + + + +```html + +``` + +## Close Action Chip + + + {TemplateClose.bind({})} + + +```html + +``` diff --git a/packages/storybook-vue/stories/components/chip/ScaleChip.vue b/packages/storybook-vue/stories/components/chip/ScaleChip.vue new file mode 100644 index 0000000000..de4397dd17 --- /dev/null +++ b/packages/storybook-vue/stories/components/chip/ScaleChip.vue @@ -0,0 +1,69 @@ + + + From 138df1976e377711fb8c7b3eb5b8f1eb52b456cd Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Fri, 18 Nov 2022 16:08:21 +0100 Subject: [PATCH 07/86] feat: adding accessibility, disabled and removing magic numbers --- .../components/src/components/chip/chip.css | 86 ++++++++++--------- .../components/src/components/chip/chip.tsx | 31 +++---- .../components/src/components/chip/readme.md | 24 +++--- .../stories/components/chip/Chip.stories.mdx | 18 ++++ .../stories/components/chip/ScaleChip.vue | 8 +- 5 files changed, 94 insertions(+), 73 deletions(-) diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css index d7566294f2..d067c0cdfd 100644 --- a/packages/components/src/components/chip/chip.css +++ b/packages/components/src/components/chip/chip.css @@ -10,65 +10,65 @@ */ :host { - --background: var(--telekom-color-ui-subtle); + --background: var(--telekom-color-ui-base); --color: var(--telekom-color-text-and-icon-standard); --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); --font-weight: var(--telekom-typography-font-weight-bold); --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus); - - --icon-color: var(--color); - --icon-color-hover: var(--color); - - --background-disabled: var(--telekom-color-ui-disabled); + --box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1); + + /** + selected + **/ + --background-selected: var(--telekom-color-ui-subtle); + --color-selected: var(--telekom-color-text-and-icon-standard); + + /** + disabled + **/ + --background-disabled: var(--telekom-color-ui-base); --color-disabled: var(--telekom-color-text-and-icon-disabled); } .chip { - border: 1px solid transparent; + border: var(--telekom-spacing-unit-x025) solid transparent; display: inline-flex; outline: none; - padding: 0 8px; + padding: 0 var(--telekom-spacing-unit-x2); text-align: center; transition: all 0.15s ease-in-out; align-items: center; white-space: nowrap; - border-radius: 16px; + border-radius: 1rem; height: 32px; vertical-align: baseline; justify-content: center; - background: var(--telekom-color-ui-base); - color: var(--telekom-color-ui-bold); - cursor: default; - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.1); -} - -.chip--selected { background: var(--background); color: var(--color); + cursor: default; + box-shadow: var(--box-shadow); } -/** -link -**/ - -.chip--link { - text-decoration: none; -} -.chip--link:focus { - border: 1px solid white; - outline: var(--focus-outline); +.chip:not(.chip--disabled):hover { + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.1); } -.chip--link { - background: var(--background-secondary); + +.chip:not(.chip--disabled):focus { + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.1); + border: 2px solid #2238df; + border-radius: 5000px; } -.chip--link:hover { - background: var(--background-secondary); + +.chip:not(.chip--disabled):active { + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1); + background-color: var(--telekom-color-ui-subtle); } -.chip--link:focus { - border: 1px solid white; +.chip--selected { + background: var(--background-selected); + color: var(--color-selected); } /** @@ -76,25 +76,25 @@ label **/ .chip-label { - padding: 0 12px 0 12px; - font-weight: 700; - font-size: 16px; + padding: 0 var(--telekom-spacing-unit-x3) 0 var(--telekom-spacing-unit-x3); + font-weight: var(--telekom-typography-font-weight-bold); + font-size: 1rem; line-height: 100%; } /*icon slot front*/ .chip slot[name='chip-icon']::slotted(*) { - padding-left: 4px; - padding-top: 4px; + padding-left: var(--telekom-spacing-unit-x1); + padding-top: var(--telekom-spacing-unit-x1); } /*icon end*/ .chip scale-icon-action-success { - padding-right: 4px; + padding-right: var(--telekom-spacing-unit-x1); } .chip scale-icon-action-close { - padding-right: 4px; + padding-right: var(--telekom-spacing-unit-x1); } /** @@ -105,6 +105,14 @@ inversed type background: var(--telekom-color-ui-extra-strong); } +/** +disabled +**/ +.chip.chip--disabled { + background: var(--background-disabled); + color: var(--color-disabled); +} + /** standard type **/ diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx index 04af822842..0189556690 100644 --- a/packages/components/src/components/chip/chip.tsx +++ b/packages/components/src/components/chip/chip.tsx @@ -45,14 +45,14 @@ export class Chip { | 'teal' | 'black' | 'grey'; - /** (optional) chip href */ - @Prop() href?: string = ''; + /** (optional) chip aria-role */ + @Prop() ariaRoleTitle?: string = 'switch'; + /** (optional) chip aria-checked */ + @Prop() ariaCheckedState?: boolean; /** (optional) chip dismissible */ @Prop() dismissible?: boolean = false; /** (optional) chip label */ @Prop() label?: string; - /** (optional) chip target */ - @Prop() target?: string = '_self'; /** (optional) chip disabled */ @Prop() disabled?: boolean = false; /** (optional) Injected CSS styles */ @@ -135,27 +135,23 @@ export class Chip { } render() { - const Element = !!this.href && !this.disabled ? 'a' : 'span'; - const linkProps = !!this.href - ? { - href: this.href, - target: this.target, - } - : {}; - return ( {this.styles && } -

{this.label}

- {this.selected ? this.getIcon() : null} -
+ {this.selected && !this.disabled ? this.getIcon() : null} +
); } @@ -176,7 +172,6 @@ export class Chip { mode === 'basePart' ? 'base' : component, this.type && `${prefix}type-${this.type}`, this.color && `${prefix}color-${this.color}`, - !!this.href && `${prefix}link`, !!this.selected && `${prefix}selected`, !!this.disabled && `${prefix}disabled` ); diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md index d57c8c348c..1cd4104223 100644 --- a/packages/components/src/components/chip/readme.md +++ b/packages/components/src/components/chip/readme.md @@ -7,18 +7,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------ | -| `color` | `color` | (optional) chip color | `"black" \| "brown" \| "cyan" \| "green" \| "grey" \| "olive" \| "orange" \| "red" \| "teal" \| "violet" \| "yellow"` | `undefined` | -| `disabled` | `disabled` | (optional) chip disabled | `boolean` | `false` | -| `dismissible` | `dismissible` | (optional) chip dismissible | `boolean` | `false` | -| `href` | `href` | (optional) chip href | `string` | `''` | -| `iconSize` | `icon-size` | (optional) chip icon size | `number` | `16` | -| `label` | `label` | (optional) chip label | `string` | `undefined` | -| `selected` | `selected` | (optional) | `boolean` | `false` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `target` | `target` | (optional) chip target | `string` | `'_self'` | -| `type` | `type` | (optional) chip type | `"standard" \| "strong"` | `'standard'` | +| Property | Attribute | Description | Type | Default | +| ------------------ | -------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------ | +| `ariaCheckedState` | `aria-checked-state` | (optional) chip aria-checked | `boolean` | `undefined` | +| `ariaRoleTitle` | `aria-role-title` | (optional) chip aria-role | `string` | `'switch'` | +| `color` | `color` | (optional) chip color | `"black" \| "brown" \| "cyan" \| "green" \| "grey" \| "olive" \| "orange" \| "red" \| "teal" \| "violet" \| "yellow"` | `undefined` | +| `disabled` | `disabled` | (optional) chip disabled | `boolean` | `false` | +| `dismissible` | `dismissible` | (optional) chip dismissible | `boolean` | `false` | +| `iconSize` | `icon-size` | (optional) chip icon size | `number` | `16` | +| `label` | `label` | (optional) chip label | `string` | `undefined` | +| `selected` | `selected` | (optional) | `boolean` | `false` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `type` | `type` | (optional) chip type | `"standard" \| "strong"` | `'standard'` | ## Events diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index 5ea143e321..2498a9aec0 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -242,6 +242,24 @@ export const TemplateClose = (args, { argTypes }) => ({ ``` +## Disabled Chip + + + + {Template.bind({})} + + + +```html + +``` + ## Selected Chip ### Selected Chip diff --git a/packages/storybook-vue/stories/components/chip/ScaleChip.vue b/packages/storybook-vue/stories/components/chip/ScaleChip.vue index de4397dd17..3a20a84c32 100644 --- a/packages/storybook-vue/stories/components/chip/ScaleChip.vue +++ b/packages/storybook-vue/stories/components/chip/ScaleChip.vue @@ -3,10 +3,10 @@ :type="type" :selected="selected" :color="color" - :href="href" :dismissible="dismissible" :label="label" - :target="target" + :aria-checked-state="ariaCheckedState" + :aria-role-title="ariaRoleTitle" :disabled="disabled" :styles="styles" :icon-size="iconSize" @@ -39,13 +39,13 @@ export default { 'teal' | 'grey', }, - href: { type: String, default: '' }, dismissible: { type: Boolean, default: false }, label: { type: String }, - target: { type: String, default: '_self' }, disabled: { type: Boolean, default: false }, styles: { type: String }, iconSize: { type: Number, default: 16 }, + ariaRoleTitle: { type: String, default: 'switch' }, + ariaCheckedState: { type: Boolean }, }, methods: { scaleChange($event) { From ab534f7cb5e528d05cb792a939bb8725f274d4c0 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Fri, 18 Nov 2022 16:15:57 +0100 Subject: [PATCH 08/86] refactor: solving linting errors --- packages/components/src/components/chip/chip.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx index 0189556690..a7a342c50e 100644 --- a/packages/components/src/components/chip/chip.tsx +++ b/packages/components/src/components/chip/chip.tsx @@ -28,7 +28,7 @@ import { emitEvent } from '../../utils/utils'; export class Chip { @Element() hostElement: HTMLElement; /** (optional) chip type */ - //TODO: Inversed + // TODO: Inversed @Prop() type?: 'standard' | 'strong' = 'standard'; /** (optional) */ @Prop() selected?: boolean = false; @@ -72,21 +72,23 @@ export class Chip { scaleCloseLegacy: EventEmitter; componentWillLoad() { - //TODO other logic needed + // TODO other logic needed if (this.dismissible) { this.selected = true; } } componentDidRender() { - //handle no setted icon size attribute + // handle no setted icon size attribute const defaultIconSize = 24; const iconSlot = this.hostElement.querySelector( '[slot="chip-icon"]' ) as HTMLElement; if (iconSlot !== null) { - console.log(iconSlot.children[0]); - if (iconSlot.children[0].getAttribute('size') == String(defaultIconSize)) + if ( + iconSlot.children[0].getAttribute('size') === String(defaultIconSize) + ) { iconSlot.children[0].setAttribute('size', String(this.iconSize)); + } } } disconnectedCallback() {} @@ -98,7 +100,6 @@ export class Chip { return; } emitEvent(this, 'scaleClose', event); - console.log('close'); }; handleClick = (event: MouseEvent) => { @@ -113,7 +114,6 @@ export class Chip { return; } emitEvent(this, 'scaleChange', event); - console.log('change'); }; getIcon() { From 8a891c2444898c347445223170ceee7dd940cac7 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Fri, 18 Nov 2022 16:30:18 +0100 Subject: [PATCH 09/86] fix: naming --- packages/storybook-vue/stories/components/chip/Chip.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index 2498a9aec0..8e8e65c0fc 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -184,7 +184,7 @@ export const TemplateClose = (args, { argTypes }) => ({ width: '100%', }} > -

Dropdown Select

+

Chip

Beta Component From bce2ae3923dd5c7b3762b30210aa7f84fba68ba4 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 21 Nov 2022 09:58:27 +0100 Subject: [PATCH 10/86] fix: reference error --- packages/storybook-vue/stories/components/chip/Chip.stories.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index 8e8e65c0fc..cd5d4d9229 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -52,10 +52,8 @@ export const Template = (args, { argTypes }) => ({ :type="type" :selected="selected" :color="color" - :href="href" :dismissible="dismissible" :label="label" - :target="target" :disabled="disabled" :styles="styles" :icon-size="iconSize" From 3ac9abc52032fad7388389268db848eb5589906e Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 21 Nov 2022 10:14:13 +0100 Subject: [PATCH 11/86] fix: reference error --- .../storybook-vue/stories/components/chip/Chip.stories.mdx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index cd5d4d9229..7af150d101 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -57,8 +57,6 @@ export const Template = (args, { argTypes }) => ({ :disabled="disabled" :styles="styles" :icon-size="iconSize" - @scaleChange="scaleChange" - @scaleClose="scaleClose" > @@ -79,15 +77,12 @@ export const TemplateIcon = (args, { argTypes }) => ({ :type="type" :selected="selected" :color="color" - :href="href" :dismissible="dismissible" :label="label" :target="target" :disabled="disabled" :styles="styles" :icon-size="iconSize" - @scaleChange="scaleChange" - @scaleClose="scaleClose" >
From 4410ce262839a0cc3e2eb60321c06e477b07ea0b Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 21 Nov 2022 10:46:34 +0100 Subject: [PATCH 12/86] fix: reference error --- packages/storybook-vue/stories/components/chip/Chip.stories.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index 7af150d101..ef0f8274f3 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -79,7 +79,6 @@ export const TemplateIcon = (args, { argTypes }) => ({ :color="color" :dismissible="dismissible" :label="label" - :target="target" :disabled="disabled" :styles="styles" :icon-size="iconSize" From 0d5d5188b0d48a0861d31ad4177b362313afd94d Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 21 Nov 2022 19:39:17 +0100 Subject: [PATCH 13/86] refactor: changing story naming --- .../stories/components/chip/Chip.stories.mdx | 22 +++++++++---------- .../stories/components/chip/ScaleChip.vue | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index ef0f8274f3..a1dd5a610b 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -195,7 +195,7 @@ export const TemplateClose = (args, { argTypes }) => ({ -## Icon Chip +## Icon ({ ``` -## Dismissible Chip +## Dismissible ({ ``` -## Disabled Chip +## Disabled ({ ``` -## Selected Chip +## Selected -### Selected Chip +### Selected ({ ``` -### Dismissible Selected Chip +### Dismissible Selected ({ ``` -## Colored Chip +## Colored -### Color Standard Chip +### Color Standard ({ > ``` -### Color Strong Chip +### Color Strong ({ {TemplateInteractive.bind({})} -## Change Action Chip +## Change Action ({ ``` -## Close Action Chip +## Close Action {TemplateClose.bind({})} diff --git a/packages/storybook-vue/stories/components/chip/ScaleChip.vue b/packages/storybook-vue/stories/components/chip/ScaleChip.vue index 3a20a84c32..21c4a56b9e 100644 --- a/packages/storybook-vue/stories/components/chip/ScaleChip.vue +++ b/packages/storybook-vue/stories/components/chip/ScaleChip.vue @@ -22,7 +22,7 @@ import { action } from '@storybook/addon-actions'; export default { props: { type: { - type: 'strong' | 'standard', + type: 'strong' | 'standard' | 'inversed', default: 'standard', }, selected: { type: Boolean, default: false }, From 7588c6771a822da025905cd772191fc41bc52ef9 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 21 Nov 2022 19:41:16 +0100 Subject: [PATCH 14/86] feat: init visual tests --- ...spec-js-chip-dark-change-action-1-snap.png | Bin 0 -> 2679 bytes ...js-chip-dark-change-action-chip-1-snap.png | Bin 0 -> 2679 bytes ...-spec-js-chip-dark-close-action-1-snap.png | Bin 0 -> 3006 bytes ...-js-chip-dark-close-action-chip-1-snap.png | Bin 0 -> 3006 bytes ...pec-js-chip-dark-color-standard-1-snap.png | Bin 0 -> 3210 bytes ...s-chip-dark-color-standard-chip-1-snap.png | Bin 0 -> 3210 bytes ...-spec-js-chip-dark-color-strong-1-snap.png | Bin 0 -> 3050 bytes ...-js-chip-dark-color-strong-chip-1-snap.png | Bin 0 -> 3050 bytes ...sual-spec-js-chip-dark-disabled-1-snap.png | Bin 0 -> 2767 bytes ...spec-js-chip-dark-disabled-chip-1-snap.png | Bin 0 -> 2767 bytes ...l-spec-js-chip-dark-dismissible-1-snap.png | Bin 0 -> 3070 bytes ...c-js-chip-dark-dismissible-chip-1-snap.png | Bin 0 -> 3070 bytes ...-chip-dark-dismissible-selected-1-snap.png | Bin 0 -> 3914 bytes ...-dark-dismissible-selected-chip-1-snap.png | Bin 0 -> 3914 bytes ...p-visual-spec-js-chip-dark-icon-1-snap.png | Bin 0 -> 2764 bytes ...ual-spec-js-chip-dark-icon-chip-1-snap.png | Bin 0 -> 2764 bytes ...sual-spec-js-chip-dark-selected-1-snap.png | Bin 0 -> 3167 bytes ...spec-js-chip-dark-selected-chip-1-snap.png | Bin 0 -> 3167 bytes ...sual-spec-js-chip-dark-standard-1-snap.png | Bin 0 -> 2421 bytes ...sual-spec-js-chip-dark-standard-2-snap.png | Bin 0 -> 2421 bytes ...sual-spec-js-chip-dark-standard-3-snap.png | Bin 0 -> 3259 bytes ...sual-spec-js-chip-dark-standard-4-snap.png | Bin 0 -> 2421 bytes ...pec-js-chip-light-change-action-1-snap.png | Bin 0 -> 3321 bytes ...s-chip-light-change-action-chip-1-snap.png | Bin 0 -> 3321 bytes ...spec-js-chip-light-close-action-1-snap.png | Bin 0 -> 3747 bytes ...js-chip-light-close-action-chip-1-snap.png | Bin 0 -> 3747 bytes ...ec-js-chip-light-color-standard-1-snap.png | Bin 0 -> 3911 bytes ...-chip-light-color-standard-chip-1-snap.png | Bin 0 -> 3911 bytes ...spec-js-chip-light-color-strong-1-snap.png | Bin 0 -> 3717 bytes ...js-chip-light-color-strong-chip-1-snap.png | Bin 0 -> 3717 bytes ...ual-spec-js-chip-light-disabled-1-snap.png | Bin 0 -> 3532 bytes ...pec-js-chip-light-disabled-chip-1-snap.png | Bin 0 -> 3532 bytes ...-spec-js-chip-light-dismissible-1-snap.png | Bin 0 -> 3675 bytes ...-js-chip-light-dismissible-chip-1-snap.png | Bin 0 -> 3675 bytes ...chip-light-dismissible-selected-1-snap.png | Bin 0 -> 4498 bytes ...light-dismissible-selected-chip-1-snap.png | Bin 0 -> 4498 bytes ...-visual-spec-js-chip-light-icon-1-snap.png | Bin 0 -> 3389 bytes ...al-spec-js-chip-light-icon-chip-1-snap.png | Bin 0 -> 3389 bytes ...ual-spec-js-chip-light-selected-1-snap.png | Bin 0 -> 3703 bytes ...pec-js-chip-light-selected-chip-1-snap.png | Bin 0 -> 3703 bytes ...ual-spec-js-chip-light-standard-1-snap.png | Bin 0 -> 3094 bytes ...ual-spec-js-chip-light-standard-2-snap.png | Bin 0 -> 3644 bytes ...ual-spec-js-chip-light-standard-3-snap.png | Bin 0 -> 3147 bytes ...ual-spec-js-chip-light-standard-4-snap.png | Bin 0 -> 3094 bytes packages/visual-tests/src/chip.visual.spec.js | 47 ++++++++++++++++++ 45 files changed, 47 insertions(+) create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-change-action-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-change-action-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-close-action-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-close-action-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-standard-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-standard-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-strong-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-strong-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-disabled-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-disabled-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dismissible-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dismissible-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dismissible-selected-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dismissible-selected-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-icon-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-icon-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-selected-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-selected-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-2-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-3-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-4-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-change-action-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-change-action-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-close-action-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-close-action-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-standard-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-standard-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-strong-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-strong-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-disabled-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-disabled-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-selected-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-selected-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-icon-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-icon-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-selected-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-selected-chip-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-2-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-3-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-4-snap.png create mode 100644 packages/visual-tests/src/chip.visual.spec.js diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-change-action-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-change-action-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..4899abc1cef70a37d9657441ed1aed692f0328c0 GIT binary patch literal 2679 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 N3DnjJQf}jY`#u=0rX;AQK?HcnPtvz4WSTFOD` z-b<~OcBt}`ujFS>JbH>~JFr)JA_BjuA`mc1i-XVq!E22A z(DFB4?UUmPu9|m-mR9EI>H_{6?VPw=|1)IT2)ie{GFGtpwx(u^w8rd_-!4~8HraM2 zjRNQLCC@4idr%OYJWlpZUr6UF-IKs1Vd$Z%ymv3Hv(I37^W7QuY_)?wIWIl{&cAw^ zB?cKqt#q(DQ@Iq+ZFg|dHQ|Knhqk1n=rx8g=gILX)zRvpl5hjSec-h+!qmaRf!&>% z-TT5q#y#tZYyC>^r-+H9nd#|Q;iq7pS4+^1=?~9~P;4JS%<%=1r5+@Gx*PibHKK?6 z;x)jddg(dBRJbkRzTa=_+mUj@{MjEiOsr6lD2ItP=Fe9~)c{va5fXfzI7UM_tuay< zyi6wOF4Rt(@uPkUTV#@$r9jNpxOXCPMGhfdvVJ*sC_NtH#l@tq{vw@$1}X4Y;%djC zxC_!oXNlyd@5SY#?;?*1}9dUOwh^(^YDG!Dt-XPrDM%09 zm`tA>@=EU1Xx~jWmvPUK@rY>RZV#5aqB~B+XanR_BK`kw}x`@S{Kv>iI16 zdA^eN|{J95LBcBvXc15t9&?!$K@_QlMz`fN>l;t!q*WoP=a`yFgKjmBZqAG&k& zPSHIu?$see4NHtZ(_A&;8nG*b9g=f9(v*~$iar~*gFye|w zV1JrqaO%i zy-m$+$z!qWao=wabpoVQl=LRk93Ir^#BQyd@aLs;u23~;hN*<@mH4yT+TPn+8^g8t zybhgq&PX=iByP?7VN;1snm>fwL_szPf(3OnH04;8_ffFcUJgN&ctjYWi@@f z37hMNl7~)rFv5ito3VzLloJ;!{Cmei6nwdCp=E)6=hg-n&5WFy60D8UfHHgyGwKwu z8RLkxjnUb0$$p4sQq=P;Q|3@4vHU}DV^JC|zu9u!XpL&HsBC#Ld7DBFL?T}pEapax z|2hK#v_KYa!=O@))>Lw>*!0)eQi%|MbBJ&G3nn`vEYrBC7^df!8xu$HL z?6C$~G3W(UG|ede;Hhh29-fuH)@9^vq9#ZI1MB7R!^Y7OI9A;hKHS5#DSCsjAVqoi zND{p|upiB-qO%y`W0c6LTmtCVs&aC2vif2EIPc*KpIllVnmR12J^!z0ZjX+m@Jdyg zkkN@nqq#Pti1=NI+h6m*$ePx7Bp}KkaOy#D!}gKpSyThzj}vW4)`4^8nLph;Uw?lt z?~$a8H=oC;6Y#K?a4XZjig0tU@DV$=rJSM*$Ijq=6=c`U&==3}8PA?NleWiRTi_AH~kQ zu|1Q%v^=4|-A?<_;lVJMthgiNjL&7iy%jZsW$sQv37|Op?FKYyzvDB6o{AR}JG_#O z^6>cH>u>$-*fauRpW;RDuj8$>*d-)0TH_klfQkx*O%g@xVe0(~uh z`cVw3z+PiR9D>&KO2BBq?LPdILP+CR-#vy)%_3lgRNS8%%n7qckBp4WGT?Q~@zwVF zhEgECtmpN0%>>m}WA>lo@@HWQL(&H-L=-Huva%||W_^`0B1K06t)nJdfl5w}L(*%N=WB>R7DOfUNF^;k8Ee^}e6m>A*)ynS-SLEDl zn}H?%Thd8G=n{^{<0T%|(e8W6$N?@5+}b5EI5>#++!_x-5BsFQB#}r=4zTWO`FR>N zl>4)^v2I`C7|t?PxgdOzS#>O)R36ax5)2njP2W$cG!tRt-|UK7(ooaf7Pp;^vr?me zr?T6M94q)p#tK(v2TDpFtCN7=-h$25fRGSc!(vmadBUNoH|_Yr1|(2cZ<-DR2ARh6 rvq0fO(2cS0Ve2k=m_K1A literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-close-action-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-close-action-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..28d445e3bd0930222745054ccd972d70210a37c8 GIT binary patch literal 3006 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 rvq0fO(2cS0Ve2k=m_K1A literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-standard-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..84cec9a797645fb56aa9599327817495cfd31fcd GIT binary patch literal 3210 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 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-standard-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-standard-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..84cec9a797645fb56aa9599327817495cfd31fcd GIT binary patch literal 3210 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 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-strong-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-color-strong-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..4e6f4a97f836e50caf7201d91289375410161fd1 GIT binary patch literal 3050 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 H4Ey!}j2_KM literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-disabled-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-disabled-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..ae5292e30c7e147d15696c906c6c9732e58f44a5 GIT binary patch literal 2767 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 H4Ey!}j2_KM literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dismissible-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dismissible-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..e1526e96b7f926a182ca694680d7d9c791a65b6e GIT binary patch literal 3070 zcmb_e`9GBV7k@0p6;WMFBq|h>6rnIo5{7FV`&fpOo#YPEgt?_8MW#@OD3fh0F_Eo? zTx8#748~Fz8e@zWyJ@~NeDC)UxUcW?!}EE+p69&IbIy66^L|dEt+kn$h^zFx!`aki#Z+?=0KBg`!*R`xiBko zM1mx055a4tT0VSuUy`x*Q3C%MEpaN+L`D@EFPkOhchV7(wIAeiTUWxQC|+=v{Aqa^ z|5S66qf)=c19qVTnwO7s)SPx^bUSH|e&FAe&S>UXkpbY?Ckn0T~2CZyC2*?-RX1m4y3Kdy)4}*q50*;Mh>~pR$-x%_r1^eyf8C+ z{e@HrQ`6Iu2M&M;&zlS%(!y&UoSpIW^MSSFWnLKqJj)}XTs}x}aMsjxz2=fxW3Brs zM`wg>NQl)NOJ0`f$G<-Y8htcX&r}oy>tOq>1enF;9M?!x+Snr6I(XYeF8K=|#K#A> z{{X7va)r#u$v*GB2^Sq5{m5fuhZeXz1AwBBjGpdfu#VQ6S)c1kDP@%vANp^+7jG|r z6;5n2GH#*m6f7*&n-Ajd-caI%x9jGMCBRD`BqfPQ9^~0d>=*qF=;ve)Z9ql zt|MAh1h_#~Fisl@cDi+o;+3(@&4szu!f|fYDk?+w;b`>z#Kg3AACdpMaflTHobc+3 zckoOqC-2Ge6vj;ZwBGfpXDf?r(hbAMT0P7K~?>IsJIl;iK6eShcHO zloz{jv3Z=_n-PB9H+oTvSx%)l5&QP-lRceFY<(E*elcMJZ+1A^VXh~8j|)+^?#RW( z{!DF!jxS;U&G&3(!p^FKK$bz2*`TSvC-FF((y(%*9=1FG-o1@~(w&Y1yeg1qUhU0U zh^&`VhmU>d%(UACERJQI4RT7J?OMkw(W|MU;w~K1YK5W~c-+CSA&t_lV>m#+w{XYp#^ z_^6Sk3~=)>CG{TxIe#dyFR%{y`+gfdxhgyVMQZ9xdHrg}r_|=rw*h$r0|N#<-JNc) zA{ZhLc6MbLjKuI^^%%D<`8*@21r4Js2Ge_); z+n?mrO+~T#^AaYa=hWr(khWK^P6jsJ&WP#xP(#o6ls)U88_66cYp!MBSVWHJU;)Q2 zXlMqNHTl|7nnqLaPd%3KbA66O?t8iFSuxwu(cIDPQMfwcR>a<1r8CMcwF3s8IG3!$ zXJ!lvBthvQW#!j27YmCAP9-j7Sy^*ip+v15`)wL8={f+4(9IR5{p#X)+Oub0mtDid zD<^LKS+udj1Yx_2FWlK3I8qs9uyW#4*CEx6&etD5Mp#%_z&t%)`1bxv(h1r4!z|_S z;M%w8v$xj5a$??5V$C)}L14Bwc&YJp%-R=OGDX*)OI*Vc9Z~JmZWJ*YL+l@|+NGwZ z28&#AQFmFYq(sMTuGAxQIvNbA4be#=A|l}At3Ey_REr9}|DdRyKkr&wTkBlnjHx8F zsi~?$ckQ|x7#K*}TK|Du9glj4vNC&`krCAKw7|_6-Fb(jYX4#-Q!)&^qg3(w#0&tr zvN*4;U4_9756d_@I!51$Y?F^Vp{WV$OjoDi%YR)I6BF~KD1dJ|Ot)G+rZSz7$hX{& z1rFfaN2^1y+*;td3`GZ7&uW)$ukiv`OoDd`Uk4km4~;&P{^dbO`l38o+x zmFX+gxKi)tMQ6_mn548cV&m8Kj*bq}9*r$>UU^MT(lwuRalf`4H#2b4Z7HbnlxNRm z$Yk=m!DQ&WAW~tHcDW~8gE?H`ap1Uh-wQBGkAy(M699~;+?HiFXS-J+h2K!SA%67+ zjisf_hjX1A913e|UF{1DOD`tuogcK(z43=?2ClM_9bP|Z;2NDk)N6vN~T&54UF&f;iy|==gz0#_scJidHxA$MB4{!V-mDIv06_!5b z{#Yr3F;qJKLE}e+QQ1#6b?DZ@@EP{nv}=y`w)Pq)P4YF;ny&aAJQtSB9b8H|2ZP-B z8DNFg@u1OY;d@uYVU>OOukU!GlGw|_l`9_2| zoRXD##$DwJbbWo@nYg4Tr4id5)XkwuG~TBG`+1cHgrj16fv|I#4-1}K3`VRi?ITktL92@}tLzP-=J|kfHiKTDn``UW zlV!)%flFp)0TT`D8{a!UxGf8>`zfZ(P4Uy?BN*IsEe=lIt@?zPmVHrC5xik7;yrtX zYDg_DJclbOu^X)=n4}nP=s!9Ph6{-wCe>V@c7(yEDB$6@bgi`X^!dc&DjmKAdW$py z7C@)OR;fbi^n-@FTObXMRn(Hku9fq1#kcuuzP#+w2sNS~a8^g>O_Qu~CY9;CB+h-RxNz{h6uPbsek_oW z|MuJgo~5V@zao@NknUvGLe(*_L~!UkH>0hv`QmaH-U@|A=y4sHOHU#YZf;jh?9nf| z+9tEb8z|l`pj1@1aXT|}I6(eoUPXnSwzl+b58i?a#0xg_1MjG%#l?ic&`_OX=;u0Z zU3~|~h;%VE-p=rOKleS9J9EXwdYw;$1k(oTBpah|hj@QFNYK4t{^4})igEd}jcch> z9(MOAxvx*Lo_%~bhv&S{6vB`0e3f^FR28Iq$;3pkcn@Tt1;NJSd+}vur-onij3DMB z{@kAjw@I#F_mGs60})30B!wDZ>)Miv^Jn=PY+e|-@_ga|oG|k0cS%Y0q?V(Ek+JVW z$apFfGf2mD(lE_mY-8BHf&PW!k*++aVHdxWcqjJ~6fz=i>&pLa>HJr_>zdK{tfxLp S-LRh*6!em{Ntv6rnIo5{7FV`&fpOo#YPEgt?_8MW#@OD3fh0F_Eo? zTx8#748~Fz8e@zWyJ@~NeDC)UxUcW?!}EE+p69&IbIy66^L|dEt+kn$h^zFx!`aki#Z+?=0KBg`!*R`xiBko zM1mx055a4tT0VSuUy`x*Q3C%MEpaN+L`D@EFPkOhchV7(wIAeiTUWxQC|+=v{Aqa^ z|5S66qf)=c19qVTnwO7s)SPx^bUSH|e&FAe&S>UXkpbY?Ckn0T~2CZyC2*?-RX1m4y3Kdy)4}*q50*;Mh>~pR$-x%_r1^eyf8C+ z{e@HrQ`6Iu2M&M;&zlS%(!y&UoSpIW^MSSFWnLKqJj)}XTs}x}aMsjxz2=fxW3Brs zM`wg>NQl)NOJ0`f$G<-Y8htcX&r}oy>tOq>1enF;9M?!x+Snr6I(XYeF8K=|#K#A> z{{X7va)r#u$v*GB2^Sq5{m5fuhZeXz1AwBBjGpdfu#VQ6S)c1kDP@%vANp^+7jG|r z6;5n2GH#*m6f7*&n-Ajd-caI%x9jGMCBRD`BqfPQ9^~0d>=*qF=;ve)Z9ql zt|MAh1h_#~Fisl@cDi+o;+3(@&4szu!f|fYDk?+w;b`>z#Kg3AACdpMaflTHobc+3 zckoOqC-2Ge6vj;ZwBGfpXDf?r(hbAMT0P7K~?>IsJIl;iK6eShcHO zloz{jv3Z=_n-PB9H+oTvSx%)l5&QP-lRceFY<(E*elcMJZ+1A^VXh~8j|)+^?#RW( z{!DF!jxS;U&G&3(!p^FKK$bz2*`TSvC-FF((y(%*9=1FG-o1@~(w&Y1yeg1qUhU0U zh^&`VhmU>d%(UACERJQI4RT7J?OMkw(W|MU;w~K1YK5W~c-+CSA&t_lV>m#+w{XYp#^ z_^6Sk3~=)>CG{TxIe#dyFR%{y`+gfdxhgyVMQZ9xdHrg}r_|=rw*h$r0|N#<-JNc) zA{ZhLc6MbLjKuI^^%%D<`8*@21r4Js2Ge_); z+n?mrO+~T#^AaYa=hWr(khWK^P6jsJ&WP#xP(#o6ls)U88_66cYp!MBSVWHJU;)Q2 zXlMqNHTl|7nnqLaPd%3KbA66O?t8iFSuxwu(cIDPQMfwcR>a<1r8CMcwF3s8IG3!$ zXJ!lvBthvQW#!j27YmCAP9-j7Sy^*ip+v15`)wL8={f+4(9IR5{p#X)+Oub0mtDid zD<^LKS+udj1Yx_2FWlK3I8qs9uyW#4*CEx6&etD5Mp#%_z&t%)`1bxv(h1r4!z|_S z;M%w8v$xj5a$??5V$C)}L14Bwc&YJp%-R=OGDX*)OI*Vc9Z~JmZWJ*YL+l@|+NGwZ z28&#AQFmFYq(sMTuGAxQIvNbA4be#=A|l}At3Ey_REr9}|DdRyKkr&wTkBlnjHx8F zsi~?$ckQ|x7#K*}TK|Du9glj4vNC&`krCAKw7|_6-Fb(jYX4#-Q!)&^qg3(w#0&tr zvN*4;U4_9756d_@I!51$Y?F^Vp{WV$OjoDi%YR)I6BF~KD1dJ|Ot)G+rZSz7$hX{& z1rFfaN2^1y+*;td3`GZ7&uW)$ukiv`OoDd`Uk4km4~;&P{^dbO`l38o+x zmFX+gxKi)tMQ6_mn548cV&m8Kj*bq}9*r$>UU^MT(lwuRalf`4H#2b4Z7HbnlxNRm z$Yk=m!DQ&WAW~tHcDW~8gE?H`ap1Uh-wQBGkAy(M699~;+?HiFXS-J+h2K!SA%67+ zjisf_hjX1A913e|UF{1DOD`tuogcK(z43=?2ClM_9bP|Z;2NDk)N6vN~T&54UF&f;iy|==gz0#_scJidHxA$MB4{!V-mDIv06_!5b z{#Yr3F;qJKLE}e+QQ1#6b?DZ@@EP{nv}=y`w)Pq)P4YF;ny&aAJQtSB9b8H|2ZP-B z8DNFg@u1OY;d@uYVU>OOukU!GlGw|_l`9_2| zoRXD##$DwJbbWo@nYg4Tr4id5)XkwuG~TBG`+1cHgrj16fv|I#4-1}K3`VRi?ITktL92@}tLzP-=J|kfHiKTDn``UW zlV!)%flFp)0TT`D8{a!UxGf8>`zfZ(P4Uy?BN*IsEe=lIt@?zPmVHrC5xik7;yrtX zYDg_DJclbOu^X)=n4}nP=s!9Ph6{-wCe>V@c7(yEDB$6@bgi`X^!dc&DjmKAdW$py z7C@)OR;fbi^n-@FTObXMRn(Hku9fq1#kcuuzP#+w2sNS~a8^g>O_Qu~CY9;CB+h-RxNz{h6uPbsek_oW z|MuJgo~5V@zao@NknUvGLe(*_L~!UkH>0hv`QmaH-U@|A=y4sHOHU#YZf;jh?9nf| z+9tEb8z|l`pj1@1aXT|}I6(eoUPXnSwzl+b58i?a#0xg_1MjG%#l?ic&`_OX=;u0Z zU3~|~h;%VE-p=rOKleS9J9EXwdYw;$1k(oTBpah|hj@QFNYK4t{^4})igEd}jcch> z9(MOAxvx*Lo_%~bhv&S{6vB`0e3f^FR28Iq$;3pkcn@Tt1;NJSd+}vur-onij3DMB z{@kAjw@I#F_mGs60})30B!wDZ>)Miv^Jn=PY+e|-@_ga|oG|k0cS%Y0q?V(Ek+JVW z$apFfGf2mD(lE_mY-8BHf&PW!k*++aVHdxWcqjJ~6fz=i>&pLa>HJr_>zdK{tfxLp S-LRh*6!em{NtvR7b5+dJ8`+U#y{r!8s{Bh38IqU4b_S)}$*Sq4cTAE4hlHCOW zfCT)~`D*~M4K#tXJH)_i>%06_@CLbi&Fm~d{(5K{0HE98=S^+HvStS(Y&(NDTNb+a z;PHod+^8U#9ia5YODP@;H1o5XEKw|6j2*8@@M)}xM+s{CI?58RMc5&0q$uHRV$4yy z%FQRR^-@Su+LbiNfA9Zo)@}Qb>8QbH4%9uW3Gb98)AVw3^w8IPoYm8uRUGf@YT`FP z+JQKwOi^q=Q?#~6DD;;JgvmpG8!j=w?|`PsZzJZw;onBn?mvDT!`pZKHs-hdS|k93 zLALyU@&@>?hM_t4e)gX$9ij?QTIrtJvg4y3&)=GeL7Xhlor@C`lF60`gfXeHkx0R9 z2PYa<^L*;Lgx(rwZE9+|YsZvg-m_MtVdBGwV$O|0)>2YZmA$f!5vN2Uk^hvJ0Qk#0 zZLeN+Ro;vd*Vfi9dNmTO;ZpK*E?4AGzbi}$_~+oBT@q9~ud3d`0!Z~W1h?uFgW*{f zzU(P4^0C*i69;HCn#e~vx%DLqQk@INghF{ETwPg%=R|96JJ-M+h|FvMIHoWqrko7V z&F#L^AOXIJVccQ+-)l8)!)BZn4F=q5z6mjLb9=h6u`z&)kXl<=&0P}BC(_szKdV%34^{Q?1T=C^Y7xTb1V<`~_MUOED)4XTJ;!GhB?7#_W zAmGnG+RVh_aw#}bKsn;K^?~`NlM$Y;Dk4^e#Omtv1qDY8ZjaPUDr{OFvpa5oy(d_` z_L!PlClL|YK&4aIbz~b`+oC#_%WRONv9WPVYU)v=s9q`VF3CC4+8SN$^m_T?;+<-r zj*EkL80s)gDT!+6(^Gy4bezh?d7XBSZh?hPC0iNUSz6ZKxm%Tzl~wdi(X6`XHB~S@ z{msVy#KAp_OD98D{}DyMd{{#q@T!_rmYMuU=>C)vsQTB9n#!sw?r9)3B)CLDtf$zpCM2%I*YtlC=uP7(Kw#1s?pu)>Z%Rg`me%)kE z?z`R5-}B)%2DXKym1L#a0iH4P&6@uBG)J>UX*Knml!s7-A@~0K_YvlBxSgpf zt+G;!OJNO``gF*5ZVDn&($ezQ)==sJ=$>@`EH@;?mzSVP%ZZJRgq;a9xjShT(krC8 z(xWg!L1^&U$JI}*ytJXP(cnVXe8v@J9EuWxEszU5^eR7p%(80+&6!|BVFpFru8CD; zR&Y4;krd+yJU(6yfkghDfQrP;NXnnN-d}qYVQrlo^7B$hj%i%h6OKK7S4U}`WXBLS zVm3J%uBM^EOt#vz&eT0p+e5Q2b1}bky&%slaf)3gEN;&;>+RO3*eV)Dr5mle#esO@ z&en-*dweA%_gy}3~rKn;GuED3iF9nwFmn`x1x9lof9LZN(?CiZ{H z(6QOMb0@L1w0)8gox4}@B6{MpOdoaKZ?>o6eQu~DcYT$^3g9r0r!J@+Ki=8=IMcJ@ zx(Guccle!%zgg+q#gdYdDbCOLO#c#{XQ=F-J%G+dDaxY-~h|b}}*&-`A*v zn4Xp)78g$kl|Bg|Je?1HEOYXrs;c7{n@uuPz@DdK(w8@uG=0Iaoa?Xtm4JFv8(`5D zzfZ;1cKIA`h9(G!eJBYdc6Qz*l1LqkQn3{QzyZS(nSrTgWo66~2a+CZ zBNGe<<`Vt0=fsy6CoY2t-rU?2C1T=pI;o7tHwS02!|($nV0_0yh>0Wj^!NUS=;F@j zsx}B4o4iCL{&g7{SHG2?4w8_jr+?}B4AfVE5Glpu@vfUf6N_{$2TkfSOC8heuWPvY zF%L8PSZ_ZJRvN*f+KV{ld%^9#N|Ya^28olJy{RBCPp4l(@7n(3xzhZ*&pOR=Te`_(1ll{o~1cCCR{ETS?)%YkB-ciR4^(r7V-+D_Yt$QoYs}UH@i5OI8565+*3g&Z=Z_g)be!4E+{m#XYQd~z;mS!%^J4;Ki^5S-@PN- zz+2;`8BrSxcyL%6pUW=Xx$pR+$IeAk$5Ki4YcJltd)HSI%wJA?IfL!6c+95rCgj!^ z^;kih7Fh2YT`F{aWwuI_Ri(o40dDF8lz)Ti4HJLoX2`_q8IZS?i*-=Oc z=fmixbLLq}Nw_Ceg=G~s<$ADEgN>xE5x4!7MZwx?}n*2l8jDnr|v z%`8Q@yC*$_($9(553*J4=+UDe)dl^;=p$4dlx{)A=nNHOhnw!ru;}zB3dVEggHYrB z@TBI)a^9}B*!4++u=$wxK0|eb(gk>YkRi8IVV02*P-5@s*k6o-HsMs)pxYeP*< z?|}uj#_et7c5!i%y=JnzyZiI!&;1n~eSC_Qrg@XXd@yU%gP|;&8$a50*%K2JAl$6L zBKCTC*sZIpOI3MdF>%qcF{t>OO`V#)KD@sc`uHhN1_5Gf&DuQ_<7E}@0VIy!UX?X+!k+Q-u&e^_ubGUY)8X+{tsHg-oL5|hI^0j&E zt4xrT_!F7b%3gmYm4EZW{rl*#kIjM11L_#0YZR|Q*($rFsOV^^6EAfrf@6rwsHv&J zto<;1p1J}Z4DLQ!79tI8K3^?(n7vkC^chGXP0=vuIlxnQ|Euv7D;mvxS` zf{F!`_%B${(o}>=-v6sy;*`=f_UmRwkX-40gW893yj4M|`2=>l8r^4+7) zuWw(p>@SJS8D5kDbac7~{P#@V@Yj_~juvfzdi}U6kfz}r)N&oD-`S!h+7qS|ZJS9F z{$gH~fDN(a{0+_V1NmRD&Qj^emWVt6&ImZxwNZ~DQ051jsRA0rk`m8FQK!>%&v6R? zCl=M`^daXAB!dbwGGq~UE>m+iMBh!_8;}Ni{B=`OULvqqD#d)u)O`>&;NS7rSt5t5 zJC49%xE%=rN`HO9!6|ppocwzGrwAJDiY%e=wslI%f%+i@(9HxFeg;5){l87qtTB*P)hp{+qg#}lYZ@FJOeFFh zy1Ed9hQ~#-+vjSC+7a+)vO3HT{bl`^?b`oS*C!NrCp#W|utdU&f`MPKJWoFB7W+Tf Cl}+aW literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dismissible-selected-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-dismissible-selected-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..c68939471011da674ecb5162e094231416fe9874 GIT binary patch literal 3914 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 Cl}+aW literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-icon-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-icon-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..56990bd6291e66e85471c29fd904f50fd94ed5a1 GIT binary patch literal 2764 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 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-selected-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-selected-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..54e9c2c17599e7d164ef68e2806f512c1b9681ec GIT binary patch literal 3167 zcmcImX*`r`8-J2R5!F#4OPx^GgoxKN*@7?HT#qyZ01ik(&5Ru*@)sv!1D!TyD6751#YN)A z=Z10bMv1G3xGHExoVCg=?SgE%fibghx4IdkH zPmDTtovyNf{diztEM&1vB#+O0`y-tm-MdrfrWB;KQE>fwFFSLkcMG#_IOWj;A%VL) z(x?M_cm^gYb?c3Z@OA(&fB5I>xp&ug02l>!F#w=*@#miekwgCufPV)8oQ z_B31KSJ9-Q!NIDY9$U#v5w-MPoKo)qa8g49>Vec0i%(IK7OkkOGo6@l&zRsv3b66Z z;s->NOtIL(nbnA{v(J>u@pxxSYJKN9Rrhp09;Cr13OFPsRY9XMLYmxu&q@^Ge_&kS zc%uK)r%yK;cOed`*noA6?U{^to1D%Wdw=F#S;<|;3FrK0(0eWICT8DHKhA2Z0hU&4 z9gAUkPNF)qVa=K7ub2fLo*GXp4F%xVe=s(qp5<@k)zfwbCnVdv@LI(}a=ICJJLWGJ z`~&TH95uXjOBbDm&Ptj`psBI34Yq8P>EP6*N!5fQc{ z3|5jTjF)Igo0_Vu58$4g)gw!Bakq4(Lz)f$SDkE{w%8xfq%PcK3>1$y)m<_|6l-eD zVJidc>>V7`^rj+E85#9{4%m>85LJE3yF}-**RO4akGbJS5b^FqLqmk`(@&i|JW4)1 z6?YBusE8zbWM&2D_tn7N5xcIrP}6_xR?~FX-`8_qX!$DZ>$~Dxw{zi@idphQ!^6z2 zxk3kH<5nHyr1!QSB_o?9HZwQJNEF}kAJdbK`|j1`cGf+f)4Q=sDYQg+M0_@199_+l zjahLf%;wJbl=bB6-BFug4FuH&O}OBE3uA*#D6Y3-ck@TaoXB_b^l5U6(WBcU1axB`iEjowJYfp*_9)zs7o z^SI`EAM3Gd&X?)wKY}M*WOV!9gimowYwN_#$+oflZOceFl=>xVXKRkuSAFF~-1mFI z#LX;?c$K<*gDuvU@)^hWC-cHQA1){|j{%I6eCdy6O+fs+SHB?|m(pBXB5Gn zW11xDxAd_IEUM@G1LNWflvOIgB8k2f>f2jT)zxJaG`>+O8+$iXp0V<|-KD8E;{8-U z`uv7M;ulIH)$FEep_h+gM$jt4i-<&b)R7Y>Aio1E z{T9)3DvF}A24(F@X=dB{t{!-2BSd2GTQBP4Lv3AD2+zbe1CVeYdF8}q>nJHfvDi5# zXacRj$YOJ?GjE2)o>>oa@|e7`K|RBkhnky@%s)72Bz?Puz9?J2bd~Mv;{!$6Uemor zCYS3YJ!VHjNlGzH=0maE+}xw0NtrM7kngX8A+Wc%cZAhw*Qy;kZcrh6#SriHu$TEg z1Cujac%1L5#@2~>)-Ge_W6BVG5<-bQuIN0QhtJK$5atS+<>3_8)a8qEG4)3?(@n>Y>e316z9hJ`ptR5 zRLe``>huDPI}1j6p2(VX4hw6jt<{vHtH1rkSB2pEf;l``M!{ftdf&c%b%E)7Xq*k8`cl$|h7BD=pFVW=5Gi?_1K7lad@9#hS~*?XgAGD+CtVsmZndgZeouQoQ;(Yd)LTkCW4jU*1{Kzmsv`K5AWRpuS zy1C^~PhUcWKwz)zERiIlDTBf2=n|BEnO za?8xhV!rS#NTxkbPKMdqrbb0aZw|X6)0(--t3Q4iVB&YS%5jq=7P66!4<49WFCLWH z#t#e(pfNAp83U07STvOC3QvV|nsUbRD-#cce z!<)ED4%_0ysUeIurrS`cGaF;c!Yuc8k0Dw&fG% zZvo)cGcZt+M-#35#JUi`{bZzNz&`%%NSKtWmxMq@ zJkO=)ptL;+UJ^_OL#IgGQv#>5`|%1b4X^|!C>o0t-^wW5`!H7W(JL-z+3xGlR*>+w z8IkYe@oh7Y@bGNOVgPFI>@5C|z~@SP668a}!ftwcwpE5y*IYdL5{FBr2JhubE;%yD z2ehA~O~%QujTv~J5)gdgkA%E?s=(`%Z8u7O0Z>PT62adOi|IM(c8YI`ESlnY2it^7 zTKHESZA%?^b5>Y$H*d}&kr0$r8K1R-JjAgYc|i9!BO_xfRq07`at-sy_f+9T6Xt>e z4kS)$@UFi~&Rg#Vpdc%QjRNlN4Gw({g}QCwqkY+O1aOM@bA5*=YDKNu0MLCw(YicX z@}YAkgvz*kX~)Z7E2Y}xRrR~i)&DA&VU^0k8y%L8Epdlcnbhj|KoljFk$x{ g0HjX--27{hPuwbLJxL(S?>tWt)ZEq#XX1JPzc;qKq5uE@ literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..dad278f9d7b5fb3cc2a2588f42e3df4b756c6f4e GIT binary patch literal 2421 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 K{5IauHRj)eQsX87 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-4-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-4-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..dad278f9d7b5fb3cc2a2588f42e3df4b756c6f4e GIT binary patch literal 2421 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 Uvw1sUg_p9RW|vJXO+4cN4>(~=k^lez literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-standard-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-standard-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..dbbf383a3c54e2d6760c5eddd274c0b1346e3bf8 GIT binary patch literal 3911 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 Uvw1sUg_p9RW|vJXO+4cN4>(~=k^lez literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-strong-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-strong-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..1ed0c96d868133e5b0da8ddc77096aaa5e19f91b GIT binary patch literal 3717 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 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-strong-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-color-strong-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..1ed0c96d868133e5b0da8ddc77096aaa5e19f91b GIT binary patch literal 3717 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 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-disabled-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-disabled-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..6b3d7103c4e64d9faedcb6aab7ab13db7b7742c9 GIT binary patch literal 3532 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 WeMYv631I<<3sI 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 VNqc5sl#heE;pd&Kh?c&0{s+(>z<2-v literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..c486a691ecd6054260e194feea0a3e4628c66696 GIT binary patch literal 3675 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 VNqc5sl#heE;pd&Kh?c&0{s+(>z<2-v literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-selected-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-selected-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..eec31ff84cd83ee91f83706feaabdf658937b229 GIT binary patch literal 4498 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 F{0Db$aQy%P literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-selected-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-dismissible-selected-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..eec31ff84cd83ee91f83706feaabdf658937b229 GIT binary patch literal 4498 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 F{0Db$aQy%P literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-icon-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-icon-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..3771205e633ab7e4f1d31e2a456601fe60374744 GIT binary patch literal 3389 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 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-icon-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-icon-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..3771205e633ab7e4f1d31e2a456601fe60374744 GIT binary patch literal 3389 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 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-selected-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-selected-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..2f8b16967f1dffdc113636a7cc5c8c3c61edf43f GIT binary patch literal 3703 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 UM3tW`E2)e0htu*DF6Tf literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-selected-chip-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-selected-chip-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..2f8b16967f1dffdc113636a7cc5c8c3c61edf43f GIT binary patch literal 3703 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 UM3tW`E2)e0htu*DF6Tf literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..fb9faf357eb3b2253eb0e5ac60ba40269c8503a8 GIT binary patch literal 3094 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 BrVs!C literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-2-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-2-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..b13b0d2f50871342f7b833c226afc787114bd67c GIT binary patch literal 3644 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 D<>0)) literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-3-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-3-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..bc01ce08008b6a8feaa1d9527b9752e7cf060293 GIT binary patch literal 3147 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 literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-4-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-4-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..fb9faf357eb3b2253eb0e5ac60ba40269c8503a8 GIT binary patch literal 3094 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 BrVs!C literal 0 HcmV?d00001 diff --git a/packages/visual-tests/src/chip.visual.spec.js b/packages/visual-tests/src/chip.visual.spec.js new file mode 100644 index 0000000000..201d4e04a5 --- /dev/null +++ b/packages/visual-tests/src/chip.visual.spec.js @@ -0,0 +1,47 @@ +describe('Chip', () => { + describe.each(['light', 'dark'])('%p', (mode) => { + beforeAll(async () => { + await global.runColorSetup('components-chip--standard', mode); + }); + test.each([ + ['standard'], + ['icon'], + ['dismissible'], + ['disabled'], + ['selected'], + ['color-standard'], + ['color-strong'], + ['dismissible-selected'], + ['change-action'], + ['close-action'], + ])('%p', async (variant) => { + await global.runSetup(`beta-components-chip--${variant}`); + await global.visualCheck(); + }); + test.each([ + ['standard', 'hover'], + ['standard', 'active'], + ['standard', 'focus'], + ])('%p', async (variant, state) => { + await global.runSetup(`beta-components-chip--${variant}`); + await global.page.waitForSelector('html.hydrated'); + await global.page.$('body'); + const checkbox = await global.page.evaluateHandle( + `document.querySelector("#root > scale-chip")` + ); + if (state === 'hover') { + await checkbox.hover(); + await global.visualCheck(); + } + if (state === 'active') { + await global.page.mouse.move(20, 20); + await global.page.mouse.down(); + await global.visualCheck(); + } + if (state === 'focus') { + await checkbox.focus(); + await global.visualCheck(); + } + }); + }); +}); From 6b28ba7c4d0a41fca44fbea781e76e9a74b532fd Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Tue, 22 Nov 2022 09:44:06 +0100 Subject: [PATCH 15/86] refactor: deleting href test case --- .../src/components/chip/__snapshots__/chip.spec.ts.snap | 2 +- packages/components/src/components/chip/chip.spec.ts | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap b/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap index 2c47d03a5f..b8f7bce7af 100644 --- a/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap +++ b/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap @@ -3,7 +3,7 @@ exports[`Chip should match snapshot 1`] = ` - +

Label Text diff --git a/packages/components/src/components/chip/chip.spec.ts b/packages/components/src/components/chip/chip.spec.ts index 2b1556cb01..b763a41239 100644 --- a/packages/components/src/components/chip/chip.spec.ts +++ b/packages/components/src/components/chip/chip.spec.ts @@ -30,8 +30,5 @@ describe('Chip', () => { element.disabled = true; expect(element.getCssClassMap()).toContain('chip--disabled'); - - element.href = 'http://example.com'; - expect(element.getCssClassMap()).toContain('chip--link'); }); }); From a57fef11298d74166412c23db00a888c9dd3ecb8 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Tue, 22 Nov 2022 16:03:26 +0100 Subject: [PATCH 16/86] refactor: changing close trigger --- packages/components/src/components/chip/chip.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx index a7a342c50e..ea64c54c08 100644 --- a/packages/components/src/components/chip/chip.tsx +++ b/packages/components/src/components/chip/chip.tsx @@ -103,10 +103,6 @@ export class Chip { }; handleClick = (event: MouseEvent) => { - if (this.dismissible) { - this.handleClose(event); - return; - } this.selected = !this.selected; event.preventDefault(); event.stopPropagation(); @@ -122,6 +118,7 @@ export class Chip { ); } else if (!this.dismissible) { @@ -146,7 +143,9 @@ export class Chip { tabindex={this.selected ? '0' : '-1'} part={this.getBasePartMap()} class={this.getCssClassMap()} - onClick={!this.disabled ? this.handleClick : null} + onClick={ + !this.disabled && !this.dismissible ? this.handleClick : null + } >

{this.label}

From 8f6035c919c7f2bccf2ccabdfce12767faeb9d57 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Tue, 22 Nov 2022 20:23:40 +0100 Subject: [PATCH 17/86] refactor: changing focus outline style --- packages/components/src/components/chip/chip.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css index d067c0cdfd..70cab6d515 100644 --- a/packages/components/src/components/chip/chip.css +++ b/packages/components/src/components/chip/chip.css @@ -56,8 +56,10 @@ } .chip:not(.chip--disabled):focus { - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.1); - border: 2px solid #2238df; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1); + outline: var(--telekom-spacing-unit-x05) solid + var(--telekom-color-functional-focus); + outline-offset: var(--telekom-spacing-unit-x025); border-radius: 5000px; } From 88346684d759601c53d7db1f68d99f17dd9a5e30 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Tue, 22 Nov 2022 20:32:25 +0100 Subject: [PATCH 18/86] refactor: updating visual snapshots --- ...sual-spec-js-chip-dark-standard-3-snap.png | Bin 3259 -> 3854 bytes ...ual-spec-js-chip-light-standard-3-snap.png | Bin 3147 -> 3616 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-3-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-dark-standard-3-snap.png index 8623131a565f6de32dd80c84901a3eb8378692a7..47d368acb424925ace2545746b6ccc555a1cf4ae 100644 GIT binary patch literal 3854 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 literal 3259 zcmcguXH-+!77i%G&=o}yrKn+0x`i%9bbx@N34s7oq$nW500~G7qQsF=N`NqQ(GV#i zJW7B_NdTqy7EuDyJE2E}Brm~P@BM#2-dT6u^R0W&KKt9}oPGB9($d^mh+l#q000Pq zOm15P07uynVEF4V?00(;hR*J|f~<`V0r;MCivWNi40QXZO=#9CH8Q|;~zRYcVQFkt@- zzWMn_hR^aRNId#KO|vdYk7*#=@_URaB7Qs~)!fwAQ#SP>&6r=>xio&H#N7Ch<}1rv z&VcWO^AA^MT-r{54`lgz(UsGwrJZqVpbd5C#tGDgTW6-PP9{&br+9j_&1Ne$v+M%* zAJF|@2M;gWPxJ3o(%`BWIWAp+5(C_>D>JjEq^ZXslxI%LXajVk$4<7`w*Y-d8=dr9 z$QSyI@VIQVSR#<1=0CK7ZIv|V90Y(k2#Em%5C>Bk!$O<9Te6^y_%t#92_RGwt`a-w zbd&fDagkoIhr-~iObH{b+g^3lNmq_xbP{=&n>=ey`B++ip%f9PSaG*(nv^(POX-mf zkTNoDxZ$4G8IXT@Aksvda;p7RwU(p+$L^czSLq{vv%N*ivC5j`r1p->v6{PlH}tIR^|Te0C*X zYCqRr0)O=!JSFMq@#*WVfK$E|G}gTJa8oruqPb->naUt*-0G9|C4xI}zuUkUi>r=_HvjQsAF3@LS1TX2_8R=9+g{B_S?wW~+69QUWS@of8S zdnHVrbl)3l$gr`r=m|SpPi_=sRLiJghJD?7P)v7>V9{I zTIUEs+21N%*A|7Tyuu^=;AcdQ$qUgbRuoedE=S{p@D?;d??*wMbLlC?8ZfPH3lH?( znoHaM;;XaMcT0b;q*{0_XV-hM;eL3P+3QgTc8ob{3d+nAPSup;<#1B%5+(7FHJni% zMrTEZgRmRZ6>9D+gs|n3>K_(N*~PxRTOVi*BubUvrz5-cy@;^6bV3-dUb}vyWjRA@ ztA**8ThH?*FVDHyu5sIo8({Tdkm^ z1kTRR&aGw1Eb#)l6L>kOxZj&6!J<4`hzlQXvaX*b7!96imQzI0Wl-PQC zVT+0<`m?lxw&ybacW9LU{=BB9hEbJwJUZa32bu`hh+kUgGmizEWIKhi2JtA@&paf~x zq5TX#UhTm+F$EjQZn>$M*>;Bl3vaJjw6`_isVZ3Fu=Dk~*8?xFBHW7S>S%@W)?B0+ z(ygE-^jk8|g`_{(&sB83_+t$-R3`_eDGEwdJQ{sUiJj5hTqFoCw2o!WEgkwzx-w|qygOIl<;jyL4i$5k zOI%3IAWB7Y=L8)SGoDOycD3LzCeOC@ExNp@HOWbN`C|ZR*6K0 zrKY7VKjn>D3QlpGN(z}mw5!(ngoRg4B_(7FAIddxFFqHpW6QcY6T57|G#9+VQ^|DK zYZur3&LHjTv-h?3IG1WPFg1Wn2ISYB2?VWu(?yN3tCL^ECWd8+8X76@pH$>fVOO09 z0rKJ%yPi-^8M{9TyK3>6w0>Uv6uv*CEtwe-7hL~7p~(La?Zd<%pRaP_l7VWEZ$HO0 z6axhP@w)Cw$C~#&iNnR zlw;z0^j{2q04R|7Oad`%lpo*Vj2259-OG)u_D|`8*QPaj;{}P&=pCuMl4p=+)Yb4{ z%v$T!>4-UwarAk4fO%)erY}#$X%I?r3p2Hv=>bQZK`53=>A{K@!E2SYcHOW-!H^7K zA)}2JyuvX4ubip`Bw`F&x+Sjd9p5|1)jK0IUT@|_L6~ibXElC%b>Z>C=>3{fGIu7^>RO|H+dqi$T$VarJWSuinB6Ky8npCcls zS7$D1Y?d8=c%z8tAxi+7-KYP?8_acY^7^NI)iGDLK;CHR3oxqjNcSr3vd`?Yx8GQ> zf>p0V?7kyTE^03XU+2V0{#9e;9}O)YRi*#SG0sQ8s~i76rM=F&A5Y*pX6_!y@eKOi K{5IauHRj)eQsX87 diff --git a/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-3-snap.png b/packages/visual-tests/src/__image_snapshots__/chip-visual-spec-js-chip-light-standard-3-snap.png index bc01ce08008b6a8feaa1d9527b9752e7cf060293..848efb1fb00d3ab3a4d26b23a7cc3d1aadd6ba9d 100644 GIT binary patch literal 3616 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 From 10a085b9f22c1c27cee89692c61e6221d2048e71 Mon Sep 17 00:00:00 2001 From: Marvin_Laubenstein <82942834+marvinLaubenstein@users.noreply.github.com> Date: Mon, 5 Dec 2022 23:13:01 +0100 Subject: [PATCH 19/86] refactor: deleting unneeded props --- .../components/src/components/chip/chip.css | 171 +++------------- .../src/components/chip/chip.spec.ts | 9 - .../components/src/components/chip/chip.tsx | 22 +-- .../components/src/components/chip/readme.md | 23 ++- .../stories/components/chip/Chip.stories.mdx | 182 +----------------- .../stories/components/chip/ScaleChip.vue | 19 +- 6 files changed, 48 insertions(+), 378 deletions(-) diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css index 70cab6d515..011e809e26 100644 --- a/packages/components/src/components/chip/chip.css +++ b/packages/components/src/components/chip/chip.css @@ -10,8 +10,6 @@ */ :host { - --background: var(--telekom-color-ui-base); - --color: var(--telekom-color-text-and-icon-standard); --font-size: var(--telekom-typography-font-size-body); --line-height: var(--telekom-typography-line-spacing-standard); --font-weight: var(--telekom-typography-font-weight-bold); @@ -19,19 +17,13 @@ var(--telekom-color-functional-focus); --box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1); - /** - selected - **/ - --background-selected: var(--telekom-color-ui-subtle); - --color-selected: var(--telekom-color-text-and-icon-standard); - - /** - disabled - **/ - --background-disabled: var(--telekom-color-ui-base); - --color-disabled: var(--telekom-color-text-and-icon-disabled); + /*standard selected*/ + --background-standard-selected: var(--telekom-color-ui-extra-strong); + --color-standard-selected: var( + --telekom-color-text-and-icon-inverted-standard + ); } - +/**TODO: colors unexplained in figma **/ .chip { border: var(--telekom-spacing-unit-x025) solid transparent; display: inline-flex; @@ -42,35 +34,27 @@ align-items: center; white-space: nowrap; border-radius: 1rem; + border-color: rgba(255, 255, 255, 0.14); height: 32px; vertical-align: baseline; justify-content: center; - background: var(--background); - color: var(--color); cursor: default; + background: var(--telekom-color-text-and-icon-inverted-standard); box-shadow: var(--box-shadow); } -.chip:not(.chip--disabled):hover { - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 6px 24px rgba(0, 0, 0, 0.1); -} - -.chip:not(.chip--disabled):focus { - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1); - outline: var(--telekom-spacing-unit-x05) solid - var(--telekom-color-functional-focus); - outline-offset: var(--telekom-spacing-unit-x025); - border-radius: 5000px; +.chip--selected { + background: var(--background-standard-selected); + color: var(--color-standard-selected); } -.chip:not(.chip--disabled):active { - box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1); - background-color: var(--telekom-color-ui-subtle); +/*TODO: proof in storybook*/ +.chip--selected:hover { + background: var(--telekom-color-additional-violet-40); } -.chip--selected { - background: var(--background-selected); - color: var(--color-selected); +.chip--selected:active { + background: var(--telekom-color-ui-state-fill-pressed-inverted); } /** @@ -84,13 +68,19 @@ label line-height: 100%; } -/*icon slot front*/ +/** +icon front (slot) +**/ + .chip slot[name='chip-icon']::slotted(*) { padding-left: var(--telekom-spacing-unit-x1); padding-top: var(--telekom-spacing-unit-x1); } -/*icon end*/ +/** +icon end +*/ + .chip scale-icon-action-success { padding-right: var(--telekom-spacing-unit-x1); } @@ -99,123 +89,20 @@ label padding-right: var(--telekom-spacing-unit-x1); } -/** -inversed type -**/ -.chip.chip--type-inversed { - color: var(--telekom-color-text-and-icon-inverted-standard); - background: var(--telekom-color-ui-extra-strong); -} - /** disabled **/ + .chip.chip--disabled { background: var(--background-disabled); color: var(--color-disabled); } /** -standard type +type outline **/ -/*standard*/ -.chip--type-standard.chip--color-grey { - background-color: var(--telekom-color-ui-faint); - color: var(--telekom-color-text-and-icon-standard); -} -/*cyan*/ -.chip--type-standard.chip--color-cyan { - background-color: var(--telekom-color-additional-cyan-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-cyan); -} -/*yellow*/ -.chip--type-standard.chip--color-yellow { - background-color: var(--telekom-color-additional-yellow-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-yellow); -} -/*green*/ -.chip--type-standard.chip--color-green { - background-color: var(--telekom-color-functional-success-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-success); -} -/*orange*/ -.chip--type-standard.chip--color-orange { - background-color: var(--telekom-color-functional-warning-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-warning); -} -/*red*/ -.chip--type-standard.chip--color-red { - background-color: var(--telekom-color-functional-danger-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-danger); -} -/*violet*/ -.chip--type-standard.chip--color-violet { - background-color: var(--telekom-color-additional-violet-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-violet); -} -/*brown*/ -.chip--type-standard.chip--color-brown { - background-color: var(--telekom-color-additional-brown-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-brown); -} -/*olive*/ -.chip--type-standard.chip--color-olive { - background-color: var(--telekom-color-additional-olive-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-olive); -} -/*teal*/ -.chip--type-standard.chip--color-teal { - background-color: var(--telekom-color-additional-teal-subtle); - color: var(--telekom-color-text-and-icon-on-subtle-teal); -} - -/* -* -strong type -* -*/ -.chip--type-strong { - color: var(--telekom-color-text-and-icon-standard); -} -/*standard*/ -.chip--type-strong.chip--color-grey { - background-color: var(--telekom-color-ui-extra-strong); - color: var(--telekom-color-text-and-icon-inverted-standard); -} -/*cyan*/ -.chip--type-strong.chip--color-cyan { - background-color: var(--telekom-color-additional-cyan-400); -} -/*yellow*/ -.chip--type-strong.chip--color-yellow { - background-color: var(--telekom-color-additional-yellow-400); -} -/*green*/ -.chip--type-strong.chip--color-green { - background-color: var(--telekom-color-functional-success-standard); -} -/*orange*/ -.chip--type-strong.chip--color-orange { - background-color: var(--telekom-color-functional-warning-standard); -} -/*red*/ -.chip--type-strong.chip--color-red { - background-color: var(--telekom-color-functional-danger-standard); -} -/*violet*/ -.chip--type-strong.chip--color-violet { - background-color: var(--telekom-color-additional-violet-300); -} -/*brown*/ -.chip--type-strong.chip--color-brown { - background-color: var(--telekom-color-additional-brown-400); -} -/*olive*/ -.chip--type-strong.chip--color-olive { - background-color: var(--telekom-color-additional-olive-400); -} -/*teal*/ -.chip--type-strong.chip--color-teal { - background-color: var(--telekom-color-additional-teal-400); +.chip.chip--type-outline.chip--selected { + color: var(--telekom-color-text-and-icon-primary-standard); + background-color: transparent; } diff --git a/packages/components/src/components/chip/chip.spec.ts b/packages/components/src/components/chip/chip.spec.ts index b763a41239..d79fbeb03a 100644 --- a/packages/components/src/components/chip/chip.spec.ts +++ b/packages/components/src/components/chip/chip.spec.ts @@ -16,15 +16,6 @@ describe('Chip', () => { expect(page.root).toMatchSnapshot(); }); it('should handle css classes', () => { - element.type = 'strong'; - expect(element.getCssClassMap()).toContain('chip--type-strong'); - - element.color = 'green'; - expect(element.getCssClassMap()).toContain('chip--color-green'); - - element.type = 'strong'; - expect(element.getCssClassMap()).toContain('chip--type-strong'); - element.selected = true; expect(element.getCssClassMap()).toContain('chip--selected'); diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx index ea64c54c08..6ed0fb71d2 100644 --- a/packages/components/src/components/chip/chip.tsx +++ b/packages/components/src/components/chip/chip.tsx @@ -27,24 +27,9 @@ import { emitEvent } from '../../utils/utils'; }) export class Chip { @Element() hostElement: HTMLElement; - /** (optional) chip type */ - // TODO: Inversed - @Prop() type?: 'standard' | 'strong' = 'standard'; + @Prop() type?: 'standard' | 'outline' = 'standard'; /** (optional) */ @Prop() selected?: boolean = false; - /** (optional) chip color */ - @Prop() color?: - | 'cyan' - | 'yellow' - | 'green' - | 'orange' - | 'red' - | 'violet' - | 'brown' - | 'olive' - | 'teal' - | 'black' - | 'grey'; /** (optional) chip aria-role */ @Prop() ariaRoleTitle?: string = 'switch'; /** (optional) chip aria-checked */ @@ -169,10 +154,9 @@ export class Chip { return classNames( mode === 'basePart' ? 'base' : component, - this.type && `${prefix}type-${this.type}`, - this.color && `${prefix}color-${this.color}`, !!this.selected && `${prefix}selected`, - !!this.disabled && `${prefix}disabled` + !!this.disabled && `${prefix}disabled`, + this.type && `${prefix}type-${this.type}` ); } } diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md index 1cd4104223..0570c0b1f7 100644 --- a/packages/components/src/components/chip/readme.md +++ b/packages/components/src/components/chip/readme.md @@ -7,18 +7,17 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | -------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------ | -| `ariaCheckedState` | `aria-checked-state` | (optional) chip aria-checked | `boolean` | `undefined` | -| `ariaRoleTitle` | `aria-role-title` | (optional) chip aria-role | `string` | `'switch'` | -| `color` | `color` | (optional) chip color | `"black" \| "brown" \| "cyan" \| "green" \| "grey" \| "olive" \| "orange" \| "red" \| "teal" \| "violet" \| "yellow"` | `undefined` | -| `disabled` | `disabled` | (optional) chip disabled | `boolean` | `false` | -| `dismissible` | `dismissible` | (optional) chip dismissible | `boolean` | `false` | -| `iconSize` | `icon-size` | (optional) chip icon size | `number` | `16` | -| `label` | `label` | (optional) chip label | `string` | `undefined` | -| `selected` | `selected` | (optional) | `boolean` | `false` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `type` | `type` | (optional) chip type | `"standard" \| "strong"` | `'standard'` | +| Property | Attribute | Description | Type | Default | +| ------------------ | -------------------- | ------------------------------ | ------------------------- | ------------ | +| `ariaCheckedState` | `aria-checked-state` | (optional) chip aria-checked | `boolean` | `undefined` | +| `ariaRoleTitle` | `aria-role-title` | (optional) chip aria-role | `string` | `'switch'` | +| `disabled` | `disabled` | (optional) chip disabled | `boolean` | `false` | +| `dismissible` | `dismissible` | (optional) chip dismissible | `boolean` | `false` | +| `iconSize` | `icon-size` | (optional) chip icon size | `number` | `16` | +| `label` | `label` | (optional) chip label | `string` | `undefined` | +| `selected` | `selected` | (optional) | `boolean` | `false` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `type` | `type` | | `"outline" \| "standard"` | `'standard'` | ## Events diff --git a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx index a1dd5a610b..fb770c0690 100644 --- a/packages/storybook-vue/stories/components/chip/Chip.stories.mdx +++ b/packages/storybook-vue/stories/components/chip/Chip.stories.mdx @@ -15,29 +15,6 @@ import { action } from '@storybook/addon-actions'; label: { control: { type: 'text' }, }, - color: { - control: { - type: 'select', - options: [ - 'cyan', - 'yellow', - 'green', - 'orange', - 'red', - 'violet', - 'brown', - 'olive', - 'teal', - 'grey', - ], - }, - }, - type: { - control: { - type: 'select', - options: ['strong', 'standard', 'inversed', 'colored'], - }, - }, }} /> @@ -49,9 +26,7 @@ export const Template = (args, { argTypes }) => ({ template: `