Update css

trimble-oss · Dec 11, 2023 · cbec7c3 · cbec7c3
1 parent 914bae4
commit cbec7c3
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git a/...ace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts b/...ace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts
@@ -900,14 +900,14 @@ export declare interface ModusProgressBar extends Components.ModusProgressBar {}
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'checkedId', 'name', 'radioButtons']
+  inputs: ['ariaLabel', 'checkedId', 'name', 'radioButtons', 'size']
 })
 @Component({
   selector: 'modus-radio-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'checkedId', 'name', 'radioButtons'],
+  inputs: ['ariaLabel', 'checkedId', 'name', 'radioButtons', 'size'],
 })
 export class ModusRadioGroup {
   protected el: HTMLElement;

diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts
@@ -853,6 +853,10 @@ export namespace Components {
           * The radio buttons to render.
          */
         "radioButtons": RadioButton[];
+        /**
+          * (optional) The size of the radiobutton.
+         */
+        "size"?: 'small' | 'medium';
     }
     interface ModusSelect {
         /**
@@ -2900,6 +2904,10 @@ declare namespace LocalJSX {
           * The radio buttons to render.
          */
         "radioButtons"?: RadioButton[];
+        /**
+          * (optional) The size of the radiobutton.
+         */
+        "size"?: 'small' | 'medium';
     }
     interface ModusSelect {
         /**

diff --git a/stencil-workspace/src/components/modus-radio-group/modus-radio-group.scss b/stencil-workspace/src/components/modus-radio-group/modus-radio-group.scss
@@ -24,7 +24,7 @@ div.modus-radio-group {
 
     .checkmark {
       background-color: $modus-radio-btn-bg;
-      border: $rem-2px solid $modus-radio-btn-border-color;
+      border: $rem-3px solid $modus-radio-btn-border-color;
       border-radius: 50%;
       height: $rem-14px;
       position: absolute;
@@ -39,14 +39,19 @@ div.modus-radio-group {
       .checkmark {
         height: $rem-10px;
         width: $rem-10px;
+        border: $rem-2px solid $modus-radio-btn-border-color;
       }
 
       input:checked ~ .checkmark::after {
         height: 0.405rem; // Specific size so that the check is centered.
-        left: $rem-2px;
-        top: $rem-2px;
+        left: 0.125rem;
+        top: 0.1rem;
         width: 0.405rem;
       }
+      &:focus .checkmark {
+        outline: $rem-2px solid $modus-radio-btn-focus-box-shadow-color;
+        outline-offset: $rem-2px;
+      }
 
       label {
         font-size: $rem-10px;
@@ -59,11 +64,11 @@ div.modus-radio-group {
       border-radius: 50%;
       content: '';
       display: none;
-      height: 0.5125rem; // Specific size so that the check is centered.
-      left: $rem-3px;
+      height: 0.6125rem; // Specific size so that the check is centered.
+      left: $rem-2px;
       position: absolute;
-      top: $rem-3px;
-      width: 0.5125rem;
+      top: $rem-2px;
+      width: 0.6125rem;
     }
 
     input:checked ~ .checkmark {
@@ -92,8 +97,8 @@ div.modus-radio-group {
 
     &:focus .checkmark {
       border-color: $modus-radio-btn-hover-border-color;
-      outline: $rem-2px solid $modus-radio-btn-focus-box-shadow-color;
-      outline-offset: $rem-2px;
+      outline: $rem-3px solid $modus-radio-btn-focus-box-shadow-color;
+      outline-offset: $rem-3px;
     }
   }
 

diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html
@@ -17,5 +17,27 @@
 
   <body>
     <!-- Test components -->
+    <div>
+    <modus-radio-group checked-id="1" size="small" name="my-group"></modus-radio-group>
+    <modus-radio-group checked-id="1" size="default" name="my-group2"></modus-radio-group>
+    <script>
+      const modusRadioGroup = document.querySelector('modus-radio-group');
+      modusRadioGroup.radioButtons = [
+        {
+          id: '0',
+          label: 'Radio 2',
+        },
+        {
+          id: '1',
+          checked: true,
+          label: 'Radio 2',
+        },
+        {
+          id: '2',
+          label: 'Radio 3',
+        },
+      ];
+    </script>
+    </div>
  </body>
 </html>