[Bug]: Adding toggletip to form fields causes label and field misalignment

[silverclaru]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

1.66.0 (but reproducible on 1.71.0 as well)

React version

18.2.0

Description

When adding toggletips to form fields through the labelText prop, styling is slightly different than for form fields without a toggletip.

I'm not sure if labelText is the recommended way of adding a tooltip to a form field. I could not really find guidance for this. If it is the recommended way, it should work (look good) out of the box, I feel like.

Reproduction/example

https://stackblitz.com/edit/github-bimuxr?file=src%2FApp.jsx

Steps to reproduce

The screenshot above was created through the following source code.

import {
  Button,
  FormLabel,
  TextInput,
  Toggletip,
  ToggletipButton,
  ToggletipContent,
} from '@carbon/react';
import { Information } from '@carbon/react/icons';
import React from 'react';

const LabelWithTooltip = (props) => (
  <div>
    <FormLabel>{props.label}</FormLabel>
    {props.tooltip && (
      <Toggletip>
        <ToggletipButton label="Show additional information">
          <Information />
        </ToggletipButton>
        <ToggletipContent>{props.tooltip}</ToggletipContent>
      </Toggletip>
    )}
  </div>
);

export default function App() {
  return (
    <div style={{ padding: '1rem', display: 'flex', gap: '8px' }}>
      <TextInput labelText={<LabelWithTooltip label="Field A" />} />
      <TextInput
        labelText={<LabelWithTooltip label="Field B" tooltip="B's tooltip" />}
      />
    </div>
  );
}

I was made aware that technically the <FormLabel> is not required to get the correct text styling. However, omitting it, leads to the icon being displayed right next to the label and not with some space in between as in the screenshot.

I also did try something like this:

<Stack gap={3}>
    <LabelWithTooltip .../>
    <TextInput .../>
</Stack>

But that still leads to a similar result although the misalignment is more subtle (on my screen 2px vs 4 px).

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems