fix: label spacing in inputs (#277)

ogcio · Oct 9, 2024 · 535b04d · 535b04d
1 parent ba5e25e
commit 535b04d
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 67 deletions.
diff --git a/packages/html/ds/src/file-upload/file-upload.html b/packages/html/ds/src/file-upload/file-upload.html
@@ -3,7 +3,12 @@
   {% from 'hint-text/hint-text.html' import govieHintText %}
   {% from 'error-text/error-text.html' import govieErrorText %}
   {% set isError = props.error and props.error.content %}
+  {% set isHint = props.hint and props.hint.content %}
   {% set inputId = props.id or 'file-upload-id' %}
+  {% set marginTop = '' %}
+  {% if props.error and props.hint %}
+    {% set marginTop = 'gi-mt-1' %}
+  {% endif %}
 
   {# Conditionally render the wrapper div only if error content is available #}
   {# prettier-ignore-start #}
@@ -24,7 +29,7 @@
     }}
   {% endif %}
 
-  {% if props.hint %}
+  {% if isHint %}
     {{
       govieHintText({
         "content": props.hint.content,
@@ -44,7 +49,7 @@
 
   <input
     id="{{ inputId }}"
-    class="xs:gi-text-md gi-text-sm gi-leading-10 xs:!gi-leading-5 gi-p-[3px] gi-max-w-[100%] gi-border-transparent gi-flex-initial gi-ml-[-5px] gi-border-sm gi-border-solid gi-box-border focus:gi-outline focus:gi-outline-[3px] focus:gi-border-lg focus:gi-border-gray-950 focus:gi-outline-yellow-400 focus:gi-outline-offset-0 gi-z-1"
+    class="xs:gi-text-md gi-text-sm gi-leading-10 xs:!gi-leading-5 gi-p-[3px] gi-max-w-[100%] gi-border-transparent gi-flex-initial gi-ml-[-5px] gi-border-sm gi-border-solid gi-box-border focus:gi-outline focus:gi-outline-[3px] focus:gi-border-lg focus:gi-border-gray-950 focus:gi-outline-yellow-400 focus:gi-outline-offset-0 gi-z-1 {{ marginTop }}"
     type="file"
     name="{{ props.name or 'file' }}"
     accept="{{ props.accept or '*/*' }}"

diff --git a/packages/html/ds/src/hint-text/hint-text.html b/packages/html/ds/src/hint-text/hint-text.html
@@ -3,16 +3,16 @@
 {% macro govieHintText(props) %}
   {% macro getSizeClass(size) %}
     {% if size == 'lg' %}
-      gi-text-lg
+      gi-text-lg gi-mb-2.5
     {% elif size == 'sm' %}
-      gi-text-sm
+      gi-text-sm gi-mb-1.5
     {% else %}
-      gi-text-md
+      gi-text-md gi-mb-2
     {% endif %}
   {% endmacro %}
 
   <p
-    class="{{ getSizeClass(props.size) | trim }} gi-font-normal gi-text-gray-600 gi-mb-[10px] {{ addClasses(props.classNames) | trim }}"
+    class="{{ getSizeClass(props.size) | trim }} gi-font-normal gi-text-gray-600 {{ addClasses(props.classNames) | trim }}"
   >
     {{ props.content | safe | trim | indent(2) }}
   </p>

diff --git a/packages/html/ds/src/select/select.html b/packages/html/ds/src/select/select.html
@@ -4,6 +4,12 @@
 
 {% macro govieSelect(props) %}
   {% set ariaLabel = props.label.content or props.id %}
+  {% set isError = props.error and props.error.content %}
+  {% set isHint = props.hint and props.hint.content %}
+  {% set marginTop = '' %}
+  {% if props.error and props.hint %}
+    {% set marginTop = 'gi-mt-1' %}
+  {% endif %}
 
   <div data-module="gieds-select">
     {% if props.label %}
@@ -15,7 +21,7 @@
         })
       }}
     {% endif %}
-    {% if props.hint %}
+    {% if isHint %}
       {{
         govieHintText({
             "content": props.hint.content,
@@ -24,7 +30,7 @@
         })
       }}
     {% endif %}
-    {% if props.error %}
+    {% if isError %}
       {{
         govieErrorText({
             "content": props.error.content,
@@ -36,7 +42,7 @@
     <select
       id="{{ ariaLabel }}"
       aria-label="{{ ariaLabel }}"
-      class="focus:gi-outline focus:gi-outline-[3px] focus:gi-outline-yellow-400 focus:gi-outline-offset-0 gi-p-1.5 gi-border-black gi-border-[3px] gi-border-solid gi-min-w-56 gi-font-primary xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
+      class="focus:gi-outline focus:gi-outline-[3px] focus:gi-outline-yellow-400 focus:gi-outline-offset-0 gi-p-1.5 gi-border-black gi-border-[3px] gi-border-solid gi-min-w-56 gi-font-primary xs:gi-text-sm md:gi-text-md lg:gi-text-lg {{ marginTop }}"
     >
       {% for option in props.options %}
         {% if option.groupName %}

diff --git a/packages/html/ds/src/tabs/helpers.html b/packages/html/ds/src/tabs/helpers.html
@@ -10,25 +10,24 @@
     aria-labelledby="{{ tabLabelId }}"
     aria-roledescription="tab"
     {%- if item.checked %}checked{% endif %}
-    class="gi-absolute gi-opacity-0"
+    class="tab-item gi-absolute gi-opacity-0"
   />
   <label
     role="tab"
     for="{{ tabId }}"
     id="{{ tabLabelId }}"
     aria-hidden="true"
-    class="
-                gi-inline-block 
-                gi-cursor-pointer
-                gi-px-5
-                gi-py-2
-                gi-relative
-                gi-mr-1
-                gi-bg-gray-50
-                gi-text-center 
-                gi-text-md
-                gi-underline
-                gi-text-slate-300"
+    class="gi-inline-block
+          gi-cursor-pointer
+          gi-px-5
+          gi-py-2
+          gi-relative
+          gi-mr-1
+          gi-bg-gray-50
+          gi-text-center 
+          gi-text-md
+          gi-underline
+          gi-text-slate-300"
   >
     <a
       {%- if item.href %}href="{{ item.href }}"{% endif %}

diff --git a/packages/html/ds/src/tabs/tabs.html b/packages/html/ds/src/tabs/tabs.html
@@ -2,7 +2,9 @@
   {% from 'tabs/helpers.html' import tabListItem, tabPanel %}
 
   <div
-    {%- if props.ariaLabel %}aria-label="{{ props.ariaLabel }}"{% endif %}
+    {% if props.ariaLabel %}
+      aria-label="{{ props.ariaLabel }}"
+    {% endif %}
     class="gi-tabs gi-flex gi-flex-wrap"
   >
     {% if props['items'] | length %}

diff --git a/packages/html/ds/src/text-input/text-input.html b/packages/html/ds/src/text-input/text-input.html
@@ -5,6 +5,7 @@
   {% set widthStyle = '' %}
   {% set widthClass = 'gi-w-auto' %}
   {% set isError = props.error and props.error.content %}
+  {% set isHint = props.hint and props.hint.content %}
 
   {% if props.fullFluid %}
     {% set widthClass = 'gi-w-full' %}
@@ -13,6 +14,10 @@
   {% elif props.characterWidth %}
     {% set widthStyle = 'style="width: ' ~ props.characterWidth ~ 'em;"' %}
   {% endif %}
+  {% set marginTop = '' %}
+  {% if props.error and props.hint %}
+    {% set marginTop = 'gi-mt-1' %}
+  {% endif %}
 
   {# Generate a unique or provided ID for the input field #}
   {% set inputId = props.id or 'input-id' %}
@@ -36,7 +41,7 @@
     }}
   {% endif %}
 
-  {% if props.hint %}
+  {% if isHint %}
     {{
       govieHintText({
         "content": props.hint.content,
@@ -54,7 +59,7 @@
     }}
   {% endif %}
 
-  <div class="gi-flex gi-items-center">
+  <div class="gi-flex gi-items-center {{ marginTop }}">
     {% if props.prefix %}
       <div
         class="xs:gi-text-md gi-text-sm gi-leading-5 xs:!gi-leading-5 gi-bg-gray-50 gi-inline-block gi-flex-[0_0_auto] gi-text-center gi-whitespace-nowrap gi-cursor-default gi-px-2 gi-py-2 gi-border-l-sm gi-border-t-sm gi-border-b-sm gi-border-solid gi-border-gray-950 gi-min-w-10 gi-h-10"

diff --git a/packages/html/ds/src/textarea/textarea.html b/packages/html/ds/src/textarea/textarea.html
@@ -4,12 +4,17 @@
   {% from 'error-text/error-text.html' import govieErrorText %}
   {% set widthClass = 'gi-w-auto' %}
   {% set isError = props.error and props.error.content %}
+  {% set isHint = props.hint and props.hint.content %}
 
   {% if props.fullFluid %}
     {% set widthClass = 'gi-w-full' %}
   {% elif props.halfFluid %}
     {% set widthClass = 'gi-w-1/2' %}
   {% endif %}
+  {% set marginTop = '' %}
+  {% if props.error and props.hint %}
+    {% set marginTop = 'gi-mt-1' %}
+  {% endif %}
 
   {# Conditionally render the wrapper div only if error content is available #}
   {# prettier-ignore-start #}
@@ -28,7 +33,7 @@
     }}
   {% endif %}
 
-  {% if props.hint %}
+  {% if isHint %}
     {{
       govieHintText({
         "content": props.hint.content,
@@ -46,7 +51,7 @@
     }}
   {% endif %}
 
-  <div class="gi-flex gi-items-center">
+  <div class="gi-flex gi-items-center {{ marginTop }}">
     <textarea
       id="{{ props.id or 'textarea-id' }}"
       rows="{{ props.rows or 4 }}"

diff --git a/packages/html/ds/styles.css b/packages/html/ds/styles.css
@@ -28,33 +28,33 @@
 
 @layer components {
   /* Tabs */
-
-  [name="tabs"]:checked+label {
-    @apply gi-border-solid gi-border-gray-200 gi-border-x-xs gi-border-t-xs gi-border-b-0 gi-bg-white gi-px-5 gi-py-3 gi--mt-2 gi-no-underline
-  }
-
-  [name="tabs"]:hover+label > * {
-    @apply gi-decoration-lg
-  }
-
-  [name="tabs"]:focus+label > * {
-    @apply gi-outline gi-outline-transparent gi-bg-yellow-400 gi-outline-2 gi-shadow gi-shadow-yellow-400
-  }
-
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(1):checked) [role="tabpanel"]:nth-of-type(2),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(2):checked) [role="tabpanel"]:nth-of-type(3),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(3):checked) [role="tabpanel"]:nth-of-type(4),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(4):checked) [role="tabpanel"]:nth-of-type(5),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(5):checked) [role="tabpanel"]:nth-of-type(6),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(6):checked) [role="tabpanel"]:nth-of-type(7),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(7):checked) [role="tabpanel"]:nth-of-type(8),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(8):checked) [role="tabpanel"]:nth-of-type(9),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(9):checked) [role="tabpanel"]:nth-of-type(10),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(10):checked) [role="tabpanel"]:nth-of-type(11),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(11):checked) [role="tabpanel"]:nth-of-type(12),
-  div.gi-tabs:has([role="tablist"] [name="tabs"]:nth-of-type(12):checked) [role="tabpanel"]:nth-of-type(13) {
-    display: block;
-  }
-
-  /* End Tabs */
+  
+    .tab-item:checked+label {
+      @apply gi-border-solid gi-border-gray-200 gi-border-x-xs gi-border-t-xs gi-border-b-0 gi-bg-white gi-px-5 gi-py-3 gi--mt-2 gi-no-underline
+    }
+  
+    .tab-item:hover+label>* {
+      @apply gi-decoration-lg
+    }
+  
+    .tab-item:focus+label>* {
+      @apply gi-outline gi-outline-transparent gi-bg-yellow-400 gi-outline-2 gi-shadow gi-shadow-yellow-400
+    }
+  
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(1):checked) [role="tabpanel"]:nth-of-type(2),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(2):checked) [role="tabpanel"]:nth-of-type(3),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(3):checked) [role="tabpanel"]:nth-of-type(4),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(4):checked) [role="tabpanel"]:nth-of-type(5),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(5):checked) [role="tabpanel"]:nth-of-type(6),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(6):checked) [role="tabpanel"]:nth-of-type(7),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(7):checked) [role="tabpanel"]:nth-of-type(8),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(8):checked) [role="tabpanel"]:nth-of-type(9),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(9):checked) [role="tabpanel"]:nth-of-type(10),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(10):checked) [role="tabpanel"]:nth-of-type(11),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(11):checked) [role="tabpanel"]:nth-of-type(12),
+    div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(12):checked) [role="tabpanel"]:nth-of-type(13) {
+      display: block;
+    }
+  
+    /* End Tabs */
 }
