From e7f767e5ff6d54c9fef93fcf76543223bad44b4a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 25 Aug 2026 15:00:21 +0300 Subject: [PATCH 1/3] refactor(button-group): update styles and simplify layout structure across all samples --- .../button-group-alignment.component.html | 6 +- .../button-group-alignment.component.scss | 46 ++++---- .../button-group-custom-toggle.component.html | 4 +- .../button-group-custom-toggle.component.scss | 14 +-- ...on-group-interaction-states.component.html | 37 +++--- ...on-group-interaction-states.component.scss | 109 +++++++++++++----- .../button-group-layout.component.html | 5 +- .../button-group-layout.component.scss | 25 ++-- .../button-group-overview.component.html | 6 +- .../button-group-overview.component.scss | 33 +++--- .../button-group-selection.component.html | 26 ++--- .../button-group-selection.component.scss | 59 ++++++---- .../button-group-size.component.html | 18 +-- .../button-group-size.component.scss | 72 +++++++----- .../button-group-states.component.html | 38 +++--- .../button-group-states.component.scss | 100 +++++++++++----- .../button-group-styling.component.html | 12 +- .../button-group-styling.component.scss | 14 ++- .../button-group-styling/layout.scss | 13 --- ...tton-group-tailwind-styling.component.html | 13 +-- ...tton-group-tailwind-styling.component.scss | 24 ++-- .../button-group-tailwind-styling/layout.scss | 16 --- 22 files changed, 391 insertions(+), 299 deletions(-) delete mode 100644 src/app/data-entries/buttonGroup/button-group-styling/layout.scss delete mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html index 4bf378781..e4d6a8727 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html @@ -1,6 +1,6 @@ -
+
@for (alignment of alignments; track alignment.value) { -
+
{{ alignment.label }} @for (city of cities; track city) { @@ -9,4 +9,4 @@
} -
+ diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index d8f1c1233..976bd2fe8 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -1,35 +1,31 @@ -.button-group-alignment { - display: flex; - align-items: flex-start; - justify-content: center; - gap: 60px; - padding: 24px; +@use 'igniteui-theming' as *; + +:host { + display: grid; + place-items: center; + height: 100vh; } -.button-group-alignment-item { +.sample-layout { display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - gap: 16px; + gap: rem(32px); + align-items: start; + justify-content: center; + flex-wrap: wrap; } -.button-group-alignment-item igx-buttongroup { - width: 240px; +.sample-inner-layout { + display: grid; + gap: rem(8px); + align-items: start; } -.button-group-alignment-item:first-child igx-buttongroup { - width: 320px; +igx-buttongroup { + min-width: rem(280px); } -.button-group-alignment-item span { - width: 100%; - text-align: center; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +span { + @include type-style('body-2'); + + color: var(--ig-gray-700); } diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html index 6c27c58e2..03fc4ff1f 100644 --- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html +++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html @@ -1,3 +1 @@ -
- -
+ diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss index 157e28c3c..3eb8ea51c 100644 --- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss @@ -1,11 +1,11 @@ -.button-group-custom-toggle { - display: flex; - justify-content: center; - align-items: center; - min-height: 7rem; +@use 'igniteui-theming' as *; + +:host { + display: grid; + place-items: center; + height: 100vh; } igx-buttongroup { - display: inline-block; - width: 300px; + max-width: rem(300px); } diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html index 49b20d26b..21bcea7b6 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html @@ -1,28 +1,31 @@ -
-
+
+
@for (state of states; track state) { {{ getLabel(state) }} } -
+ @for (row of rows; track row.label) { -
+
{{ row.label }} @for (state of states; track state) { - - - +
+ {{ getLabel(state) }} + + + +
} -
+ }
diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss index c78233443..abe560524 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss @@ -1,73 +1,118 @@ -.button-group-interaction-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 20px; +@use "igniteui-theming/sass/typography" as *; + +:host { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; } -.button-group-interaction-states-row { +.states-matrix { display: grid; - grid-template-columns: 120px 164px 164px 164px; + grid-template-columns: auto repeat(3, minmax(rem(124px), 1fr)); + gap: rem(16px); + inline-size: 100%; + max-inline-size: rem(680px); + margin-inline: auto; +} + +.states-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; align-items: center; - gap: 16px; } -.button-group-interaction-states .row-label, -.button-group-interaction-states .column-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +.row-label, +.column-label, +.cell-label { + @include type-style("body-2") { + margin: 0; + } + + color: var(--ig-gray-700); } -.button-group-interaction-states .column-label { +.column-label, +.cell-label { text-align: center; } -.button-group-interaction-states igx-buttongroup { - width: 164px; +.cell-label { + display: none; } -.button-group-interaction-states button { - width: 100%; - gap: 4px; +.state-cell { + display: grid; + gap: rem(4px); +} + +igx-icon { + --ig-icon-size: #{rem(16px)}; +} + +@container (width < 34rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(rem(150px), 1fr)); + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: rem(16px); + } + + .state-cell { + margin-inline-end: rem(8px); + } } -.button-group-interaction-states igx-icon { - --ig-icon-size: 16px; +// WARNING START: Demo overrides only. Do not copy to production. +// Forced state classes are used here solely to present all component states visually. +igx-buttongroup{ + pointer-events: none; } -.button-group-interaction-states button.state-hover:not(.state-selected) { +.state-hover:not(.state-selected) { background: var(--item-hover-background); border-color: var(--item-hover-border-color); color: var(--item-hover-text-color); } -.button-group-interaction-states button.state-idle.state-selected { +.state-idle.state-selected { background: var(--item-active-background); border-color: var(--item-active-border-color); color: var(--item-active-text-color); } -.button-group-interaction-states button.state-focused:not(.state-selected) { +.state-focused:not(.state-selected) { background: var(--item-focused-hover-background); border-color: var(--item-focused-hover-border-color); color: var(--item-focused-hover-text-color); } -.button-group-interaction-states button.state-hover.state-selected { +.state-hover.state-selected { background: var(--item-selected-active-background); border-color: var(--item-selected-active-border-color); color: var(--item-selected-hover-text-color); } -.button-group-interaction-states button.state-focused.state-selected { +.state-focused.state-selected { background: var(--item-selected-active-background); border-color: var(--item-selected-active-border-color); color: var(--item-focused-hover-text-color); } +// WARNING END diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html index f2cee52a0..bc87b5145 100644 --- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html +++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html @@ -1,10 +1,9 @@ -
+
@for (layout of layouts; track layout.value) { } - @for (layout of layouts; track layout.value) { } -
+ diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss index fc95cf401..9b0b34eb7 100644 --- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss @@ -1,21 +1,20 @@ -.button-group-layout { +@use 'igniteui-theming' as *; + +:host { + display: grid; + place-items: center; + height: 100vh; +} + +.sample-layout { display: flex; - flex-direction: row; align-items: center; justify-content: center; - gap: 80px; - min-height: 5.5rem; + flex-wrap: wrap; + gap: rem(60px); } igx-buttongroup { - display: inline-block; max-width: 400px; -} - -.button-group-layout button { - min-width: 100px; -} - -.button-group-layout igx-icon { - --ig-icon-size: 20px; + min-width: 280px; } diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html index e6f995b8d..ee2f12c63 100644 --- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html +++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html @@ -1,4 +1,4 @@ -
+
+ diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss index 128e5f6f9..37cdf8360 100644 --- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss @@ -1,31 +1,32 @@ -.button-group-overview { - display: flex; - flex-direction: column; - align-items: center; +@use 'igniteui-theming' as *; + +:host { + display: grid; + place-items: center; + height: 100vh; } -igx-buttongroup { - display: block; - width: 280px; - max-width: 100%; +.sample-layout { + display: grid; + width: rem(280px); + gap: rem(8px); } -.album { - margin-top: 8px; - width: 280px; - max-width: 100%; +igx-buttongroup { + max-width: rem(280px); } .album-title { - display: inline-block; - margin-bottom: 8px; - color: #1f89d4; + @include type-style('body-2'); + + margin-block: 0 rem(8px); + color: var(--ig-primary-500); } .album-photos { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 4px; + gap: rem(4px); } .album-photos img { diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html index 65ff4542c..c904dd7fc 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html @@ -1,18 +1,16 @@
@for (mode of selectionModes; track mode.value) { -
- {{ mode.label }} - - - - - -
+ {{ mode.label }} + + + + + }
diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss index 7e52239fa..d800411f8 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss @@ -1,30 +1,45 @@ -.selection-samples { - display: flex; - justify-content: center; - flex-direction: column; - align-items: flex-start; - gap: 35px; - padding-left: 48px; +@use 'igniteui-theming' as *; + +:host { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; } -.selection-sample { - display: flex; +.selection-samples { + display: grid; + grid-template-columns: auto minmax(rem(180px), 1fr); align-items: center; - gap: 30px; + gap: rem(24px) rem(32px); + inline-size: 100%; + max-inline-size: rem(380px); + margin-inline: auto; +} + +.sample-label { + @include type-style('body-2'); + + color: var(--ig-gray-700); + text-align: end; } -.selection-sample > span { - width: 120px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +igx-buttongroup { + inline-size: 100%; } -.selection-sample igx-buttongroup { - width: 200px; +@container (width < 22rem) { + .selection-samples { + grid-template-columns: minmax(0, 1fr); + gap: rem(4px); + } + + .sample-label { + text-align: start; + + &:not(:first-of-type) { + margin-block-start: rem(16px); + } + } } diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html index 57418c0d5..bfc42db3f 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html @@ -1,16 +1,10 @@
@for (size of sizes; track size) { -
- {{ getLabel(size) }} - - @for (city of cities; track city) { - - } - -
+ {{ getLabel(size) }} + + @for (city of cities; track city) { + + } + }
diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss index 7d9127e01..f93f2c76f 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss @@ -1,41 +1,53 @@ -.button-group-size { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - gap: 32px; - padding: 13px; - padding-left: 3rem; +@use 'igniteui-theming' as *; + +:host { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + place-items: center; + height: 100vh; } -.button-group-size-item { - display: flex; - flex-direction: row; +.button-group-size { + display: grid; + grid-template-columns: auto minmax(rem(240px), 1fr); align-items: center; - justify-content: flex-start; - gap: 32px; + gap: rem(24px) rem(32px); + inline-size: 100%; + max-inline-size: rem(480px); + margin-inline: auto; } -.button-group-size-item span { - width: 52px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} +.sample-label { + @include type-style('body-2'); -.button-group-small button { - min-width: 90px; + color: var(--ig-gray-700); + text-align: end; } -.button-group-medium button { - min-width: 100px; +igx-buttongroup { + &:nth-of-type(1n) { + --ig-size: var(--ig-size-small); + } + &:nth-of-type(2n) { + --ig-size: var(--ig-size-medium); + } + &:nth-of-type(3n) { + --ig-size: var(--ig-size-large); + } } -.button-group-large button { - min-width: 110px; +@container (width < 22rem) { + .button-group-size { + grid-template-columns: minmax(0, 1fr); + gap: rem(4px); + } + + .sample-label { + text-align: start; + + &:not(:first-of-type) { + margin-block-start: rem(16px); + } + } } diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html index 81234c33d..ffa5eb8aa 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html @@ -1,26 +1,32 @@ -
-
+
+
Enabled Disabled -
+ @for (row of rows; track row.label) { -
+
{{ row.label }} - - - +
+ Enabled + + + +
- - - -
+
+ Disabled + + + +
+ }
diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss index c823cd934..a9d63aa09 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss @@ -1,41 +1,89 @@ -.button-group-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 20px; +@use 'igniteui-theming' as *; + +:host { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; } -.button-group-states-row { +.states-matrix { + --state-columns: 2; + display: grid; - grid-template-columns: 120px 160px 160px; + grid-template-columns: auto repeat(var(--state-columns), minmax(rem(120px), 1fr)); + gap: rem(16px); + inline-size: 100%; + max-inline-size: rem(520px); + margin-inline: auto; +} + +.states-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; align-items: center; - gap: 16px; -} - -.button-group-states .row-label, -.button-group-states .column-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +} + +.row-label, +.column-label, +.cell-label { + @include type-style('body-2'); + + color: var(--ig-gray-700); +} + +.column-label, +.cell-label { text-align: center; } -.button-group-states igx-buttongroup { - width: 160px; +.cell-label { + display: none; +} + +.state-cell { + display: grid; + gap: rem(4px); +} + +// Too narrow for the matrix: drop the header, let the cells wrap, and move +// each column label into the cell it describes. +@container (width < 24rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(rem(140px), 1fr)); + column-gap: rem(8px); + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: rem(16px); + } } -.button-group-states button { - width: 100%; +// WARNING START: Demo overrides only. Do not copy to production. +// Forced state classes are used here solely to present all component states visually. +igx-buttongroup { + pointer-events: none; } -.button-group-states button.state-idle.state-selected { +button.state-idle.state-selected { background: var(--item-active-background); border-color: var(--item-active-border-color); color: var(--item-active-text-color); } +// WARNING END diff --git a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html index c59162f0a..1a47dc7e8 100644 --- a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html +++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html @@ -1,7 +1,5 @@ -
- - @for (layout of layouts; track layout) { - - } - -
+ + @for (layout of layouts; track layout) { + + } + diff --git a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss index 4475acc9d..34bed7af8 100644 --- a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss @@ -1,7 +1,19 @@ -@use "layout.scss" as *; @use "igniteui-angular/theming" as *; +:host { + display: grid; + place-items: center; + height: 100vh; +} + +igx-buttongroup { + display: inline-block; + width: 100%; + max-width: rem(400px); +} + $custom-button-group: button-group-theme( + $border-radius: 4px, $item-text-color: #4a5a66, $item-background: #cfe8fb, $item-border-color: #4da3e8, diff --git a/src/app/data-entries/buttonGroup/button-group-styling/layout.scss b/src/app/data-entries/buttonGroup/button-group-styling/layout.scss deleted file mode 100644 index 544499ade..000000000 --- a/src/app/data-entries/buttonGroup/button-group-styling/layout.scss +++ /dev/null @@ -1,13 +0,0 @@ -.button-group-styling { - display: flex; - align-items: center; - justify-content: center; - min-height: 7rem; -} - -igx-buttongroup { - width: 420px; - border: 2px solid #4da3e8; - border-radius: 4px; - overflow: hidden; -} diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html index 8a1bc14d8..4ea6203b5 100644 --- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html +++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html @@ -1,7 +1,6 @@ -
- - @for (view of views; track view) { - - } - -
+ + @for (view of views; track view) { + + } + diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss index 2c28a2607..f83f399b9 100644 --- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss @@ -1,15 +1,13 @@ -@use "layout.scss"; +@use 'igniteui-theming' as *; -.button-group-style { - --item-text-color: #6d28d9; - --item-background: #ffffff; - --item-border-color: #c4b5fd; - --item-hover-text-color: #6d28d9; - --item-hover-background: #fae8ff; - --item-hover-border-color: #c4b5fd; - --item-selected-text-color: #ffffff; - --item-selected-background: #7c3aed; - --item-selected-border-color: #c4b5fd; - --item-selected-hover-text-color: #ffffff; - --item-selected-hover-background: #7c3aed; +:host { + display: grid; + place-items: center; + height: 100vh; +} + +igx-buttongroup { + display: inline-block; + width: 100%; + max-width: rem(400px); } diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss deleted file mode 100644 index 4b18df3f1..000000000 --- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss +++ /dev/null @@ -1,16 +0,0 @@ -.button-group-tailwind-styling { - display: flex; - align-items: center; - justify-content: center; - min-height: 7rem; - width: 100%; - padding: 1.5rem; - box-sizing: border-box; - background: #f5f3ff; -} - -.button-group-tailwind-styling igx-buttongroup { - width: 420px; - max-width: 100%; - overflow: hidden; -} From ae7231c07e995c3d829a8f7cd3d5ca2ced17936e Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 25 Aug 2026 16:12:13 +0300 Subject: [PATCH 2/3] fix(button-group): remove unused additionalFiles property from styling config --- live-editing/configs/ButtonGroupConfigGenerator.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/live-editing/configs/ButtonGroupConfigGenerator.ts b/live-editing/configs/ButtonGroupConfigGenerator.ts index 9db78ec06..64aeafcbc 100644 --- a/live-editing/configs/ButtonGroupConfigGenerator.ts +++ b/live-editing/configs/ButtonGroupConfigGenerator.ts @@ -69,7 +69,6 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator { // button group styling configs.push(new Config({ component: 'ButtonGroupStylingComponent', - additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/buttonGroup/" })); From 09bca81d315555e3a035ad41efd12182e9f8c69b Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Aug 2026 16:27:16 +0300 Subject: [PATCH 3/3] fix(button-group): update disabled state and alignment styles --- .../button-group-alignment.component.scss | 1 + .../button-group-states/button-group-states.component.html | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index 976bd2fe8..1c0cc5f9c 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -28,4 +28,5 @@ span { @include type-style('body-2'); color: var(--ig-gray-700); + text-align: center; } diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html index ffa5eb8aa..9579f87be 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html @@ -23,8 +23,8 @@
Disabled - - + +