Merge pull request #46 from klippa-app/bugfix-Color-radio-button

Bugfix radio button text color
klippa-app · Apr 9, 2024 · fb72ae4 · fb72ae4
2 parents 0586651 + 84eb564
commit fb72ae4
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html
@@ -62,8 +62,16 @@
  </div>
  </div>
  <div>
- <klp-form-element caption="radioButtons" spaceDistribution="34-66" verticalAlignment="top">
- <klp-form-radio formControlName="radioOption" [options]="radioOptions" orientation="column">
+ <klp-form-element caption="radioButtons classic" spaceDistribution="34-66" verticalAlignment="top">
+ <klp-form-radio formControlName="radioOption" [options]="radioOptionsClassic" orientation="column">
+ </klp-form-radio>
+ </klp-form-element>
+ <klp-form-element caption="radioButtons button" spaceDistribution="34-66" verticalAlignment="top">
+ <klp-form-radio formControlName="radioOption" [options]="radioOptionsButton" orientation="column" variant="button">
+ </klp-form-radio>
+ </klp-form-element>
+ <klp-form-element caption="radioButtons button" spaceDistribution="34-66" verticalAlignment="top">
+ <klp-form-radio formControlName="radioOption" [options]="radioOptionsButton" variant="button">
  </klp-form-radio>
  </klp-form-element>
  {{myForm.get('emails').value}}

diff --git a/projects/demo/src/app/demo/demo.component.ts b/projects/demo/src/app/demo/demo.component.ts
@@ -150,7 +150,7 @@ export class DemoComponent {
  ];
  kers: any;
  showSubForm = false;
- radioOptions: AppSelectOptions = [
+ radioOptionsClassic: AppSelectOptions = [
  {
  id: '1',
  name: '1st option',
@@ -165,6 +165,21 @@ export class DemoComponent {
  name: '3rd option',
  }
  ];
+ radioOptionsButton: AppSelectOptions = [
+ {
+ id: '1',
+ name: '1st option',
+ description: '1nd option'
+ },
+ {
+ id: '21',
+ name: '2nd option',
+ },
+ {
+ id: '241',
+ name: '3rd option',
+ }
+ ];
  myValue: any;
 
  public beforeSubmit = async () => {

diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@klippa/ngx-enhancy-forms",
- "version": "14.17.12",
+ "version": "14.17.13",
  "publishConfig": {
  "access": "public"
  },

diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/elements/radio/radio.component.scss
@@ -58,6 +58,13 @@
  background-color: $primary;
  }
  }
+ .description {
+ color: $default-dark;
+ opacity: 1;
+ }
+ .nameAndDescription {
+ color: $default-text-color;
+ }
  }
 
  &.button {
@@ -85,9 +92,8 @@
 .nameAndDescription {
  text-align: left;
  line-height: 1.1rem;
- color: $default-dark
 }
 .description {
  margin-top: 0.2rem;
- color: $default-text-color;
+ opacity: 0.6;
 }