@utilitywarehouse/hearth-react 0.34.4 → 0.34.6

package/public/llms/components/body-text.md

@@ -179,6 +179,31 @@ overflow).
 </Flex>
 ```
 
+## Equalize line-height
+
+The default line-height adds space below the glyphs, which is usually what
+you want, but can throw off alignment when text is placed next to other text
+in a bottom-aligned row — for example a large amount next to a smaller
+qualifier. Use the `equalizeLineHeight` prop to override the line-height to
+`1`, regardless of `size`, so the text sits flush with its neighbour.
+
+```tsx
+<Flex direction="column" gap="400">
+  <Flex direction="row" alignItems="end" gap="50">
+    <BodyText size="xl" weight="bold">
+      £42.00
+    </BodyText>
+    <BodyText size="sm">/month</BodyText>
+  </Flex>
+  <Flex direction="row" alignItems="end" gap="50">
+    <BodyText size="xl" weight="bold" equalizeLineHeight>
+      £42.00
+    </BodyText>
+    <BodyText size="sm">/month</BodyText>
+  </Flex>
+</Flex>
+```
+
 ## Paragraph Spacing
 
 The `paragraphSpacing` prop aligns with the auto spacing between paragraphs in
@@ -220,11 +245,12 @@ This component is based on the `p` element and supports the following common pro
 - Text wrap
 - Text transform
 
-| Prop               | Type                                            | Default   | Description                                                                                                                                                                                                                           |
-| ------------------ | ----------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `as`               | `"span" \| "div" \| "label" \| "p"`             | `p`       | Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`.                                                                                        |
-| `asChild`          | `boolean`                                       | —         | Change the default rendered element for the one passed as a child, merging their props and behavior.                                                                                                                                  |
-| `size`             | `Responsive<"sm" \| "md" \| "lg" \| "xl">`      | `md`      | Set the text size styles.                                                                                                                                                                                                             |
-| `weight`           | `Responsive<"regular" \| "semibold" \| "bold">` | `regular` | Set the font-weight                                                                                                                                                                                                                   |
-| `truncate`         | `boolean`                                       | —         | If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow). |
-| `paragraphSpacing` | `boolean`                                       | —         | If true, the text will have a bottom margin.                                                                                                                                                                                          |
+| Prop                 | Type                                            | Default   | Description                                                                                                                                                                                                                           |
+| -------------------- | ----------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `as`                 | `"span" \| "div" \| "label" \| "p"`             | `p`       | Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`.                                                                                        |
+| `asChild`            | `boolean`                                       | —         | Change the default rendered element for the one passed as a child, merging their props and behavior.                                                                                                                                  |
+| `size`               | `Responsive<"sm" \| "md" \| "lg" \| "xl">`      | `md`      | Set the text size styles.                                                                                                                                                                                                             |
+| `weight`             | `Responsive<"regular" \| "semibold" \| "bold">` | `regular` | Set the font-weight                                                                                                                                                                                                                   |
+| `truncate`           | `boolean`                                       | —         | If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow). |
+| `paragraphSpacing`   | `boolean`                                       | —         | If true, the text will have a bottom margin.                                                                                                                                                                                          |
+| `equalizeLineHeight` | `boolean`                                       | —         | If true, overrides the line-height to `1`, regardless of `size` — useful when the default line-height affects layout (e.g. single-line text in a fixed-height container).                                                             |

package/public/llms/components/button.md

@@ -150,9 +150,11 @@ Disabled buttons use `aria-disabled`, rather than `disabled`, so that they are
 still focusable when using the keyboard. This means that screen readers are
 still able to find the button, with the insight that it is disabled and that
 there is perhaps an action which needs to be taken, rather than not knowing
-there is a button there at all. The `onClick` handler will be disabled, however
-you will need to make sure you disable any other expected actions, including
-when using `type="submit"`.
+there is a button there at all. While disabled or `loading`, the button's
+`onClick` handler isn't called and its default action is cancelled, so a
+`type="submit"` button won't submit its form and an `asChild` link won't
+navigate on click or middle-click. A link can still be opened from the browser's
+context menu, so remove its `href` while disabled if that matters.
 
 ## Variants
 

package/public/llms/components/detail-text.md

@@ -78,6 +78,29 @@ When using `BodyText` on a darker background, specifically `uwPurple` &
 </Flex>
 ```
 
