fix(ProgressIndicator): align label spacing when size is small and …

…use span instead of divs to support inline elements (#3344)

After:
<img width="180" alt="Screenshot 2024-02-27 at 08 27 20"
src="https://github.com/dnbexperience/eufemia/assets/1501870/26941654-f3ab-4aa7-9959-1f0691472c1f">

Before:
<img width="189" alt="Screenshot 2024-02-27 at 08 27 40"
src="https://github.com/dnbexperience/eufemia/assets/1501870/6908e404-02a3-4e0c-a65d-88844e33eb2c">

packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -2373,10 +2373,13 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 }
 
 .dnb-progress-indicator--horizontal .dnb-progress-indicator__label {
-  margin: 0 1rem;
+  padding-left: 1rem;
+}
+.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label {
+  padding-left: 0.5rem;
 }
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
-  margin-top: 0.5rem;
+  padding-top: 0.5rem;
 }
 .dnb-progress-indicator__circular {
   position: relative;

packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap

@@ -614,10 +614,13 @@ button.dnb-button::-moz-focus-inner {
 }
 
 .dnb-progress-indicator--horizontal .dnb-progress-indicator__label {
-  margin: 0 1rem;
+  padding-left: 1rem;
+}
+.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label {
+  padding-left: 0.5rem;
 }
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
-  margin-top: 0.5rem;
+  padding-top: 0.5rem;
 }
 .dnb-progress-indicator__circular {
   position: relative;

packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.js

@@ -124,9 +124,9 @@ export default class ProgressIndicator extends React.PureComponent {
       class: _className,
       children,
       title,
-      progress: _progress, //eslint-disable-line
-      visible: _visible, //eslint-disable-line
-      complete: _complete, //eslint-disable-line
+      progress: _progress, // eslint-disable-line
+      visible: _visible, // eslint-disable-line
+      complete: _complete, // eslint-disable-line
       ...attributes
     } = props
 
@@ -142,13 +142,14 @@ export default class ProgressIndicator extends React.PureComponent {
     validateDOMAttributes(this.props, params)
 
     return (
-      <div
+      <span
         className={classnames(
           'dnb-progress-indicator',
           visible && 'dnb-progress-indicator--visible',
           complete && 'dnb-progress-indicator--complete',
           type === 'linear' && 'dnb-progress-indicator--full-width',
           label_direction && `dnb-progress-indicator--${label_direction}`,
+          size && `dnb-progress-indicator--${size}`,
           isTrue(no_animation) && 'dnb-progress-indicator--no-animation',
           createSpacingClasses(props),
           className,
@@ -179,11 +180,11 @@ export default class ProgressIndicator extends React.PureComponent {
           />
         )}
         {indicatorLabel && (
-          <div className="dnb-progress-indicator__label">
-            <p className="dnb-p">{indicatorLabel}</p>
-          </div>
+          <span className="dnb-progress-indicator__label dnb-p">
+            {indicatorLabel}
+          </span>
         )}
-      </div>
+      </span>
     )
   }
 }

packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.js

@@ -174,7 +174,7 @@ export default class ProgressIndicatorCircular extends React.PureComponent {
     validateDOMAttributes(this.props, params)
 
     return (
-      <div
+      <span
         className={classnames(
           'dnb-progress-indicator__circular',
           size && `dnb-progress-indicator__circular--${size}`,
@@ -211,7 +211,7 @@ export default class ProgressIndicatorCircular extends React.PureComponent {
             ref={this._refLight}
           />
         )}
-      </div>
+      </span>
     )
   }
 }

packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.js

@@ -87,14 +87,14 @@ export default class ProgressIndicatorLinear extends React.PureComponent {
     validateDOMAttributes(this.props, params)
 
     return (
-      <div
+      <span
         className={classnames(
           'dnb-progress-indicator__linear',
           size && `dnb-progress-indicator__linear--${size}`
         )}
         {...params}
       >
-        <div
+        <span
           className={classnames(
             'dnb-progress-indicator__linear__bar',
             hasProgressValue &&
@@ -105,14 +105,14 @@ export default class ProgressIndicatorLinear extends React.PureComponent {
           style={hasProgressValue ? { transform } : {}}
         />
         {!hasProgressValue && (
-          <div
+          <span
             className={classnames(
               'dnb-progress-indicator__linear__bar',
               'dnb-progress-indicator__linear__bar2-animation'
             )}
           />
         )}
-      </div>
+      </span>
     )
   }
 }

packages/dnb-eufemia/src/components/progress-indicator/__tests__/ProgressIndicator.test.tsx

@@ -142,6 +142,54 @@ describe('Circular ProgressIndicator component', () => {
     const indicator = screen.getByRole('progressbar')
     expect(indicator.getAttribute('title')).toBe(title)
   })
+
+  it('should support spacing props', () => {
+    render(
+      <ProgressIndicator type="circular" progress={1} top="2rem" hidden />
+    )
+
+    const indicator = document.querySelector('.dnb-progress-indicator')
+    expect(Array.from(indicator.classList)).toEqual([
+      'dnb-progress-indicator',
+      'dnb-space__top--large',
+      'dnb-progress-indicator--visible',
+      'dnb-progress-indicator--horizontal',
+      'dnb-progress-indicator--default',
+    ])
+  })
+
+  it('should support custom attributes', () => {
+    render(
+      <ProgressIndicator type="circular" progress={1} top="2rem" hidden />
+    )
+
+    const indicator = document.querySelector('.dnb-progress-indicator')
+    const attributes = Array.from(indicator.attributes).map(
+      (attr) => attr.name
+    )
+    expect(attributes).toEqual(['class', 'hidden'])
+  })
+
+  it('should use span elements', () => {
+    const { container } = render(
+      <ProgressIndicator type="circular" progress={1} show_label />
+    )
+
+    expect(container.querySelectorAll('div')).toHaveLength(0)
+    expect(container.querySelectorAll('span')).toHaveLength(3)
+  })
+
+  it('should use span for label element', () => {
+    // Because it does not have any advantages over a label element (VoiceOver does not read it as a label)
+
+    const { container } = render(
+      <ProgressIndicator type="circular" progress={1} show_label />
+    )
+
+    expect(
+      container.querySelector('.dnb-progress-indicator__label').tagName
+    ).toBe('SPAN')
+  })
 })
 
 describe('Linear ProgressIndicator component', () => {
@@ -282,19 +330,78 @@ describe('Linear ProgressIndicator component', () => {
     const indicator = screen.getByRole('progressbar')
     expect(indicator.getAttribute('title')).toBe(title)
   })
+
+  it('should support spacing props', () => {
+    render(
+      <ProgressIndicator type="linear" progress={1} top="2rem" hidden />
+    )
+
+    const indicator = document.querySelector('.dnb-progress-indicator')
+    expect(Array.from(indicator.classList)).toEqual([
+      'dnb-progress-indicator',
+      'dnb-space__top--large',
+      'dnb-progress-indicator--visible',
+      'dnb-progress-indicator--horizontal',
+      'dnb-progress-indicator--default',
+      'dnb-progress-indicator--full-width',
+    ])
+  })
+
+  it('should support custom attributes', () => {
+    render(
+      <ProgressIndicator type="linear" progress={1} top="2rem" hidden />
+    )
+
+    const indicator = document.querySelector('.dnb-progress-indicator')
+    const attributes = Array.from(indicator.attributes).map(
+      (attr) => attr.name
+    )
+    expect(attributes).toEqual(['class', 'hidden'])
+  })
+
+  it('should use span elements', () => {
+    const { container } = render(
+      <ProgressIndicator type="linear" progress={1} show_label />
+    )
+
+    expect(container.querySelectorAll('div')).toHaveLength(0)
+    expect(container.querySelectorAll('span')).toHaveLength(4)
+  })
+
+  it('should use span for label element', () => {
+    // Because it does not have any advantages over a label element (VoiceOver does not read it as a label)
+
+    const { container } = render(
+      <ProgressIndicator type="linear" progress={1} show_label />
+    )
+
+    expect(
+      container.querySelector('.dnb-progress-indicator__label').tagName
+    ).toBe('SPAN')
+  })
 })
 
 describe('ProgressIndicator ARIA', () => {
   it('should validate with ARIA rules on type circular', async () => {
     const Comp = render(
-      <ProgressIndicator {...props} type="circular" progress={50} />
+      <ProgressIndicator
+        {...props}
+        type="circular"
+        progress={50}
+        show_label
+      />
     )
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
 
   it('should validate with ARIA rules on type linear', async () => {
     const Comp = render(
-      <ProgressIndicator {...props} type="linear" progress={50} />
+      <ProgressIndicator
+        {...props}
+        type="linear"
+        progress={50}
+        show_label
+      />
     )
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })

packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.tsx.snap

@@ -46,10 +46,13 @@ exports[`ProgressIndicator scss has to match style dependencies css 1`] = `
 }
 
 .dnb-progress-indicator--horizontal .dnb-progress-indicator__label {
-  margin: 0 1rem;
+  padding-left: 1rem;
+}
+.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label {
+  padding-left: 0.5rem;
 }
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
-  margin-top: 0.5rem;
+  padding-top: 0.5rem;
 }
 .dnb-progress-indicator__circular {
   position: relative;

packages/dnb-eufemia/src/components/progress-indicator/stories/ProgressIndicator.stories.tsx

@@ -6,7 +6,7 @@
 import React from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 
-import { ProgressIndicator } from '../..'
+import { Button, ProgressIndicator } from '../..'
 
 export default {
   title: 'Eufemia/Components/ProgressIndicator',
@@ -38,6 +38,13 @@ export const ProgressIndicatorSandbox = () => (
   </Wrapper>
 )
 
+export const ProgressIndicatorLabel = () => (
+  <>
+    <Button>Button</Button>
+    <ProgressIndicator left size="small" show_label progress={60} />
+  </>
+)
+
 const ProgressIndicatorCircular = () => {
   const [visible, setVisible] = React.useState(true)
   React.useEffect(() => {

packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss

@@ -44,11 +44,14 @@
   }
 
   &--horizontal &__label {
-    margin: 0 1rem;
+    padding-left: 1rem;
+  }
+  &--horizontal#{&}--small &__label {
+    padding-left: 0.5rem;
   }
 
   &--vertical &__label {
-    margin-top: 0.5rem;
+    padding-top: 0.5rem;
   }
 
   // circular variant