Skip to content

refactor: adapted native elements syntax from documentation #4096

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

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
+103 −31
Draft

refactor: adapted native elements syntax from documentation #4096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9caf52b
refactor: adapted native elements syntax from documentation
mfranzke Apr 22, 2025
10167f1
test: updated snapshots
mfranzke Apr 22, 2025
49ebcd0
test: updated snapshots
mfranzke Apr 22, 2025
d211527
Merge branch 'main' into 4095-tag-align-showcase-and-documentation
mfranzke Apr 23, 2025
d869ab8
Merge branch 'main' into 4095-tag-align-showcase-and-documentation
mfranzke May 13, 2025
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
Binary file modified __snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/chromium/DBTag-should-be-a-radio-checked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/chromium/DBTag-should-be-a-radio.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/firefox/DBTag-should-be-a-radio-checked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/firefox/DBTag-should-be-a-radio.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio-checked.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-radio.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 12 additions & 4 deletions packages/components/src/components/tag/docs/Angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,20 @@ import { DBTag } from '@db-ux/ngx-core-components';

```html app.component.html
<!-- app.component.html -->
<db-tag><db-button>Tag as Button</db-button></db-tag>
<db-tag><button type="button">Tag as Button</button></db-tag>
<db-tag>
<db-link> Tag as Link </db-link>
<a href="#"> Tag as Link </a>
</db-tag>
<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>
<db-tag><db-radio>Tag as Radio</db-radio></db-tag>
<db-tag
><label for="checkbox01"
><input id="checkbox01" type="checkbox" />Tag as Checkbox</label
></db-tag
>
<db-tag
><label for="radio01"
><input name="radio01" id="radio01" type="radio" />Tag as Radio</label
></db-tag
>
<db-tag>Static Tag</db-tag>
<db-tag [overflow]="true"><span>Static Tag with overflow</span></db-tag>
```
16 changes: 12 additions & 4 deletions packages/components/src/components/tag/docs/Migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,18 @@ We simplified the components by reducing the amount from tag + chip to only tag.
You can use different types of tags by adding another component into it:

```html
<db-tag><db-button>Tag as Button</db-button></db-tag>
<db-tag><db-link>Tag as Link</db-link></db-tag>
<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>
<db-tag><db-radio>Tag as Radio</db-radio></db-tag>
<db-tag><button type="button">Tag as Button</button></db-tag>
<db-tag><a href="#">Tag as Link</a></db-tag>
<db-tag
><label for="checkbox01">
<input id="checkbox01" type="checkbox" />Tag as Checkbox</label
></db-tag
>
<db-tag
><label for="radio01"
><input name="radio01" id="radio01" type="radio" />Tag as Radio</label
></db-tag
>
<db-tag>Static Tag</db-tag>
```

