@agregio-solutions/design-system 1.90.1 → 1.92.0

package/dist/packages/components/Tooltip/doc.md

@@ -0,0 +1,206 @@
+# Tooltip
+
+## Props
+
+The complete Props documentation with JS doc for this component is available at this path:
+
+node_modules/@agregio-solutions/design-system/dist/packages/components/Tooltip/Tooltip.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import Tooltip, { TooltipTrigger } from "./Tooltip";
+import Button from "../Button/Button";
+import { useState } from "react";
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    label: "Create a new user",
+    children: <Button iconLeft="add" mode="secondary" />,
+  },
+};
+
+export const WithTooltipTrigger: Story = {
+  args: {
+    ...Playground.args,
+    defaultOpen: true,
+    children: <TooltipTrigger>Hover me</TooltipTrigger>,
+  },
+};
+
+export const FocusOnly: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  args: {
+    ...Playground.args,
+    trigger: "focus",
+  },
+};
+
+export const Open: Story = {
+  args: {
+    ...Playground.args,
+    defaultOpen: true,
+  },
+};
+
+export const MultiLine: Story = {
+  args: {
+    ...Playground.args,
+    label: "Line 1\nLine 2\nLine 3",
+    defaultOpen: true,
+  },
+};
+
+export const Fluid: Story = {
+  args: {
+    ...Playground.args,
+    label:
+      "This is a much longer tooltip label that would normally be truncated",
+    defaultOpen: true,
+    fluid: true,
+  },
+};
+
+export const HideArrow: Story = {
+  args: {
+    ...Playground.args,
+    defaultOpen: true,
+    hideArrow: true,
+  },
+};
+
+export const AllPlacements: Story = {
+  render: () => {
+    return (
+      <div
+        style={{ display: "flex", gap: 180, flexWrap: "wrap", padding: 100 }}
+      >
+        {["top", "right", "bottom", "left"].map((placement) => (
+          <Tooltip
+            key={placement}
+            label={placement}
+            isOpen
+            placement={placement as any}
+          >
+            <Button iconLeft="add" mode="secondary" />
+          </Tooltip>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  args: {
+    ...Playground.args,
+    isDisabled: true,
+  },
+};
+
+export const Controlled: Story = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  render: () => {
+    const ParentComponent = () => {
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        <Tooltip
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          label="Create a new user"
+        >
+          <Button iconLeft="add" mode="secondary" />
+        </Tooltip>
+      );
+    };
+    return <ParentComponent />;
+  },
+};
+```
+
+## Developer notes
+
+Here are the notes available for the developer on the built Storybook, you can read them to understand the component and how to use it.
+
+```mdx
+import {
+  Canvas,
+  Meta,
+  Stories,
+  Controls,
+  Source,
+} from "@storybook/addon-docs/blocks";
+
+import * as Tooltip from "./Tooltip.stories";
+
+<Meta of={Tooltip} />
+
+# Tooltip
+
+<Canvas of={Tooltip.Playground} />
+
+<Controls of={Tooltip.Playground} />
+
+A tooltip displays a description of an element on hover or focus.
+
+The HTML title attribute can be used to create a tooltip, but it cannot be styled.
+Custom styled tooltips can be hard to build in an accessible way.
+TooltipTrigger and Tooltip help build fully accessible tooltips that comes with the Design System styles.
+
+- **Accessible** – The trigger element is automatically associated with the tooltip via aria-describedby. Tooltips are displayed when an element receives focus.
+- **Hover behavior** – Tooltips display after a global delay on hover of the first tooltip, with no delay on subsequent tooltips to avoid unintended flickering. Emulated hover events on touch devices are ignored.
+- **Positioning** – The tooltip is positioned relative to the trigger element, and automatically flips and adjusts to avoid overlapping with the edge of the browser window.
+
+**Note:** Tooltips are not shown on touch screen interactions. Ensure that your UI is usable without tooltips, or use an alternative component to show information in an adjacent element.
+
+Also, if you need to display more complex content (title, links, etc.), check out the Popover component that is responsible for exactly that!
+
+## Usage with a Button
+
+The most common use case is to use a Button as the trigger element.
+
+<Canvas of={Tooltip.Playground} />
+
+## Usage with `TooltipTrigger`
+
+In the case where you don't want to use a Button as the trigger element, you can use `TooltipTrigger` to wrap your component.
+
+Please not that you cannot pass a Button (or other interactive component) to the `children` prop of `TooltipTrigger`.
+This is because the `TooltipTrigger` itself is an unstyled Button that serves as a trigger for the tooltip to show.
+
+<Canvas of={Tooltip.WithTooltipTrigger} />
+
+## Controlled / Uncontrolled mode
+
+The open state of the tooltip can be controlled via the `defaultOpen` (uncontrolled mode) and `isOpen` (controlled mode) props.
+
+Below is an example of how to use the "controlled" mode.
+
+<Canvas of={Tooltip.Controlled} />
+```

package/dist/packages/components/YearMonthPicker/YearMonthPicker.d.ts

@@ -80,6 +80,10 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      * @default "ascending"
      */
     sortYears?: "ascending" | "descending";
+    /**
+     * When true, increases the dropdown max-height from 200px to 400px.
+     */
+    tallDropdown?: boolean;
 };
 declare const YearMonthPicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
     /**
@@ -148,5 +152,9 @@ declare const YearMonthPicker: React.ForwardRefExoticComponent<Pick<LabelProps,
      * @default "ascending"
      */
     sortYears?: "ascending" | "descending";
+    /**
+     * When true, increases the dropdown max-height from 200px to 400px.
+     */
+    tallDropdown?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default YearMonthPicker;