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. 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..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; @@ -290,7 +346,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;