From c70fc408a16d9f2d1cf15ee6a293f04627e23097 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 25 Apr 2022 12:37:42 +0200 Subject: [PATCH 1/3] [Patch] Fixed error height --- .../src/lib/dxc-radio-group/dxc-radio-group.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts index 6e681a470..5254710de 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts @@ -290,7 +290,7 @@ export class DxcRadioGroupComponent implements OnInit { font-weight: var(--radioGroup-errorMessageFontWeight); line-height: var(--radioGroup-errorMessageLineHeight); font-family: var(--radioGroup-labelFontFamily); - height: var(--radioGroup-errorMessageLineHeight); + min-height: var(--radioGroup-errorMessageLineHeight); } .valueInput { display: none; From 3f2a0ca33c180420ee74c7e34f1abf1a70646933 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 25 Apr 2022 12:47:32 +0200 Subject: [PATCH 2/3] Update radio-group-properties.component.html --- .../radio-group-properties.component.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/radio-group/properties/radio-group-properties/radio-group-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/radio-group/properties/radio-group-properties/radio-group-properties.component.html index 06ed6046b..45c2ad3af 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/radio-group/properties/radio-group-properties/radio-group-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/radio-group/properties/radio-group-properties/radio-group-properties.component.html @@ -115,9 +115,12 @@ error: string - If it is defined, the component will change its appearance, showing the - error below the radio group component. If it is not defined, the error - messages will be managed internally, but never displayed on its own. + If it is a defined value and also a truthy string, the component will + change its appearance, showing the error below the radio group. If the + defined value is an empty string, it will reserve a space below the + component for a future error, but it would not change its look. In case of + being undefined or null, both the appearance and the space for the error + message would not be modified. From 70c449067c547c82451c54f7425d4884bdc695df Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 25 Apr 2022 13:09:06 +0200 Subject: [PATCH 3/3] Added comments --- .../dxc-radio-group.component.ts | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts index 5254710de..ad26ad486 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts @@ -26,42 +26,98 @@ import { RadioItem } from "./interfaces/radio-item.interface"; export class DxcRadioGroupComponent implements OnInit { @HostBinding("class") styles; + /** + * Value of the radio group. If undefined, the component will be uncontrolled + * and the value will be managed internally by the component. + */ @Input() label: string = ""; + /** + * Helper text to be placed above the radio group. + */ @Input() helperText: string = ""; + /** + * Name attribute of the input element. This attribute will allow users to + * find the component's value during the submit event. + */ @Input() name: string; + /** + * Value of the radio group. If undefined, the component will be uncontrolled + * and the value will be managed internally by the component. + */ @Input() value?: string; + /** + * If true, the component will be marked as readonly. + */ @Input() readOnly: boolean = false; + /** + * If true, the component will be disabled. + */ @Input() disabled: boolean = false; + /** + * If true, the radio group will be optional, showing (Optional) next to the + * label and adding a default last option with an empty string as value. + * Otherwise, the field will be considered required and an error will be + * passed as a parameter to the OnBlur functions if an option wasn't selected. + */ @Input() optional: boolean = false; + /** + * Label of the optional item. + */ @Input() optionalItemLabel?: string = "N/A"; + /** + * Default value of the radio group, this property is used to have a default + * value and also have uncontrolled behaviour. + */ @Input() defaultValue: string; + /** + * An array of objects representing the selectable options. Each object + * RadioItem has the following properties: + * - label: string: Label of the option placed next to the radio input. + * - value: string: Value of the option. It should be unique and not + * an empty string, which is reserved to the optional item added by optional prop. + * - disabled: boolean: disables the option. + */ @Input() options: RadioItem[]; + /** + * Sets the orientation of the options within the radio group. + */ @Input() stacking: "row" | "column" = "column"; + /** + * Value of the tabindex attribute. + */ @Input() tabIndexValue: number = 0; + /** + * If it is a defined value and also a truthy string, the component will + * change its appearance, showing the error below the radio group. If the + * defined value is an empty string, it will reserve a space below the + * component for a future error, but it would not change its look. In case of + * being undefined or null, both the appearance and the space for the error + * message would not be modified. + */ @Input() error: string;