fix: groups for radios toggles and checkboxes

astagi · web-flow · commit 1b65209414a8 · 2024-10-31T10:09:04.000+01:00
diff --git a/src/app/button/button-example-color-dark/button-example-color-dark.component.scss b/src/app/button/button-example-color-dark/button-example-color-dark.component.scss
@@ -1,4 +1,4 @@
 button {
-    margin: 4px 8px;
-    width: 200px;
+  margin: 4px 8px;
+  width: 200px;
 }
diff --git a/src/app/button/button-example-color/button-example-color.component.scss b/src/app/button/button-example-color/button-example-color.component.scss
@@ -1,4 +1,4 @@
 button {
-    margin: 4px 8px;
-    width: 200px;
+  margin: 4px 8px;
+  width: 200px;
 }
diff --git a/src/app/button/button-example-size/button-example-size.component.scss b/src/app/button/button-example-size/button-example-size.component.scss
@@ -1,4 +1,4 @@
 button {
-    margin: 4px 8px;
-    width: 200px;
+  margin: 4px 8px;
+  width: 200px;
 }
diff --git a/src/app/button/button-examples/button-examples.component.scss b/src/app/button/button-examples/button-examples.component.scss
@@ -1,4 +1,4 @@
 button {
-    margin: 4px 8px;
-    width: 200px;
+  margin: 4px 8px;
+  width: 200px;
 }
diff --git a/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.html b/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.html
@@ -1,20 +1,23 @@
 <h3>Gruppi</h3>
 <div class="bd-example">
-  <p class="example-section">
-    <it-checkbox label="Prima checkbox raggruppata" group="true">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
-    </it-checkbox>
-    <it-checkbox label="Seconda checkbox raggruppata" group="true">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur adipiscing
-      elit. Maecenas molestie liber
-    </it-checkbox>
-    <it-checkbox group="true">
-      <ng-container label>
-        Terza <a href="https://italia.github.io/bootstrap-italia/docs/form/checkbox/">checkbox</a> raggruppata</ng-container
-      >
+  <div class="example-section">
+    <fieldset>
+      <legend>Gruppo di checkbox</legend>
+      <it-checkbox label="Prima checkbox raggruppata" group="true">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
+      </it-checkbox>
+      <it-checkbox label="Seconda checkbox raggruppata" group="true">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit. Maecenas molestie liber
+      </it-checkbox>
+      <it-checkbox group="true">
+        <ng-container label>
+          Terza <a href="https://italia.github.io/bootstrap-italia/docs/form/checkbox/">checkbox</a> raggruppata</ng-container
+        >
 
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur adipiscing
-      elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
-    </it-checkbox>
-  </p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit. Maecenas molestie libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero
+      </it-checkbox>
+    </fieldset>
+  </div>
 </div>
diff --git a/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.scss b/src/app/checkbox/checkbox-example-group/checkbox-example-group.component.scss
@@ -1,2 +0,0 @@
-
-
diff --git a/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.html b/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.html
@@ -1,6 +1,9 @@
 <h3>Inline</h3>
 <div class="bd-example">
-  <it-checkbox label="label 1" inline="true"></it-checkbox>
-  <it-checkbox label="label 2" inline="true"></it-checkbox>
-  <it-checkbox label="label 3" inline="true"></it-checkbox>
+  <fieldset>
+    <legend>Gruppo di checkbox</legend>
+    <it-checkbox label="label 1" inline="true"></it-checkbox>
+    <it-checkbox label="label 2" inline="true"></it-checkbox>
+    <it-checkbox label="label 3" inline="true"></it-checkbox>
+  </fieldset>
 </div>
diff --git a/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.scss b/src/app/checkbox/checkbox-example-inline/checkbox-example-inline.component.scss
@@ -1,2 +0,0 @@
-
-
diff --git a/src/app/checkbox/checkbox-example/checkbox-example.component.html b/src/app/checkbox/checkbox-example/checkbox-example.component.html
@@ -1,16 +1,19 @@
 <h3>Configurazione checkbox</h3>
 
 <div class="bd-example">
-  <p class="example-section">
-    <it-checkbox [(ngModel)]="checked" label="Spuntato"></it-checkbox>
-    <it-checkbox [(ngModel)]="disabled" label="Disabilitato"></it-checkbox>
-    <it-checkbox [(ngModel)]="indeterminate" label="Indeterminato"></it-checkbox>
-    <it-checkbox [(ngModel)]="link" label="Testo con link"></it-checkbox>
-  </p>
-
+  <div class="example-section">
+    <fieldset>
+      <legend>Gruppo di checkbox</legend>
+      <it-checkbox [(ngModel)]="checked" label="Spuntato"></it-checkbox>
+      <it-checkbox [(ngModel)]="disabled" label="Disabilitato"></it-checkbox>
+      <it-checkbox [(ngModel)]="indeterminate" label="Indeterminato"></it-checkbox>
+      <it-checkbox [(ngModel)]="link" label="Testo con link"></it-checkbox>
+    </fieldset>
+  </div>
+  <hr />
   <h4>Risultato</h4>
 
