fix(ToggleButtonGroup): omit rendering label when not given (#2929)

dnbexperience · Nov 22, 2023 · 26f683e · 26f683e
1 parent 01a01f4
commit 26f683e
Show file tree

Hide file tree

Showing 5 changed files with 494 additions and 445 deletions.
diff --git a/...age_snapshots__/tabs-for-sbanken-have-to-match-horizontal-aligned-tabs.snap.png b/...age_snapshots__/tabs-for-sbanken-have-to-match-horizontal-aligned-tabs.snap.png
diff --git a/.../__image_snapshots__/tabs-for-ui-have-to-match-horizontal-aligned-tabs.snap.png b/.../__image_snapshots__/tabs-for-ui-have-to-match-horizontal-aligned-tabs.snap.png
diff --git a/packages/dnb-eufemia/src/components/toggle-button/ToggleButtonGroup.js b/packages/dnb-eufemia/src/components/toggle-button/ToggleButtonGroup.js
@@ -287,11 +287,13 @@ export default class ToggleButtonGroup extends React.PureComponent {
       onChange: this.onChangeHandler,
     }
 
+    const Fieldset = label ? 'fieldset' : 'div'
+
     return (
       <ToggleButtonGroupContext.Provider value={context}>
         <div className={classes}>
           <AlignmentHelper />
-          <fieldset>
+          <Fieldset>
             <Flex.Container
               align="baseline"
               direction={
@@ -301,13 +303,15 @@ export default class ToggleButtonGroup extends React.PureComponent {
               }
               spacing={vertical ? 'x-small' : undefined}
             >
-              <FormLabel
-                element="legend"
-                id={id + '-label'}
-                srOnly={label_sr_only}
-              >
-                {label}
-              </FormLabel>
+              {label && (
+                <FormLabel
+                  element="legend"
+                  id={id + '-label'}
+                  srOnly={label_sr_only}
+                >
+                  {label}
+                </FormLabel>
+              )}
 
               <span
                 id={id}
@@ -343,7 +347,7 @@ export default class ToggleButtonGroup extends React.PureComponent {
                 </span>
               </span>
             </Flex.Container>
-          </fieldset>
+          </Fieldset>
         </div>
       </ToggleButtonGroupContext.Provider>
     )