Skip to content

refactor(chip): eslint feedback on reserved datatype key #2064

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

Merged
merged 3 commits into from
Nov 27, 2023
Merged

refactor(chip): eslint feedback on reserved datatype key #2064

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
1a082d3
refactor: changed this attribute
mfranzke Nov 27, 2023
c536224
refactor: adapted this attribute renaming
mfranzke Nov 27, 2023
3584e23
Merge branch 'main' into 2063-eslint-feedback-on-reserved-datatype-key
mfranzke Nov 27, 2023
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
9 changes: 5 additions & 4 deletions packages/db-ui-elements-stencil/src/components/db-chip/db-chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import { uuid } from '../../utils/utils';
})
export class DbChip {
/**
* Decides which datatype you want to use: filter (1-n); selection (1);
* Decides which interactiontype you want to use: filter (1-n); selection (1);
*/
@Prop({ reflect: true }) datatype: 'filter' | 'selection' = 'selection';
@Prop({ reflect: true }) interactiontype: 'filter' | 'selection' =
'selection';

/**
* The disabled attribute can be set to keep a user from clicking on the chip.
Expand Down Expand Up @@ -66,9 +67,9 @@ export class DbChip {
<Host>
<input
class="elm-chip"
type={this.datatype === 'filter' ? 'checkbox' : 'radio'}
type={this.interactiontype === 'filter' ? 'checkbox' : 'radio'}
id={this.input_id}
data-type={this.datatype}
data-type={this.interactiontype}
disabled={this.disabled}
name={this.name}
checked={this.selected}
Expand Down
20 changes: 10 additions & 10 deletions packages/db-ui-elements-stencil/src/components/db-chip/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `datatype` | `datatype` | Decides which datatype you want to use: filter (1-n); selection (1); | `"filter" \| "selection"` | `'selection'` |
| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the chip. | `boolean` | `false` |
| `icon` | `icon` | Attribute to add icon before chip. | `string` | `undefined` |
| `iconafter` | `iconafter` | Attribute to add icon after chip. | `string` | `undefined` |
| `input_id` | `input_id` | The input_id of a label form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a label element. | `string` | `'chip-' + uuid()` |
| `name` | `name` | Name to group multiple chips. | `string` | `'chips'` |
| `selected` | `selected` | Selected state | `boolean` | `false` |
| `variant` | `variant` | Predefined variants to change background color and font color. | `"error" \| "informative" \| "poi-db-services-einrichtung" \| "poi-dienstleistungen" \| "poi-einkaufen" \| "poi-essen-trinken" \| "poi-freizeit" \| "poi-gesundheit" \| "poi-kunst-kultur" \| "poi-wegeleitung" \| "poi-wissenswertes" \| "poi-zivile-rel-einrichtungen" \| "success" \| "track" \| "warning"` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the chip. | `boolean` | `false` |
| `icon` | `icon` | Attribute to add icon before chip. | `string` | `undefined` |
| `iconafter` | `iconafter` | Attribute to add icon after chip. | `string` | `undefined` |
| `input_id` | `input_id` | The input_id of a label form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a label element. | `string` | `'chip-' + uuid()` |
| `interactiontype` | `interactiontype` | Decides which interactiontype you want to use: filter (1-n); selection (1); | `"filter" \| "selection"` | `'selection'` |
| `name` | `name` | Name to group multiple chips. | `string` | `'chips'` |
| `selected` | `selected` | Selected state | `boolean` | `false` |
| `variant` | `variant` | Predefined variants to change background color and font color. | `"error" \| "informative" \| "poi-db-services-einrichtung" \| "poi-dienstleistungen" \| "poi-einkaufen" \| "poi-essen-trinken" \| "poi-freizeit" \| "poi-gesundheit" \| "poi-kunst-kultur" \| "poi-wegeleitung" \| "poi-wissenswertes" \| "poi-zivile-rel-einrichtungen" \| "success" \| "track" \| "warning"` | `undefined` |


## Dependencies
Expand Down
24 changes: 12 additions & 12 deletions ...db-ui-elements-stencil/src/components/db-chip/stories/db-chip.intro.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@ import Readme from './../readme.md';
<db-headline>Filter Chips</db-headline>

<Canvas>
<db-chip datatype="filter">default</db-chip>
<db-chip datatype="filter" variant="informative">
<db-chip interactiontype="filter">default</db-chip>
<db-chip interactiontype="filter" variant="informative">
informative
</db-chip>
<db-chip datatype="filter" variant="success">
<db-chip interactiontype="filter" variant="success">
success
</db-chip>
<db-chip datatype="filter" variant="poi-essen-trinken">
<db-chip interactiontype="filter" variant="poi-essen-trinken">
poi-essen-trinken
</db-chip>
<db-chip datatype="filter" variant="poi-einkaufen" selected>
<db-chip interactiontype="filter" variant="poi-einkaufen" selected>
poi-einkaufen
</db-chip>
<db-chip datatype="filter" variant="track">
<db-chip interactiontype="filter" variant="track">
track
</db-chip>
</Canvas>
Expand All @@ -40,21 +40,21 @@ import Readme from './../readme.md';
<db-headline>Chips with icons</db-headline>

<Canvas>
<db-chip datatype="filter" icon="account">icon</db-chip>
<db-chip datatype="filter" iconafter="account">iconafter</db-chip>
<db-chip datatype="filter" icon="account" iconafter="account">
<db-chip interactiontype="filter" icon="account">icon</db-chip>
<db-chip interactiontype="filter" iconafter="account">iconafter</db-chip>
<db-chip interactiontype="filter" icon="account" iconafter="account">
icon + iconafter
</db-chip>
</Canvas>

<db-headline>Chips disabled</db-headline>

<Canvas>
<db-chip datatype="filter">default</db-chip>
<db-chip datatype="filter" variant="informative" disabled>
<db-chip interactiontype="filter">default</db-chip>
<db-chip interactiontype="filter" variant="informative" disabled>
informative
</db-chip>
<db-chip datatype="filter" variant="success">
<db-chip interactiontype="filter" variant="success">
success
</db-chip>
</Canvas>
Expand Down
11 changes: 6 additions & 5 deletions packages/db-ui-elements-stencil/src/components/db-toggle/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------------------------------------------------------- | --------- | -------------------- |
| `checked` | `checked` | Checked property | `boolean` | `undefined` |
| `disabled` | `disabled` | Disabled property | `boolean` | `undefined` |
| `htmlid` | `htmlid` | Optional id for the label - otherwise random id will be set | `string` | `'toggle-' + uuid()` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------------- | --------- | -------------------- |
| `checked` | `checked` | Checked property | `boolean` | `undefined` |
| `disabled` | `disabled` | Disabled property | `boolean` | `undefined` |
| `htmlid` | `htmlid` | Optional id for the label - otherwise random id will be set | `string` | `'toggle-' + uuid()` |
| `name` | `name` | The name attribute specifies a name for the included input element. | `string` | `undefined` |


## Events
Expand Down
10 changes: 7 additions & 3 deletions ...ular-lts-minus-1-showcase/src/app/components/other-elements/other-elements.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@
<db-tag variant="informative">informative</db-tag>
<db-tag variant="success">success</db-tag>
<p>DbChip:</p>
<db-chip datatype="filter" icon="account">default</db-chip>
<db-chip datatype="filter" iconafter="account" variant="informative" disabled
<db-chip interactiontype="filter" icon="account">default</db-chip>
<db-chip
interactiontype="filter"
iconafter="account"
variant="informative"
disabled
>informative</db-chip
>
<db-chip
datatype="filter"
interactiontype="filter"
icon="account"
iconafter="account"
variant="success"
Expand Down
10 changes: 7 additions & 3 deletions ...case/angular-lts-showcase/src/app/components/other-elements/other-elements.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@
<db-tag variant="informative">informative</db-tag>
<db-tag variant="success">success</db-tag>
<p>DbChip:</p>
<db-chip datatype="filter" icon="account">default</db-chip>
<db-chip datatype="filter" iconafter="account" variant="informative" disabled
<db-chip interactiontype="filter" icon="account">default</db-chip>
<db-chip
interactiontype="filter"
iconafter="account"
variant="informative"
disabled
>informative</db-chip
>
<db-chip
datatype="filter"
interactiontype="filter"
icon="account"
iconafter="account"
variant="success"
Expand Down
6 changes: 3 additions & 3 deletions showcase/react-showcase/src/components/other-elements/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,19 @@ function OtherElements() {
<p>DbLogo:</p>
<DbLogo></DbLogo>
<p>DbChip:</p>
<DbChip datatype="filter" icon="account">
<DbChip interactiontype="filter" icon="account">
default
</DbChip>
<DbChip
datatype="filter"
interactiontype="filter"
iconafter="account"
variant="informative"
disabled
>
informative
</DbChip>
<DbChip
datatype="filter"
interactiontype="filter"
icon="account"
iconafter="account"
variant="success"
Expand Down
6 changes: 3 additions & 3 deletions showcase/vue-showcase/src/components/other-elements/OtherElements.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@ import {
<DbTag variant="informative">informative</DbTag>
<DbTag variant="success">success</DbTag>
<p>DbChip:</p>
<DbChip datatype="filter" icon="account"> default </DbChip>
<DbChip interactiontype="filter" icon="account"> default </DbChip>
<DbChip
datatype="filter"
interactiontype="filter"
iconafter="account"
variant="informative"
disabled
>
informative
</DbChip>
<DbChip
datatype="filter"
interactiontype="filter"
icon="account"
iconafter="account"
variant="success"
Expand Down