Expand Down
14 changes: 10 additions & 4 deletions packages/components/src/components/tag/docs/React.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,22 @@ import { DBTag } from "@db-ux/react-core-components";
const App = () => (
<>
<DBTag>
<DBButton>Tag as Button</DBButton>
<button type="button">Tag as Button</button>
</DBTag>
<DBTag>
<DBLink>Tag as Link</DBLink>
<a href="#">Tag as Link</a>
</DBTag>
<DBTag>
<DBCheckbox>Tag as Checkbox</DBCheckbox>
<label for="checkbox01">
<input id="checkbox01" type="checkbox" />
Tag as Checkbox
</label>
</DBTag>
<DBTag>
<DBRadio>Tag as Radio</DBRadio>
<label for="radio01">
<input name="radio01" id="radio01" type="radio" />
Tag as Radio
</label>
</DBTag>
<DBTag>Static Tag</DBTag>
<DBTag overflow={true}>
Expand Down
17 changes: 13 additions & 4 deletions packages/components/src/components/tag/docs/Vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,21 @@ import { DBTag } from "@db-ux/v-core-components";
</script>

<template>
<DBTag><DBButton>Tag as Button</DBButton></DBTag>
<DBTag><button type="button">Tag as Button</button></DBTag>
<DBTag>
<DBLink> Tag as Link </DBLink>
<a href="#"> Tag as Link </a>
</DBTag>
<DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>
<DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>
<DBTag
><label for="checkbox01"
><input id="checkbox01" type="checkbox" />Tag as Checkbox</label
></DBTag
>
<DBTag
><label for="radio01"
><input name="radio01" id="radio01" type="radio" />Tag as
Radio</label
></DBTag
>
<DBTag>Static Tag</DBTag>
<DBTag :overflow="true">
<span>Static Tag with overflow</span>
Expand Down
37 changes: 30 additions & 7 deletions packages/components/src/components/tag/tag.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ const testInterActions = () => {
let test = '';
const buttonTag: any = (
<DBTag>
<DBButton onClick={() => (test = 'test')}>Test</DBButton>
<button onClick={() => (test = 'test')} type="button">
Test
</button>
</DBTag>
);
const component = await mount(buttonTag);
Expand All @@ -66,7 +68,7 @@ const testInterActions = () => {
test('should be a button', async ({ mount }) => {
const buttonTag: any = (
<DBTag>
<DBButton>Test</DBButton>
<button type="button">Test</button>
</DBTag>
);
const component = await mount(buttonTag);
Expand All @@ -76,7 +78,7 @@ const testInterActions = () => {
test('should be a link', async ({ mount }) => {
const tag: any = (
<DBTag>
<DBLink>Test</DBLink>
<a href="#">Test</a>
</DBTag>
);
const component = await mount(tag);
Expand All @@ -86,7 +88,10 @@ const testInterActions = () => {
test('should be a radio', async ({ mount }) => {
const tag: any = (
<DBTag>
<DBRadio>Test</DBRadio>
<label for="radio01">
<input name="radio01" id="radio01" type="radio" />
Test
</label>
</DBTag>
);
const component = await mount(tag);
Expand All @@ -96,7 +101,15 @@ const testInterActions = () => {
test('should be a radio checked', async ({ mount }) => {
const tag: any = (
<DBTag>
<DBRadio data-testid="radio">Test</DBRadio>
<label for="radio01">
<input
name="radio01"
id="radio01"
type="radio"
data-testid="radio"
/>
Test
</label>
</DBTag>
);
const component = await mount(tag);
Expand All @@ -107,7 +120,10 @@ const testInterActions = () => {
test('should be a checkbox', async ({ mount }) => {
const tag: any = (
<DBTag>
<DBCheckbox>Test</DBCheckbox>
<label for="checkbox01">
<input id="checkbox01" type="checkbox" />
Test
</label>
</DBTag>
);
const component = await mount(tag);
Expand All @@ -117,7 +133,14 @@ const testInterActions = () => {
test('should be a checkbox checked', async ({ mount }) => {
const tag: any = (
<DBTag>
<DBCheckbox data-testid="checkbox">Test</DBCheckbox>
<label for="checkbox01">
<input
id="checkbox01"
type="checkbox"
data-testid="checkbox"
/>
Test
</label>
</DBTag>
);
const component = await mount(tag);
Expand Down
18 changes: 15 additions & 3 deletions showcases/angular-showcase/src/app/components/form/form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,9 +256,21 @@ <h1>Output</h1>
<dd>{{ getTags() }}</dd>

<br />
<db-tag><db-checkbox>Checkbox</db-checkbox></db-tag>
<db-tag><db-radio>Checkbox</db-radio></db-tag>
<db-tag><db-button>Checkbox</db-button></db-tag>
<db-tag
><label for="checkbox01">
<input id="checkbox01" type="checkbox" />Checkbox</label
></db-tag
>
<db-tag
><label for="radio01">
<input
name="radio01"
id="radio01"
type="radio"
/>Checkbox</label
></db-tag
>
<db-tag><button type="button">Checkbox</button></db-tag>
<br />

<db-tabs orientation="vertical">
Expand Down
14 changes: 10 additions & 4 deletions showcases/react-showcase/src/components/form/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -498,16 +498,22 @@ const FormComponent = () => {

<div>
<DBTag>
<DBButton>Test</DBButton>
<button type="button">Test</button>
</DBTag>
<DBTag>
<DBLink>Test</DBLink>
<a href="#">Test</a>
</DBTag>
<DBTag>
<DBRadio>Test</DBRadio>
<label htmlFor="radio01">
<input name="radio01" id="radio01" type="radio" />
Test
</label>
</DBTag>
<DBTag>
<DBCheckbox>Test</DBCheckbox>
<label htmlFor="checkbox01">
<input id="checkbox01" type="checkbox" />
Test
</label>
</DBTag>
</div>
</div>
Expand Down
Loading