Merge pull request #15 from DagsHub/enhancing-inputs

feature | support label style prop
DagsHub · Jul 18, 2023 · ff8d8d7 · ff8d8d7
2 parents e2d782c + 36017ab
commit ff8d8d7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/elements/dropdown/dropdown.scss b/src/components/elements/dropdown/dropdown.scss
@@ -1,6 +1,7 @@
 .dagshub-dropdown {
   position: relative;
   white-space: pre-wrap;
+  font-family: 'Inter', sans-serif;
 
   .dagshub-dropdown__box {
     font-weight: 600;
@@ -19,6 +20,13 @@
     cursor: pointer;
   }
 
+  .dagshub-dropdown__dropdown_title {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    padding-bottom: 8px;
+  }
+
   .dagshub-dropdown__options {
     border-radius: 6px;
     gap: 16px;

diff --git a/src/components/forms/input/index.tsx b/src/components/forms/input/index.tsx
@@ -21,6 +21,7 @@ export interface InputProps {
   onClick?: () => void;
   focusInput?: boolean;
   searchIcon?: boolean;
+  labelStyle?: React.CSSProperties | undefined;
 }
 
 export const Input = React.forwardRef<HTMLDivElement, InputProps>(
@@ -40,7 +41,8 @@ export const Input = React.forwardRef<HTMLDivElement, InputProps>(
       onChange = () => {},
       onClick = () => {},
       focusInput = false,
-      searchIcon = false
+      searchIcon = false,
+      labelStyle
     },
     ref
   ) => {
@@ -59,7 +61,7 @@ export const Input = React.forwardRef<HTMLDivElement, InputProps>(
 
     return (
       <div ref={ref} className={classes} style={{ maxWidth: rootMaxWidth, width: rootWidth }}>
-        {label && <label>{label}</label>}
+        {label && <label style={{ ...labelStyle }}>{label}</label>}
         <div className={'search-icon'}>
           {searchIcon && <Icon width={17} height={17} fill="#172D32" icon="outline-search" />}
         </div>