Skip to content

Commit

Permalink
add descriptions for radio buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
wouter-willems committed Mar 19, 2024
1 parent d77f74a commit a3e28a0
Show file tree
Hide file tree
Showing 9 changed files with 33 additions and 8 deletions.
4 changes: 2 additions & 2 deletions projects/demo/src/app/demo/demo.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@
</div>
</div>
<div>
<klp-form-element caption="radioButtons" spaceDistribution="34-66">
<klp-form-radio formControlName="radioOption" [options]="radioOptions">
<klp-form-element caption="radioButtons" spaceDistribution="34-66" verticalAlignment="top">
<klp-form-radio formControlName="radioOption" [options]="radioOptions" orientation="column">
</klp-form-radio>
</klp-form-element>
{{myForm.get('emails').value}}
Expand Down
1 change: 1 addition & 0 deletions projects/demo/src/app/demo/demo.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ export class DemoComponent {
{
id: '1',
name: '1st option',
description: 'look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!look at this super cute description!'
},
{
id: '21',
Expand Down
2 changes: 1 addition & 1 deletion projects/klippa/ngx-enhancy-forms/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@klippa/ngx-enhancy-forms",
"version": "14.17.5",
"version": "14.17.6",
"publishConfig": {
"access": "public"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,15 @@
[ngClass]="{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}"
(click)="setInnerValueAndNotify(option.id)"
>
<div class="selectedRadioBtnContainer" *ngIf="variant === 'classic'">
<div class="selected" *ngIf="innerValue === option.id"></div>
<div class="radioAndName">
<div class="selectedRadioBtnContainer" *ngIf="variant === 'classic'">
<div class="selected" *ngIf="innerValue === option.id"></div>
</div>
<div class="nameAndDescription">
<div>{{option.name}}</div>
<div class="description" *ngIf="option.description">{{option.description}}</div>
</div>
</div>
<div>{{option.name}}</div>
</button>
</ng-container>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@
}

.optionContainer {
display: flex;
flex-direction: row;
margin-right: $spacing-tiny;
background: transparent;
border: none;
Expand All @@ -43,6 +41,7 @@
&.classic {
cursor: pointer;
.selectedRadioBtnContainer {
flex: 0 0 auto;
position: relative;
height: 20px;
width: 20px;
Expand Down Expand Up @@ -77,3 +76,17 @@
}
}
}

.radioAndName {
display: flex;
flex-direction: row;
gap: 0.2rem;
}
.nameAndDescription {
text-align: left;
line-height: 1.1rem;
}
.description {
margin-top: 0.2rem;
opacity: 0.6;
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export type RadioOptions = Array<RadioOption>;
export type RadioOption = {
id: any;
name: string;
description?: string;
};


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
hasCaption: caption || captionRef,
vertical: direction === 'vertical',
horizontal: direction === 'horizontal',
topAlignment: verticalAlignment === 'top',
reverseOrder: swapInputAndCaption,
hasErrors: getErrorToShow() && attachedControl.touched,
percentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@
margin-left: 0;
}
}
&.topAlignment .captionInputAndError {
align-items: flex-start;
}

&.d40-60 {
.errorAboveInputContainer {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export class FormElementComponent implements AfterViewInit {
@Input() public caption: string;
@Input() public direction: 'horizontal' | 'vertical' = 'horizontal';
@Input() public captionSpacing: 'percentages' | 'none' = 'percentages';
@Input() public verticalAlignment: 'center' | 'top' = 'center';
@Input() public spaceDistribution: '40-60' | '34-66' | '30-70' | 'fixedInputWidth' = '40-60';
@Input() public swapInputAndCaption = false;
@Input() public errorMessageAsTooltip = false;
Expand Down

0 comments on commit a3e28a0

Please sign in to comment.