Better layout for inline Dropdowns to correspond with boxed FieldWrapper

henck · Feb 13, 2024 · cc66b54 · cc66b54
1 parent 4a5ebd2
commit cc66b54
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@independent-software/typeui",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "description": "TypeUI",
   "keywords": [
     "react",

diff --git a/src/controls/Dropdown/Body.tsx b/src/controls/Dropdown/Body.tsx
@@ -61,12 +61,14 @@ const Body = styled(BodyBase).attrs(p => ({
   position:       absolute;
   z-index:        100;
   box-sizing:     border-box;
-  width:          100%;
   height:         1000px; /* We animate max-height based on child count. */
   overflow-y:     hidden;
+  ${p => !p.inline && css`width: 100%;`}
+  // Inline fill be placed over thick FieldWrapper's border.
+  ${p => p.inline && css`left: -2px; right: -2px;`}
 
   /* Border is grey, unless error. */
-  border:         solid 1px ${p => p.theme.normalColor};
+  border:         solid ${p => p.inline ? 2 : 1}px ${p => p.theme.normalColor};
   border-radius:  ${p => p.theme.radius}px;
 
   /* Background is theme background */
@@ -83,6 +85,11 @@ const Body = styled(BodyBase).attrs(p => ({
       border-bottom-left-radius: 0px;
       border-bottom-right-radius: 0px;      
     `}
+    ${p.inline && css`
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: none;
+    `}
   `}
   ${p => !p.upwards && css`
     top: calc(100% - 1px);
@@ -93,6 +100,11 @@ const Body = styled(BodyBase).attrs(p => ({
       border-top-left-radius: 0px;
       border-top-right-radius: 0px; 
     `}
+    ${p.inline && css`
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none;
+    `}    
   `}
 
   /* Border color, max-height and opacity are transitioned 
@@ -111,9 +123,7 @@ const Body = styled(BodyBase).attrs(p => ({
     transition: opacity ${p => p.theme.transition.duration*3}s ease-in, 
                 max-height ${p => p.theme.transition.duration*3}s ease-in, 
                 border-color ${p => p.theme.transition.duration*3}s ease-in;
-    ${!p.inline && css`
-      border-color: ${p => lighten(0.25, p.theme.primaryColor)};
-    `}
+    border-color: ${p => lighten(0.25, p.theme.primaryColor)};
     opacity: 1;
     max-height: ${p.totalHeight}px;
   `}

diff --git a/src/controls/Dropdown/Row.tsx b/src/controls/Dropdown/Row.tsx
@@ -23,7 +23,7 @@ const Row = styled(RowBase)`
 
   /* Row has a top/bottom border depending on opening direction. */
   ${p => p.upwards && css`
-    border-bottom: solid 1px ${p.theme.normalColor};
+      border-bottom: solid 1px ${p.theme.normalColor};
   `}
   ${p => !p.upwards && css`
     border-top: solid 1px ${p.theme.normalColor};

diff --git a/src/controls/Form/stories/Form.General.stories.mdx b/src/controls/Form/stories/Form.General.stories.mdx
@@ -96,17 +96,17 @@ export const FieldTemplate = (args) =>
         value={"First name"}
         control={(<Input transparent type="text" placeholder="First name" fluid/>)}/>
       <Form.Field
-        required={{message: "Employee type is required."}}
+        required={{message: "Employee type is required"}}
         width={1} label="TYPE"
         name="employee_type" 
         boxed
         value={null}
         control={
-          <Dropdown clearable inline data={types} placeholder="Type" fluid label={(item) => item.name}>
+          <Dropdown clearable inline onSearch={() => {}} data={types} placeholder="Type" fluid label={(item) => item.name}>
             <Dropdown.Column>{(item) => item.name}</Dropdown.Column>
           </Dropdown>
         }
-        hint="Please select an employee type."/>        
+        hint="Please select an employee type"/>        
       <Form.Field
         required={{message: ""}}
         width={1} label="DATE"
@@ -142,17 +142,17 @@ export const FieldTemplate = (args) =>
       value={"First name"}
       control={(<Input transparent type="text" placeholder="First name" fluid/>)}/>
     <Form.Field
-      required={{message: "Employee type is required."}}
+      required={{message: "Employee type is required"}}
       width={1} label="TYPE"
       name="employee_type" 
       boxed
       value={null}
       control={
-        <Dropdown clearable inline data={types} placeholder="Type" fluid label={(item) => item.name}>
+        <Dropdown clearable inline onSearch={() => {}} data={types} placeholder="Type" fluid label={(item) => item.name}>
           <Dropdown.Column>{(item) => item.name}</Dropdown.Column>
         </Dropdown>
       }
-      hint="Please select an employee type."/>        
+      hint="Please select an employee type"/>        
     </Form>
   </div> 
 </>