From 51aacbb6d99f5a4eb548135c5a8a0c4d9c05a02a Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 8 Oct 2026 17:31:13 +0300 Subject: [PATCH 1/3] feat(radio): update radio samples --- live-editing/configs/RadioConfigGenerator.ts | 47 ++++++- .../data-entries/data-entries-routes-data.ts | 10 +- src/app/data-entries/data-entries.routes.ts | 60 +++++++-- .../radio-disabled.component.html | 8 ++ .../radio-disabled.component.scss | 21 ++++ .../radio-disabled.component.ts | 10 ++ .../radio-interaction-state.component.html | 27 ++++ .../radio-interaction-state.component.scss | 69 ++++++++++ .../radio-interaction-state.component.ts | 22 ++++ .../radio-layout/radio-layout.component.html | 16 +++ .../radio-layout/radio-layout.component.scss | 26 ++++ .../radio-layout/radio-layout.component.ts | 10 ++ .../radio-on-off-state.component.html | 8 ++ .../radio-on-off-state.component.scss | 21 ++++ .../radio-on-off-state.component.ts | 10 ++ .../radio-orientation.component.html | 16 +++ .../radio-orientation.component.scss | 34 +++++ .../radio-orientation.component.ts | 10 ++ .../radio-overview.component.html | 9 ++ .../radio-overview.component.scss | 30 +++++ .../radio-overview.component.ts | 11 ++ .../radio/radio-styling-sample/layout.scss | 12 -- .../radio-styling-sample.component.html | 7 -- .../radio-styling-sample.component.scss | 20 --- .../radio-styling-sample.component.ts | 13 -- .../radio-styling.component.html | 12 ++ .../radio-styling.component.scss | 118 ++++++++++++++++++ .../radio-styling/radio-styling.component.ts | 24 ++++ ...dio-tailwind-styling-sample.component.html | 7 -- ...dio-tailwind-styling-sample.component.scss | 9 -- ...radio-tailwind-styling-sample.component.ts | 13 -- .../radio-tailwind-styling.component.html | 21 ++++ .../radio-tailwind-styling.component.scss | 64 ++++++++++ .../radio-tailwind-styling.component.ts | 19 +++ 34 files changed, 713 insertions(+), 101 deletions(-) create mode 100644 src/app/data-entries/radio/radio-disabled/radio-disabled.component.html create mode 100644 src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss create mode 100644 src/app/data-entries/radio/radio-disabled/radio-disabled.component.ts create mode 100644 src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html create mode 100644 src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss create mode 100644 src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.ts create mode 100644 src/app/data-entries/radio/radio-layout/radio-layout.component.html create mode 100644 src/app/data-entries/radio/radio-layout/radio-layout.component.scss create mode 100644 src/app/data-entries/radio/radio-layout/radio-layout.component.ts create mode 100644 src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.html create mode 100644 src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss create mode 100644 src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.ts create mode 100644 src/app/data-entries/radio/radio-orientation/radio-orientation.component.html create mode 100644 src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss create mode 100644 src/app/data-entries/radio/radio-orientation/radio-orientation.component.ts create mode 100644 src/app/data-entries/radio/radio-overview/radio-overview.component.html create mode 100644 src/app/data-entries/radio/radio-overview/radio-overview.component.scss create mode 100644 src/app/data-entries/radio/radio-overview/radio-overview.component.ts delete mode 100644 src/app/data-entries/radio/radio-styling-sample/layout.scss delete mode 100644 src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html delete mode 100644 src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss delete mode 100644 src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts create mode 100644 src/app/data-entries/radio/radio-styling/radio-styling.component.html create mode 100644 src/app/data-entries/radio/radio-styling/radio-styling.component.scss create mode 100644 src/app/data-entries/radio/radio-styling/radio-styling.component.ts delete mode 100644 src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html delete mode 100644 src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.scss delete mode 100644 src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.ts create mode 100644 src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.html create mode 100644 src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.scss create mode 100644 src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.ts diff --git a/live-editing/configs/RadioConfigGenerator.ts b/live-editing/configs/RadioConfigGenerator.ts index b3bf061c0..65c1ff844 100644 --- a/live-editing/configs/RadioConfigGenerator.ts +++ b/live-editing/configs/RadioConfigGenerator.ts @@ -11,32 +11,67 @@ export class RadioConfigGenerator implements IConfigGenerator { const configs = new Array(); configs.push(new Config({ - component: 'RadioSample1Component', + component: 'RadioOverviewComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/radio/" })); configs.push(new Config({ - component: 'RadioSample2Component', + component: 'RadioLayoutComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/radio/" })); configs.push(new Config({ - component: 'RadioGroupSampleComponent', + component: 'RadioOrientationComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/radio/" })); configs.push(new Config({ - component: 'RadioGroupVerticalComponent', + component: 'RadioInteractionStateComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/radio/" + })); + + configs.push(new Config({ + component: 'RadioDisabledComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/radio/" + })); + + configs.push(new Config({ + component: 'RadioOnOffStateComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/radio/" + })); + + configs.push(new Config({ + component: 'RadioStylingComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/radio/" })); configs.push(new Config({ - component: 'RadioStylingSampleComponent', - additionalFiles: ["/src/app/data-entries/radio/radio-styling-sample/layout.scss"], + component: 'RadioSample1Component', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/radio/" + })); + + configs.push(new Config({ + component: 'RadioSample2Component', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/radio/" + })); + + configs.push(new Config({ + component: 'RadioGroupSampleComponent', + appConfig: BaseAppConfig, + shortenComponentPathBy: "/data-entries/radio/" + })); + + configs.push(new Config({ + component: 'RadioGroupVerticalComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/radio/" })); diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts index c60900ec6..f0b971edb 100644 --- a/src/app/data-entries/data-entries-routes-data.ts +++ b/src/app/data-entries/data-entries-routes-data.ts @@ -70,13 +70,19 @@ export const dataEntriesRoutesData = { "input-group-style": { displayName: "Input Group Style", parentName: "Input Group" }, "input-group-tailwind-style": { displayName: "Input Group Tailwind Style", parentName: "Input Group" }, "reactive-forms": { displayName: "Reactive Forms Overview", parentName: "Angular Reactive Forms" }, + "radio-overview": { displayName: "Overview", parentName: "Radio" }, + "radio-layout": { displayName: "Radio Layout", parentName: "Radio" }, + "radio-orientation": { displayName: "Radio Orientation", parentName: "Radio" }, + "radio-interaction-state": { displayName: "Radio Interaction State", parentName: "Radio" }, + "radio-disabled": { displayName: "Radio Disabled", parentName: "Radio" }, + "radio-on-off-state": { displayName: "Radio On Off State", parentName: "Radio" }, + "radio-styling": { displayName: "Radio Styling", parentName: "Radio" }, + "radio-tailwind-styling": { displayName: "Radio Tailwind Styling", parentName: "Radio" }, "radio-sample-1": { displayName: "Simple Radio Buttons", parentName: "Radio" }, "radio-sample-2": { displayName: "Radio Button Binding", parentName: "Radio" }, "radio-sample-3": { displayName: "Radio Label Position", parentName: "Radio" }, "radio-group-sample": { displayName: "Radio Group", parentName: "Radio" }, "radio-group-vertical": { displayName: "Vertical Radio Group", parentName: "Radio" }, - "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" }, - "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" }, "rating-form": { displayName: "Rating in Form", parentName: "Rating" }, "switch-overview": { displayName: "Switch Overview", parentName: "Switch" }, "switch-enabled": { displayName: "Enabled Switches", parentName: "Switch" }, diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts index 1219ec653..dae0a239f 100644 --- a/src/app/data-entries/data-entries.routes.ts +++ b/src/app/data-entries/data-entries.routes.ts @@ -68,8 +68,14 @@ import { RadioGroupSampleComponent } from './radio/radio-group-sample/radio-grou import { RadioSample1Component } from './radio/radio-sample-1/radio-sample-1.component'; import { RadioSample2Component } from './radio/radio-sample-2/radio-sample-2.component'; import { RadioSample3Component } from './radio/radio-sample-3/radio-sample-3.component'; -import { RadioStylingSampleComponent } from './radio/radio-styling-sample/radio-styling-sample.component'; -import { RadioTailwindStylingSampleComponent } from './radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component'; +import { RadioOverviewComponent } from './radio/radio-overview/radio-overview.component'; +import { RadioLayoutComponent } from './radio/radio-layout/radio-layout.component'; +import { RadioOrientationComponent } from './radio/radio-orientation/radio-orientation.component'; +import { RadioInteractionStateComponent } from './radio/radio-interaction-state/radio-interaction-state.component'; +import { RadioDisabledComponent } from './radio/radio-disabled/radio-disabled.component'; +import { RadioOnOffStateComponent } from './radio/radio-on-off-state/radio-on-off-state.component'; +import { RadioStylingComponent } from './radio/radio-styling/radio-styling.component'; +import { RadioTailwindStylingComponent } from './radio/radio-tailwind-styling/radio-tailwind-styling.component'; import { SelectHeaderFooterComponent } from './select/select-header-footer/select-header-footer.component'; import { SelectInputDirectivesComponent } from './select/select-input-directives/select-input-directives'; import { SelectSample1Component } from './select/select-sample-1/select-sample-1.component'; @@ -449,6 +455,46 @@ export const DataEntriesRoutes: Routes = [ data: dataEntriesRoutesData['reactive-forms'], path: 'reactive-forms' }, + { + component: RadioOverviewComponent, + data: dataEntriesRoutesData['radio-overview'], + path: 'radio-overview' + }, + { + component: RadioLayoutComponent, + data: dataEntriesRoutesData['radio-layout'], + path: 'radio-layout' + }, + { + component: RadioOrientationComponent, + data: dataEntriesRoutesData['radio-orientation'], + path: 'radio-orientation' + }, + { + component: RadioInteractionStateComponent, + data: dataEntriesRoutesData['radio-interaction-state'], + path: 'radio-interaction-state' + }, + { + component: RadioDisabledComponent, + data: dataEntriesRoutesData['radio-disabled'], + path: 'radio-disabled' + }, + { + component: RadioOnOffStateComponent, + data: dataEntriesRoutesData['radio-on-off-state'], + path: 'radio-on-off-state' + }, + { + component: RadioStylingComponent, + data: dataEntriesRoutesData['radio-styling'], + path: 'radio-styling' + }, + { + component: RadioTailwindStylingComponent, + data: dataEntriesRoutesData['radio-tailwind-styling'], + path: 'radio-tailwind-styling' + }, { component: RadioSample1Component, data: dataEntriesRoutesData['radio-sample-1'], @@ -474,16 +520,6 @@ export const DataEntriesRoutes: Routes = [ data: dataEntriesRoutesData['radio-group-vertical'], path: 'radio-group-vertical' }, - { - component: RadioStylingSampleComponent, - data: dataEntriesRoutesData['radio-styling-sample'], - path: 'radio-styling-sample' - }, - { - component: RadioTailwindStylingSampleComponent, - data: dataEntriesRoutesData['radio-tailwind-styling-sample'], - path: 'radio-tailwind-styling-sample' - }, { component: RatingInFormComponent, data: dataEntriesRoutesData['rating-in-form'], diff --git a/src/app/data-entries/radio/radio-disabled/radio-disabled.component.html b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.html new file mode 100644 index 000000000..47d8055b9 --- /dev/null +++ b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.html @@ -0,0 +1,8 @@ +
+ What is your age? + + 18-27 + 28-39 + 40-55 + +
diff --git a/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss new file mode 100644 index 000000000..14c87855f --- /dev/null +++ b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss @@ -0,0 +1,21 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.age-question { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.age-title { + color: var(--ig-gray-900); + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); +} diff --git a/src/app/data-entries/radio/radio-disabled/radio-disabled.component.ts b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.ts new file mode 100644 index 000000000..227e9d3e7 --- /dev/null +++ b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; + +@Component({ + selector: 'app-radio-disabled', + templateUrl: './radio-disabled.component.html', + styleUrls: ['./radio-disabled.component.scss'], + imports: [IgxRadioComponent, IgxRadioGroupDirective] +}) +export class RadioDisabledComponent { } diff --git a/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html new file mode 100644 index 000000000..7e90f357d --- /dev/null +++ b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html @@ -0,0 +1,27 @@ + +
+ + Hover + Focused + Focused & Hover +
+ Enabled / On + Daily Updates + Weekly Updates + Monthly Updates + Enabled / Off + Daily Updates + Weekly Updates + Monthly Updates +
+
+ Invalid / On + Daily Updates + Weekly Updates + Monthly Updates + Invalid / Off + Daily Updates + Weekly Updates + Monthly Updates +
+
diff --git a/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss new file mode 100644 index 000000000..b95521e23 --- /dev/null +++ b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss @@ -0,0 +1,69 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.radio-states-grid { + display: grid; + grid-template-columns: repeat(4, auto); + align-items: center; + gap: 1.875rem 3.25rem; +} + +/* The enabled and the invalid rows each share the columns of the whole grid. */ +.radio-states-group { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + align-items: center; + row-gap: 1.875rem; +} + +.radio-states-group + .radio-states-group { + margin-top: 1.25rem; +} + +.radio-states-grid span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} + +.column-caption { + text-align: center; +} + +/* The row captions sit closer to the radios than the columns sit to each other. */ +.row-caption { + margin-inline-end: -1.3125rem; +} + +/* Hover can't be turned on from code, so the hover columns take the theme's hover + colors, and the Hover column also shows the ripple of the Material theme. */ +.hover, +.focused-hover { + --fill-color: var(--fill-color-hover); + --label-color: var(--label-color-hover); + --error-color: var(--error-color-hover); +} + +.hover ::ng-deep .igx-radio__ripple { + background: var(--empty-color); + opacity: 0.06; +} + +.hover.igx-radio--checked ::ng-deep .igx-radio__ripple { + background: var(--fill-color); +} + +.hover.igx-radio--invalid ::ng-deep .igx-radio__ripple { + background: var(--error-color); +} diff --git a/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.ts b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.ts new file mode 100644 index 000000000..01f435f25 --- /dev/null +++ b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.ts @@ -0,0 +1,22 @@ +import { Component, ElementRef, afterNextRender, inject } from '@angular/core'; +import { IgxRadioComponent } from 'igniteui-angular/radio'; + +@Component({ + selector: 'app-radio-interaction-state', + templateUrl: './radio-interaction-state.component.html', + styleUrls: ['./radio-interaction-state.component.scss'], + imports: [IgxRadioComponent] +}) +export class RadioInteractionStateComponent { + constructor() { + const element: HTMLElement = inject(ElementRef).nativeElement; + + // A keyup is what turns on a radio's keyboard focus ring, so dispatching one + // shows the focused state without moving focus to the radio. + afterNextRender(() => { + element.querySelectorAll('.focused, .focused-hover').forEach((radio) => { + radio.dispatchEvent(new KeyboardEvent('keyup')); + }); + }); + } +} diff --git a/src/app/data-entries/radio/radio-layout/radio-layout.component.html b/src/app/data-entries/radio/radio-layout/radio-layout.component.html new file mode 100644 index 000000000..e6470b1d0 --- /dev/null +++ b/src/app/data-entries/radio/radio-layout/radio-layout.component.html @@ -0,0 +1,16 @@ +
+ Label After + + Yellow + Orange + Purple + +
+
+ + Yellow + Orange + Purple + + Label Before +
diff --git a/src/app/data-entries/radio/radio-layout/radio-layout.component.scss b/src/app/data-entries/radio/radio-layout/radio-layout.component.scss new file mode 100644 index 000000000..986b197ac --- /dev/null +++ b/src/app/data-entries/radio/radio-layout/radio-layout.component.scss @@ -0,0 +1,26 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 3.75rem; + height: 100%; +} + +.radio-layout-item { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.radio-layout-item span { + color: var(--ig-gray-600); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: 0.3px; +} diff --git a/src/app/data-entries/radio/radio-layout/radio-layout.component.ts b/src/app/data-entries/radio/radio-layout/radio-layout.component.ts new file mode 100644 index 000000000..6a05e65dc --- /dev/null +++ b/src/app/data-entries/radio/radio-layout/radio-layout.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; + +@Component({ + selector: 'app-radio-layout', + templateUrl: './radio-layout.component.html', + styleUrls: ['./radio-layout.component.scss'], + imports: [IgxRadioComponent, IgxRadioGroupDirective] +}) +export class RadioLayoutComponent { } diff --git a/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.html b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.html new file mode 100644 index 000000000..0030b06a2 --- /dev/null +++ b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.html @@ -0,0 +1,8 @@ +
+ What is your age? + + 18-27 + 28-39 + 40-55 + +
diff --git a/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss new file mode 100644 index 000000000..14c87855f --- /dev/null +++ b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss @@ -0,0 +1,21 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.age-question { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.age-title { + color: var(--ig-gray-900); + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); +} diff --git a/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.ts b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.ts new file mode 100644 index 000000000..3d3b4307f --- /dev/null +++ b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; + +@Component({ + selector: 'app-radio-on-off-state', + templateUrl: './radio-on-off-state.component.html', + styleUrls: ['./radio-on-off-state.component.scss'], + imports: [IgxRadioComponent, IgxRadioGroupDirective] +}) +export class RadioOnOffStateComponent { } diff --git a/src/app/data-entries/radio/radio-orientation/radio-orientation.component.html b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.html new file mode 100644 index 000000000..c77a6fe43 --- /dev/null +++ b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.html @@ -0,0 +1,16 @@ +
+ Billing cycle + + Monthly + Annual + Two-year + +
+
+ Chart type + + Line + Bar + Pie + +
diff --git a/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss new file mode 100644 index 000000000..347dc0831 --- /dev/null +++ b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss @@ -0,0 +1,34 @@ +:host { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 3.75rem; + height: 100%; +} + +.radio-orientation-item { + display: flex; + flex-direction: column; + gap: 1rem; + align-self: flex-start; + box-sizing: border-box; + padding: 1rem; +} + +.billing-cycle { + width: 13.9375rem; +} + +.chart-type { + width: 17.1875rem; +} + +.radio-orientation-title { + color: var(--ig-gray-900); + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); +} diff --git a/src/app/data-entries/radio/radio-orientation/radio-orientation.component.ts b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.ts new file mode 100644 index 000000000..8981df7b1 --- /dev/null +++ b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; + +@Component({ + selector: 'app-radio-orientation', + templateUrl: './radio-orientation.component.html', + styleUrls: ['./radio-orientation.component.scss'], + imports: [IgxRadioComponent, IgxRadioGroupDirective] +}) +export class RadioOrientationComponent { } diff --git a/src/app/data-entries/radio/radio-overview/radio-overview.component.html b/src/app/data-entries/radio/radio-overview/radio-overview.component.html new file mode 100644 index 000000000..036ee158e --- /dev/null +++ b/src/app/data-entries/radio/radio-overview/radio-overview.component.html @@ -0,0 +1,9 @@ + diff --git a/src/app/data-entries/radio/radio-overview/radio-overview.component.scss b/src/app/data-entries/radio/radio-overview/radio-overview.component.scss new file mode 100644 index 000000000..f98d177dd --- /dev/null +++ b/src/app/data-entries/radio/radio-overview/radio-overview.component.scss @@ -0,0 +1,30 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.feedback-form { + display: flex; + flex-direction: column; + gap: 1rem; + box-sizing: border-box; + width: 22.5rem; + padding: 1rem; +} + +.feedback-title { + color: var(--ig-gray-900); + font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family)); + font-size: var(--ig-subtitle-1-font-size); + font-weight: var(--ig-subtitle-1-font-weight); + line-height: var(--ig-subtitle-1-line-height); + letter-spacing: var(--ig-subtitle-1-letter-spacing); +} + +.feedback-send { + align-self: center; + width: 11.25rem; + margin-top: 1rem; +} diff --git a/src/app/data-entries/radio/radio-overview/radio-overview.component.ts b/src/app/data-entries/radio/radio-overview/radio-overview.component.ts new file mode 100644 index 000000000..6e6baeaf4 --- /dev/null +++ b/src/app/data-entries/radio/radio-overview/radio-overview.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; + +@Component({ + selector: 'app-radio-overview', + templateUrl: './radio-overview.component.html', + styleUrls: ['./radio-overview.component.scss'], + imports: [IgxButtonDirective, IgxRadioComponent, IgxRadioGroupDirective] +}) +export class RadioOverviewComponent { } diff --git a/src/app/data-entries/radio/radio-styling-sample/layout.scss b/src/app/data-entries/radio/radio-styling-sample/layout.scss deleted file mode 100644 index 226b49374..000000000 --- a/src/app/data-entries/radio/radio-styling-sample/layout.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use "igniteui-angular/theming" as *; -@use "sass:map"; - -igx-radio + igx-radio { - margin-top: 1rem; -} - -.radio-wrapper { - display: flex; - flex-flow: column nowrap; - padding: 1rem; -} \ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html deleted file mode 100644 index 3ad443151..000000000 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.html +++ /dev/null @@ -1,7 +0,0 @@ -
- New York - London - Sofia - Tokyo - Singapore -
\ No newline at end of file diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss deleted file mode 100644 index cccd9cee5..000000000 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; - -// CSS variables approach - -// igx-radio { -// --empty-color: #345779; -// --fill-color: #2dabe8; -// } - -// Sass theme approach - -$custom-radio-theme: radio-theme( - $empty-color: #345779, - $fill-color: #2dabe8, -); - -:host { - @include tokens($custom-radio-theme); -} diff --git a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts b/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts deleted file mode 100644 index a0382f922..000000000 --- a/src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxRadioComponent } from 'igniteui-angular/radio'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'app-radio-sample-1', - styleUrls: ['./radio-styling-sample.component.scss'], - templateUrl: './radio-styling-sample.component.html', - imports: [IgxRadioComponent, FormsModule] -}) -export class RadioStylingSampleComponent { - public selected: string; -} diff --git a/src/app/data-entries/radio/radio-styling/radio-styling.component.html b/src/app/data-entries/radio/radio-styling/radio-styling.component.html new file mode 100644 index 000000000..4fc39e2f3 --- /dev/null +++ b/src/app/data-entries/radio/radio-styling/radio-styling.component.html @@ -0,0 +1,12 @@ +
+
+ Shipping method +
+ + @for (method of methods; track method.value) { + + {{ method.name }} {{ method.detail }} + + } + +
diff --git a/src/app/data-entries/radio/radio-styling/radio-styling.component.scss b/src/app/data-entries/radio/radio-styling/radio-styling.component.scss new file mode 100644 index 000000000..e4117357d --- /dev/null +++ b/src/app/data-entries/radio/radio-styling/radio-styling.component.scss @@ -0,0 +1,118 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.shipping-card { + /* The design's own palette. It is set here instead of coming from the theme, + so the sample keeps its look in every theme. */ + --shipping-surface: #fff; + --shipping-primary: #0176ff; + --shipping-title: #00142b; + --shipping-ink: #002b5c; + --shipping-gray-100: #f3f6fa; + --shipping-gray-300: #d2dbe8; + --shipping-gray-400: #a9b8cc; + --shipping-gray-600: #556c86; + + /* The colors of the hover and focus effects the theme draws around the radio. */ + --ig-radio-fill-color: var(--shipping-primary); + --ig-radio-empty-color: var(--shipping-gray-400); + + box-sizing: border-box; + width: 21.75rem; + border: 1px solid var(--shipping-gray-300); + border-radius: 1rem; + background: var(--shipping-surface); + font-family: aktiv-grotesk, sans-serif; +} + +.shipping-header { + box-sizing: border-box; + height: 3.75rem; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--shipping-gray-300); +} + +.shipping-title { + color: var(--shipping-title); + font-size: 1rem; + font-weight: 600; + line-height: 1.5rem; + letter-spacing: 0.15px; +} + +.shipping-methods { + row-gap: 0; + padding: 1rem 1.5rem; +} + +.shipping-method ::ng-deep .igx-radio__label { + color: var(--shipping-ink); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.75rem; + font-weight: 600; + line-height: 1rem; + letter-spacing: 0.15px; +} + +.shipping-detail { + color: var(--shipping-gray-600); +} + +.shipping-method.igx-radio--disabled ::ng-deep .igx-radio__label, +.shipping-method.igx-radio--disabled .shipping-detail { + color: var(--shipping-gray-400); +} + +/* The design draws the radio as a 2px ring with a 10px dot in a 40px slot. Each + theme draws the radio its own way, so the whole radio is drawn here. */ +.shipping-method { + --label-margin: 0.125rem; +} + +.shipping-method ::ng-deep .igx-radio__composite { + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; +} + +.shipping-method ::ng-deep .igx-radio__composite::before, +.shipping-method ::ng-deep .igx-radio__composite::after { + top: 0.625rem; + inset-inline-start: 0.625rem; + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; +} + +/* The ring */ +.shipping-method ::ng-deep .igx-radio__composite::after { + border: 0.125rem solid var(--shipping-gray-400); + background: var(--shipping-surface); +} + +.shipping-method.igx-radio--checked ::ng-deep .igx-radio__composite::after { + border-color: var(--shipping-primary); +} + +.shipping-method.igx-radio--disabled ::ng-deep .igx-radio__composite::after { + border-color: var(--shipping-gray-300); + background: var(--shipping-gray-100); +} + +/* The dot */ +.shipping-method ::ng-deep .igx-radio__composite::before { + transform: scale(0); + border: none; + background: var(--shipping-primary); +} + +.shipping-method.igx-radio--checked ::ng-deep .igx-radio__composite::before { + transform: scale(0.5); +} diff --git a/src/app/data-entries/radio/radio-styling/radio-styling.component.ts b/src/app/data-entries/radio/radio-styling/radio-styling.component.ts new file mode 100644 index 000000000..6ae64b3df --- /dev/null +++ b/src/app/data-entries/radio/radio-styling/radio-styling.component.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; + +interface ShippingMethod { + value: string; + name: string; + detail: string; + disabled?: boolean; +} + +@Component({ + selector: 'app-radio-styling', + templateUrl: './radio-styling.component.html', + styleUrls: ['./radio-styling.component.scss'], + imports: [IgxRadioComponent, IgxRadioGroupDirective] +}) +export class RadioStylingComponent { + public methods: ShippingMethod[] = [ + { value: 'standard', name: 'Standard', detail: '(2-4 business days)' }, + { value: 'express', name: 'Express', detail: '(next day by 6 pm)' }, + { value: 'pickup', name: 'Pickup point', detail: '(400 + locations)' }, + { value: 'same-day', name: 'Same-day', detail: '(not available)', disabled: true } + ]; +} diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html deleted file mode 100644 index 471cab7e3..000000000 --- a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.html +++ /dev/null @@ -1,7 +0,0 @@ -
- New York - London - Sofia - Tokyo - Singapore -
diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.scss b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.scss deleted file mode 100644 index 3fae529ab..000000000 --- a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.scss +++ /dev/null @@ -1,9 +0,0 @@ -igx-radio + igx-radio { - margin-top: 16px; -} - -.radio-wrapper { - display: flex; - flex-flow: column nowrap; - padding: 16px; -} diff --git a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.ts b/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.ts deleted file mode 100644 index 4618d4de5..000000000 --- a/src/app/data-entries/radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxRadioComponent } from 'igniteui-angular/radio'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'app-radio-tailwind-styling', - styleUrls: ['./radio-tailwind-styling-sample.component.scss'], - templateUrl: './radio-tailwind-styling-sample.component.html', - imports: [IgxRadioComponent, FormsModule] -}) -export class RadioTailwindStylingSampleComponent { - public selected: string; -} diff --git a/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.html b/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.html new file mode 100644 index 000000000..dac03abfd --- /dev/null +++ b/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.html @@ -0,0 +1,21 @@ +
+
+ Export report + Choose a format to export +
+ + @for (option of formats; track option.value) { + + {{ option.label }} + + } + +
+ + + +
+
diff --git a/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.scss b/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.scss new file mode 100644 index 000000000..995769e4f --- /dev/null +++ b/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.scss @@ -0,0 +1,64 @@ +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +:host { + /* The design's own palette. It lives here instead of coming from the theme + palette, so the sample keeps its colors in every theme. */ + --color-export-primary: #0176ff; + --color-export-primary-strong: #006ae6; + --color-export-tint: #e6f2ff; + --color-export-tint-strong: #cce4ff; + --color-export-title: #00142b; + --color-export-ink: #002b5c; + --color-export-muted: #556c86; + --color-export-divider: #d2dbe8; + --color-export-empty: #a9b8cc; + --color-export-cancel: #616161; + + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +/* The design draws the radio as a 2px ring with a 10px dot in a 40px slot. Each + theme draws the radio its own way, so the whole radio is drawn here. */ +.format-option { + --label-margin: 0.125rem; +} + +.format-option ::ng-deep .igx-radio__composite { + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; +} + +.format-option ::ng-deep .igx-radio__composite::before, +.format-option ::ng-deep .igx-radio__composite::after { + top: 0.625rem; + inset-inline-start: 0.625rem; + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; +} + +/* The ring */ +.format-option ::ng-deep .igx-radio__composite::after { + border: 0.125rem solid var(--color-export-empty); + background: white; +} + +.format-option.igx-radio--checked ::ng-deep .igx-radio__composite::after { + border-color: var(--color-export-primary); +} + +/* The dot */ +.format-option ::ng-deep .igx-radio__composite::before { + transform: scale(0); + border: none; + background: var(--color-export-primary); +} + +.format-option.igx-radio--checked ::ng-deep .igx-radio__composite::before { + transform: scale(0.5); +} diff --git a/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.ts b/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.ts new file mode 100644 index 000000000..c080a33d8 --- /dev/null +++ b/src/app/data-entries/radio/radio-tailwind-styling/radio-tailwind-styling.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio'; + +@Component({ + selector: 'app-radio-tailwind-styling', + templateUrl: './radio-tailwind-styling.component.html', + styleUrls: ['./radio-tailwind-styling.component.scss'], + imports: [IgxButtonDirective, IgxRadioComponent, IgxRadioGroupDirective] +}) +export class RadioTailwindStylingComponent { + public format = 'csv'; + + public formats = [ + { value: 'pdf', label: 'PDF Document' }, + { value: 'xls', label: 'XLS Editable spreadsheet' }, + { value: 'csv', label: 'CSV Raw data, no styling' } + ]; +} From e4661a303f5adf919ec50d1855eac76602efc903 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Fri, 9 Oct 2026 11:58:17 +0300 Subject: [PATCH 2/3] fix(radio): add the card background to the form samples Co-Authored-By: Claude Opus 5.5 --- .../radio/radio-disabled/radio-disabled.component.scss | 7 +++++++ .../radio-on-off-state/radio-on-off-state.component.scss | 7 +++++++ .../radio-orientation/radio-orientation.component.scss | 4 ++++ .../radio/radio-overview/radio-overview.component.scss | 4 ++++ 4 files changed, 22 insertions(+) diff --git a/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss index 14c87855f..55ff00ba1 100644 --- a/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss +++ b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss @@ -9,6 +9,13 @@ display: flex; flex-direction: column; gap: 1rem; + + /* The card of the design: white in light themes, a raised surface in dark ones. */ + box-sizing: border-box; + width: 13.9375rem; + padding: 1rem; + border-radius: 0.5rem; + background: var(--ig-surface-50); } .age-title { diff --git a/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss index 14c87855f..55ff00ba1 100644 --- a/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss +++ b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss @@ -9,6 +9,13 @@ display: flex; flex-direction: column; gap: 1rem; + + /* The card of the design: white in light themes, a raised surface in dark ones. */ + box-sizing: border-box; + width: 13.9375rem; + padding: 1rem; + border-radius: 0.5rem; + background: var(--ig-surface-50); } .age-title { diff --git a/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss index 347dc0831..ce8518951 100644 --- a/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss +++ b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss @@ -14,6 +14,10 @@ align-self: flex-start; box-sizing: border-box; padding: 1rem; + + /* The card of the design: white in light themes, a raised surface in dark ones. */ + border-radius: 0.5rem; + background: var(--ig-surface-50); } .billing-cycle { diff --git a/src/app/data-entries/radio/radio-overview/radio-overview.component.scss b/src/app/data-entries/radio/radio-overview/radio-overview.component.scss index f98d177dd..6324f40e1 100644 --- a/src/app/data-entries/radio/radio-overview/radio-overview.component.scss +++ b/src/app/data-entries/radio/radio-overview/radio-overview.component.scss @@ -12,6 +12,10 @@ box-sizing: border-box; width: 22.5rem; padding: 1rem; + + /* The card of the design: white in light themes, a raised surface in dark ones. */ + border-radius: 0.5rem; + background: var(--ig-surface-50); } .feedback-title { From d48516060649d187d32af84509d4fbb031e2fef4 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 15 Oct 2026 15:56:53 +0300 Subject: [PATCH 3/3] fix(radio): apply the design review feedback to the samples Co-Authored-By: Claude Opus 5.5 --- .../radio-disabled.component.scss | 4 +- .../radio-interaction-state.component.html | 12 +++--- .../radio-interaction-state.component.scss | 43 +++++++++++++++++++ .../radio-on-off-state.component.scss | 4 +- .../radio-orientation.component.scss | 8 ++-- .../radio-overview.component.html | 2 +- .../radio-overview.component.scss | 4 +- 7 files changed, 61 insertions(+), 16 deletions(-) diff --git a/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss index 55ff00ba1..87780e05c 100644 --- a/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss +++ b/src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss @@ -10,12 +10,12 @@ flex-direction: column; gap: 1rem; - /* The card of the design: white in light themes, a raised surface in dark ones. */ + /* The card of the design, in the surface color of the theme. */ box-sizing: border-box; width: 13.9375rem; padding: 1rem; border-radius: 0.5rem; - background: var(--ig-surface-50); + background: var(--ig-surface-500); } .age-title { diff --git a/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html index 7e90f357d..95c371c13 100644 --- a/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html +++ b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html @@ -10,9 +10,9 @@ Weekly Updates Monthly Updates Enabled / Off - Daily Updates - Weekly Updates - Monthly Updates + Daily Updates + Weekly Updates + Monthly Updates
Invalid / On @@ -20,8 +20,8 @@ Weekly Updates Monthly Updates Invalid / Off - Daily Updates - Weekly Updates - Monthly Updates + Daily Updates + Weekly Updates + Monthly Updates
diff --git a/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss index b95521e23..9fc1bb4b6 100644 --- a/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss +++ b/src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss @@ -67,3 +67,46 @@ .hover.igx-radio--invalid ::ng-deep .igx-radio__ripple { background: var(--error-color); } + +/* Fluent also draws a dot in an off radio on hover, which no color can show. The docs + set data-ig-theme on the page, so the hover columns draw the dot in the Fluent theme. */ +:host-context([data-ig-theme='fluent']) { + .hover.off, + .focused-hover.off { + ::ng-deep .igx-radio__composite::before { + background: light-dark(var(--ig-gray-700), var(--ig-gray-400)); + transform: scale(0.5); + } + } + + .hover.off.igx-radio--invalid, + .focused-hover.off.igx-radio--invalid { + ::ng-deep .igx-radio__composite::before { + background: var(--ig-error-500); + } + } +} + +/* Bootstrap and Indigo darken the ring of an off radio on hover, and Bootstrap darkens + its focus color when the radio is also focused. */ +:host-context([data-ig-theme='bootstrap']) { + .hover.off:not(.igx-radio--invalid), + .focused-hover.off:not(.igx-radio--invalid) { + ::ng-deep .igx-radio__composite::after { + border-color: var(--ig-gray-500); + } + } + + .focused-hover.off:not(.igx-radio--invalid) ::ng-deep .igx-radio__composite::after { + border-color: hsl(from var(--ig-primary-200) h calc(s * 1.12) calc(l * 0.82)); + } +} + +:host-context([data-ig-theme='indigo']) { + .hover.off:not(.igx-radio--invalid), + .focused-hover.off:not(.igx-radio--invalid) { + ::ng-deep .igx-radio__composite::after { + border-color: light-dark(var(--ig-gray-600), hsl(from var(--ig-primary-500-contrast) h s l / 0.8)); + } + } +} diff --git a/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss index 55ff00ba1..87780e05c 100644 --- a/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss +++ b/src/app/data-entries/radio/radio-on-off-state/radio-on-off-state.component.scss @@ -10,12 +10,12 @@ flex-direction: column; gap: 1rem; - /* The card of the design: white in light themes, a raised surface in dark ones. */ + /* The card of the design, in the surface color of the theme. */ box-sizing: border-box; width: 13.9375rem; padding: 1rem; border-radius: 0.5rem; - background: var(--ig-surface-50); + background: var(--ig-surface-500); } .age-title { diff --git a/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss index ce8518951..514cd1e9a 100644 --- a/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss +++ b/src/app/data-entries/radio/radio-orientation/radio-orientation.component.scss @@ -1,7 +1,9 @@ :host { display: flex; flex-wrap: wrap; - align-items: center; + /* Centers the row of cards vertically, while the cards stay top-aligned to each other. */ + align-content: center; + align-items: flex-start; justify-content: center; gap: 1.5rem 3.75rem; height: 100%; @@ -15,9 +17,9 @@ box-sizing: border-box; padding: 1rem; - /* The card of the design: white in light themes, a raised surface in dark ones. */ + /* The card of the design, in the surface color of the theme. */ border-radius: 0.5rem; - background: var(--ig-surface-50); + background: var(--ig-surface-500); } .billing-cycle { diff --git a/src/app/data-entries/radio/radio-overview/radio-overview.component.html b/src/app/data-entries/radio/radio-overview/radio-overview.component.html index 036ee158e..bee8f8041 100644 --- a/src/app/data-entries/radio/radio-overview/radio-overview.component.html +++ b/src/app/data-entries/radio/radio-overview/radio-overview.component.html @@ -1,5 +1,5 @@