-  <p class="example-section">
+  <div class="example-section">
     <it-checkbox [(ngModel)]="checked" [indeterminate]="indeterminate" [disabled]="disabled">
       <ng-container label>
         <ng-container *ngIf="link; else simpleLabel">
@@ -19,5 +22,5 @@ <h4>Risultato</h4>
         <ng-template #simpleLabel> Sono una checkbox </ng-template>
       </ng-container>
     </it-checkbox>
-  </p>
+  </div>
 </div>
diff --git a/src/app/checkbox/checkbox-example/checkbox-example.component.scss b/src/app/checkbox/checkbox-example/checkbox-example.component.scss
@@ -1,2 +0,0 @@
-
-
diff --git a/src/app/popover/popover-examples/popover-examples.component.scss b/src/app/popover/popover-examples/popover-examples.component.scss
@@ -1,7 +1,6 @@
 .example-section {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    height: 60px;
-  }
-  
+  display: flex;
+  align-content: center;
+  align-items: center;
+  height: 60px;
+}
diff --git a/src/app/progress-bar/progress-bar-example/progress-bar-example.component.scss b/src/app/progress-bar/progress-bar-example/progress-bar-example.component.scss
@@ -1,5 +1,4 @@
 .example-section {
-    align-content: center;
-    align-items: center;
+  align-content: center;
+  align-items: center;
 }
-  
diff --git a/src/app/radio/radio-checked-example/radio-checked-example.component.html b/src/app/radio/radio-checked-example/radio-checked-example.component.html
@@ -1,12 +1,14 @@
 <h3>Radio checked</h3>
 <div class="bd-example">
   <div class="example-section">
-    <it-radio-button name="nation" value="USA" label="USA" [(ngModel)]="selectedNation"></it-radio-button>
+    <fieldset>
+      <legend>Seleziona la nazionalità</legend>
+      <it-radio-button name="nation" value="USA" label="USA" [(ngModel)]="selectedNation"></it-radio-button>
 
-    <it-radio-button name="nation" value="Italia" label="Italia" [(ngModel)]="selectedNation"></it-radio-button>
+      <it-radio-button name="nation" value="Italia" label="Italia" [(ngModel)]="selectedNation"></it-radio-button>
 
-    <it-radio-button name="nation" value="Spagna" label="Spagna" [(ngModel)]="selectedNation"></it-radio-button>
+      <it-radio-button name="nation" value="Spagna" label="Spagna" [(ngModel)]="selectedNation"></it-radio-button>
+    </fieldset>
   </div>
-
   <div class="example-selected-value">Nazione selezionata: {{ selectedNation }}</div>
 </div>
diff --git a/src/app/radio/radio-example/radio-example.component.html b/src/app/radio/radio-example/radio-example.component.html
@@ -7,25 +7,33 @@ <h3>Configurazione Radio button</h3>
   <h4>Risultato</h4>
 
   <div class="example-section">
-    <it-radio-button
-      *ngFor="let color of colors; let i = index"
-      [id]="'color-' + i"
-      [(ngModel)]="selectedColor"
-      [disabled]="disabled"
-      [value]="color"
-      [label]="color"></it-radio-button>
+    <fieldset>
+      <legend>Seleziona il tuo colore preferito</legend>
+      <it-radio-button
+        *ngFor="let color of colors; let i = index"
+        [id]="'color-' + i"
+        [(ngModel)]="selectedColor"
+        [disabled]="disabled"
+        [value]="color"
+        [label]="color"></it-radio-button>
+    </fieldset>
     <div class="example-selected-value">Colore selezionato: {{ selectedColor }}</div>
   </div>
 </div>
 
 <div class="bd-example">
   <h4>Radio con link</h4>
-  <it-radio-button [(ngModel)]="link" name="radio-link" value="bootstrap-italia">
-    <ng-container label>Label con <a href="https://italia.github.io/bootstrap-italia/">link</a></ng-container>
-  </it-radio-button>
-  <it-radio-button [(ngModel)]="link" name="radio-link" value="radio-button">
-    <ng-container label>Altra label con <a href="https://italia.github.io/bootstrap-italia/docs/form/radio-button/">link</a></ng-container>
-  </it-radio-button>
+  <fieldset>
+    <legend>Gruppo di radio</legend>
+    <it-radio-button [(ngModel)]="link" name="radio-link" value="bootstrap-italia">
+      <ng-container label>Label con <a href="https://italia.github.io/bootstrap-italia/">link</a></ng-container>
+    </it-radio-button>
+    <it-radio-button [(ngModel)]="link" name="radio-link" value="radio-button">
+      <ng-container label
+        >Altra label con <a href="https://italia.github.io/bootstrap-italia/docs/form/radio-button/">link</a></ng-container
+      >
+    </it-radio-button>
+  </fieldset>
 
   <div class="example-selected-value">
     Link selezionato: <strong>{{ link }}</strong>
