fix: ensure form styles override global styles

Specificity was too low on certain definitions, resulting in styles being overridden by user styles.
measuredco · Sep 21, 2023 · 104091a · 104091a
1 parent 05ddca3
commit 104091a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
@@ -91,7 +91,7 @@ export const InputOrGroup = ({
                     </IconButton>
                   </div>
                 </summary>
-                <fieldset>
+                <fieldset className={getClassName("fieldset")}>
                   {Object.keys(field.arrayFields!).map((fieldName) => {
                     const subField = field.arrayFields![fieldName];
 
@@ -231,6 +231,7 @@ export const InputOrGroup = ({
               >
                 <input
                   type="radio"
+                  className={getClassName("radioInput")}
                   value={option.value as string | number}
                   name={name}
                   onChange={(e) => {

diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
@@ -92,7 +92,7 @@
   display: none;
 }
 
-.Input-arrayItem > fieldset {
+.Input-arrayItem > .Input-fieldset {
   background-color: var(--puck-color-grey-11);
   border: none;
   border-top: 1px solid var(--puck-color-grey-8);
@@ -101,11 +101,16 @@
   padding-top: 16px;
 }
 
-.Input-arrayItem > fieldset .Input + .Input-arrayItem > fieldset .Input {
+.Input-arrayItem
+  > .Input-fieldset
+  .Input
+  + .Input-arrayItem
+  > .Input-fieldset
+  .Input {
   margin-top: 16px;
 }
 
-.Input-arrayItem > fieldset .Input-label {
+.Input-arrayItem > .Input-fieldset .Input-label {
   padding-bottom: 4px;
 }
 
@@ -178,16 +183,16 @@
   cursor: pointer;
 }
 
-.Input-radio input:checked ~ .Input-radioInner {
+.Input-radio .Input-radioInput:checked ~ .Input-radioInner {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-grey-2);
   font-weight: 500;
 }
 
-.Input-radio input {
+.Input-radio .Input-radioInput {
   display: none;
 }
 
-.Input textarea {
+.Input textarea.Input-input {
   margin-bottom: -4px; /* Remove strange bottom border */
 }