diff --git a/packages/react/ds/src/error-text/error-text.tsx b/packages/react/ds/src/error-text/error-text.tsx
@@ -36,7 +36,7 @@ export const ErrorText: React.FC<ErrorTextProps> = ({
 
   return (
     <div
-      className={`${sizeClass} gi-font-bold gi-text-red-600 ${className}`}
+      className={`${sizeClass} gi-font-bold gi-text-red-600 ${className || ''}`}
       {...props}
     >
       {text}

diff --git a/packages/react/ds/src/file-upload/file-upload.tsx b/packages/react/ds/src/file-upload/file-upload.tsx
@@ -30,7 +30,28 @@ export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
 
         <input
           id={id}
-          className="xs:gi-text-md gi-text-sm gi-leading-10 xs:!gi-leading-5 gi-p-[3px] gi-max-w-[100%] gi-border-transparent gi-flex-initial gi-ml-[-5px] gi-border-sm gi-border-solid gi-box-border focus:gi-outline focus:gi-outline-[3px] focus:gi-border-lg focus:gi-border-gray-950 focus:gi-outline-yellow-400 focus:gi-outline-offset-0 gi-z-1"
+          className={`
+            xs:gi-text-md 
+            gi-text-sm 
+            gi-leading-10 
+            xs:!gi-leading-5 
+            gi-p-[3px]
+            gi-max-w-[100%]
+            gi-border-transparent
+            gi-flex-initial
+            gi-ml-[-5px]
+            gi-border-sm
+            gi-border-solid
+            gi-box-border
+            focus:gi-outline
+            focus:gi-outline-[3px]
+            focus:gi-border-lg
+            focus:gi-border-gray-950
+            focus:gi-outline-yellow-400
+            focus:gi-outline-offset-0
+            gi-z-1
+            ${!hint?.text && !error?.text ? 'gi-mt-1' : ''}
+            `}
           type="file"
           ref={ref}
           {...props}

diff --git a/packages/react/ds/src/hint-text/hint-text.tsx b/packages/react/ds/src/hint-text/hint-text.tsx
@@ -24,20 +24,20 @@ export const HintText: React.FC<HintTextProps> = ({
   const sizeClass = (() => {
     switch (size) {
       case 'lg': {
-        return 'gi-text-lg  gi-mb-2.5';
+        return 'gi-text-lg gi-mb-2.5';
       }
       case 'sm': {
-        return 'gi-text-sm  gi-mb-1.5';
+        return 'gi-text-sm gi-mb-1.5';
       }
       default: {
-        return 'gi-text-md  gi-mb-2';
+        return 'gi-text-md gi-mb-2';
       }
     }
   })();
 
   return (
     <div
-      className={`${sizeClass} gi-font-normal gi-text-gray-700 ${className}`}
+      className={`${sizeClass} gi-font-normal gi-text-gray-700 ${className || ''}`}
       {...props}
     >
       {text}

diff --git a/packages/react/ds/src/label/label.tsx b/packages/react/ds/src/label/label.tsx
@@ -14,10 +14,10 @@ export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
 
 // Use React.forwardRef to support refs properly
 export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  ({ text, size = LabelSize.md, htmlFor, ...props }, ref) => {
+  ({ text, size = LabelSize.md, htmlFor, className, ...props }, ref) => {
     return (
       <label
-        className={`gi-text-${size} gi-mb-1 gi-block`}
+        className={`gi-text-${size} gi-mb-1 gi-block ${className || ''}`}
         ref={ref}
         htmlFor={htmlFor}
         {...props}

diff --git a/packages/react/ds/src/select/select.tsx b/packages/react/ds/src/select/select.tsx
@@ -32,7 +32,22 @@ export function Select({ id, label, options, hint, error }: SelectProps) {
       {hint && <HintText text={hint.text} size={hint.size} />}
       {error && <ErrorText text={error.text} size={error.size} />}
       <select
-        className="focus:gi-outline focus:gi-outline-[3px] focus:gi-outline-yellow-400 focus:gi-outline-offset-0 gi-p-1.5 gi-border-black gi-border-[3px] gi-border-solid gi-min-w-56 gi-font-primary xs:gi-text-sm md:gi-text-md lg:gi-text-lg"
+        className={`
+          focus:gi-outline 
+          focus:gi-outline-[3px] 
+          focus:gi-outline-yellow-400 
+          focus:gi-outline-offset-0
+          gi-p-1.5
+          gi-border-black
+          gi-border-[3px]
+          gi-border-solid
+          gi-min-w-56
+          gi-font-primary 
+          xs:gi-text-sm
+          md:gi-text-md
+          lg:gi-text-lg
+          ${!hint?.text && !error?.text ? 'gi-mt-1' : ''}
+          `}
         id={ariaLabel}
         aria-label={ariaLabel}
       >

diff --git a/packages/react/ds/src/text-input/text-input.tsx b/packages/react/ds/src/text-input/text-input.tsx
@@ -71,7 +71,9 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
 
         {error?.text && <ErrorText text={error.text} size={error.size} />}
 
-        <div className="gi-flex gi-items-center">
+        <div
+          className={`gi-flex gi-items-center ${!hint?.text && !error?.text ? 'gi-mt-1' : ''}`}
+        >
           {prefix && (
             <div className="xs:gi-text-md gi-text-sm gi-leading-5 xs:!gi-leading-5 gi-bg-gray-50 gi-inline-block gi-flex-[0_0_auto] gi-text-center gi-whitespace-nowrap gi-cursor-default gi-px-2 gi-py-2 gi-border-l-sm gi-border-t-sm gi-border-b-sm gi-border-solid gi-border-gray-950 gi-min-w-10 gi-h-10">
               {prefix}