fix: make it possible to have an animating FormStatus in future (#909)

* feat: animate #form-status on conditional visibility * chore: enable animation of #form-status on internal components usage * chore: rename status_animation prop to status_no_animation * chore: update snapshots * chore: avoid component layout correction when vertical * chore: disable animation as a default setting
dnbexperience · Aug 30, 2021 · 3f1052a · 3f1052a
1 parent 646e7c5
commit 3f1052a
Show file tree

Hide file tree

Showing 52 changed files with 2,540 additions and 775 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/Examples.js
@@ -55,7 +55,7 @@ export const FormStatusWithWarn = () => (
   </ComponentBox>
 )
 
-export const FormSetDefaultInput = () => (
+export const FormStatusInput = () => (
   <ComponentBox>
     {() => /* jsx */ `
 <Input
@@ -67,6 +67,33 @@ export const FormSetDefaultInput = () => (
   </ComponentBox>
 )
 
+export const FormStatusAnimation = () => (
+  <ComponentBox useRender>
+    {() => /* jsx */ `
+const ToggleAnimation = () => {
+  const [status, setStatus] = React.useState(null)
+  const toggleStatus = () => {
+    setStatus((s) => (!s ? 'You have to fill in this field' : null))
+  }
+  return (
+    <FormRow vertical={false}>
+      <Input
+        label="Input with status:"
+        status={status}
+        value="Input value"
+        right
+      />
+      <ToggleButton top on_change={toggleStatus}>
+        Toggle
+      </ToggleButton>
+    </FormRow>
+  )
+}
+render(<ToggleAnimation />)
+`}
+  </ComponentBox>
+)
+
 export const FormStatusCustom = () => (
   <ComponentBox data-visual-test="form-status-custom" useRender>
     {() => /* jsx */ `

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/demos.md
@@ -9,7 +9,8 @@ FormStatusDefault,
 FormStatusWithInfo,
 FormStatusWithStretch,
 FormStatusWithWarn,
-FormSetDefaultInput,
+FormStatusInput,
+FormStatusAnimation,
 FormStatusCustom,
 FormStatusLarge,
 FormStatusWithIcons,
@@ -35,15 +36,19 @@ NB: The inner text gets a max width of 47rem to ensure we not exceed 70 characte
 
 <FormStatusWithWarn />
 
-### A form status, used by the Input Component
+### A FormStatus, used by the Input Component
 
-<FormSetDefaultInput />
+<FormStatusInput />
 
-### A form status, with a custom styled content
+### FormStatus Animation details
+
+<FormStatusAnimation />
+
+### A FormStatus, with a custom styled content
 
 <FormStatusCustom />
 
-### A form status with plain text/HTML
+### A FormStatus with plain text/HTML
 
 <FormStatusLarge />
 

diff --git a/...es/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.md b/...es/dnb-design-system-portal/src/docs/uilib/components/form-status/properties.md
@@ -17,6 +17,8 @@ redirect_from:
 | `icon_size`                                 | _(optional)_ the icon size of the icon shows. Defaults to `medium`.                                                                         |
 | `variant`                                   | _(optional)_ as of now, there is the `flat` and the `outlined` variant. Defaults to `flat`.                                                 |
 | `stretch`                                   | _(optional)_ if set to `true`, then the FormStatus will be 100% in available `width`. **NB:** Only use this on independent status messages. |
+| `show`                                      | _(optional)_ provide `false` if you want to animate the visibility. Defaults to `true`.                                                     |
+| `no_animation`                              | _(optional)_ use `true` to omit the animation on content visibility. Defaults to `false`.                                                   |
 | `global_status_id`                          | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status).                                           |
 | `skeleton`                                  | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                         |
 | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                       |
diff --git a/packages/dnb-eufemia-sandbox/stories/components/FormStatus.js b/packages/dnb-eufemia-sandbox/stories/components/FormStatus.js
@@ -16,7 +16,9 @@ import {
   Modal,
   Switch,
   Button,
+  ToggleButton,
   Space,
+  HelpButton,
 } from '@dnb/eufemia/src/components'
 import { Link } from '@dnb/eufemia/src/elements'
 
@@ -48,7 +50,6 @@ const SmallWidth = styled(Input)`
 // )
 
 export const FormStatuseSandbox = () => {
-  const [showError, setShowError] = useState(false)
   return (
     <Wrapper>
       <Box>
@@ -137,6 +138,19 @@ export const FormStatuseSandbox = () => {
           </FormRow>
         </FormSet>
       </Box>
+    </Wrapper>
+  )
+}
+
+export const ToggleAnimation = () => {
+  const [status, setStatus] = React.useState(null)
+  const toggleStatus = () => {
+    setStatus((s) => (!s ? 'You have to fill in this field' : null))
+  }
+  const [showError, setShowError] = useState(false)
+
+  return (
+    <Wrapper>
       <Box>
         <FormSet
           label_direction="vertical"
@@ -157,17 +171,34 @@ export const FormStatuseSandbox = () => {
             <DatePicker
               show_input
               right="small"
-              bottom="small"
               status={
                 showError &&
                 'Long text with status vitae tortor metus nulla nunc habitasse adipiscing purus porttitor viverra'
               }
+              suffix={<Modal>Modal Content</Modal>}
             />
-            <Modal right="small">Modal Content</Modal>
-            <Button text="Submit" type="submit" />
+            {/* <Modal right="small" top="small">
+            Modal Content
+          </Modal> */}
+            <Button text="Submit" type="submit" top="small" />
           </FormRow>
         </FormSet>
       </Box>
+      <Box>
+        <FormRow vertical={false}>
+          <Input
+            label="Input with status:"
+            status={status}
+            value="Input value"
+            suffix={<HelpButton>test</HelpButton>}
+            right
+            // size="small"
+          />
+          <ToggleButton top on_change={toggleStatus}>
+            Toggle
+          </ToggleButton>
+        </FormRow>
+      </Box>
     </Wrapper>
   )
 }
diff --git a/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js b/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js
@@ -91,8 +91,7 @@ export const GlobalStatuseSandbox = () => (
           GlobalStatus.Update({
             id: 'demo-1',
             // id: 'custom-status',
-            text:
-              'This is aDui consectetur viverra aenean vestibulum ac tristique sem ligula condimentum',
+            text: 'This is aDui consectetur viverra aenean vestibulum ac tristique sem ligula condimentum',
             scrollto_element,
           })
         }}
@@ -137,7 +136,7 @@ const InputWithError = () => {
               setErrorMessage1(value.length >= 3)
             }}
             right="small"
-            // status_animation="fade-in"
+            // status_no_animation
           />
           <Input
             placeholder="Enter #2 ..."
@@ -146,7 +145,7 @@ const InputWithError = () => {
               setErrorMessage2(value.length >= 3)
             }}
             right="small"
-            // status_animation="fade-in"
+            // status_no_animation
           />
           <FormRow vertical>
             <Switch
@@ -155,14 +154,14 @@ const InputWithError = () => {
                 setErrorMessage3(checked)
               }}
               bottom="small"
-              // status_animation="fade-in"
+              // status_no_animation
             />
             <Switch
               status={haveAnErrorMessage4 ? 'Error Message #4' : null}
               on_change={({ checked }) => {
                 setErrorMessage4(checked)
               }}
-              // status_animation="fade-in"
+              // status_no_animation
             />
           </FormRow>
         </FormRow>
@@ -461,13 +460,8 @@ const UpdateDemo = () => {
 }
 
 const UpdateDemoStatus = () => {
-  const {
-    errorA,
-    errorB,
-    setErrorA,
-    setErrorB,
-    setVisibility,
-  } = React.useContext(Context)
+  const { errorA, errorB, setErrorA, setErrorB, setVisibility } =
+    React.useContext(Context)
 
   return (
     <>

diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -99,7 +99,10 @@ export default class Autocomplete extends React.PureComponent {
       PropTypes.node,
     ]),
     status_state: PropTypes.string,
-    status_animation: PropTypes.string,
+    status_no_animation: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.bool,
+    ]),
     global_status_id: PropTypes.string,
     suffix: PropTypes.oneOfType([
       PropTypes.string,
@@ -238,7 +241,7 @@ export default class Autocomplete extends React.PureComponent {
     keep_value_and_selection: null,
     status: null,
     status_state: 'error',
-    status_animation: null,
+    status_no_animation: null,
     global_status_id: null,
     suffix: null,
     disable_filter: false,
@@ -1444,7 +1447,7 @@ class AutocompleteInstance extends React.PureComponent {
       fixed_position,
       status,
       status_state,
-      status_animation,
+      status_no_animation,
       global_status_id,
       suffix,
       scrollable,
@@ -1655,18 +1658,17 @@ class AutocompleteInstance extends React.PureComponent {
         <span className="dnb-autocomplete__inner" ref={this._ref}>
           <AlignmentHelper />
 
-          {showStatus && (
-            <FormStatus
-              id={id + '-form-status'}
-              global_status_id={global_status_id}
-              label={label}
-              text_id={id + '-status'} // used for "aria-describedby"
-              text={status}
-              status={status_state}
-              animation={status_animation}
-              skeleton={skeleton}
-            />
-          )}
+          <FormStatus
+            show={showStatus}
+            id={id + '-form-status'}
+            global_status_id={global_status_id}
+            label={label}
+            text_id={id + '-status'} // used for "aria-describedby"
+            text={status}
+            status={status_state}
+            no_animation={status_no_animation}
+            skeleton={skeleton}
+          />
 
           <span className="dnb-autocomplete__row">
             <span {...shellParams}>