fix: refactor GlobalStatus markup to use sea-green section + enhance …

…animation UX
dnbexperience · Oct 19, 2021 · 67c53ec · 67c53ec
1 parent c0d3797
commit 67c53ec
Show file tree

Hide file tree

Showing 9 changed files with 535 additions and 449 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.js
@@ -22,6 +22,7 @@ export const GlobalStatusError = () => (
   show="true"
   autoscroll="false"
   no_animation="true"
+  omit_set_focus="true"
   id="demo-1"
 />
 `}
@@ -39,6 +40,7 @@ export const GlobalStatusInfo = () => (
   show="true"
   autoscroll="false"
   no_animation="true"
+  omit_set_focus="true"
   id="demo-4"
 />
 `}

diff --git a/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js b/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js
@@ -17,6 +17,7 @@ import {
   Button,
   FormRow,
   FormSet,
+  Autocomplete,
 } from '@dnb/eufemia/src/components'
 import {
   H2,
@@ -49,10 +50,19 @@ export const ComponentAsLabel = () => {
         </ToggleButton>
 
         <FormRow>
-          <Input label={<Component />} status={status} />
+          <Input
+            label={<Component />}
+            status={status ? status + '1' : undefined}
+          />
         </FormRow>
-        <Input label={<Component />} status={status} />
-        <Input label={<Component />} status={status} />
+        <Input
+          label={<Component />}
+          status={status ? status + '2' : undefined}
+        />
+        <Autocomplete
+          label={<Component />}
+          status={status ? status + '3' : undefined}
+        />
       </FormSet>
     </>
   )
@@ -249,7 +259,7 @@ const ModalExample = () => (
   </Modal>
 )
 
-const SimulateSteps = () => {
+export const SimulateSteps = () => {
   const [count, toggleUpdateStatus] = React.useState(0)
   return (
     <>

diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js
@@ -27,6 +27,7 @@ import {
   spacingPropTypes,
   createSpacingClasses,
 } from '../space/SpacingHelper'
+import Hr from '../../elements/Hr'
 import GlobalStatusController, {
   GlobalStatusInterceptor,
 } from './GlobalStatusController'
@@ -194,7 +195,6 @@ export default class GlobalStatus extends React.PureComponent {
   constructor(props) {
     super(props)
 
-    this._mainRef = React.createRef()
     this._wrapperRef = React.createRef()
     this._shellRef = React.createRef()
 
@@ -728,7 +728,7 @@ export default class GlobalStatus extends React.PureComponent {
     const noAnimation = isTrue(no_animation)
     const itemsToRender = props.items || []
     const contentToRender = GlobalStatus.getContent(props)
-    const style = state === 'info' ? null : 'fire-red'
+    const style = state === 'info' ? 'sea-green' : 'fire-red'
 
     /**
      * Show aria-live="assertive" when:
@@ -745,7 +745,6 @@ export default class GlobalStatus extends React.PureComponent {
      */
 
     const params = {
-      element: 'div',
       className: classnames(
         'dnb-global-status',
         `dnb-global-status--${state}`,
@@ -775,18 +774,22 @@ export default class GlobalStatus extends React.PureComponent {
     const renderedContent = (
       <div className="dnb-global-status__content">
         {title !== false && (
-          <p className="dnb-p dnb-global-status__title" lang={lang}>
-            <span className="dnb-global-status__icon">{iconToRender}</span>
-            {titleToRender}
-            {!isTrue(hide_close_button) && (
-              <CloseButton
-                className="dnb-global-status__close-button"
-                on_click={this.closeHandler}
-                text={close_text}
-                title={close_text}
-              />
-            )}
-          </p>
+          <Section element="div" style_type={style}>
+            <p className="dnb-p dnb-global-status__title" lang={lang}>
+              <span className="dnb-global-status__icon">
+                {iconToRender}
+              </span>
+              {titleToRender}
+              {!isTrue(hide_close_button) && (
+                <CloseButton
+                  className="dnb-global-status__close-button"
+                  on_click={this.closeHandler}
+                  text={close_text}
+                  title={close_text}
+                />
+              )}
+            </p>
+          </Section>
         )}
         {hasContent && (
           <Section
@@ -802,19 +805,20 @@ export default class GlobalStatus extends React.PureComponent {
               )}
               {renderedItems}
             </div>
+            <Hr fullscreen />
           </Section>
         )}
       </div>
     )
 
     return (
       <div {...wrapperParams} ref={this._wrapperRef}>
-        <Section style_type={style} {...params} ref={this._mainRef}>
+        <section {...params}>
           <div className="dnb-global-status__shell" ref={this._shellRef}>
             {(isAnimating || keepContentVisible || isActive) &&
               renderedContent}
           </div>
-        </Section>
+        </section>
       </div>
     )
   }