fix(IconHelp): stable sizing and alignment, add stories and guideline

src/lib/components/iconhelper/IconHelper.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import styled from 'styled-components';
 import { Icon } from '../icon/Icon.component';
+import { fontSize } from '../../style/theme';
 import { Position, Tooltip } from '../tooltip/Tooltip.component';
 
 type IconHelpProps = {
@@ -19,14 +20,18 @@ type IconHelpProps = {
 
 const HelpButton = styled.button`
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${fontSize.base};
+  height: ${fontSize.base};
   background: none;
   border: none;
   padding: 0;
   margin: 0;
   color: inherit;
-  font: inherit;              /* Inherit font sizing */
-  vertical-align: text-bottom;     /* Align with text */
-  line-height: 1;
+  font-size: ${fontSize.base};
+  line-height: 0;
+  vertical-align: -0.125em;
   cursor: default;
   &:focus-visible {
     outline: 2px dashed ${(props) => props.theme.selectedActive};

stories/IconHelp/iconhelp.guideline.mdx

@@ -0,0 +1,53 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
+import * as Stories from './iconhelp.stories';
+
+<Meta name="Guideline" of={Stories} />
+
+# IconHelp
+
+`IconHelp` is a small info icon that reveals a tooltip on hover or focus. Use it to provide secondary information without overloading the interface.
+
+<Canvas of={Stories.Simple} sourceState="none" />
+
+## When to use it
+
+Reach for `IconHelp` whenever a user might have to **guess** what a label, value or concept means. If the wording is not self-explanatory and there is no room — or no need — to spell it out in the layout, an `IconHelp` should be considered.
+
+Typical cases:
+
+- A label or a settings name that uses a domain term (`Object lock`, `Replication policy`, `RPO`).
+- A value whose meaning is not transparent (`Governance`, `Compliance`, `Standard` storage class).
+- A column header, badge, or status that benefits from a one-line definition.
+
+## When not to use it
+
+- **Don't use it as the only way to convey critical information.** A tooltip is hidden by default — anything required to complete a task must remain visible (helper text, error message, inline description).
+- **Don't stack multiple `IconHelp` next to each other.** If a section needs that much explanation, write a short paragraph or link to documentation instead.
+- **Don't replace good labels with an `IconHelp`.** Fix the label first; add help only when the term itself cannot be made clearer.
+- **Don't put long content inside the tooltip.** Keep it to one or two short sentences. For longer explanations, use a dedicated documentation page.
+
+## Explaining values in a key/value list
+
+In summary or detail pages, attach an `IconHelp` only to the values whose meaning is not obvious. Leave plain values (a name, an email, an ID) without one.
+
+<Canvas of={Stories.InKeyValueList} sourceState="none" />
+
+## In a form
+
+In forms, `FormGroup` already exposes a `labelHelpTooltip` prop that renders an `IconHelp` next to the field label — you don't need to add one manually. Use it to clarify:
+
+- **What the field represents** — e.g. _"The name other users will see on your profile."_
+- **The accepted format or validation rule** — e.g. _"Must be 3–32 characters, letters and digits only."_
+- **The impact of the value** — e.g. _"Enabling versioning keeps a copy of every overwrite or delete."_
+
+## Placement
+
+The tooltip defaults to `right`. Pick another placement only when `right` is clipped by the container or overlaps important content.
+
+<Canvas of={Stories.WithPlacement} sourceState="none" />
+
+## Accessibility
+
+- Always pass an `aria-label` that describes _what the tooltip explains_, not just `"Help"`. Example: `aria-label="More info about replication policy"`.
+- The icon renders as a real `<button>`, so it is reachable by keyboard (`Tab`) and the tooltip opens on focus.
+- The tooltip content is the visible text — keep it informative and complete on its own.

stories/IconHelp/iconhelp.stories.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { IconHelp } from '../../src/lib/components/iconhelper/IconHelper';
+import { Text } from '../../src/lib/components/text/Text.component';
+import { Stack } from '../../src/lib/spacing';
+import { Wrapper } from '../common';
+
+export default {
+  title: 'Components/IconHelp',
+  component: IconHelp,
+  decorators: [(story: () => React.ReactNode) => <Wrapper>{story()}</Wrapper>],
+};
+
+export const Simple = {
+  name: 'Simple',
+  render: () => (
+    <Text>
+      Replication policy{' '}
+      <IconHelp
+        tooltipMessage="Defines how objects are replicated across locations."
+        aria-label="More info about replication policy"
+      />
+    </Text>
+  ),
+};
+
+export const WithPlacement = {
+  name: 'Tooltip placement',
+  render: () => (
+    <Stack direction="vertical" gap="r24">
+      <Text>
+        Placement <b>top</b>{' '}
+        <IconHelp
+          placement="top"
+          tooltipMessage="Appears above the icon."
+          aria-label="Top tooltip"
+        />
+      </Text>
+      <Text>
+        Placement <b>right</b> (default){' '}
+        <IconHelp
+          placement="right"
+          tooltipMessage="Appears to the right of the icon."
+          aria-label="Right tooltip"
+        />
+      </Text>
+      <Text>
+        Placement <b>bottom</b>{' '}
+        <IconHelp
+          placement="bottom"
+          tooltipMessage="Appears below the icon."
+          aria-label="Bottom tooltip"
+        />
+      </Text>
+      <Text>
+        Placement <b>left</b>{' '}
+        <IconHelp
+          placement="left"
+          tooltipMessage="Appears to the left of the icon."
+          aria-label="Left tooltip"
+        />
+      </Text>
+    </Stack>
+  ),
+};
+
+const KeyValueRow = ({
+  label,
+  value,
+  helpMessage,
+  helpAriaLabel,
+}: {
+  label: string;
+  value: React.ReactNode;
+  helpMessage?: React.ReactNode;
+  helpAriaLabel?: string;
+}) => (
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateColumns: '200px 1fr',
+      alignItems: 'baseline',
+      gap: '16px',
+      padding: '6px 0',
+    }}
+  >
+    <Text color="textSecondary">{label}</Text>
+    <Text>
+      {value}
+      {helpMessage && (
+        <>
+          {' '}
+          <IconHelp
+            tooltipMessage={helpMessage}
+            aria-label={helpAriaLabel ?? `More info about ${label}`}
+          />
+        </>
+      )}
+    </Text>
+  </div>
+);
+
+export const InKeyValueList = {
+  name: 'Explaining values',
+  render: () => (
+    <div style={{ maxWidth: 560 }}>
+      <KeyValueRow label="Bucket name" value="prod-customer-assets" />
+      <KeyValueRow
+        label="Versioning"
+        value="Enabled"
+        helpMessage="Once enabled, every overwrite or delete keeps the previous version."
+      />
+      <KeyValueRow
+        label="Object lock"
+        value="Governance"
+        helpMessage="Governance mode allows privileged users to change retention; Compliance mode does not."
+      />
+      <KeyValueRow
+        label="Storage class"
+        value="Standard"
+        helpMessage="Affects durability, latency and pricing of stored objects."
+      />
+      <KeyValueRow label="Region" value="us-east-1" />
+    </div>
+  ),
+};