+## Equalize line-height
+
+The default line-height adds space below the glyphs, which is usually what
+you want, but can throw off alignment when text is placed next to other text
+in a bottom-aligned row — for example a large amount next to a smaller
+qualifier. Use the `equalizeLineHeight` prop to override the line-height to
+`1`, regardless of `size`, so the text sits flush with its neighbour.
+
+```tsx
+<Flex direction="column" gap="400">
+  <Flex direction="row" alignItems="end" gap="50">
+    <DetailText size="2xl">£42.00</DetailText>
+    <BodyText size="sm">/month</BodyText>
+  </Flex>
+  <Flex direction="row" alignItems="end" gap="50">
+    <DetailText size="2xl" equalizeLineHeight>
+      £42.00
+    </DetailText>
+    <BodyText size="sm">/month</BodyText>
+  </Flex>
+</Flex>
+```
+
 ## API
 
 This component is based on the `span` element and supports the following common props:
@@ -87,10 +110,11 @@ This component is based on the `span` element and supports the following common
 - Text align
 - Text wrap
 
-| Prop       | Type                                                                  | Default | Description                                                                                          |
-| ---------- | --------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `asChild`  | `boolean`                                                             | —       | Change the default rendered element for the one passed as a child, merging their props and behavior. |
-| `size`     | `Responsive<"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">` | `md`    | Set the text size styles.                                                                            |
-| `color`    | `(Responsive<"text" \| "valid" \| "invalid"> & string)`               | `text`  | Set the text color                                                                                   |
-| `inverted` | `boolean`                                                             | —       | Inverts the component colours, for use on darker surface colours.                                    |
-| `as`       | `"span" \| "div" \| "p"`                                              | —       | Renders a `span` element. This is the default. Renders a `div` element. Renders a `p` element.       |
+| Prop                 | Type                                                                  | Default | Description                                                                                                                                                               |
+| -------------------- | --------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `asChild`            | `boolean`                                                             | —       | Change the default rendered element for the one passed as a child, merging their props and behavior.                                                                      |
+| `size`               | `Responsive<"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">` | `md`    | Set the text size styles.                                                                                                                                                 |
+| `color`              | `(Responsive<"text" \| "valid" \| "invalid"> & string)`               | `text`  | Set the text color                                                                                                                                                        |
+| `inverted`           | `boolean`                                                             | —       | Inverts the component colours, for use on darker surface colours.                                                                                                         |
+| `equalizeLineHeight` | `boolean`                                                             | —       | If true, overrides the line-height to `1`, regardless of `size` — useful when the default line-height affects layout (e.g. single-line text in a fixed-height container). |
+| `as`                 | `"span" \| "div" \| "p"`                                              | —       | Renders a `span` element. This is the default. Renders a `div` element. Renders a `p` element.                                                                            |

package/public/llms/components/heading.md

