feat: make component lable responsive and mobile friendly #input #dro…

…pdown #slider #textarea #date-picker #form-row
dnbexperience · Jul 24, 2019 · c3cfec4 · c3cfec4
1 parent 29c089c
commit c3cfec4
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 6 deletions.
diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -1557,6 +1557,12 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-input[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-input {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-input > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-input {
       vertical-align: baseline; }
@@ -1838,6 +1844,12 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-date-picker[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-date-picker {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-date-picker > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-date-picker {
       flex: none; }

diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
@@ -380,6 +380,14 @@
     }
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     flex: none;

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -913,6 +913,12 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-dropdown[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-dropdown {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-dropdown > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-dropdown {
       flex: none;

diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
@@ -390,6 +390,14 @@
     }
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     flex: none;

diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
@@ -271,6 +271,16 @@ legend.dnb-form-label {
   @media (max-width: 40em) {
     .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent'] {
       display: block; } }
+  @media (max-width: 40em) {
+    .dnb-form-row:not(.dnb-form-row--vertical) {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label {
+        margin-bottom: 0.5rem; }
+      .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content {
+        flex-direction: column; }
+        .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content .dnb-form-label {
+          margin-top: 1rem; } }
   .dnb-form-row--vertical > .dnb-form-label {
     margin-bottom: 0.5rem; }
   .dnb-form-row--vertical > .dnb-form-row__content {

diff --git a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
@@ -122,6 +122,20 @@
         display: block;
       }
     }
+
+    @media (max-width: 40em) {
+      flex-direction: column;
+      align-items: flex-start;
+      & > .dnb-form-label {
+        margin-bottom: 0.5rem;
+      }
+      & > .dnb-form-row__content {
+        flex-direction: column;
+        .dnb-form-label {
+          margin-top: 1rem;
+        }
+      }
+    }
   }
 
   // This is currently not needed

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -736,6 +736,12 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-input[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-input {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-input > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-input {
       vertical-align: baseline; }

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -1162,6 +1162,12 @@ legend.dnb-form-label {
     align-items: flex-start; }
     .dnb-input[class*='__status'] > .dnb-form-label {
       margin-top: 0.25rem; }
+  @media (max-width: 40em) {
+    .dnb-input {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-input > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-input {
       vertical-align: baseline; }

diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -243,6 +243,14 @@
     }
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     vertical-align: baseline;

diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -971,6 +971,12 @@ legend.dnb-form-label {
     margin-top: 0.5rem; }
   .dnb-slider--vertical .dnb-form-status {
     margin-top: 1rem; }
+  @media (max-width: 40em) {
+    .dnb-slider {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-slider > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-slider__wrapper {
       flex: none; } }

diff --git a/packages/dnb-ui-lib/src/components/slider/style/_slider.scss b/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
@@ -223,6 +223,14 @@
     margin-top: 1rem;
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     &__wrapper {

diff --git a/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-ui-lib/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
@@ -600,6 +600,12 @@ textarea.dnb-textarea {
     flex: 1; }
   .dnb-textarea--stretch .dnb-textarea__shell, .dnb-textarea--stretch .dnb-textarea__textarea {
     width: 100%; }
+  @media (max-width: 40em) {
+    .dnb-textarea {
+      flex-direction: column;
+      align-items: flex-start; }
+      .dnb-textarea > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-textarea__inner {
       margin: 0; }

diff --git a/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss b/packages/dnb-ui-lib/src/components/textarea/style/_textarea.scss
@@ -121,6 +121,14 @@
     }
   }
 
+  @media (max-width: 40em) {
+    flex-direction: column;
+    align-items: flex-start;
+    > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
   // IE fix
   @media screen and (-ms-high-contrast: none) {
     &__inner {

diff --git a/packages/dnb-ui-lib/stories/components/FormRow.js b/packages/dnb-ui-lib/stories/components/FormRow.js
@@ -32,7 +32,6 @@ export default [
   () => (
     <Center>
       <Wrapper showOverflow>
-        <H2 bottom="small">Combine vertical and horizontal</H2>
         <Box>
           <Provider
             formRow={{
@@ -42,7 +41,10 @@ export default [
           >
             <Input />
           </Provider>
+        </Box>
 
+        <Box>
+          <H2 bottom="large">Combine vertical and horizontal</H2>
           <FormRow
             label={
               <H2 top={false} bottom="large">
@@ -72,13 +74,13 @@ export default [
           </FormRow>
         </Box>
 
-        <H2 bottom="small">Plain</H2>
         <Box>
+          <H2 bottom="large">Plain</H2>
           <AllComponents showText horizontal vertical />
         </Box>
 
-        <H2 bottom="small">Horizontal label</H2>
         <Box>
+          <H2 bottom="large">Horizontal label</H2>
           <FormRow
             // indent
             // indent_offset="large"
@@ -89,22 +91,22 @@ export default [
           </FormRow>
         </Box>
 
-        <H2 bottom="small">Vertical direction</H2>
         <Box>
+          <H2 bottom="large">Vertical direction</H2>
           <FormRow label="Vertical direction:" direction="vertical">
             <AllComponents showText />
           </FormRow>
         </Box>
 
-        <H2 bottom="small">Vertical everything</H2>
         <Box>
+          <H2 bottom="large">Vertical everything</H2>
           <FormRow label="Vertical everything:" vertical="true">
             <AllComponents showText />
           </FormRow>
         </Box>
 
-        <H2 bottom="small">Vertical label</H2>
         <Box>
+          <H2 bottom="large">Vertical label</H2>
           <FormRow label="Vertical Legend:" label_direction="vertical">
             <AllComponents showText horizontal />
           </FormRow>