fix(radio): multiline support (#DS-3538)

Author: artembelik

packages/components-dev/radio/module.ts

@@ -4,6 +4,7 @@ import { ThemePalette } from '@koobiq/components/core';
 import { KbqFormFieldModule } from '@koobiq/components/form-field';
 import { KbqRadioChange, KbqRadioModule } from '@koobiq/components/radio';
 import { RadioExamplesModule } from 'packages/docs-examples/components/radio';
+import { DevThemeToggle } from '../theme-toggle';
 
 @Component({
     standalone: true,
@@ -17,6 +18,8 @@ import { RadioExamplesModule } from 'packages/docs-examples/components/radio';
         <radio-content-example />
         <hr />
         <radio-group-example />
+        <hr />
+        <radio-multiline-example />
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -28,7 +31,8 @@ export class DevRadioExamples {}
         FormsModule,
         KbqFormFieldModule,
         KbqRadioModule,
-        DevRadioExamples
+        DevRadioExamples,
+        DevThemeToggle
     ],
     selector: 'app',
     templateUrl: './template.html',

packages/components-dev/radio/template.html

@@ -1,3 +1,11 @@
+<dev-theme-toggle />
+
+<hr />
+
+<dev-radio-examples />
+
+<hr />
+
 <div class="layout-row">
     <div class="dev-container layout-padding-right-xl">
         <kbq-radio-group [(ngModel)]="favoriteFruit" (change)="onChange($event)">
@@ -83,7 +91,3 @@
         </kbq-radio-group>
     </div>
 </div>
-
-<hr />
-
-<dev-radio-examples />

packages/components/radio/radio.en.md

@@ -1,22 +1,5 @@
-`<kbq-radio>` provides the same functionality as a native `<input type="radio">`.
+🚧 **Documentation in progress** 🚧
 
-<!-- example(radio-overview) -->
+Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon.
 
-### Radio groups
-
-Radio-buttons should typically be placed inside of an `<kbq-radio-group>` unless the DOM structure
-would make that impossible (e.g., radio-buttons inside of table cells). The radio-group has a
-`value` property that reflects the currently selected radio-button inside of the group.
-
-Individual radio-buttons inside of a radio-group will inherit the `name` of the group.
-
-### Use with @angular/forms
-
-`<kbq-radio-group>` is compatible with `@angular/forms` and supports both `FormsModule`
-and `ReactiveFormsModule`.
-
-### Accessibility
-
-The `<kbq-radio-button>` uses an internal `<input type="radio">` to provide an accessible experience.
-This internal radio button receives focus and is automatically labelled by the text content of the
-`<kbq-radio-button>` element.
+If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository.

packages/components/radio/radio.ru.md

@@ -20,6 +20,10 @@
 
 <!-- example(radio-group) -->
 
+#### Многострочный
+
+<!-- example(radio-multiline) -->
+
 ### Рекомендации
 
 -   По умолчанию рекомендуется использовать до 7 вариантов в Radio Group.

packages/components/radio/radio.scss

@@ -27,7 +27,6 @@
 
     cursor: pointer;
 
-    white-space: nowrap;
     // for maximum clickable area.
     width: 100%;
 }

packages/docs-examples/components/radio/index.ts

@@ -1,16 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RadioContentExample } from './radio-content/radio-content-example';
 import { RadioGroupExample } from './radio-group/radio-group-example';
+import { RadioMultilineExample } from './radio-multiline/radio-multiline-example';
 import { RadioSizeExample } from './radio-size/radio-size-example';
 import { RadioStyleExample } from './radio-style/radio-style-example';
 