@@ -51,6 +51,29 @@ When using `Heading` on a darker background, specifically `purple700` &
 </Box>
 ```
 
+## Equalize line-height
+
+The default line-height adds space below the glyphs, which is usually what
+you want, but can throw off alignment when text is placed next to other text
+in a bottom-aligned row — for example a large amount next to a smaller
+qualifier. Use the `equalizeLineHeight` prop to override the line-height to
+`1`, regardless of `size`, so the text sits flush with its neighbour.
+
+```tsx
+<Flex direction="column" gap="400">
+  <Flex direction="row" alignItems="end" gap="50">
+    <Heading size="2xl">£42.00</Heading>
+    <BodyText size="sm">/month</BodyText>
+  </Flex>
+  <Flex direction="row" alignItems="end" gap="50">
+    <Heading size="2xl" equalizeLineHeight>
+      £42.00
+    </Heading>
+    <BodyText size="sm">/month</BodyText>
+  </Flex>
+</Flex>
+```
+
 ## API
 
 This component is based on the `h2` element and supports the following common props:
@@ -60,9 +83,10 @@ This component is based on the `h2` element and supports the following common pr
 - Text align
 - Text wrap
 
-| Prop       | Type                                    | Default | Description                                                                                          |
-| ---------- | --------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-| `as`       | `"h2" \| "h1" \| "h3" \| "h4"`          | `h2`    | Shorthand for changing the default rendered element into a semantically appropriate alternative.     |
-| `asChild`  | `boolean`                               | —       | Change the default rendered element for the one passed as a child, merging their props and behavior. |
-| `size`     | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `md`    | Set the text size styles.                                                                            |
-| `inverted` | `boolean`                               | —       | Inverts the component colours, for use on darker surface colours.                                    |
+| Prop                 | Type                                    | Default | Description                                                                                                                                                               |
+| -------------------- | --------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `as`                 | `"h2" \| "h1" \| "h3" \| "h4"`          | `h2`    | Shorthand for changing the default rendered element into a semantically appropriate alternative.                                                                          |
+| `asChild`            | `boolean`                               | —       | Change the default rendered element for the one passed as a child, merging their props and behavior.                                                                      |
+| `size`               | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `md`    | Set the text size styles.                                                                                                                                                 |
+| `inverted`           | `boolean`                               | —       | Inverts the component colours, for use on darker surface colours.                                                                                                         |
+| `equalizeLineHeight` | `boolean`                               | —       | If true, overrides the line-height to `1`, regardless of `size` — useful when the default line-height affects layout (e.g. single-line text in a fixed-height container). |

package/public/llms/components/icon-button.md

@@ -196,9 +196,11 @@ Disabled buttons use `aria-disabled`, rather than `disabled`, so that they are
 still focusable when using the keyboard. This means that screen readers are
 still able to find the button, with the insight that it is disabled and that
 there is perhaps an action which needs to be taken, rather than not knowing
-there is a button there at all. The `onClick` handler will be disabled, however
-you will need to make sure you disable any other expected actions, including
-when using `type="submit"`.
+there is a button there at all. While disabled or `loading`, the button's
+`onClick` handler isn't called and its default action is cancelled, so a
+`type="submit"` button won't submit its form and an `asChild` link won't
+navigate on click or middle-click. A link can still be opened from the browser's
+context menu, so remove its `href` while disabled if that matters.
 
 ## Variants
 

package/public/llms/components/search-input.md

@@ -48,9 +48,10 @@ to screen readers. You can change this by setting `hideLabel` to `false`.
 
 ## Clear
 
-You can pass a function to the `onClear` prop to clear the input. When there is
-a value the `clear` button will be present, and clicking it will call the
-`onClear` function. This should be used only to clear the value of the input.
+You can pass a function to the `onClear` prop to clear the input. When
+`onClear` is provided and there is a value, the `clear` button will be present,
+and clicking it will call the `onClear` function. Without `onClear`, no clear
+button is shown. This should be used only to clear the value of the input.
 
 ## Loading
 

package/public/llms/components/switch.md

@@ -49,9 +49,8 @@ The disabled `Switch` uses `aria-disabled`, rather than the `disabled`
 attribute, so that they are still focusable when using the keyboard. This means
 that screen readers are still able to find the button, with the insight that it
 is disabled and that there is perhaps an action which needs to be taken, rather
-than not knowing there is a button there at all. The `onClick` handler will be
-disabled, however you will need to make sure you disable any other expected
-actions.
+than not knowing there is a button there at all. While disabled, the `Switch`
+won't toggle and its `onClick` and `onCheckedChange` handlers aren't called.
 
 ## Responsive Sizes
 

package/public/llms/components/unstyled-icon-button.md

@@ -57,9 +57,11 @@ Disabled buttons use `aria-disabled`, rather than `disabled`, so that they are
 still focusable when using the keyboard. This means that screen readers are
 still able to find the button, with the insight that it is disabled and that
 there is perhaps an action which needs to be taken, rather than not knowing
-there is a button there at all. The `onClick` handler will be disabled, however
-you will need to make sure you disable any other expected actions, including
-when using `type="submit"`.
+there is a button there at all. While disabled or `loading`, the button's
+`onClick` handler isn't called and its default action is cancelled, so a
+`type="submit"` button won't submit its form and an `asChild` link won't
+navigate on click or middle-click. A link can still be opened from the browser's
+context menu, so remove its `href` while disabled if that matters.
 
 ## Size
 

package/public/llms/docs/getting-started.md

@@ -1,6 +1,6 @@
 # Hearth React
 
-Current version: v0.34.4
+Current version: v0.34.6
 
 ## Install Hearth