diff --git a/package.json b/package.json index 2c1b2748a..2b5138009 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@homebound/beam", - "version": "2.328.0", + "version": "2.329.0", "author": "Homebound", "license": "MIT", "main": "dist/index.js", diff --git a/src/components/Label.tsx b/src/components/Label.tsx index 84e817edc..1f96b1ea2 100644 --- a/src/components/Label.tsx +++ b/src/components/Label.tsx @@ -1,8 +1,11 @@ -import React, { LabelHTMLAttributes } from "react"; +import React, { LabelHTMLAttributes, ReactNode } from "react"; import { VisuallyHidden } from "react-aria"; -import { Css } from "src/Css"; +import { Css, Font, Only, Palette, Xss } from "src/Css"; +import { Icon } from "src"; -interface LabelProps { +type LabelXss = Font | "color"; + +interface LabelProps { // We don't usually have `fooProps`-style props, but this is for/from react-aria labelProps?: LabelHTMLAttributes; label: string; @@ -11,22 +14,38 @@ interface LabelProps { hidden?: boolean; contrast?: boolean; multiline?: boolean; + tooltip?: ReactNode; + // Removes margin bottom if true - This is different from InlineLabel. InlineLabel expects to be rendered visually within the field element. Rather just on the same line. + inline?: boolean; + xss?: X; } /** An internal helper component for rendering form labels. */ -export const Label = React.memo((props: LabelProps) => { - const { labelProps, label, hidden, suffix, contrast = false, ...others } = props; +function LabelComponent, X>>(props: LabelProps) { + const { labelProps, label, hidden, suffix, contrast = false, tooltip, inline, xss, ...others } = props; const labelEl = ( -