Fix hidden Switch label spacing

src/components/Switch/Switch.stories.tsx

@@ -167,6 +167,15 @@ export const HiddenLabel: Story = {
   render: (args: SwitchProps) => <SwitchStory {...args} />,
 };
 
+export const HiddenLabelWithoutDescription: Story = {
+  args: {
+    description: undefined,
+    isLabelHidden: true,
+    label: 'Enable notifications',
+  },
+  render: (args: SwitchProps) => <SwitchStory {...args} />,
+};
+
 export const LabelIcon: Story = {
   args: {
     label: 'Security alerts',

src/components/Switch/Switch.test.tsx

@@ -175,6 +175,45 @@ describe('Switch', () => {
     ).toBeNull();
   });
 
+  it.each(['default', 'spread'] as const)(
+    'does not reserve label space with %s spacing when the label is hidden',
+    labelSpacing => {
+      render(
+        <Switch
+          data-testid="notifications"
+          isLabelHidden
+          isSelected={false}
+          label="Notifications"
+          labelSpacing={labelSpacing}
+          onChange={() => {}}
+        />,
+      );
+
+      expect(
+        screen.getByRole('switch', {name: 'Notifications'}),
+      ).toBeInTheDocument();
+      const control = getControl('notifications');
+      /* eslint-disable testing-library/no-node-access -- the regression is the
+         row's direct-child layout: only the control may remain in flex flow. */
+      const row = control.parentElement;
+      const field = row?.parentElement;
+      const visuallyHiddenClass = css({position: 'absolute'});
+      const hiddenLabel = screen
+        .getByText('Notifications')
+        .closest(`[class~="${visuallyHiddenClass}"]`);
+
+      expect(hiddenLabel?.parentElement).toBe(row);
+      expect(
+        [...(row?.children ?? [])].filter(
+          child => !child.classList.contains(visuallyHiddenClass),
+        ),
+      ).toEqual([control]);
+      expect(field).toHaveClass(css({w: 'fit-content'}));
+      expect(row).not.toHaveClass(css({w: 'full'}));
+      /* eslint-enable testing-library/no-node-access */
+    },
+  );
+
   it('renders the label before the switch when labelPosition is start', () => {
     render(
       <Switch

src/components/Switch/Switch.tsx

@@ -154,9 +154,9 @@ export function Switch({
 }: SwitchProps): React.JSX.Element {
   const size = useResolvedSize(sizeProp);
   const inputId = useId();
-  const descriptionID = isNonEmptyReactNode(description)
-    ? `${inputId}-description`
-    : undefined;
+  const hasDescription = isNonEmptyReactNode(description);
+  const hasVisibleLabelContent = !isLabelHidden || hasDescription;
+  const descriptionID = hasDescription ? `${inputId}-description` : undefined;
   const statusMessageID = getStatusMessageID(inputId, status);
   const describedBy = getDescribedBy(descriptionID, statusMessageID);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -166,7 +166,7 @@ export function Switch({
     !effectiveDisabled && (isReadOnly || fieldset?.isReadOnly === true);
   const classes = switchRecipe({
     size,
-    labelSpacing,
+    labelSpacing: hasVisibleLabelContent ? labelSpacing : 'default',
     isSelected,
     isDisabled: effectiveDisabled,
     isReadOnly: effectiveReadOnly,
@@ -262,21 +262,28 @@ export function Switch({
       ) : null}
     </>
   );
-  const labelNode = (
-    <div className={classes.labelWrapper}>
+  const labelElement = isLabelHidden ? (
+    <VisuallyHidden>
       <label className={classes.label} htmlFor={inputId}>
-        {isLabelHidden ? (
-          <VisuallyHidden>{labelContent}</VisuallyHidden>
-        ) : (
-          labelContent
-        )}
+        {labelContent}
       </label>
-      {isNonEmptyReactNode(description) ? (
+    </VisuallyHidden>
+  ) : (
+    <label className={classes.label} htmlFor={inputId}>
+      {labelContent}
+    </label>
+  );
+  const labelNode = hasVisibleLabelContent ? (
+    <div className={classes.labelWrapper}>
+      {labelElement}
+      {hasDescription ? (
         <Text as="span" color="secondary" id={descriptionID} type="supporting">
           {description}
         </Text>
       ) : null}
     </div>
+  ) : (
+    labelElement
   );
 
   return (