Skip to content

feat(core/icon-toggle-button): Add oval attribute #1856

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

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

feat(core/icon-toggle-button): Add oval attribute #1856

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f2881fa
feat(icon-toggle-button): add oval attribute
AndreasBerliner Apr 23, 2025
55eb460
test(icon-toggle-button): add tests for oval attribute
AndreasBerliner Apr 24, 2025
0fdd988
docs(toggle-button, icon-button): add oval attribute info for icon to…
AndreasBerliner Apr 24, 2025
6a8628d
docs(icon-toggle-button): add html test app examples for oval attribute
AndreasBerliner Apr 24, 2025
ee5902c
docs(icon-toggle-button): add angular test app examples for oval attr…
AndreasBerliner Apr 24, 2025
0891f94
docs(icon-toggle-button): add react test app examples for oval attribute
AndreasBerliner Apr 24, 2025
d362a2a
docs(icon-toggle-button): add vue test app examples for oval attribute
AndreasBerliner Apr 25, 2025
db62213
docs(icon-toggle-button): add missing secondary-outline examples for …
AndreasBerliner Apr 25, 2025
f743df8
chore(icon-toggle-button): change since annotation from version 3.0.0…
AndreasBerliner Apr 25, 2025
5cf3310
Merge branch 'main' into icon-toggle-button-oval
AndreasBerliner Apr 25, 2025
4139ea9
add changeset
AndreasBerliner Apr 25, 2025
a7b61c8
docs(icon-toggle-button): remove unnecessary react fragments from rea…
AndreasBerliner Apr 28, 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
8 changes: 8 additions & 0 deletions .changeset/sharp-eyes-rescue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@siemens/ix-angular': minor
'@siemens/ix-react': minor
'@siemens/ix': minor
'@siemens/ix-vue': minor
---

Add oval attribute to __ix-icon-toggle-button__.
82 changes: 58 additions & 24 deletions packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-ghost.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,64 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<ix-icon-toggle-button
variant="primary"
ghost
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
pressed
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
disabled
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
disabled
loading
icon="checkboxes"
></ix-icon-toggle-button>
<ix-layout-grid>
<ix-row>
<ix-icon-toggle-button
variant="primary"
ghost
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
pressed
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
disabled
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
disabled
loading
icon="checkboxes"
></ix-icon-toggle-button>
</ix-row>
<ix-row>
<ix-icon-toggle-button
variant="primary"
ghost
oval
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
pressed
oval
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
disabled
oval
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
ghost
disabled
loading
oval
icon="checkboxes"
></ix-icon-toggle-button>
</ix-row>
</ix-layout-grid>
`,
styleUrls: ['./icon-toggle-button-primary-ghost.css'],
})
Expand Down
82 changes: 58 additions & 24 deletions packages/angular-test-app/src/preview-examples/icon-toggle-button-primary-outline.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,64 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<ix-icon-toggle-button
variant="primary"
outline
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
pressed
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
disabled
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
disabled
loading
icon="checkboxes"
></ix-icon-toggle-button>
<ix-layout-grid>
<ix-row>
<ix-icon-toggle-button
variant="primary"
outline
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
pressed
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
disabled
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
disabled
loading
icon="checkboxes"
></ix-icon-toggle-button>
</ix-row>
<ix-row>
<ix-icon-toggle-button
variant="primary"
outline
icon="checkboxes"
oval
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
pressed
icon="checkboxes"
oval
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
disabled
icon="checkboxes"
oval
></ix-icon-toggle-button>
<ix-icon-toggle-button
variant="primary"
outline
disabled
loading
icon="checkboxes"
oval
></ix-icon-toggle-button>
</ix-row>
</ix-layout-grid>
`,
styleUrls: ['./icon-toggle-button-primary-outline.css'],
})
Expand Down
64 changes: 47 additions & 17 deletions packages/angular-test-app/src/preview-examples/icon-toggle-button-secondary-ghost.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,53 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<ix-icon-toggle-button ghost icon="checkboxes"></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
pressed
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
disabled
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
disabled
loading
icon="checkboxes"
></ix-icon-toggle-button>
<ix-layout-grid>
<ix-row>
<ix-icon-toggle-button ghost icon="checkboxes"></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
pressed
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
disabled
icon="checkboxes"
></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
disabled
loading
icon="checkboxes"
></ix-icon-toggle-button>
</ix-row>
<ix-row>
<ix-icon-toggle-button
ghost
icon="checkboxes"
oval
></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
pressed
icon="checkboxes"
oval
></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
disabled
icon="checkboxes"
oval
></ix-icon-toggle-button>
<ix-icon-toggle-button
ghost
disabled
loading
icon="checkboxes"
oval
></ix-icon-toggle-button>
</ix-row>
</ix-layout-grid>
`,
styleUrls: ['./icon-toggle-button-secondary-ghost.css'],
})
Expand Down
Loading
Loading