Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(elements|ino-chip): update design #752

Merged
merged 3 commits into from
Oct 17, 2022
Merged

style(elements|ino-chip): update design #752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36c6b42
refactor(elements|ino-chip): apply new design
MariaLStefan Sep 28, 2022
981edb0
refactor(elements|ino-chip): add requested changes
MariaLStefan Sep 29, 2022
f57325e
chore: apply pr feedback
janivo Oct 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/elements-angular/elements/src/directives/proxies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,13 +177,13 @@ Listen to this event to hide or destroy this chip.

@ProxyCmp({
defineCustomElementFn: undefined,
inputs: ['colorScheme', 'disabled', 'fill', 'label', 'removable', 'selectable', 'selected', 'value']
inputs: ['disabled', 'fill', 'label', 'removable', 'selectable', 'selected', 'value']
})
@Component({
selector: 'ino-chip',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
inputs: ['colorScheme', 'disabled', 'fill', 'label', 'removable', 'selectable', 'selected', 'value']
inputs: ['disabled', 'fill', 'label', 'removable', 'selectable', 'selected', 'value']
})
export class InoChip {
protected el: HTMLElement;
Expand Down
1 change: 0 additions & 1 deletion packages/elements-vue/src/proxies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ export const InoCheckbox = /*@__PURE__*/ defineContainer<JSX.InoCheckbox>('ino-c


export const InoChip = /*@__PURE__*/ defineContainer<JSX.InoChip>('ino-chip', undefined, [
'colorScheme',
'disabled',
'fill',
'label',
Expand Down
8 changes: 0 additions & 8 deletions packages/elements/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,6 @@ export namespace Components {
"value"?: string;
}
interface InoChip {
/**
* The name of the color scheme which is used to style the background and outline of this component.
*/
"colorScheme": ColorScheme | 'default';
/**
* Disables all interactions.
*/
Expand Down Expand Up @@ -1968,10 +1964,6 @@ declare namespace LocalJSX {
"value"?: string;
}
interface InoChip {
/**
* The name of the color scheme which is used to style the background and outline of this component.
*/
"colorScheme"?: ColorScheme | 'default';
/**
* Disables all interactions.
*/
Expand Down
125 changes: 71 additions & 54 deletions packages/elements/src/components/ino-chip/ino-chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,60 @@
@use 'base/mdc-customize';
@use '@material/chips';
@use "@material/chips/styles";
@use 'base/theme';
@use '../base/new-theme' as theme;

$default-chip-color: lighten(theme.color(primary), 36.5%);
$default-chip-contrast-color: rgba(0, 0, 0, 0.87);
$default-chip-dark-color: rgba(0, 0, 0, 0.87);
$border-focused: rgba(45, 93, 255, 0.3);

@mixin colorChip($base-color, $contrast-color, $dark-color) {
&.ino-chip--solid .ino-chip-container {
@include chips.container-color($base-color);
@include chips.text-label-color($contrast-color);
@include chips.checkmark-color($contrast-color);

ino-icon {
--icon-color: #{$contrast-color};
}
}

// Set outline color
&.ino-chip--outline .ino-chip-container {
@include chips.outline-color($base-color);
@include chips.text-label-color($dark-color);
@include chips.checkmark-color($dark-color);

ino-icon {
--icon-color: #{$dark-color};
}
}
$chip-outlined-color-enabled: transparent;
$chip-outlined-color-hover: #E8EDFF;

&.ino-chip-disabled .ino-chip-container {
@include chips.container-color(theme.color(light));
@include chips.outline-color(theme.color(light, light));
@include chips.text-label-color(white);
@include chips.outline-width(0);
$chip-solid-color-enabled: #E8EDFF;
$chip-solid-color-hover: #D7E0FE;

ino-icon {
--icon-color: white;
}
}
}
$chip-color-focus: #2D5DFF4D;
$chip-color-font: theme.$primary;

$icon-size: 16px;

ino-chip {

// base styling
.ino-chip-container {
@include chips.ripple-color(transparent);
@include chips.trailing-action-color(theme.$primary);
@include chips.trailing-action-ripple-size(0px);
@include chips.text-label-color(theme.$primary);
@include chips.icon-color(theme.$primary);
@include chips.checkmark-color(theme.$primary);
@include chips.height(24px);
transition: ease-in-out 0.15s;

.ino-chip-leading-icon {
--ino-icon-width: #{$icon-size};
--ino-icon-height: #{$icon-size};
}

.mdc-evolution-chip__action {
padding: 0 10px;
}

.mdc-evolution-chip__text-label {
font-size: 13px;
}

&.mdc-evolution-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing {
padding-right: 5px;
}

.ino-chip-trailing-icon {
display: flex;
justify-content: center;
--ino-icon-width: #{$icon-size};
--ino-icon-height: #{$icon-size};

.ino-chip-close-icon {
--ino-icon-width: 15px;
--ino-icon-height: 15px;
--ino-icon-width: 9px;
--ino-icon-height: 9px;
}
}

Expand All @@ -67,30 +63,51 @@ ino-chip {
}
}

// base outline styles
// outline styling
&.ino-chip--outline .ino-chip-container {
@include chips.container-color(transparent);
@include chips.outline-style(solid);
@include chips.outline-width(1px);
@include chips.container-color($chip-outlined-color-enabled);
@include chips.outline-color(theme.$primary);

ino-icon {
--icon-color: #{theme.$primary};
}

&:hover, &:focus {
@include chips.container-color($chip-outlined-color-hover);
}
}

// default styles
&.ino-chip--color-scheme-default {
@include colorChip(
$default-chip-color,
$default-chip-contrast-color,
$default-chip-dark-color
);
// solid styling
&.ino-chip--solid .ino-chip-container {
@include chips.container-color($chip-solid-color-enabled);

ino-icon {
--icon-color: theme.$primary;
}

&:hover, &:focus {
@include chips.container-color($chip-solid-color-hover);
}
}

// disabled styling
&.ino-chip-disabled .ino-chip-container {
@include chips.container-color(theme.$n-7);
@include chips.text-label-color(theme.$n-3);
@include chips.outline-width(0);
pointer-events: none;

ino-icon {
--icon-color: theme.$n-3;
}
}

// Generate ino-color-scheme classes
@each $color-name in theme.$color-schemes {
&.ino-chip--color-scheme-#{$color-name} {
@include colorChip(
theme.color($color-name),
theme.color($color-name, contrast),
theme.color($color-name, dark)
);
// focus styling
&:focus-within {
&.ino-chip--solid .mdc-evolution-chip, &.ino-chip--outline .mdc-evolution-chip {
box-shadow: 0 0 0 3px $border-focused;
}
}
}
11 changes: 1 addition & 10 deletions packages/elements/src/components/ino-chip/ino-chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
import classNames from 'classnames';
import { hasSlotContent } from '../../util/component-utils';

import { ChipSurface, ColorScheme } from '../types';
import { ChipSurface } from '../types';

/**
* @slot default - The label text of the chip
Expand All @@ -27,12 +27,6 @@ import { ChipSurface, ColorScheme } from '../types';
export class Chip implements ComponentInterface {
@Element() el!: HTMLInoChipElement;

/**
* The name of the color scheme which is used
* to style the background and outline of this component.
*/
@Prop() colorScheme: ColorScheme | 'default' = 'default';

/**
* Disables all interactions.
*/
Expand Down Expand Up @@ -137,16 +131,13 @@ export class Chip implements ComponentInterface {
}

render() {
const colorSchemeClass = `ino-chip--color-scheme-${this.colorScheme}`;

const leadingSlotHasContent = hasSlotContent(this.el, 'icon-leading');
const trailingSlotHasContent = hasSlotContent(this.el, 'icon-trailing');

const hasPrimaryGraphic = leadingSlotHasContent || this.selectable;
const hasTrailingGraphic = trailingSlotHasContent || this.removable;

const hostClasses = classNames({
[colorSchemeClass]: true,
'ino-chip--solid': this.fill === 'solid',
'ino-chip--outline': this.fill === 'outline',
'ino-chip-disabled': this.disabled,
Expand Down
20 changes: 9 additions & 11 deletions packages/elements/src/components/ino-chip/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ chip.addEventListener('chipRemoved', (e) =>
```html

<ino-chip
color-scheme="<string>"
disabled
fill="<string>"
label="<string>"
Expand Down Expand Up @@ -113,16 +112,15 @@ However, the component will not be hidden or destroyed but instead emits a `remo

## Properties

| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `colorScheme` | `color-scheme` | The name of the color scheme which is used to style the background and outline of this component. | `"dark" \| "default" \| "error" \| "light" \| "primary" \| "secondary" \| "success" \| "warning"` | `'default'` |
| `disabled` | `disabled` | Disables all interactions. | `boolean` | `false` |
| `fill` | `fill` | The fill type of this element. | `"outline" \| "solid"` | `'solid'` |
| `label` | `label` | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>[DEPRECATED] Please use the default slot instead The content of the component. | `string` | `undefined` |
| `removable` | `removable` | Adds a close icon on the right side of this chip which emits the `removeChip` event on click. | `boolean` | `false` |
| `selectable` | `selectable` | Makes the chip selectable. | `boolean` | `false` |
| `selected` | `selected` | Marks this element as selected (**works only in conjunction with `selectable`**) | `boolean` | `false` |
| `value` | `value` | The value of this chip. Is emitted by the `chipClicked` and `chipRemoved` events. | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
| `disabled` | `disabled` | Disables all interactions. | `boolean` | `false` |
| `fill` | `fill` | The fill type of this element. | `"outline" \| "solid"` | `'solid'` |
| `label` | `label` | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>[DEPRECATED] Please use the default slot instead The content of the component. | `string` | `undefined` |
| `removable` | `removable` | Adds a close icon on the right side of this chip which emits the `removeChip` event on click. | `boolean` | `false` |
| `selectable` | `selectable` | Makes the chip selectable. | `boolean` | `false` |
| `selected` | `selected` | Marks this element as selected (**works only in conjunction with `selectable`**) | `boolean` | `false` |
| `value` | `value` | The value of this chip. Is emitted by the `chipClicked` and `chipRemoved` events. | `string` | `undefined` |


## Events
Expand Down
48 changes: 1 addition & 47 deletions packages/storybook/elements-stencil-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -838,7 +838,7 @@
"filePath": "./src/components/ino-chip/ino-chip.tsx",
"fileName": "ino-chip.tsx",
"tag": "ino-chip",
"readme": "# ino-chip\n\nThe ino-chip component displays the provided content and icon as a chip.\n\n## Usage\n\nThe component can be used as follows:\n\n### Web Component\n\n```js\nconst chip = document.querySelector('ino-chip');\nchip.addEventListener('chipClicked', (e) =>\n console.log('This chip was clicked:', e.detail),\n)\nchip.addEventListener('chipRemoved', (e) =>\n console.log('This chip was removed:', e.detail),\n);\n```\n\n```html\n\n<ino-chip\n color-scheme=\"<string>\"\n disabled\n fill=\"<string>\"\n label=\"<string>\"\n removable\n selectable\n selected\n value=\"<string>\"\n>\n <ino-icon slot=icon-leading\" icon=\"<string>\"></ino-icon>\n</ino-chip>\n```\n\n### React\n\n#### Example #1\n\n```tsx\nimport { Component } from 'react';\nimport { InoChipSet, InoChip } from '@inovex.de/elements/dist/react';\n\nclass MyComponent extends Component {\n\n fruits = [\"apple\", \"banana\", \"cherry\"];\n\n handleChipClicked(e: CustomEvent<string>) {\n console.log(\"User clicked the fruit: \", e.detail);\n }\n\n render() {\n return (\n <div>\n {fruits.map(fruit => (\n <InoChip value={fruit} label={fruit} onChipClicked={this.handleChipClicked}/>\n )\n )}\n </div>\n );\n }\n}\n```\n\n#### Example #2\n\n```tsx\nimport React, { Component } from 'react';\nimport { InoChipSet, InoChip } from '@inovex.de/elements/dist/react';\nimport { Components } from '@inovex.de/elements/dist/types/components';\n\nconst ChipSet = () => {\n\n const fruits = [\"apple\", \"banana\", \"cherry\"];\n const [selectedFruit, setSelectedFruit] = useState < string > (\"apple\");\n\n return (\n <div>\n {fruits.map(fruit => (\n <InoChip\n value={fruit}\n label={fruit}\n selectable\n selected={fruit === selectedFruit}\n onChipClicked={(e) => setSelectedFruit(fruit)}\n />\n ))}\n </div>\n );\n};\n```\n\n## Additional Hints\n\n**Content**: Use the `label` attribute to set the label of the chip. To add an icon to the left side of the chip, use the icon` attribute.\n\n### Selection\nA set of chips can be used to implement a single or multi selection from a handful of options.\nHave a look at the **Selection** and **Filter** stories.\n\n### Removable chips\n\nIf `removable` is set to `true`, the chip can be removed by the user. \nThe component then displays a small `close` icon on the right side of the chip next to the label.\n\nHowever, the component will not be hidden or destroyed but instead emits a `removeChip`-Event. Thus, the component can be removed by subscribing to the corresponding event.\n\n## Demo\n",
"readme": "# ino-chip\n\nThe ino-chip component displays the provided content and icon as a chip.\n\n## Usage\n\nThe component can be used as follows:\n\n### Web Component\n\n```js\nconst chip = document.querySelector('ino-chip');\nchip.addEventListener('chipClicked', (e) =>\n console.log('This chip was clicked:', e.detail),\n)\nchip.addEventListener('chipRemoved', (e) =>\n console.log('This chip was removed:', e.detail),\n);\n```\n\n```html\n\n<ino-chip\n disabled\n fill=\"<string>\"\n label=\"<string>\"\n removable\n selectable\n selected\n value=\"<string>\"\n>\n <ino-icon slot=icon-leading\" icon=\"<string>\"></ino-icon>\n</ino-chip>\n```\n\n### React\n\n#### Example #1\n\n```tsx\nimport { Component } from 'react';\nimport { InoChipSet, InoChip } from '@inovex.de/elements/dist/react';\n\nclass MyComponent extends Component {\n\n fruits = [\"apple\", \"banana\", \"cherry\"];\n\n handleChipClicked(e: CustomEvent<string>) {\n console.log(\"User clicked the fruit: \", e.detail);\n }\n\n render() {\n return (\n <div>\n {fruits.map(fruit => (\n <InoChip value={fruit} label={fruit} onChipClicked={this.handleChipClicked}/>\n )\n )}\n </div>\n );\n }\n}\n```\n\n#### Example #2\n\n```tsx\nimport React, { Component } from 'react';\nimport { InoChipSet, InoChip } from '@inovex.de/elements/dist/react';\nimport { Components } from '@inovex.de/elements/dist/types/components';\n\nconst ChipSet = () => {\n\n const fruits = [\"apple\", \"banana\", \"cherry\"];\n const [selectedFruit, setSelectedFruit] = useState < string > (\"apple\");\n\n return (\n <div>\n {fruits.map(fruit => (\n <InoChip\n value={fruit}\n label={fruit}\n selectable\n selected={fruit === selectedFruit}\n onChipClicked={(e) => setSelectedFruit(fruit)}\n />\n ))}\n </div>\n );\n};\n```\n\n## Additional Hints\n\n**Content**: Use the `label` attribute to set the label of the chip. To add an icon to the left side of the chip, use the icon` attribute.\n\n### Selection\nA set of chips can be used to implement a single or multi selection from a handful of options.\nHave a look at the **Selection** and **Filter** stories.\n\n### Removable chips\n\nIf `removable` is set to `true`, the chip can be removed by the user. \nThe component then displays a small `close` icon on the right side of the chip next to the label.\n\nHowever, the component will not be hidden or destroyed but instead emits a `removeChip`-Event. Thus, the component can be removed by subscribing to the corresponding event.\n\n## Demo\n",
"usage": {},
"docs": "The ino-chip component displays the provided content and icon as a chip.",
"docsTags": [
Expand Down Expand Up @@ -866,52 +866,6 @@
]
},
"props": [
{
"name": "colorScheme",
"type": "\"dark\" | \"default\" | \"error\" | \"light\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
"mutable": false,
"attr": "color-scheme",
"reflectToAttr": false,
"docs": "The name of the color scheme which is used\nto style the background and outline of this component.",
"docsTags": [],
"default": "'default'",
"values": [
{
"value": "dark",
"type": "string"
},
{
"value": "default",
"type": "string"
},
{
"value": "error",
"type": "string"
},
{
"value": "light",
"type": "string"
},
{
"value": "primary",
"type": "string"
},
{
"value": "secondary",
"type": "string"
},
{
"value": "success",
"type": "string"
},
{
"value": "warning",
"type": "string"
}
],
"optional": false,
"required": false
},
{
"name": "disabled",
"type": "boolean",
Expand Down
Loading