@@ -36,10 +44,13 @@ <h4>Radio con link</h4>
   <h4>Radio in Reactive Form</h4>
   <p>Qual è il tuo sesso?</p>
   <form [formGroup]="genderFormGroup">
-    <it-radio-button formControlName="gender" value="MALE" label="Maschio"></it-radio-button>
-    <it-radio-button formControlName="gender" value="FEMALE" label="Femmina"></it-radio-button>
-    <it-radio-button formControlName="gender" value="OTHERS" label="Altro"></it-radio-button>
-    <it-radio-button formControlName="gender" value="UNDEFINED" label="Preferisco non dirlo"></it-radio-button>
+    <fieldset>
+      <legend>Gruppo di radio</legend>
+      <it-radio-button formControlName="gender" value="MALE" label="Maschio"></it-radio-button>
+      <it-radio-button formControlName="gender" value="FEMALE" label="Femmina"></it-radio-button>
+      <it-radio-button formControlName="gender" value="OTHERS" label="Altro"></it-radio-button>
+      <it-radio-button formControlName="gender" value="UNDEFINED" label="Preferisco non dirlo"></it-radio-button>
+    </fieldset>
   </form>
 
   <div class="example-selected-value">
diff --git a/src/app/shared/source-display/source-display.component.scss b/src/app/shared/source-display/source-display.component.scss
@@ -1,5 +1,5 @@
 .bd-example {
-    border-top: none;
-    margin-top: auto;
-    padding-top: 20px;
+  border-top: none;
+  margin-top: auto;
+  padding-top: 20px;
 }
diff --git a/src/app/table-of-content-item/table-of-content-item.component.scss b/src/app/table-of-content-item/table-of-content-item.component.scss
@@ -20,10 +20,10 @@
 
 .bd-toc-link {
   display: block;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   @include media-breakpoint-up(md) {
-    padding-top: .25rem;
-    padding-bottom: .25rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
   }
   color: $gray-800;
 
@@ -33,33 +33,32 @@
 }
 
 .bd-toc-item {
-    background-color: $white;
-    &.active {
-      > .bd-toc-link {
-        color: $primary;
-        font-weight: 600;
+  background-color: $white;
+  &.active {
+    > .bd-toc-link {
+      color: $primary;
+      font-weight: 600;
 
-        &:hover {
-          background-color: transparent;
-        }
+      &:hover {
+        background-color: transparent;
       }
+    }
 
-      .bd-sidenav {
-        display: block;
-      }
+    .bd-sidenav {
+      display: block;
     }
+  }
 }
 
 .bd-sidenav {
   display: none;
 }
 
-
 // All levels of nav
 .nav {
   > li > a {
     display: inline-block;
-    padding: .25rem .5rem .25rem 1.5rem;
+    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
     font-size: 16px;
     color: $gray-800;
     &:hover {
diff --git a/src/app/table-of-content/table-of-content.component.scss b/src/app/table-of-content/table-of-content.component.scss
@@ -4,20 +4,20 @@
 
 .bd-sidebar {
   order: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   @include media-breakpoint-up(md) {
     @supports (position: sticky) {
       position: sticky;
       top: 5rem;
       height: calc(100vh - 5rem);
       overflow-y: auto;
     }
-    border-right: 1px solid rgba(0, 0, 0, .1);
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
 
   @include media-breakpoint-up(md) {
     padding: 1.5rem 0;
-    border-right: 1px solid rgba(0, 0, 0, .1);
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
 
   @include media-breakpoint-up(xl) {
@@ -40,7 +40,3 @@
     display: block !important;
   }
 }
-
-
-
-
diff --git a/src/app/toggle/toggle-example/toggle-example.component.html b/src/app/toggle/toggle-example/toggle-example.component.html
@@ -1,10 +1,11 @@
 <h3>Configurazione toggle</h3>
 <div class="bd-example">
-  <p class="example-section">
+  <fieldset>
+    <legend>Seleziona le caratteristiche</legend>
     <it-checkbox [(ngModel)]="checked" label="Spuntato" toggle="true"></it-checkbox>
     <it-checkbox [(ngModel)]="disabled" label="Disabilitato" toggle="true"></it-checkbox>
-  </p>
-
+  </fieldset>
+  <hr />
   <h4>Risultato</h4>
   <p class="example-section">
     <it-checkbox [(ngModel)]="checked" [label]="label" [disabled]="disabled" toggle="true"></it-checkbox>
diff --git a/src/app/toggle/toggle-example/toggle-example.component.scss b/src/app/toggle/toggle-example/toggle-example.component.scss
@@ -1,7 +1,6 @@
 .example-section {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    height: 60px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  height: 60px;
 }
-  

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`button {`
`2`		`- margin: 4px 8px;`
`3`		`- width: 200px;`
	`2`	`+ margin: 4px 8px;`
	`3`	`+ width: 200px;`
`4`	`4`	`}`