-export { RadioContentExample, RadioGroupExample, RadioSizeExample, RadioStyleExample };
+export { RadioContentExample, RadioGroupExample, RadioMultilineExample, RadioSizeExample, RadioStyleExample };
 
 const EXAMPLES = [
     RadioSizeExample,
     RadioStyleExample,
     RadioContentExample,
-    RadioGroupExample
+    RadioGroupExample,
+    RadioMultilineExample
 ];
 
 @NgModule({

packages/docs-examples/components/radio/radio-group/radio-group-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqRadioModule } from '@koobiq/components/radio';
 
 /**
@@ -23,6 +23,7 @@ import { KbqRadioModule } from '@koobiq/components/radio';
 
             <kbq-radio-button [disabled]="true" [value]="'option_5'">Item 5 (Disabled)</kbq-radio-button>
         </kbq-radio-group>
-    `
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RadioGroupExample {}

packages/docs-examples/components/radio/radio-multiline/radio-multiline-example.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqRadioModule } from '@koobiq/components/radio';
+
+type ExampleOption = { label: string; hint: string };
+
+/**
+ * @title Radio multiline example
+ */
+@Component({
+    standalone: true,
+    selector: 'radio-multiline-example',
+    imports: [KbqRadioModule, KbqFormFieldModule],
+    template: `
+        <kbq-radio-group>
+            @for (option of options; track option) {
+                <kbq-radio-button [checked]="$first" [value]="$index">
+                    {{ option.label }}
+                    <kbq-hint>{{ option.hint }}</kbq-hint>
+                </kbq-radio-button>
+            }
+        </kbq-radio-group>
+    `,
+    styles: `
+        :host {
+            display: flex;
+            justify-content: center;
+        }
+
+        .kbq-radio-group {
+            max-width: 255px;
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RadioMultilineExample {
+    readonly options: ExampleOption[] = [
+        {
+            label: 'Regular software and operating system updates',
+            hint: 'Updating software and operating systems regularly helps to patch vulnerabilities and enhance security measures against potential threats'
+        },
+        {
+            label: 'Using strong and unique passwords',
+            hint: 'Creating strong and unique passwords for each online account can enhance cybersecurity, as cyber attacks often exploit weak or stolen passwords'
+        },
+        {
+            label: 'Implementing multi-factor authentication (MFA)',
+            hint: 'Multi-factor authentication involves multiple identification forms before account access, reducing the risk of unauthorized access'
+        }
+    ];
+}

packages/docs-examples/components/radio/radio-size/radio-size-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqRadioModule } from '@koobiq/components/radio';
 
 /**
@@ -43,6 +43,7 @@ import { KbqRadioModule } from '@koobiq/components/radio';
                 </div>
             </div>
         </div>
-    `
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RadioSizeExample {}

packages/docs-examples/components/radio/radio-style/radio-style-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ThemePalette } from '@koobiq/components/core';
 import { KbqRadioModule } from '@koobiq/components/radio';
 
@@ -54,7 +54,8 @@ import { KbqRadioModule } from '@koobiq/components/radio';
                 </div>
             </div>
         </div>
-    `
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RadioStyleExample {
     protected readonly themePalette = ThemePalette;

packages/docs-examples/example-module.ts

@@ -191,7 +191,9 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
       "ag-grid-overview-example.ts"
     ],
     "selector": "ag-grid-overview-example",
-    "additionalComponents": [],
+    "additionalComponents": [
+      "ExampleLinkCellRenderer"
+    ],
     "primaryFile": "ag-grid-overview-example.ts",
     "importPath": "components/ag-grid"
   },
@@ -654,6 +656,18 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
     "primaryFile": "checkbox-indeterminate-example.ts",
     "importPath": "components/checkbox"
   },
+  "checkbox-multiline": {
+    "packagePath": "components/checkbox/checkbox-multiline",
+    "title": "Checkbox multiline example",
+    "componentName": "CheckboxMultilineExample",
+    "files": [
+      "checkbox-multiline-example.ts"
+    ],
+    "selector": "checkbox-multiline-example",
+    "additionalComponents": [],
+    "primaryFile": "checkbox-multiline-example.ts",
+    "importPath": "components/checkbox"
+  },
   "checkbox-overview": {
     "packagePath": "components/checkbox/checkbox-overview",
     "title": "Checkbox",
@@ -2601,6 +2615,18 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
     "primaryFile": "radio-group-example.ts",
     "importPath": "components/radio"
   },
+  "radio-multiline": {
+    "packagePath": "components/radio/radio-multiline",
+    "title": "Radio multiline example",
+    "componentName": "RadioMultilineExample",
+    "files": [
+      "radio-multiline-example.ts"
+    ],
+    "selector": "radio-multiline-example",
+    "additionalComponents": [],
+    "primaryFile": "radio-multiline-example.ts",
+    "importPath": "components/radio"
+  },
   "radio-size": {
     "packagePath": "components/radio/radio-size",
     "title": "Radio size",
@@ -4087,6 +4113,8 @@ return import('@koobiq/docs-examples/components/button');
   case 'button-overview':
 return import('@koobiq/docs-examples/components/button');
   case 'checkbox-indeterminate':
+return import('@koobiq/docs-examples/components/checkbox');
+  case 'checkbox-multiline':
 return import('@koobiq/docs-examples/components/checkbox');
   case 'checkbox-overview':
 return import('@koobiq/docs-examples/components/checkbox');
@@ -4401,6 +4429,8 @@ return import('@koobiq/docs-examples/components/progress-spinner');
   case 'radio-content':
 return import('@koobiq/docs-examples/components/radio');
   case 'radio-group':
+return import('@koobiq/docs-examples/components/radio');
+  case 'radio-multiline':
 return import('@koobiq/docs-examples/components/radio');
   case 'radio-size':
 return import('@koobiq/docs-examples/components/radio');