Merge branch 'main' into table-checkbox-focus-fix

cultureamp · Sep 1, 2023 · 1011766 · 1011766
2 parents c866056 + a8c5121
commit 1011766
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/famous-toes-reply.md b/.changeset/famous-toes-reply.md
@@ -0,0 +1,6 @@
+---
+"@kaizen/date-picker": minor
+"@kaizen/draft-form": minor
+---
+
+add margin top to input and button to match labels from other components
diff --git a/draft-packages/form/KaizenDraft/Form/TextField/TextField.module.scss b/draft-packages/form/KaizenDraft/Form/TextField/TextField.module.scss
@@ -14,6 +14,10 @@
   }
 }
 
+.input {
+  margin-top: $spacing-6;
+}
+
 $input-disabled-opacity: 0.3;
 
 ///////////////////////////////////////////////////

diff --git a/draft-packages/form/KaizenDraft/Form/TextField/TextField.tsx b/draft-packages/form/KaizenDraft/Form/TextField/TextField.tsx
@@ -85,6 +85,7 @@ export const TextField = ({
         id={`${id}-field-input`}
         automationId={`${id}-field-input`}
         ariaDescribedBy={ariaDescribedBy}
+        classNameOverride={styles.input}
         disabled={disabled}
         reversed={reversed}
         status={status}

diff --git a/packages/date-picker/src/DateRangePicker/DateRangePicker.module.scss b/packages/date-picker/src/DateRangePicker/DateRangePicker.module.scss
@@ -31,6 +31,7 @@ $placeholder-opacity: 0.7;
   background-clip: padding-box;
   border: $border-solid-border-width $border-solid-border-style $color-gray-500;
   border-radius: $border-solid-border-radius;
+  margin-top: $spacing-6;
   padding: 0 $button-base-padding-horizontal;
 
   &:focus-visible:not([disabled]),

diff --git a/packages/date-picker/src/_subcomponents/DateInput/DateInput.module.scss b/packages/date-picker/src/_subcomponents/DateInput/DateInput.module.scss
@@ -1,3 +1,9 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
 .dateInput {
   width: 100%;
 }
+
+.input {
+  margin-top: $spacing-6;
+}
diff --git a/packages/date-picker/src/_subcomponents/DateInput/DateInput.tsx b/packages/date-picker/src/_subcomponents/DateInput/DateInput.tsx
@@ -34,6 +34,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
         inputRef={isRefObject(ref) ? ref : undefined}
         id={id}
         autoComplete="off"
+        classNameOverride={styles.input}
         disabled={disabled}
         reversed={isReversed}
         {...inputProps}