Blueprint

GuidesFoundationComponentsReleases
⌘K

Change Log

1.54.0

Minor Changes

  • #2766 b211443b Thanks @jrolfs! - Fix default Bauhaus toast copy to be "Dismiss" and add support for localizing said copy via the dismissText prop

  • #2766 b1df2bb4 Thanks @jrolfs! - Add support for custom content in useToast via the "content" variant. This variant only manages the close button, which is displayed as an ✖︎ instead of the default "Dismiss" link button and allows the user to pass in the content:


    () => {
    const toast = useToast({
    props: {
    variant: 'content',
    children: (
    <Flex alignItems="start" direction="column" padding="500">
    <Heading size="xs">Custom Content</Heading>
    <Body size="small" mb="400" mt={0}>
    Custom content refers to personalized material created for
    specific purposes, often tailored to individual preferences or
    requirements. It can range from custom-designed products to
    personalized services, catering to unique needs and tastes.
    </Body>
    <Button>Custom Button</Button>
    </Flex>
    ),
    },
    });
    return <Button onClick={toast}>📰 Custom Content</Button>;
    };

  • #2766 b2fe6c18 Thanks @jrolfs! - Support overriding the space between toasts rendered in a ToastTarget via the gap or spacing prop on ToastTarget

Patch Changes

  • #2766 b1df2bb4 Thanks @jrolfs! - Reset padding and margin on toast containers in DesignSystemProvider and set correct default gap between toasts

  • #2763 8b5cd12c Thanks @tricia-work! - Update useIsMotionReduced to read user motion preferences

  • #2766 4f5e1839 Thanks @jrolfs! - Don't clip the animation when updating useToast content animated with AnimatedToastMessage

  • #2766 cb697262 Thanks @jrolfs! - Use a more specific selector when applying style overrides to the toast container. This hasn't surfaced as a bug anywhere yet, but would potentially break custom content displayed via useToast that contains a ul element.

  • #2766 696d62ba Thanks @jrolfs! - Fix Bauhaus toast to use Bauhaus theme instead of /next theme when rendered in an application being migrated from the legacy theme (BlueprintProvider at the root). This also adds the useBauhuasTheme() workaround hook similar to useNextTheme() but all of this should be unnecessary in most/all cases and going away soon 😮‍💨!

  • #2766 15e22186 Thanks @jrolfs! - Fix ToastAction type to support passing async callback functions when providing a custom action with useToast

1.53.1

Patch Changes

  • #2760 7866f580 Thanks @jrolfs! - Make accessing colors using the legacy theme structure (e.g: colors.primary500) instead of the current nested structure (e.g: colors.primary[500]) consistent when using the Bauhaus theme (as well as the /next theme for good measure).

    In the next major version, we should consider removing the legacy structure altogether to reduce confusion, but this prevents a far worse version of confusion where a developer would get the legacy color despite accessing useTheme() within DesignSystemProvider (Bauhuas) or NextProvider when they access the color using the old theme structure.

  • Updated dependencies [7866f580, c57af9cf]:

    • @hover/chakra-theme@4.16.1
    • @hover/tokens-depth@1.1.0

1.53.0

Minor Changes

Patch Changes

1.52.0

Minor Changes

Patch Changes

  • Updated dependencies [b5cbe9e3, f915ed4b]:
    • @hover/icons@0.21.0
    • @hover/chakra-theme@4.15.0
    • @hover/tokens-border@1.3.0

1.51.0

Minor Changes

1.50.0

Minor Changes

Patch Changes

  • #2740 63bc90a7 Thanks @jrolfs! - Fix the return type for the toast() function returned from useToast. When we introduced the new Bauhuas toast, we introduced a conflict between the two APIs since the new toast supports a couple helper methods for managing toasts.

    This restores a consistent API where, by default, the toast() function returned from useToast() returns a toast ID. To access the update() and close() helpers that update the spawned toast without requiring an ID, pass helpers: true to the useToast hook:


    const toast = useToast({ helpers: true });
    const { update } = toast({ description: 'A thing happened' });
    update({ description: 'A thing changed' });


    const toast = useToast();
    const id = toast({ description: 'A thing happened' });
    toast.update(id, { description: 'A thing changed' });

  • #2742 48da9845 Thanks @jrolfs! - Fix the /extra/components entrypoint that provides the ProgressiveLoader component that got overwritten accidentally in the Storybook upgrade.

1.49.1

Patch Changes

  • #2734 4f36119e Thanks @jrolfs! - Fix mispelled bauhaus entry in the files field of the package.json for @hover/tokens-typography. This fixes import errors when trying to import the /bauhaus tokens.
  • Updated dependencies [4f36119e]:
    • @hover/tokens-typography@6.5.1
    • @hover/chakra-theme@4.14.1

1.49.0

Minor Changes

  • #2721 bfdae916 Thanks @jrolfs! - Add support for size aliases and withCapsize to Link

  • #2721 3f21a2c2 Thanks @jrolfs! - Add support for size aliases to Heading and Body components, e.g: <Heading size="large" /> etc.)

  • #2721 06826998 Thanks @jrolfs! - Hook up new /bauhaus theme to DesignSystemProvider. For now, the only differentiating theme feature is typography, but we'll introduce any of the remaining theme changes in Bauhaus and (hopefully soon) do away with the /next theme altogether.

Patch Changes

1.48.1

Patch Changes

1.48.0

Minor Changes

  • #2718 6136ddf3 Thanks @scott-schwartz-hover! - Add Bauhaus toast which automatically replaces the existing useToast hook when invoked within a NextProvider or DesignSystemProvider.

1.47.0

Minor Changes

  • #2712 eb9241ed Thanks @jrolfs! - Add a DesignSystemProvider that serves as the final migration path to the new visual design (from NextProvider and/or BlueprintProvider). This provider is necessary as there are quite a few NextProviders out in the wild, and we're reverting some tokens to the original theme provided by BlueprintProvider while also tweaking some of the tokens defined on the /next theme provided by NextProvider.

    Replace existing instances of NextProvider with DesignSystemProvider to apply the final adjustments of the new visual design. Once ready, DesignSystemProvider can replace the root BlueprintProvider to complete the migration.

    If any DesignSystemProviders are nested in a parent DesignSystemProvider that has the same or more features enabled, the nested provider will be a no-op (and warn in development to aid in removing unnecessary nested providers).

    Note that DesignSystemProvider still supports enabling theming gradually via the features prop (similar to next on NextProvider).

Patch Changes

  • #2715 603da62e Thanks @jrolfs! - Reset native browser styles on the following components:

    • Breadcrumb - remove margin and padding from items
    • Kbd - explicitly set border-style to solid
    • Popover - set box-sizing on content to border-box

  • Updated dependencies [51d0d973, 603da62e]:

    • @hover/chakra-theme@4.12.0
    • @hover/tokens-space@0.12.0
    • @hover/tokens-size@0.13.1
    • @hover/tokens-typography@6.4.4

1.46.3

Patch Changes

  • #2713 d530abf0 Thanks @jrolfs! - Bump @hover/chakra-theme to actually get the fix for using as="a" with the Button component without the text-decoration underline applied.
  • Updated dependencies [d530abf0]:
    • @hover/chakra-theme@4.11.1

1.46.2

Patch Changes

  • #2708 56a1c813 Thanks @ALacker! - Make a link that is acting like a button not include an underline, e.g:

    <Button as="a">Button as link</Button>

1.46.1

Patch Changes

  • #2703 95b793ad Thanks @jrolfs! - Ensure the theme returned from useNextTheme has the correct CSS variables computed and attached to it.

    Again, useNextTheme is a workaround for portals, etc. where the theme applied from NextProvider isn't applied properly due to where a component is nested both in the DOM and in the React component tree. This workaround is specifically for applying the /next theme properly to toasts when using NextProvider and the parent application isn't on /next yet.

1.46.0

Minor Changes

  • #2697 ebf4cbad Thanks @jrolfs! - Update the styles for the neutral Link's colorScheme to support the /next theme and add the isUnderlined prop to Link to support adding a persistent underline in cases where the link would otherwise be difficult to discern as a link within other text.

    With the new visual design that the /next theme supports, links are often displayed without the primary color scheme applied. Set colorScheme to neutral to achieve this.


    <Link colorScheme="neutral" href="#">
    Next
    </Link>

    If you need the link to stand out as a call-to-action inline with text of the same color, pass isUnderlined.


    <Body>
    Here's some text with a&nbsp;
    <Link colorScheme="neutral" isUnderlined href="#">
    neutral link
    </Link>&nbsp; in it.
    </Body>

Patch Changes

  • #2701 dda9d003 Thanks @JeuelyFish! - Fix spacing and alignment issue with Next Radio Tile's label and its checkbox, also updates hover color.
  • Updated dependencies [ebf4cbad, dda9d003]:
    • @hover/chakra-theme@4.11.0

1.45.0

Minor Changes

Patch Changes

  • #2693 3dbe8db8 Thanks @jrolfs! - Fix delay prop on Check component that wasn't working (delay delays the check animation when going from unchecked to checked)
  • Updated dependencies [f1db4dae]:
    • @hover/chakra-theme@4.10.0

1.44.0

Minor Changes

  • #2688 50a388a4 Thanks @jrolfs! - Add useNextTheme() to get the /next theme regardless of the current theme context. This should usually not be necessary, but there's currently a bug with toasts used within a NextProvider as the Portal they are rendered in is always in the root theme context.

  • #2688 134f771b Thanks @jrolfs! - Add ToastTarget component that, when mounted, acts as an alternative parent container for all toasts spawned via useToast().


    import { ToastTarget, VStack, Heading } from '@hover/blueprint';
    // When this component is mounted, all toasts spawned from `useToast()` will
    // render within and relative to the `ToastTarget` nested in the `VStack`
    export const MyComponent = () => (
    <VStack>
    <Heading>↓ Toasts</Heading>
    <ToastTarget width="100%" height="100%" />
    </VStack>
    );

1.43.1

Patch Changes

  • 3560d519 Thanks @jrolfs! - Add filled variant to Checkbox and Radio type

  • Updated dependencies [3560d519]:

    • @hover/chakra-theme@4.9.1

1.43.0

Minor Changes

  • a3ca0455 Thanks @jrolfs! - Support customizing stroke-width on animated Check component

1.42.0

Minor Changes

  • #2678 951508e7 Thanks @jrolfs! - Add RadioControl component for rendering just the radio selection control within a custom radio component implemented with useRadio

  • #2678 951508e7 Thanks @jrolfs! - Theme Radio component in /next theme

  • #2681 2e887a95 Thanks @jrolfs! - Update Link styles for /next for next theme (focus state)

  • #2678 951508e7 Thanks @jrolfs! - Add useRadio and useCheckbox hooks that provide the same functionality as Chakra's version but also wire state up to group context if available

Patch Changes

1.41.0

Minor Changes

  • c6c2a772 Thanks @jrolfs! - Export animated Check component used in Checkbox

1.40.2

Patch Changes

1.40.1

Patch Changes

  • #2674 e2baf219 Thanks @jrolfs! - Bring Capsize metrics for Diatype back closer to the extracted metrics. The previous tweaks overdid it and it turns out the main issue with vertical alignment at this point is our non-standard font-sizes and line-heighta.s

  • #2674 c1132c48 Thanks @jrolfs! - Target Button label with selector that prevents selecting nested span

  • #2674 7089c7bd Thanks @jrolfs! - Fix a few issues and one regression with RadioButton and CheckButton

    • Ensure the internal <input /> elements have the appropriate value attribute (this was the regression)
    • Fix an accessibility issue that caused both components to have aria-hidden set
    • Fix the name attribute for RadioButton and RadioButtonGroup

  • Updated dependencies [e2baf219, c1132c48]:

    • @hover/tokens-typography@6.4.3
    • @hover/chakra-theme@4.8.1

1.40.0

Minor Changes

  • #2670 4fc0a863 Thanks @jrolfs! - Add isMinimal to CheckButton, RadioButton, CheckButtonGroup and RadioButtonGroup that enables a minimal button style which renders single pixel borders in any variant that uses a border

  • #2668 4dd2beea Thanks @jrolfs! - Add noMargin prop to Heading to allow disabling the preset margin-bottom

  • #2668 4dd2beea Thanks @jrolfs! - Add withCapsize prop to Heading and Body to allow enabling Capsize cap height size adjustments

Patch Changes

1.39.1

Patch Changes

  • #2665 7e991723 Thanks @jrolfs! - Publish missing assets for @hover/tokens-typography

  • #2665 188329dd Thanks @jrolfs! - Apply Capsize correctly to /next Button when using a responsize size value

  • Updated dependencies [7e991723, 188329dd]:

    • @hover/tokens-typography@6.4.1
    • @hover/chakra-theme@4.7.1

1.39.0

Minor Changes

  • #2661 ec26c70b Thanks @jrolfs! - Render button label contents in an element with display: inline to take advantage of Capsize adjusted text styles (body500WithCapsize, etc.) so that button label text is centered in the button based on the height of capital letters.

Patch Changes

1.38.1

Patch Changes

  • #2662 c21fb137 Thanks @jrolfs! - Upgrade Ramda for compatibility with latest Node versions

  • Updated dependencies [c21fb137]:

    • @hover/chakra-theme@4.6.5

1.38.0

Minor Changes

1.37.0

Minor Changes

1.36.5

Patch Changes

  • #2657 9f311f10 Thanks @dezman! - Separate top and right spacing for close X button in Sheet component, reduce right spacing to 400
  • Updated dependencies [9f311f10]:
    • @hover/chakra-theme@4.6.4

1.36.4

Patch Changes

  • e2b0e767 Thanks @jrolfs! - Remove rounded corners altogether on Sheet component and fix the positioning of the close button in the bottom variant

1.36.3

Patch Changes

  • #2650 d60ff416 Thanks @bfranzen19! - Fix issue in Popover where it might not get the correct font in some cases by specifying font-family in the Popover theme

  • #2645 58a07fe1 Thanks @danielhover! - Fixes issue where sheet container would flow under safari tabs on ipad

  • #2650 d60ff416 Thanks @bfranzen19! - Fix issue that prevented Modal, Sheet, and other overlay components from closing correctly when the overlay is clicked when using NextProvider.

  • Updated dependencies [d60ff416, 58a07fe1]:

    • @hover/chakra-theme@4.6.2

1.36.2

Patch Changes

  • d47543f1 Thanks @jrolfs! - One last bump to get the new font to propagate correctly through the transitive dependencies 🤦🏻
  • Updated dependencies [d47543f1]:
    • @hover/chakra-theme@4.6.1
    • @hover/tokens-typography@6.3.1

1.36.1

Patch Changes

  • 3d011f02 Thanks @jrolfs! - Fix new font (Diatype) by bumping @hover/chakra-theme which I forgot to bump
  • Updated dependencies [2a7dc00a]:
    • @hover/chakra-theme@4.6.0

1.36.0

Minor Changes

Patch Changes

  • Updated dependencies [7daaff76]:
    • @hover/tokens-typography@6.3.0

1.35.0

Minor Changes

  • 6bacd618 Thanks @jrolfs! - Add support for the ghost variant for both RadioButton and CheckButton

1.34.1

Patch Changes

  • #2634 2279dcba Thanks @jrolfs! - Fix selector that prevents Button from displaying a :hover state when disabled

  • 0fe82de9 Thanks @jrolfs! - Export correct SheetContentsProps for external use

  • Updated dependencies [2279dcba]:

    • @hover/chakra-theme@4.5.1

1.34.0

Minor Changes

1.33.0

Minor Changes

1.32.0

Minor Changes

Patch Changes

  • Updated dependencies [2f58d756]:
    • @hover/chakra-theme@4.5.0

1.31.1

Patch Changes

  • 9d2260b7 Thanks @jrolfs! - Fix bottom variant for Sheet component by bumping @hover/chakra-theme with necessary theming changes
  • Updated dependencies [9d2260b7]:
    • @hover/chakra-theme@4.4.0

1.31.0

Minor Changes

  • #2622 874497da Thanks @jrolfs! - Add support for displaying the close button via isClosable on the Sheet.Container component in addition to Sheet.Contents to capture the much more common use case of enabling or disabling the close button for the entire sheet instead of per each sheet contents.

  • #2622 874497da Thanks @jrolfs! - Add support for animating between Sheet.Contents via the contentKey prop.

    Tip

    When setting contentKey be sure to set it on either all or none of the Sheet.Contents components that will be displayed in the same sheet.

  • #2622 f9ba9cd9 Thanks @jrolfs! - Add "bottom" variant to Sheet component for cases where the sheet should only ever open from the bottom of the screen

1.30.0

Minor Changes

  • 30a8e0d1 Thanks @jrolfs! - Export createContext helper that saves a little ceremony when creating a new context and consuming it with a hook

1.29.2

Patch Changes

  • ef79625f Thanks @jrolfs! - Fix typo in new heading line-height

  • Updated dependencies [ef79625f]:

    • @hover/tokens-typography@6.2.2
    • @hover/chakra-theme@4.3.3

1.29.1

Patch Changes

  • 377f7459 Thanks @jrolfs! - Adjust font-size and line-height for Heading preset 700 to match H3 font style in Figma (essentially we were missing a heading sixze from the original tokens that were provided)
  • Updated dependencies [377f7459]:
    • @hover/tokens-typography@6.2.1
    • @hover/chakra-theme@4.3.2

1.29.0

Minor Changes

Patch Changes

  • a6c22531 Thanks @jrolfs! - Update motion tokens to get firm and soft preset tweaks

  • Updated dependencies [a6c22531]:

    • @hover/chakra-theme@4.3.1

1.28.2

Patch Changes

  • 74e615b4 Thanks @jrolfs! - Update previous fix for Button to handle an empty object in addition to undefined from useTheme to prevent breaking existing unit tests 😩.

1.28.1

Patch Changes

  • 79a414ea Thanks @jrolfs! - Handle the case where the theme is not available on context in Button specifically to prevent breaking a ton of existing tests that don't properly wrap the component under test in BlueprintProvider.

    Note

    They really all should be wrapped properly, but it doesn't seem worth breaking a bunch of existing tests to enforce it when they don't assert anything visual anyways.

1.28.0

Minor Changes

  • #2612 bee3cc49 Thanks @jrolfs! - Add support for displaying a visual label (caption) under the spinner in LoadingOverlay via isCaptioned prop.

  • #2612 d7d1f1f8 Thanks @jrolfs! - Support speed and label on LoadingState

  • #2612 b6f16ae1 Thanks @jrolfs! - Export SystemStyleObject type for typing things like helper styles passed to the sx prop

Patch Changes

  • #2612 d7d1f1f8 Thanks @jrolfs! - Prevent margin from Stack components from positioning LoadingState incorrectly

  • #2612 6eddf021 Thanks @jrolfs! - Improve accessibility on Loader by rendering label as text content instead of using aria-label which wouldn't necessarily be announced with aria-polite. Also, don't use the progressbar role as it's meant for determinate progress indicators.

  • #2612 bee3cc49 Thanks @jrolfs! - Support accessible label on LoadingOverlay

  • #2612 d7d1f1f8 Thanks @jrolfs! - Fix z-index on LoadingState

  • #2612 ae144ccb Thanks @jrolfs! - Use firm Framer preset for LoadingOverlay animation

  • #2612 853d448a Thanks @jrolfs! - Reduce overall velocity of Sheet animations to make it feel smoother and make dropped frames less noticeable

1.27.3

Patch Changes

1.27.2

Patch Changes

  • #2608 db5a135d Thanks @jrolfs! - Respect size from RadioButtonGroup and CheckButtonGroup in RadioButton and CheckButton

1.27.1

Patch Changes

  • #2605 d20fb577 Thanks @jrolfs! - Fix sizing of IconButton when using /next theme

  • Updated dependencies [13f33182]:

    • @hover/chakra-theme@4.3.0

1.27.0

Minor Changes

  • #2599 3a0d5087 Thanks @jrolfs! - Automatically augment elements created with the motion() factory with system style props.

    Before


    import { motion } from '@hover/blueprint';
    const MotionDiv = motion(system.div);
    <MotionDiv animate={{ x: 100 }} bg="primary.100" />;

    After


    import { motion } from '@hover/blueprint';
    <motion.div animate={{ x: 100 }} bg="primary.100" />;

  • #2602 5cca450c Thanks @jrolfs! - Add CheckButton and RadioButton components for representing selections with Button-like components

  • #2599 ea8dbe5a Thanks @jrolfs! - Export cssVariables helper for generating CSS variables for some system tokens.

    Note

    CSS variables should only be used directly when necessary. Prefer styling via style props or style objects (sx) as the idiomatic way of applying styles using the design system.


    import { cssVariables } from '@hover/blueprint';
    const $space400 = cssVariables.space(400);
    $space400.reference; // `var(--hover-space-400)`
    $space400.variable; // `--hover-space-400`

  • #2606 77145a89 Thanks @jrolfs! - Add support for using Button with ButtonGroup component and export ButtonGroup component

  • #2606 ef620a50 Thanks @jrolfs! - Add alternative Sheet API that allows the sheet's contents to be separated into its own component via <Sheet.Container /> and <Sheet.Contents />

Patch Changes

1.26.0

Minor Changes

  • #2595 c6ff1fce Thanks @jrolfs! - Support custom fontHost on NextProvider

  • #2592 3ee34612 Thanks @jrolfs! - Update onSwipe helper with support for none action and distance option.

    Before

    <MotionImage
    drag="x"
    onDragEnd={onSwipe({
    'x',
    () => console.log('swiped left'),
    () => console.log('swiped right'),
    })}
    />;

    After

    <MotionImage
    drag="x"
    onDragEnd={onSwipe({
    axis: 'x',
    distance: 400,
    start: () => console.log('swiped left'),
    end: () => console.log('swiped right'),
    none: force => console.log(`none, ${force}`),
    })}
    />

    ⚠️ NOTE: this is a breaking change but the helper was undocumented until now. The API should be stable after this.

  • #2592 f0334377 Thanks @jrolfs! - - Attach /next theme CSS variables via a className selector instead of an id to prevent duplicate IDs in the document in NextProvider.

    • Always provide the root theme selector context even when attach is passed to NextProvider.
    Breaking Change

    Note that the API for attaching CSS variables using context (instead of just attach) has changed from useNextRootThemeId() to useNextThemeRootClassName().

  • #2596 5d24b41b Thanks @jrolfs! - Add support for passing props to Popover content container via contentProps

  • #2592 92979fe4 Thanks @jrolfs! - Use custom SVG for CloseButton and ModalCloseButton

  • #2595 b815b922 Thanks @jrolfs! - Add useIsNextFeatureEnabled() for detecting whether next theme features are enabled

  • #2595 ea800eaa Thanks @jrolfs! - Load Inter font assets via @font-face in the following cases:

    • When includeFonts is set to all on BlueprintProvider or when next is set to all or includes fonts
    • When next is set to all or includes fonts on NextProvider

  • #2592 1a1ba535 Thanks @jrolfs! - Add and theme Sheet component

  • #2597 /f2de206d Thanks @jrolfs! - Theme button for /next theme and update API with variant and colorScheme for new theme. Map existing fill values to new variants respectively when the new theme is enabled.

Patch Changes

1.25.0

Minor Changes

Patch Changes

  • #2587 3bf080bc Thanks @jrolfs! - Export and fix useNextThemeRootId for use with NextProvider (forgot to export it and there was a bug)
  • Updated dependencies [046ad168, 4385115d, e304b641, de6f572d, 71fad932]:
    • @hover/chakra-theme@4.0.0
    • @hover/tokens-size@0.12.0
    • @hover/tokens-space@0.11.0
    • @hover/tokens-border@1.1.0
    • @hover/tokens-typography@6.1.1

1.24.0

Minor Changes

1.23.0

Minor Changes

Patch Changes

1.22.0

Minor Changes

  • #2579 9960c075 Thanks @jrolfs! - Support anchor in addition to trigger on Popover for controlled state use cases that only require positioning the Popover relative to the supplied anchor element.

1.21.0

Minor Changes

  • #2576 8d79d0d9 Thanks @jrolfs! - Add useUniqueSelector hook that produces a unique CSS selector via React's useId hook

  • #2576 d3881251 Thanks @jrolfs! - Support partially enabling the new visual design (aka /next theme) via NextProvider.

    See the documentation for how to use it.

1.20.0

Minor Changes

  • #2564 d322cc1b Thanks @jrolfs! - Add support for new colors via next feature flag on BlueprintProvider

  • #2570 2f41d930 Thanks @jrolfs! - Add useLatestCallback hook.

    useLatestCallback is a version of React's useCallback hook that always has the latest render scope. This is useful for cases where a third-party library requires callback or anywhere it's possible that an old reference to a callback function requires state or scope that has changed since the render that defined the callback.

  • #2570 1bdaf5b2 Thanks @jrolfs! - Add useZoom hook for adding scroll-based zoom behavior to any image element.


    () => {
    const { props } = useZoom({ maxZoom: 10 });
    return (
    <Image
    src="/images/kitten--2560-1440.jpg"
    width="700"
    cursor="zoom-in"
    {...props}
    />
    );
    };

  • #2570 283afa03 Thanks @jrolfs! - Add support for a delay on LoadingState which can be used to prevent momentary flashes of a loading state for actions that take less than the specified delay.

Patch Changes

  • Updated dependencies [0c46b22d, 6b307474]:
    • @hover/tokens-color@7.8.0
    • @hover/chakra-theme@3.1.0

1.19.0

Minor Changes

  • #2565 b5c61dd1 Thanks @jrolfs! - Switch to CSS animations in ProgressiveLoader to remove dependency on Framer Motion 10.5+ which introduces a couple bugs. The ProgressiveLoader export is now available at the main package entrypoint since it no longer has a specific Framer version dependency.

1.18.0

Minor Changes

  • #2561 d312e19a Thanks @jrolfs! - Move color helpers from direct exports at the /foundation entrypoint to the colors theme scale.

    Deprecation

    The alpha() helper now prints a deprecation warning without applying transparency to a color.


    import { Box, alpha } from '@hover/blueprint';
    export const MyComponent = () => (
    <Box background={alpha(0.5, 'primary.800')} />
    );


    import { Box, alpha, useTheme } from '@hover/blueprint';
    export const MyComponent = () => {
    const { colors } = useTheme();
    return <Box background={colors.alpha(0.5, 'primary.800')} />;
    };

Patch Changes

1.17.3

Patch Changes

1.17.2

Patch Changes

  • c5ca47be Thanks @jrolfs! - Remove all usage of type modifier on import and export statements to preserve compatibility with older version of TypeScript

1.17.1

Patch Changes

  • c3d40912 Thanks @jrolfs! - Bump typography tokens to fix missing /next entrypoint issue

  • Updated dependencies [987a249b, c3d40912]:

    • @hover/tokens-typography@6.1.0
    • @hover/chakra-theme@2.3.1

1.17.0

Minor Changes

  • #2555 54d47d90 Thanks @jrolfs! - Add ProgressiveLoader component (available at @hover/blueprint/extra/components on account of the Framer Motion 10.5+ requirement)

1.16.0

Minor Changes

  • #2542 22389a10 Thanks @jrolfs! - Deprecate isDisplay on the Heading component as the display typography scale has been removed and consolidated with the default heading scale.

  • #2542 a038667a Thanks @jrolfs! - Add support for displaying an arrow on Menu via the hasArrow prop

  • #2542 4e264f1d Thanks @jrolfs! - Remove legacy typography (newTypography has been the default on BlueprintProvider for a long time now and setting it to false now has no effect)

  • #2542 9f90f7f6 Thanks @jrolfs! - Add next prop to BlueprintProvider that serves as a feature flag to enable the new visual design. Set to 'all' to enable new theme entirely or as an array of specific features, (e.g: ['typography', 'fonts']).

Patch Changes

1.15.0

Minor Changes

  • c575ddfd Thanks @jrolfs! - Add useCustomToast hook for displaying toasts with a custom render function

Patch Changes

  • Updated dependencies [22047c1e]:
    • @hover/utilities@0.19.1

1.14.0

Minor Changes

  • #2532 60a84529 Thanks @jrolfs! - Support bodyProps on Modal, Dialog, and Drawer which are passed to the modal body container

Patch Changes

  • Updated dependencies [cd444980]:
    • @hover/icons@0.17.0

1.13.0

Minor Changes

  • #2507 cdf3210b Thanks @jrolfs! - Add support for auto size to Modal and Dialog components that allows the modal content to determine the size of the modal container

Patch Changes

1.12.1

Patch Changes

  • 867c7cb0 Thanks @jrolfs! - Improve Progress indeterminate state and add short CSS transition for value changes
  • Updated dependencies [867c7cb0]:
    • @hover/chakra-theme@2.1.1

1.12.0

Minor Changes

Patch Changes

  • #2483 1cca7f06 Thanks @jrolfs! - Fix an issue where adding extraComponentThemes messed up the theme if theme overrides were already applied with applyThemeOverrides
  • Updated dependencies [6131206b]:
    • @hover/chakra-theme@2.1.0

1.11.0

Minor Changes

  • #2481 d3a4f142 Thanks @jrolfs! - Export versions of useBreakpoint, useBreakpointValue, and useMediaQuery with types based on system breakpoint tokens

Patch Changes

  • Updated dependencies [37aafd59, 17ef417c]:
    • @hover/utilities@0.19.0
    • @hover/chakra-theme@2.0.0

1.10.3

Patch Changes

  • Updated dependencies [df27a982, df27a982]:
    • @hover/utilities@0.18.0
    • @hover/chakra-theme@1.6.2

1.10.2

Patch Changes

  • a98fa286 Thanks @jrolfs! - Support render prop for trigger prop on Popover component

1.10.1

Patch Changes

  • e1027ef7 Thanks @jrolfs! - Export colorValueFor helper for getting the raw value of a color token

  • Updated dependencies [e1027ef7]:

    • @hover/chakra-theme@1.6.1

1.10.0

Minor Changes

  • #2346 bf6e8aea Thanks @jrolfs! - Add support for passing an override boolean to useIsMotionReduced

  • #2346 89ae8f91 Thanks @jrolfs! - Add onSwipe helper for invoking actions in response to swipe gestures.


    import { motion, Image, onSwipe } from '@hover/blueprint';
    const MotionImage = motion(Image);
    <MotionImage
    drag="x"
    onDragEnd={onSwipe(
    'x',
    () => console.log('swiped left'),
    () => console.log('swiped right'),
    )}
    />;

  • #2471 34c2d657 Thanks @jrolfs! - Add and theme PinInput

Patch Changes

  • #2472 24072531 Thanks @jrolfs! - Fix an issue where the default size is not applied correctly when Link has as set to button

  • #2346 89a8b5f1 Thanks @jrolfs! - Fix system types for motion() re-export helper to support all Framer Motion props, including drag handlers like onDragEnd (Framer Motion's drag handlers include an additional parameter, info, that contains offset, velocity, etc.).

    Also, export MotionPropsFor helper type for augmenting component props with Framer Motion props, which is necessary if you're spreading props into a motion() component.

  • #2472 a92aff37 Thanks @jrolfs! - Explicitly set padding to 0 on Link component to override any default styling applied when the as prop is set to something like button

  • #2450 03b77d12 Thanks @jrolfs! - Widen range on common @chakra-ui/react-utils dependency to prevent duplication when @hover/blueprint and @hover/dropdown are both installed

  • f5ae27fe Thanks @jrolfs! - Add react-dom as a peer dependency effectively passing @chakra-ui/react's peer dependency on react-dom on to the consumer of @hover/blueprint

  • Updated dependencies [f5ae27fe, a92aff37, 014ed1b2, 34c2d657]:

    • @hover/chakra-theme@1.6.0
    • @hover/utilities@0.17.1

1.9.0

Minor Changes

  • #2378 c6b453a4 Thanks @jrolfs! - Add triggerProps and renderCount to FilterMenu to support customizing the trigger button and how the selected filter count is rendered

  • #2378 f0b4fa98 Thanks @jrolfs! - Export CloseButton

  • #2378 413304a2 Thanks @jrolfs! - Add LoadingState component for displaying a localized loading overlay on a specific component

  • #2378 9bef1899 Thanks @jrolfs! - Add Hotkey component

  • #2378 f0135e8f Thanks @jrolfs! - Export Input addon and element components for custom input use cases that TextInput doesn't satisfy

Patch Changes

1.8.0

Minor Changes

Patch Changes

  • Updated dependencies [46810830]:
    • @hover/chakra-theme@1.4.1

1.7.0

Minor Changes

  • #2371 f138c5f1 Thanks @jrolfs! - Add support for status="loading" and confirm button in Alert (via onConfirmClick)

Patch Changes

  • #2354 5b800830 Thanks @jrolfs! - Fix selection bug in MenuItemOption when used as type="checkbox".

    (upgrade @chakra-ui/react to 2.3.1 to get fix released in @chakra-ui/menu@2.0.13)

  • #2370 5aeda0ed Thanks @jrolfs! - Widen version range for @hover/icons. This should hopefully alleviate most issues when @hover/icons needs to be upgrade independently to get new icons without moving it to a peer dependency.

  • Updated dependencies [730afde5, 5b800830, 71c6a22b, f138c5f1, 3971714d, dab9bf16, 1462bf92, ef7e040b]:

    • @hover/icons@0.16.0
    • @hover/chakra-theme@1.4.0
    • @hover/tokens-size@0.11.0

1.6.9

Patch Changes

  • #2353 9743158f Thanks @jrolfs! - Fix @chakra-ui/* pinning to avoid duplicate dependencies

  • Updated dependencies [021c7d91, 9743158f]:

    • @hover/utilities@0.16.1
    • @hover/chakra-theme@1.3.2

1.6.8

Patch Changes

  • Updated dependencies [1bc14ca3]:
    • @hover/icons@0.15.0

1.6.7

Patch Changes

  • Updated dependencies [3188162f]:
    • @hover/icons@0.14.0

1.6.6

Patch Changes

  • Updated dependencies [09b6552b]:
    • @hover/icons@0.13.0

1.6.5

Patch Changes

  • #2320 febfba7a Thanks @jrolfs! - Pin Chakra dependencies. We've run into too many compatibility issues with minor Chakra releases.

  • Updated dependencies [febfba7a, e3fc88bc]:

    • @hover/chakra-theme@1.3.1
    • @hover/utilities@0.16.0

1.6.4

Patch Changes

  • #2316 b18d78c6 Thanks @jrolfs! - Fix an issue with the latest @chakra-ui/react that broke the suggestedValue indicator in the Slider component

1.6.3

Patch Changes

1.6.2

Patch Changes

  • #2260 c3e7ea02 Thanks @jrolfs! - Fix icon spacing in Button component after switching Icon to use native Chakra responsive size.

1.6.1

Patch Changes

  • #2258 27770b5b Thanks @jrolfs! - Address rather bewildering SSR hydration mismatch error that started happening in the Icon component

1.6.0

Minor Changes

  • #2254 b005b252 Thanks @jrolfs! - Expose SystemProps and StyleProps types from Chakra

  • #2254 005a2fd4 Thanks @jrolfs! - Support raw color values in addition to system colors in alpha transparency helper

  • #2254 d73b6890 Thanks @jrolfs! - Add extraComponentThemes prop to BlueprintProvider and /extra/theme entrypoint for including themes for components that aren't part of the core component set

Patch Changes

  • #2254 46fbd06b Thanks @jrolfs! - Add missing onClose handler to Tag

  • #2254 ad1fb6ea Thanks @jrolfs! - Remove default id behavior in Field component as it could inadvertently introduce duplicate element IDs

  • #2254 e5de070a Thanks @jrolfs! - Remove ARIA label warning from Button component on account of false positives when children is not a string, but is still an accessibly label (i.e: a nested string <span>Accessible Label</span>, etc.)

  • Updated dependencies [92bde7bb, e27d7469, 1af88d7d, 9126573e, 90e36d61, 4aa6819e]:

    • @hover/chakra-theme@1.2.0

1.5.1

Patch Changes

  • edf841d9 Thanks @jrolfs! - Remove error-prone dependency on default Chakra theme in Tooltip theme

  • Updated dependencies [edf841d9]:

    • @hover/chakra-theme@1.1.4

1.5.0

Minor Changes

1.4.2

Patch Changes

1.4.1

Patch Changes

1.4.0

Minor Changes

1.3.0

Minor Changes

1.2.1

Patch Changes

  • b58c8b24 Thanks @jrolfs! - Fix incorrect background color in focused Tab in the Tabs component

  • Updated dependencies [ecb00654]:

    • @hover/chakra-theme@1.1.2

1.2.0

Minor Changes

  • #2181 ba804112 Thanks @jrolfs! - Update motion helper export to include all of the Framer motion API. Previously we were wrapping Framer Motion's motion API in our own function to make the types work with system components. Now we're simply re-exporting motion with types that work for system components, so motion.div etc. now works.

Patch Changes

  • #2179 686711cf Thanks @jrolfs! - Strip internal data-testid attributes from system components. If you were relying on this behavior, it's kind of on you to figure out a better way of testing whatever you're testing (ideally something that reflects how a user interacts with the UI). I double-checked dependent repositories before making this change, but this patch release is a courtesy in case you need to change your test behavior before upgrading @hover/blueprint to this version.

  • #2162 a692b842 Thanks @renovate! - Update all Chakra dependencies and handle an inadvertent breaking change that snuck out in a non-major Chakra release https://github.com/hoverinc/blueprint/pull/2162/commits/caa0d435b693499bdea370a1056118c4f2208870

  • Updated dependencies [a692b842]:

    • @hover/chakra-theme@1.1.1

1.1.0

Minor Changes

  • #2167 413a1571 Thanks @jrolfs! - Add elementBefore and elementAfter to TextInput to allow custom elements to be rendered inside the input (for example, an interactive IconButton)

1.0.1

Patch Changes

  • Updated dependencies [479db9f3]:
    • @hover/tokens-size@0.9.0
    • @hover/chakra-theme@1.1.0

1.0.0

Major Changes

  • #1916 2ec39f9e Thanks @jrolfs! - Replace legacy theme with Chakra theme:

    • useTheme now returns Chakra theme instead of legacy (styled-system + styled-components based theme)
    • Remove useChakraTheme
    • The theme and Theme exports is replaced with the Chakra theme
    • Remove chakraTheme and ChakraTheme
    • Remove dependency and peer dependency on styled-components
    • Remove dependency on styled-system

    BREAKING CHANGES:

    • useChakraTheme → useTheme
    • chakraTheme → theme
    • Removed useChakraTheme and theme exports
    • Removed ChakraTheme and Theme type exports

  • #1916 d754c34d Thanks @jrolfs! - Remove deprecated props from Field component

    • autohide → ❌ removed
    • disabled → isDisabled

    BREAKING CHANGE: autohide is removed from Field, use isDisabled instead of disabled

  • #1916 14fb2eeb Thanks @jrolfs! - Lock down colorScheme type to supported system color schemes and rename one-off neutralLight and neutralDark schemes used in Tooltip and Tag to light and dark (and include them as standard system themes)

    BREAKING CHANGE: neutralLight and neutralDark have been renamed to light and dark for Tag and Tooltip

  • #1916 03efe6da Thanks @jrolfs! - Remove deprecated props from TextInput

    • error → isInvalid
    • disabled → isDisabled
    • onValueChange → onChange

    BREAKING CHANGE: error, disabled and onValueChange were removed from TextInput, use isInvalid, isDisabled and onChange instead

  • #1916 97fa711b Thanks @jrolfs! - Render an additional nested container in Badge in order to properly support noOfLines multi-line truncation

    BREAKING CHANGE: the truncation behavior changed in Badge to support multi-line truncation via -webkit-line-clamp (via noOfLines). This seems to only support truncation via ellipsis, so now Badge will be truncated to a single line with an ellipsis by default and truncation is controlled with noOfLines (set noOfLines="unset" to disable truncation).

  • #1916 f05067d8 Thanks @jrolfs! - Remove deprecated props from Slider

    • initialValue → defaultValue
    • disabled → isDisabled

    BREAKING CHANGE: initialValue and disabled were removed from Slider, use defaultValue and isDisabled instead

  • #1916 0c2edfcb Thanks @jrolfs! - Remove Font Awesome support entirely in favor of @hover/icons.

    BREAKING CHANGE: AwesomeIcon has been moved into a separate package. If you still need to use Font Awesome icons for some reason, you'll need to install @hover/awesome-icon.

  • #1916 cce3c82f Thanks @jrolfs! - Remove deprecated showClose prop from Popover

    BREAKING CHANGE: showClose was removed from Popover, use isClosable instead

  • #1916 94d7d303 Thanks @jrolfs! - BREAKING CHANGE: Remove deprecated element prop from Box (use as instead)

  • #1916 17c265ae Thanks @jrolfs! - Remove deprecated props from Button:

    • onPress → onClick
    • loading → isLoading
    • disabled → isDisabled

    BREAKING CHANGE: the onPress, loading and disabled have been removed from Button, use onClick, isLoading and isDisabled instead

Minor Changes

  • #1916 0c2edfcb Thanks @jrolfs! - Export responsive helpers

    • getApplyForResponsiveSize: get apply prop for applying responsive sizes to a component
    • mapResponsive: map over a responsive style prop value
    • reduceResponsive: reduce a responsive style prop value

Patch Changes

1.0.0-next.4

Major Changes

  • #2088 b60764c5 Thanks @jrolfs! - Remove deprecated props from Field component

    • autohide → ❌ removed
    • disabled → isDisabled

    BREAKING CHANGE: autohide is removed from Field, use isDisabled instead of disabled

  • #2088 fb847804 Thanks @jrolfs! - Remove deprecated props from TextInput

    • error → isInvalid
    • disabled → isDisabled
    • onValueChange → onChange

    BREAKING CHANGE: error, disabled and onValueChange were removed from TextInput, use isInvalid, isDisabled and onChange instead

  • #2088 dcfb2f9f Thanks @jrolfs! - Remove deprecated props from Slider

    • initialValue → defaultValue
    • disabled → isDisabled

    BREAKING CHANGE: initialValue and disabled were removed from Slider, use defaultValue and isDisabled instead

  • #2088 e82f683d Thanks @jrolfs! - Remove deprecated showClose prop from Popover

    BREAKING CHANGE: showClose was removed from Popover, use isClosable instead

  • #2088 1423a5bb Thanks @jrolfs! - BREAKING CHANGE: Remove deprecated element prop from Box (use as instead)

  • #2088 795a78af Thanks @jrolfs! - Remove deprecated props from Button:

    • onPress → onClick
    • loading → isLoading
    • disabled → isDisabled

    BREAKING CHANGE: the onPress, loading and disabled have been removed from Button, use onClick, isLoading and isDisabled instead

1.0.0-next.3

Major Changes

  • #1916 20c010ec Thanks @jrolfs! - Lock down colorScheme type to supported system color schemes and rename one-off neutralLight and neutralDark schemes used in Tooltip and Tag to light and dark (and include them as standard system themes)

    BREAKING CHANGE: neutralLight and neutralDark have been renamed to light and dark for Tag and Tooltip

Patch Changes

1.0.0-next.2

Major Changes

  • #2089 aecbdb55 Thanks @jrolfs! - Render an additional nested container in Badge in order to properly support noOfLines multi-line truncation

    BREAKING CHANGE: the truncation behavior changed in Badge to support multi-line truncation via -webkit-line-clamp (via noOfLines). This seems to only support truncation via ellipsis, so now Badge will be truncated to a single line with an ellipsis by default and truncation is controlled with noOfLines (set noOfLines="unset" to disable truncation).

Patch Changes

1.0.0-next.1

Major Changes

  • #1916 536a6358 Thanks @jrolfs! - Remove Font Awesome support entirely in favor of @hover/icons.

    BREAKING CHANGE: AwesomeIcon has been moved into a separate package. If you still need to use Font Awesome icons for some reason, you'll need to install @hover/awesome-icon.

Minor Changes

  • #1916 536a6358 Thanks @jrolfs! - Export responsive helpers

    • getApplyForResponsiveSize: get apply prop for applying responsive sizes to a component
    • mapResponsive: map over a responsive style prop value
    • reduceResponsive: reduce a responsive style prop value

1.0.0-next.0

Major Changes

  • #1826 0b576630 Thanks @jrolfs! - Replace legacy theme with Chakra theme:

    • useTheme now returns Chakra theme instead of legacy (styled-system + styled-components based theme)
    • Remove useChakraTheme
    • The theme and Theme exports is replaced with the Chakra theme
    • Remove chakraTheme and ChakraTheme
    • Remove dependency and peer dependency on styled-components
    • Remove dependency on styled-system

    BREAKING CHANGES:

    • useChakraTheme → useTheme
    • chakraTheme → theme
    • Removed useChakraTheme and theme exports
    • Removed ChakraTheme and Theme type exports

0.96.1

Patch Changes

  • c3b21ea7 Thanks @jrolfs! - Give Editable components a displayName

  • Updated dependencies [e74fcd2d]:

    • @hover/utilities@0.14.0
    • @hover/chakra-theme@0.56.1

0.96.0

Minor Changes

Patch Changes

0.95.4

Patch Changes

0.95.3

Patch Changes

  • Updated dependencies [9eff2c5e]:
    • @hover/tokens-space@0.10.0
    • @hover/tokens-typography@5.1.2
    • @hover/chakra-theme@0.55.1

0.95.2

Patch Changes

  • Updated dependencies [38dc7507]:
    • @hover/chakra-theme@0.55.0

0.95.1

Patch Changes

0.95.0

Minor Changes

  • #2047 0092e67b Thanks @jrolfs! - Add support for speed to Loader component (with one faster speed for now)

Patch Changes

0.94.1

Patch Changes

0.94.0

Minor Changes

Patch Changes

  • Updated dependencies [9924631c]:
    • @hover/utilities@0.12.0
    • @hover/chakra-theme@0.54.1

0.93.0

Minor Changes

  • #1925 02a76971 Thanks @jrolfs! - Add preset CSS transition helpers for applying easing motion tokens to specified CSS properties:


    import { transition, system } from '@hover/blueprint';
    <system.div {...transition.easing250('height', 'opacity')} />;

  • #1925 5130428d Thanks @jrolfs! - Add Framer Motion MotionConfig presets

    Each Motion.[preset] component is a MotionConfig preconfigured with system spring motion tokens:


    import { motion } from 'framer-motion';
    <Motion.Firm>
    <motion.div>
    Motion applied to me will use the `firm` spring preset
    </motion.div>
    </Motion.Firm>;

  • #1925 e9870d09 Thanks @jrolfs! - Add a version of Framer Motion's motion factory that's typed correctly when used on system components:


    import { motion, Stack } from '@hover/blueprint';
    const MotionStack = motion(Stack);
    // Yay, we get the correct types for both system and motion props
    <MotionStack animate={{ opacity: 1 }} spacing="100" />;

  • #1925 c07ed31e Thanks @jrolfs! - Export LabeledVariants and icon(s) props helper types (ComponentWithIcon and ComponentWithIcons)

  • #1946 c998bba1 Thanks @jrolfs! - Theme and export Editable

  • #1925 41eee84f Thanks @jrolfs! - Export splitLayoutProps and splitSystemProps helper functions for splitting props amongst composed components.

  • #1925 0dae11e2 Thanks @jrolfs! - Add inset200 shadow

  • #1925 77889f68 Thanks @jrolfs! - Add and theme Breadcrumb component

Patch Changes

0.92.0

Minor Changes

Patch Changes

  • Updated dependencies [e9342852, 328a4497]:
    • @hover/chakra-theme@0.53.0
    • @hover/icons@0.10.0

0.91.0

Minor Changes

  • #1871 e40fef45 Thanks @jrolfs! - Expose forwardRef and a handful of utility hooks from Chakra

    • useBoolean
    • useColorMode
    • useConst
    • useControllableState
    • useCounter
    • useEventListener
    • useId
    • useIds
    • useMergeRefs
    • useTimeout

  • #1871 be067b6c Thanks @jrolfs! - Add Blockquote component

  • #1871 630b7b70 Thanks @jrolfs! - Expose system intrinsic component factory with IntrinsicSystemProps helper type for custom use cases:


    import { FunctionComponent } from 'react';
    import { system, IntrinsicSystemProps } from '@hover/blueprint';
    interface MyCustomButtonProps extends IntrinsicSystemProps<'button'> {
    foo: string;
    }
    export const MyCustomButton: FunctionComponent<MyCustomButtonProps> = ({
    foo,
    ...props
    }) => <system.button {...props}>{foo} Bar</system.button>;

    The intention here is to provide building blocks for building components outside of @hover/blueprint that may be incorporated upstream into the system eventually.

  • #1871 3b2bc5e9 Thanks @jrolfs! - Stylize Code nested in Link properly

  • #1871 a32f4a94 Thanks @jrolfs! - Expose useClipboard hook

  • #1871 98d52468 Thanks @jrolfs! - Inherit colorScheme from Alert or Blockquote when Code is nested in either

Patch Changes

0.90.4

Patch Changes

  • Updated dependencies [0243acaa]:
    • @hover/icons@0.9.0

0.90.3

Patch Changes

  • Updated dependencies [dca2218c]:
    • @hover/icons@0.8.0

0.90.2

Patch Changes

  • a0cf6389 Thanks @jrolfs! - Revert this change:

    Update internal <input /> element styling in Radio, Checkbox, TileRadio, TileCheckbox, and Toggle such that e2e testing solutions such as Cypress and Playwright should be able to interact with them without passing the force option

    It was a red herring for Cypress failures, the actual issue in this particular case was that Chakra does not pass props (i.e: data-test-id) to the internal input element for these components.

    I may revisit this change, as the CSS being applied in the reverted changes is necessary for Playwright to interact with said inputs via check(), however I want to investigate the best approach before moving forward with any modifications to the default Chakra CSS. The approach that is being reverted here actually causes visibility tests to fail on account of using opacity to hide the input.

  • Updated dependencies [a0cf6389]:

    • @hover/chakra-theme@0.51.2

0.90.1

Patch Changes

  • #1818 163131e7 Thanks @jrolfs! - Update internal <input /> element styling in Radio, Checkbox, TileRadio, TileCheckbox, and Toggle such that e2e testing solutions such as Cypress and Playwright should be able to interact with them without passing the force option
  • Updated dependencies [d8bcc9b7, 163131e7]:
    • @hover/icons@0.7.0
    • @hover/chakra-theme@0.51.1

0.90.0

Minor Changes

  • #1814 8ae6e84a Thanks @jrolfs! - Add custom number input, StepperInput, with increment and decrement buttons to the right and left of the input

Patch Changes

  • #1814 263238de Thanks @jrolfs! - Add isStatic to AwesomeIcon and Icon to allow the CSS color transition to be disabled

0.89.2

Patch Changes

  • 87fd1ea1 Thanks @jrolfs! - Fix bug in Slider where accessible suggested value was not displayed when suggestedValue was set to 0

0.89.1

Patch Changes

0.89.0

Minor Changes

  • #1806 4e6c4f4f Thanks @jrolfs! - Support passing custom props to toasts either via useToast() or directly on toast()

  • #1796 52cd293b Thanks @jrolfs! - Add useTimeoutFlag hook for setting an ephemeral boolean value for the specified duration

  • #1796 f7e0168b Thanks @jrolfs! - Add isSubtle to TileCheckbox and TileRadio

Patch Changes

0.88.0

Minor Changes

Patch Changes

0.87.4

Patch Changes

  • Updated dependencies [ec0d1daa]:
    • @hover/tokens-color@7.4.0
    • @hover/chakra-theme@0.49.0

0.87.3

Patch Changes

0.87.2

Patch Changes

  • Updated dependencies [526735fe, 52f3e7d0]:
    • @hover/tokens-color@7.3.0
    • @hover/chakra-theme@0.48.0

0.87.1

Patch Changes

  • Updated dependencies [95ae6d8f]:
    • @hover/utilities@0.9.0
    • @hover/chakra-theme@0.47.4

0.87.0

Minor Changes

  • #1659 1e49f599 Thanks @jrolfs! - Add Dialog component for common Modal use case of confirm and cancel (also sets the appropriate ARIA role as alertdialog)

Patch Changes

  • #1694 19879dda Thanks @jrolfs! - espect user's motion preference when display spinner in Button

  • #1687 cc149dc5 Thanks @jrolfs! - Fix visual issue where an outline would flash when a Button with minimal fill that has :focus (not :focus-visible) is blurred

    BeforeAfter
    beforeafter

  • #1694 2f537014 Thanks @jrolfs! - Respect user's motion preference in error message displayed by Field

  • #1694 e50bb07c Thanks @jrolfs! - Fix spacing between form input and validation error message in Field

  • Updated dependencies [cc149dc5, 026ad6bb, e50bb07c]:

    • @hover/chakra-theme@0.47.3
    • @hover/utilities@0.8.0

0.86.0

Minor Changes

  • #1614 8444ba4c Thanks @dependabot! - Add exports field to @hover/blueprint package.json

  • #1646 f4dd12db Thanks @jrolfs! - Add isOverlay prop to Drawer component. Set isOverlay to false to omit the translucent page overlay and allow the Drawer to remain open when a user interacts with content outside of the Drawer itself.

  • #1614 8204c83a Thanks @dependabot! - Add Framer Motion 5 and 6 to peerDependencies range to match that of Chakra's

  • #1646 c8c67de1 Thanks @jrolfs! - Add contentProps to Drawer and Modal APIs to allow props to be passed down to actual DOM container

Patch Changes

0.85.2

Patch Changes

  • #1618 7e5f8333 Thanks @richardhover! - Fix Button disabled state to be the correct color and consistent across browsers

    BrowserBeforeAfter
    Firefoxbefore--firefoxbefore--firefox
    Chromebefore--chromeafter--chrome
    Safaribefore--safariafter--safari

  • 2e741b27 Thanks @jrolfs! - Add deprecation warning for useTheme as it will be replaced with useChakraTheme in 1.0. Replace any existing usages of useTheme with useChakraTheme to ensure compatibility with the Chakra theme, then when upgrading to 1.0 only the import needs to renamed.

  • Updated dependencies [6c125f7d, 7e5f8333]:

    • @hover/tokens-color@7.2.0
    • @hover/chakra-theme@0.47.1

0.85.1

Patch Changes

0.85.0

Minor Changes

Patch Changes

  • #1584 f38c1a82 Thanks @jrolfs! - Fix super weird issue where the Slider sometimes gets rendered without any dimensions (and is therefore invisible) due to a weird CSS variable issue

  • #1581 072ee0fe Thanks @jrolfs! - Remove dependency on react-cool-dimensions. It was used in Message, which isn't even really an official component and furthermore it seems Framer Motion is able to achieve the desired animation effect on its own.

  • #1584 2a6ebaf0 Thanks @jrolfs! - Add snapThreshold to Slider which allows it to be configured to "snap" to the suggestedValue when both props are set

  • #1584 b0724635 Thanks @jrolfs! - Use distance200 shadow on Slider because Chrome's rendering engine renders distance100 super light which doesn't provide enough contrast

  • Updated dependencies [f38c1a82, 7811deb0, 1e8216e4, 433f2b10, aae0b35a, 86811979]:

    • @hover/chakra-theme@0.47.0
    • @hover/tokens-depth@0.12.0

0.84.0

Minor Changes

Patch Changes

  • #1576 d49a48a3 Thanks @jrolfs! - Fix distance100 shadow to include top shadow bleed to create definition on the top of containers

  • #1576 d582b239 Thanks @jrolfs! - Fix an issue with deprecation warnings where re-renders would throw a React useEffect error/warning because the dependency array is not a stable length

  • Updated dependencies [d49a48a3, 877badb7, eec255f4]:

    • @hover/chakra-theme@0.46.0
    • @hover/tokens-depth@0.11.0

0.83.0

Minor Changes

  • #1572 9bd851b8 Thanks @jrolfs! - Enable new typography by default (newTypography on BlueprintProvider)

0.82.0

Minor Changes

  • #1570 a53341a7 Thanks @jrolfs! - Enable new typography by default (newTypography on BlueprintProvider)

0.81.3

Patch Changes

  • 1e56582e Thanks @jrolfs! - Make ArrowRight decortion go a little further right

0.81.2

Patch Changes

  • 4c9bff43 Thanks @jrolfs! - Add brand-specific version of Link that supports decorators

  • 9aa6e0cd Thanks @jrolfs! - Add dArrowRight decoration

  • 0a8581cd Thanks @jrolfs! - Transition color in brand-specific button

  • 060e5012 Thanks @jrolfs! - Default white-space to nowrap in brand-specific button

  • dd077b64 Thanks @jrolfs! - Update state colors for neutral color scheme in Link and brand-specific button's minimal variant to be white with primary hover/active states as the gray neutral color scheme doesn't actually have any valid usecases or really make sense at all.

  • Updated dependencies [0a8581cd, 060e5012, dd077b64]:

    • @hover/chakra-theme@0.45.2

0.81.1

Patch Changes

  • b4140ace Thanks @jrolfs! - Use d as prefix for decorations (this is a breaking change but the /brand entrypoint is far from stable/official)

  • d600985b Thanks @jrolfs! - Fix typography in minimal variant of brand-specific Button

  • 7d2ef537 Thanks @jrolfs! - Add minimal variant to brand-specific Button

  • Updated dependencies [d600985b, 7d2ef537]:

    • @hover/chakra-theme@0.45.1

0.81.0

Minor Changes

  • 02fcb473 Thanks @jrolfs! - Add special /brand entrypoint with custom components intended for us in marketing collateral as opposed to product. Right now this includes:

    • A separate Button component that reads it's theme from BrandButton
    • "Decorations," intended to be used with the aforementioned Button, and are interactive icons

  • 02fcb473 Thanks @jrolfs! - Add Spinner component that will eventually replace Loader

Patch Changes

0.80.0

Minor Changes

Patch Changes

0.78.8

Patch Changes

  • f373567d Thanks @jrolfs! - Pass all system/style props to internal MenuList in Menu component.

  • Updated dependencies [feffa1f7]:

    • @hover/chakra-theme@0.42.1

0.78.7

Patch Changes

  • #1546 df54eb9d Thanks @jrolfs! - Add isMinimal to Link component to render links without any underline (aka text-decoration)
  • Updated dependencies [2ce5bb14, d8c2bdcd]:
    • @hover/chakra-theme@0.42.0

0.78.6

Patch Changes

  • #1543 86b2cf1c Thanks @jrolfs! - Add convenience props to Heading (isLight) and Body (isSemiBold and isBold) for setting alternative font weights
  • Updated dependencies [86b2cf1c, ed432a7f]:
    • @hover/chakra-theme@0.41.0

0.78.5

Patch Changes

  • Updated dependencies [46e74794]:
    • @hover/chakra-theme@0.40.0

0.78.4

Patch Changes

  • #1537 eddf86b7 Thanks @jrolfs! - Support icon and size on useToast

  • #1537 91709f8c Thanks @jrolfs! - Expose remainder of Chakra's toast API on toast function returned from useToast (update, close, isActive, and closeAll)

  • #1537 7ba3de70 Thanks @jrolfs! - Add missing shadow to Alert when displayed via useToast

0.78.3

Patch Changes

0.78.2

Patch Changes

  • #1520 346b7f6a Thanks @cpalmatier! - Changes default body weight to 400 from 300 in new typography

  • Updated dependencies [346b7f6a]:

    • @hover/tokens-typography@5.1.1
    • @hover/chakra-theme@0.38.5

0.78.1

Patch Changes

  • 07837afe Thanks @jrolfs! - - Only display visual focus indicator for :focus-visible on Link component

    • Make Links without href attributes appear disabled (unless the as prop is provided, e.g: <Link as="button">Click Me</Link>)

  • #1512 7ee110c3 Thanks @jrolfs! - Set position: relative on list items to create position context for absolutely positioned bullets

  • #1499 ab05bc57 Thanks @jrolfs! - Configure all font weights using system aliases instead of Chakra aliases

  • Updated dependencies [7ee110c3, cf53238a, 0ae4194f, ab05bc57, 42d7c954]:

    • @hover/chakra-theme@0.38.4
    • @hover/tokens-typography@5.1.0
    • @hover/tokens-depth@0.9.1

0.78.0

Minor Changes

  • #1420 6c9f4945 Thanks @jrolfs! - Add support for loading fonts in BlueprintProvider with includeFonts prop:

    • Set to true to load fonts based on newTypography setting (will only load the fonts required)
    • Set to 'all' to load all fonts (useful for A/B testing new fonts etc.)

  • #1420 4ccee192 Thanks @jrolfs! - Add support for isNew on Fonts component for loading Adelle Sans instead of Avenir and Open Sans

  • #1420 8c930ad0 Thanks @jrolfs! - Add support for new typography via newTypgrophy prop on BlueprintProvider

Patch Changes

  • #1420 15bfcf60 Thanks @jrolfs! - Use new (correct) CDN as default asset host for Fonts component (and includeFonts in BlueprintProvider)

  • #1420 65b0894f Thanks @jrolfs! - Remove duplicate weight @font-face rules in Fonts component. CSS will automatically choose the nearest weight anyways.

  • Updated dependencies [b2a3a71b]:

    • @hover/tokens-typography@5.0.0
    • @hover/chakra-theme@0.38.2

0.77.3

Patch Changes

0.77.2

Patch Changes

  • #1486 711540ca Thanks @jrolfs! - Use new (correct) CDN as default asset host for Fonts component (and includeFonts in BlueprintProvider)

0.77.1

Patch Changes

  • #1388 6a36a09a Thanks @jrolfs! - Remove 3.x from Framer Motion peerDependency range. Chakra supports 3, 4 or 5, but @hover/blueprint requires 4+.

0.77.0

Minor Changes

Patch Changes

0.76.1

Patch Changes

0.76.0

Minor Changes

  • #1424 82c90f9d Thanks @jrolfs! - Add and theme Code component

  • #1423 d0c8d34d Thanks @jrolfs! - Support both @fortawesome/* and @hover/icons in Alert, Button, IconButton, TextInput, and Tag.

  • #1423 bd461036 Thanks @jrolfs! - Make AwesomeIcon component backward-compatible with new icons. It's now possible to specify icons from @hover/icons in AwesomeIcon.

  • #1423 565f5036 Thanks @jrolfs! - Support semantic icons (as opposed to decorative) via the title attribute on Icon

  • #1426 e6fa13de Thanks @jrolfs! - Oops, forgot to export IconButton altogether... so add (export) IconButton 😥

Patch Changes

0.75.1

Patch Changes

  • #1422 793fd001 Thanks @richardhover! - Add maxContentHeight prop to Modal component to allow a custom scroll height to be configured for the modal content

0.75.0

Minor Changes

  • #1390 7e085acf Thanks @jrolfs! - Add Icon component for new icon system (@hover/icons), currently this includes Feather icons.

Patch Changes

  • Updated dependencies [ed1e1c57, 5624b4a1]:
    • @hover/utilities@0.6.0
    • @hover/chakra-theme@0.35.1

0.74.2

Patch Changes

  • Updated dependencies [ca7e1c85, 31829249]:
    • @hover/chakra-theme@0.35.0
    • @hover/tokens-border@0.11.0

0.74.1

Patch Changes

0.74.0

Minor Changes

  • #1411 c3a4b7c0 Thanks @jrolfs! - Add escape hatch to allow theme to be customized

    ⚠️ Note: this should only be necessary for augmenting or adding components that Blueprint does not support. Any necessary customizations should be discussed with the design systems team so we can consider incorporating them upstream in @hover/chakra-theme.

    ‼️ Disclaimer: modifying the default Blueprint theme can cause unintended side-effects and any modifications may break with new versions of Blueprint. Do so at your own risk!

    1. Create a custom theme file (e.g: src/theme.ts)


      import { applyThemeOverrides, ThemeOverrides } from '@hover/blueprint';
      const themeOverrides: ThemeOverrides = {
      components: {
      Breadcrumb: {
      variants: {
      brand: {
      link: {
      color: 'brandGreen.400',
      },
      },
      },
      },
      },
      };
      // ⚠️ NOTE: you must export your theme as `theme` for compatibility with Chakra's CLI
      export const theme = applyThemeOverrides(themeOverrides);

    2. Override built-in theme by passing customTheme to BlueprintProvider


      import * as React from 'react';
      import { BlueprintProvider, ThemeOverrides } from '@hover/blueprint';
      import { theme } from './theme';
      interface AppProps {
      children: React.ReactNode;
      }
      const App = ({ children }: AppProps) => (
      <BlueprintProvider customTheme={theme}>{children}</BlueprintProvider>
      );
      export { App };

    3. Update the Chakra CLI script to point to your custom theme (see above)


      {
      "scripts": {
      "postinstall": "chakra-cli tokens src/theme.ts"
      }
      }

0.73.0

Minor Changes

  • #1410 1e9ab2ab Thanks @jrolfs! - Add isAnimated prop to LoadingOverlay to allow animation to be disabled manually

  • #1407 a609a090 Thanks @jrolfs! - Add Tabs component

  • #1400 0ae433c4 Thanks @jrolfs! - Add TileRadio and TileCheckbox

  • 669b314f Thanks @jrolfs! - Migrate BlockOption to use TileCheckbox internally, this has a number of benefits:

    • ♿ Accessibility is improved significantly as we're using a native <input type="checkbox" /> internally instead of messing with aria-selected (which was being used incorrectly)
    • ♿ It's possible to interact with BlockOption with the keyboard (it was not possible at all previously)
    • Visually it's much clearer that BlockOption is an interactive toggle

    ⚠️ VISUAL CHANGE: BlockOption

    Before

    BlockOption (Before Change)

    After

    BlockOption (After Change)

Patch Changes

  • #1400 fdbebb50 Thanks @jrolfs! - Make cursor behavior consistent in Checkbox

  • #1400 20df8854 Thanks @jrolfs! - Export all Tabs props types

  • #1409 dfbf0dd0 Thanks @jrolfs! - Fix styling for isDisabled + isChecked state of Radio and TileRadio

  • #1410 237b7419 Thanks @jrolfs! - Respect reduced motion preference in LoadingOverlay

  • #1400 cb125cb0 Thanks @jrolfs! - Ensure Field does not pass isDisabled to children that do not support it, for example:

    ⚠️ Note: a CheckboxGroup should really be used unless absolutely necessary


    <Field label="Ungrouped Checkboxes" name="ungroup_checkboxes">
    <Stack marginTop="200" spacing="300">
    <Checkbox value="some-boolean-value-1">Some boolean option 1</Checkbox>
    <Checkbox value="some-boolean-value-2">Some boolean option 2</Checkbox>
    </Stack>
    </Field>

  • Updated dependencies [dfbf0dd0, 98a839ec]:

    • @hover/chakra-theme@0.34.0

0.72.1

Patch Changes

0.72.0

Minor Changes

  • #1394 fbf339bc Thanks @jrolfs! - Add isDisplay to Heading component to toggle display heading variant

Patch Changes

  • #1401 5c582d61 Thanks @jrolfs! - Restore default id behavior in Field (default the wrapped input's id to the field's name unless id is explicitly specified on the wrapped input)
  • Updated dependencies [4acb1893]:
    • @hover/chakra-theme@0.32.0

0.71.2

Patch Changes

  • #1396 a15011f0 Thanks @jrolfs! - - Ensure onClick handler always fires in Link

    • Restore legacy disabled prop on Field that was forgotten in the migration
    • Restore legacy onValueChange prop in TextInput that was forgotten in the migration

  • #1396 0a6c57f7 Thanks @jrolfs! - Remove default spacing in Form component (the legacy version only rendered a Box so the default spacing was breaking existing Form layouts)

0.71.1

Patch Changes

  • #1392 612840d0 Thanks @jrolfs! - Default Checkbox and Radio control alignment to center and require alignItems to be set to baseline in order to align the control with the first line of the label when it wraps.
  • Updated dependencies [612840d0, 2d966af6]:
    • @hover/chakra-theme@0.31.1
    • @hover/utilities@0.4.0

0.71.0

Minor Changes

Patch Changes

  • #1386 01f4ab57 Thanks @jrolfs! - Don't set placeholder on Select when wrapped with Field

  • #1386 04684252 Thanks @jrolfs! - Fix types for Form component so handlers (e.g: onSubmit) inherit from HTMLFormElement instead of HTMLFormElement | HTMLDivElement

0.70.0

Minor Changes

  • #1355 eeb54a44 Thanks @jrolfs! - - Add small and large sizes for Checkbox and Radio

    • Align Checkbox and Radio controls properly when label text wraps

  • #1358 ce6056c5 Thanks @syed-mohsin! - add showIndentation prop to be able to disable the expanded content indentation for Collapse component

  • #1355 b6ea0696 Thanks @jrolfs! - Render a Stack with appropriate spacing with Form component

  • #1374 235347c3 Thanks @jrolfs! - Add LoadingOverlay component for displaying a loading indicator that blocks interaction for the entire page

Patch Changes

0.69.1

Patch Changes

  • Updated dependencies [4c9b2c4d]:
    • @hover/tokens-typography@4.0.0
    • @hover/chakra-theme@0.30.1

0.69.0

Minor Changes

Patch Changes

0.68.0

Minor Changes

  • #1231 d1ea58c8 Thanks @jrolfs! - Add new brand color palettes and update success and danger palettes for use alongside new brand colors.

Patch Changes

  • Updated dependencies [d1ea58c8, d1ea58c8]:
    • @hover/tokens-color@7.0.0
    • @hover/chakra-theme@0.29.0
    • @hover/tokens-border@0.9.1
    • @hover/tokens-depth@0.7.4
    • @hover/tokens-typography@3.2.1

0.67.1

Patch Changes

0.67.0

Minor Changes

  • c6141b34 Thanks @jrolfs! - Add `Drawer` component

  • c6141b34 Thanks @jrolfs! - Focus first focusable element by default in Drawer and Modal instead of defaulting to focusing the content element

Patch Changes

  • c6141b34 Thanks @jrolfs! - Remove Chakra CLI postinstall step that doesn't work reliably

  • Updated dependencies [c6141b34, c6141b34]:

    • @hover/chakra-theme@0.28.0

0.65.3

Patch Changes

0.65.2

Patch Changes

0.65.1

Patch Changes

0.65.0

Minor Changes

Patch Changes

  • #1230 f57d8563 Thanks @glindelien! - Modify API for Collapse to include text wrapping and custom width. Fix: make left-side border element dynamic in size.

  • #1240 66b4acdf Thanks @jrolfs! - Remove extraneous wrap prop from Collapse and just default whiteSpace instead

  • #1240 96889f15 Thanks @jrolfs! - Fix type definition for title prop on Collapse component to reflect that it supports a JSX fragment

  • Updated dependencies [5f8aa499, f5528604]:

    • @hover/chakra-theme@0.26.0

0.64.0

Minor Changes

Patch Changes

0.63.0

Minor Changes

Patch Changes

  • Updated dependencies [e13b19e1]:
    • @hover/chakra-theme@0.24.0

0.62.2

Patch Changes

  • #1153 b91d28e1 Thanks @glindelien! - Remove marginTop=0 from Text theme for Body component consistency

  • Updated dependencies [b91d28e1]:

    • @hover/chakra-theme@0.23.1

0.62.1

Patch Changes

  • Updated dependencies [6d47cae6]:
    • @hover/chakra-theme@0.23.0

0.62.0

Minor Changes

Patch Changes

  • #1142 2c85b756 Thanks @jrolfs! - Ensure all props not passed to the Font Awesome icon component are passed to the Box container component in AwesomeIcon

0.61.0

Minor Changes

0.60.1

Patch Changes

  • Updated dependencies [4e5c9b2e]:
    • @hover/chakra-theme@0.22.0

0.60.0

Minor Changes

Patch Changes

0.59.0

Minor Changes

  • #1112 2732f15d Thanks @jrolfs! - Add Mono Lisa to Fonts component

  • #1114 a96c3e32 Thanks @jrolfs! - Add Alert component that composes Chakra's various components (AlertDescription, AlertTitle etc.)

  • #1114 c6eecbbd Thanks @jrolfs! - Migrate AwesomeIcon to use Chakra primitives and theme. This adds support for the all layout style props as well as the sx prop.

Patch Changes

0.58.0

Minor Changes

Patch Changes

  • #1064 8ac05c4 Thanks @jrolfs! - Make icon color in focus state in Select component consistent with TextInput's icon
  • Updated dependencies [515fe97, f0bf9ce]:
    • @hover/tokens-border@0.9.0
    • @hover/chakra-theme@0.20.0

0.57.3

Patch Changes

0.57.2

Patch Changes

  • #1090 a0986d3 Thanks @jrolfs! - Default box-sizing to border-box on Box component

    _This was the original behavior, and should have been ported over when we migrated onto Chakra's Box component in 8479de190dc7bfef6f85361ac8576eaef227f330.

0.57.1

Patch Changes

  • Updated dependencies []:
    • @hover/chakra-theme@0.19.0

0.57.0

Minor Changes

  • #1079 b0e94fc Thanks @jrolfs! - Prefix numeric breakpoint keys, i.e: { 100: string } → { width100: string }

    Chakra convert breakpoints to a "hybrid" array + object structure and numeric keys are treated as array indices in that case (even though they are actually string, e.g: '100'). This was causing broken media queries because Chakra relies on sorting the array in order to apply breakpoints in the correct order.

    🚨 Unfortunately this is technically a breaking change for responsive style props, but the media query behavior is super broken due to the above issue as it stands now. I also don't think there is much usage of the numeric breakpoint scale.

    • Use base instead of default for the base media query
    • Use the new versions of the numeric scale (e.g: 500 → width500)

    <Heading size={{ default: 400, desktop: 500, 500: 700 }}>Heading</Heading>


    <Heading size={{ base: 400, desktop: 500, width500: 700 }}>Heading</Heading>

Patch Changes

0.56.1

Patch Changes

  • #1071 82f2b9d Thanks @jrolfs! - Fix broken postinstall hook. It was using the wrong Chakra CLI package (chakra-cli instead of @chakra-ui/cli)

0.56.0

Minor Changes

  • #1057 d00a929 Thanks @jrolfs! - Expose chakraTheme in addition to useChakraTheme hook for use outside of components

  • #1057 c692f25 Thanks @jrolfs! - Attempt to render most appropriate heading level by default in Heading component (instead of always rendering h2).

Patch Changes

  • Updated dependencies [92e9951]:
    • @hover/tokens-typography@3.1.0
    • @hover/chakra-theme@0.17.0

0.55.0

Minor Changes

Patch Changes

  • Updated dependencies [8d34f9a]:
    • @hover/chakra-theme@0.16.0

0.54.0

Minor Changes

Patch Changes

  • Updated dependencies [fd2d371]:
    • @hover/chakra-theme@0.15.1

0.53.0

Minor Changes

Patch Changes

  • #1036 b30a7b2 Thanks @jrolfs! - Generate Chakra theme token type definitions on postinstall.

    In order to ensure Chakra's type definitions incorporate the Blueprint theme, we need to run the chakra-cli tokens @hover/chakra-theme in wherever @hover/blueprint is installed. Hopefully a postinstall hook is sufficient, otherwise we'll need to document configuring chakra-cli as a necessary step or figure out a better solution for updating the type definitions.

  • #1038 1dd7094 Thanks @glindelien! - Updated Tooltip API to use colorScheme instead of colorMode.

  • Updated dependencies [dded2f1, ea65488, 1dd7094]:

    • @hover/tokens-typography@3.0.0
    • @hover/chakra-theme@0.15.0

0.52.0

Minor Changes

  • #1012 d4ba1b7 Thanks @jrolfs! - Expose theme foundations on foundations/ entrypoint:


    import { motion } from '@hover/blueprint/foundation';

  • #1012 906b9b1 Thanks @jrolfs! - Expose entire Chakra API via /chakra entrypoint. This makes all Chakra primitives available for custom use-cases that standard Blueprint components don't cover.

    Example


    // The `TextInput` component from Blueprint should handle most use-cases, however...
    import { TextInput } from '@hover/blueprint';
    <TextInput iconBefore={faSomeIcon} />
    // The `Input` primitives are now available from Chakra for custom cases
    import { InputGroup, InputRightElement, Input, InputProps } from '@hover/blueprint/chakra';
    export const InputWithCustomButton = (props: InputProps) => (
    <InputGroup>
    <Input type="text" />
    <InputRightElement>
    {/* some custom button thing here /*}
    </InputRightElement>
    </InputGroup>
    )

Patch Changes

  • Updated dependencies [b099858]:
    • @hover/chakra-theme@0.14.0

0.51.0

Minor Changes

Patch Changes

0.50.0

Minor Changes

Patch Changes

0.49.0

Minor Changes

  • #948 3090a9d Thanks @jrolfs! - Support resetCSS prop on BlueprintProvider. The resetCSS prop defaults to false and is passed to the ChakraProvider internally to enable Chakra's CSS reset functionality

  • #916 9d6d5fd Thanks @jrolfs! - Add tiny size for AwesomeIcon

  • #916 9df5665 Thanks @jrolfs! - Add Select component

Patch Changes

0.48.1

Patch Changes

  • Updated dependencies []:
    • @hover/chakra-theme@0.10.0

0.48.0

Minor Changes

  • a7b1ce7 Thanks @jrolfs! - Use ChakraProvider in BlueprintProvider.

    The Chakra theme will now be passed down via Emotion's ThemeProvider. This prevents the need to pass a theme directly to Chakra components.

    🚨 This could potentially cause problems if your application already is using Emotion theming.

Patch Changes

  • ab139f5 Thanks @jrolfs! - Fix the margin API on Field to properly interpret theme tokens.

    Before:


    <Field marginRight={500}> // margin-right: 500px;

    After:


    <Field marginRight={500}> // margin-right: 24px;

  • 5d0c411 Thanks @jrolfs! - Remove support for Chakra global styles in the hope that it side-steps the Emotion provider issues we're dealing with

  • Updated dependencies [a7b1ce7]:

    • @hover/chakra-theme@0.9.1

0.48.0-next.3

Patch Changes

  • #894 48677e2 Thanks @jrolfs! - Fix the margin API on Field to properly interpret theme tokens.

    Before:


    <Field marginRight={500}> // margin-right: 500px;

    After:


    <Field marginRight={500}> // margin-right: 24px;

0.48.0-next.2

Minor Changes

  • #892 a906ffe Thanks @jrolfs! - Use ChakraProvider in BlueprintProvider.

    The Chakra theme will now be passed down via Emotion's ThemeProvider. This prevents the need to pass a theme directly to Chakra components.

    🚨 This could potentially cause problems if your application already is using Emotion theming.

Patch Changes

  • Updated dependencies [a906ffe]:
    • @hover/chakra-theme@0.9.1-next.0

0.48.0-next.1

Patch Changes

  • 0501ff9 Thanks @jrolfs! - Remove support for Chakra global styles in the hope that it side-steps the Emotion provider issues we're dealing with

0.47.1

Patch Changes

0.47.0

Minor Changes

  • #867 662cb38 Thanks @jrolfs! - Add Chakra theme to Blueprint context and expose via useChakraTheme.

    The useChakraTheme will inject Chakra's CSS variables into the document via @emotion/css's injectGlobal, which makes it possible to use Chakra-based components without requiring a ChakraProvider.

Patch Changes

  • Updated dependencies [58a1498]:
    • @hover/chakra-theme@0.9.0

0.46.1

Patch Changes

  • Updated dependencies [f0d4617]:
    • @hover/tokens-color@5.0.0
    • @hover/tokens-border@0.7.2
    • @hover/tokens-depth@0.7.2
    • @hover/tokens-typography@2.2.2

0.46.0

Minor Changes

  • #863 93adc89 Thanks @jrolfs! - Update color tokens dependency (preserving backwards compatability by aliasing neutral000 to neutral0)

Patch Changes

  • Updated dependencies [3116fe0]:
    • @hover/tokens-border@0.7.1
    • @hover/tokens-color@4.0.2
    • @hover/tokens-depth@0.7.1
    • @hover/tokens-device@0.4.1
    • @hover/tokens-size@0.6.1
    • @hover/tokens-space@0.9.1
    • @hover/tokens-typography@2.2.1

0.45.5

Patch Changes

  • Updated dependencies [db5f41c]:
    • @hover/tokens-depth@0.7.0

0.45.4

Patch Changes

  • Updated dependencies [acbdc6d, 3717877]:
    • @hover/tokens-typography@2.2.0
    • @hover/tokens-border@0.7.0
    • @hover/tokens-device@0.4.0
    • @hover/tokens-size@0.6.0
    • @hover/tokens-space@0.9.0

0.45.3

Patch Changes

0.45.2

Patch Changes

0.45.1

Patch Changes

  • #777 e836e79 Thanks @jrolfs! - Fix custom dimensions (width and height) in Button component

0.45.0

Minor Changes

  • #759 c9fafcf Thanks @jrolfs! - Add support for the layout system API on Button (e.g: width and height)

Patch Changes

  • c366a4b Thanks @jrolfs! - Prevent text content from wrapping in Button

0.44.1

Patch Changes

0.44.1-next.0

Patch Changes

0.44.0

Minor Changes

0.43.1

Patch Changes

  • #671 e9b1cb3 Thanks @jrolfs! - 🐛 Ensure Field error message isn't hidden by a background color

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.43.0 (2021-03-26)

Features

  • components: export defaultTheme (52f94cb)
  • components: export Theme type (5a1ab3f)

0.42.2 (2021-03-13)

Note: Version bump only for package @hover/blueprint

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.42.1 (2021-03-09)

Bug Fixes

  • components: disallow responsive values for Button fill (fad9cd1)

0.42.0 (2021-01-28)

Features

  • components: expose useTheme hook (044ceef)

0.41.3 (2021-01-21)

Bug Fixes

  • components: don't render name attribute on TextInput container element (a37d43f)

0.41.2 (2021-01-07)

Bug Fixes

  • components: export BaseButtonProps from api (a56b000)

0.41.1 (2020-12-01)

Bug Fixes

  • components/blockoption: update color for subheading to impove accesibility (#584) (f1ba0f9)

0.41.0 (2020-11-25)

Features

  • components: add subheading to BlockOption component (#569) (b2e1441)

Reverts

  • Revert "build(deps): bump react from 16.14.0 to 17.0.1" (865cdf0)

0.40.1 (2020-11-05)

Bug Fixes

  • components/toggle: use primary300 for disabled and checked (08c7fd0)

0.40.0 (2020-10-21)

Features

  • components: Toggle - disabled state when toggle value = true' (0ba5f26)

0.39.0 (2020-10-10)

Bug Fixes

  • components: update prop types to allow responsive values (7ab34db)
  • components: update prop types to allow responsive values (f211c70)

Features

  • components: ✨ add intermediate size (650) to Heading (1e001c8)
  • tokens-typography: add intermediate 850 font size/height (6d7795c)

0.38.1 (2020-10-01)

Note: Version bump only for package @hover/blueprint

0.38.0 (2020-09-24)

Features

  • components: ✨ add large and huge sizes to AwesomeIcon (1b41022)

0.37.1 (2020-09-23)

Bug Fixes

  • components: allow Panel defaults to be overridden properly (bc90b28)

0.37.0 (2020-09-23)

Features

  • components: add distance600 shadow to theme (30f2baf)
  • components: add label prop to Link (cace9b6)
  • components: add Panel component (43abccb)

0.36.6 (2020-09-15)

Bug Fixes

  • components: update Button and TextInput height to size400 (6911766)

0.36.5 (2020-09-11)

Bug Fixes

  • components: contract focus indicator on minimal fill button (59d7453)

0.36.4 (2020-09-01)

Bug Fixes

  • components: set width on button content wrapper (0893882)

0.36.3 (2020-09-01)

Bug Fixes

  • components: add interaction API to Link (onPress) (f4cf143)
  • components: add text align API to Link (c05ea2a)
  • components: use semi-bold font weight for Link (f36ce27)

0.36.2 (2020-08-29)

Bug Fixes

  • components: forward ref in Link (8b1a2e0)

0.36.1 (2020-08-29)

Bug Fixes

  • components: forward ref in Field (4cf4d83)

0.36.0 (2020-08-28)

Bug Fixes

  • components: include React style API on all components (48a6db3)

Features

  • components: add position system API to Box component (5c37b64)

0.35.1 (2020-08-27)

Note: Version bump only for package @hover/blueprint

0.35.0 (2020-08-27)

Features

  • components: add success color variant to Button (09a47cc)

0.34.1 (2020-08-20)

Bug Fixes

0.34.0 (2020-08-20)

Features

  • components: add Image component (2a0680e)
  • components: add title prop to all components (da25822)

0.33.1 (2020-08-20)

Bug Fixes

  • components: use medium Loader for large Button loading state (62f8c34)

0.33.0 (2020-08-20)

Features

  • components: extend space scale up to 1100 (3bf41bc)

0.32.0 (2020-08-19)

Bug Fixes

  • components: set font-display as fallback to prevent SSR flicker (580c414)
  • limit Font Awesome icon props to IconDefinition (d972f41)

BREAKING CHANGES

  • icons can no long be supplied by name (e.g: 'email')

0.31.0 (2020-08-18)

Features

  • components: add default breakpoints to theme (013ba4e)
  • components: default box-sizing to border-box for Box (d29a74d)

0.30.1 (2020-08-18)

Bug Fixes

  • components: make TextInput height match large Button height (05310f5)

0.30.0 (2020-08-17)

Features

  • components: add Styles component (570b27e)

0.29.0 (2020-08-15)

Bug Fixes

  • components: forward ref in Box (a7a35bb)
  • components: forward ref in Label (ecbdd1a)

Features

  • components: add OpenSans font component (84dce8a)
  • components: use Open Sans in Fonts component (bf4fcec)

BREAKING CHANGES

  • components: the Fonts component will no longer load Clear Sans

0.28.1 (2020-08-10)

Note: Version bump only for package @hover/blueprint

0.28.0 (2020-08-07)

Features

  • components: add Fonts component that provides global font CSS (8b4c8fe)

0.27.6 (2020-07-31)

Bug Fixes

  • components: add missing callback dependences in Slider (227b83c)
  • components: add missing callback dependences in TextInput (48195ba)
  • components: add missing callback dependency in BlockOption (1daa974)
  • components: add missing callback dependency in Button (699f897)
  • components: add missing effect dependency in Field (71b6a52)

0.27.5 (2020-07-31)

Note: Version bump only for package @hover/blueprint

0.27.4 (2020-07-30)

Bug Fixes

  • components: move suggested value indicator behind Slider when disabled (d90f333)
  • components: update internal Slider value when disabled (6b3b6e4)

0.27.3 (2020-07-30)

Note: Version bump only for package @hover/blueprint

0.27.2 (2020-07-29)

Bug Fixes

  • slider thumb focus state centers (d46fee6)

0.27.1 (2020-07-29)

Bug Fixes

  • components: obey the RULES OF HOOKS in Field component (30159e2)

0.27.0 (2020-07-29)

Bug Fixes

  • components: export Label (ed9d6c0)
  • components: expose alternate element on Box as element instead of as (180127d)
  • components: expose type and mode types on TextInput (39732f1)
  • components: fix Label index (2be8978)
  • components: forward ref in Body (bd2b1e7)
  • components: use inline label instead of wrapping input in Field (92e6949)

Features

  • components: ✨ Add Field component (4cbfb38)
  • components: add element prop to Body (2f8f8f8)
  • components: add label prop to TextInput (b02633c)
  • components: add label autohide prop on Field component (c579a0d)
  • components: add Label component (21644c4)
  • components: add left and right margin support to Body (860c522)
  • components: add space size50 to theme.space scale (3df1bb1)
  • components: add variant of Label that composes Body (03412bb)

0.26.2 (2020-07-28)

Bug Fixes

  • components: ♿️ add label prop to Button, warn appropriately (e67c651)

0.26.1 (2020-07-25)

Bug Fixes

  • components: forward container ref instead of icon in Loader (4a5c5ce)

0.26.0 (2020-07-24)

Features

  • components: 💄 Force ::placeholder color on TextInput (cd01c46)

0.25.3 (2020-07-24)

Note: Version bump only for package @hover/blueprint

0.25.2 (2020-07-23)

Bug Fixes

  • components: remove any user-agent border from toggle internal input (74938be)

0.25.1 (2020-07-22)

Bug Fixes

  • components: don't obstruct focus indicator on Toggle component (8720421)
  • components: forward ref in AwesomeIcon (020d2e1)
  • components: forward ref in Loader (f97a816)

0.25.0 (2020-07-21)

Features

  • components: add suggestedValue to Slider commponent (272ceb7)

0.24.0 (2020-07-17)

Bug Fixes

  • components: inherit color in Button loader (164aaad)

Features

  • components: add 'inherit' to theme colors (ab0041e)
  • components: add 'small' Toggle size (6c4d2a2)

0.23.0 (2020-07-15)

Features

  • textinput: ✨ Add forwardRef functionality to TextInput (9500b53)

0.22.1 (2020-07-08)

Note: Version bump only for package @hover/blueprint

0.22.0 (2020-07-07)

Features

  • Loader: ✨ Add Loader component (938b21c)

0.21.3 (2020-06-25)

Bug Fixes

  • components: don't obstruct focus indicator on Button (20b09f1)

0.21.2 (2020-06-20)

Bug Fixes

  • actually export Form component 🤦🏼‍♂️ (93933ae)

0.21.1 (2020-06-20)

Bug Fixes

  • components: prevent disabled Buttons from appearing '
    ' (4920502)

0.21.0 (2020-06-19)

Bug Fixes

  • components: use '
    ' selector to implement loading styles (385e1fd)

Features

  • components: switch to duotone spinner (ac6691f)
  • components: tweak spring configuration for Button spinner animation (1fd083d)
  • components: use translation animation for spinner in Button (07578e9)

0.20.0 (2020-06-19)

Features

  • components: add Form component (6f04d1f)
  • components: add grid and flex item support to Body (dfd5c67)
  • components: add grid and flex item support to Heading (1efdef9)
  • components: add grid and flex item support to Link (6948092)
  • components: add grid item support to Button (4b56583)
  • components: add grid support to Box component (d0386ad)

0.19.0 (2020-06-19)

Bug Fixes

  • 🏷️ Use proper typings for useRef (d681c1b)

Features

  • ✨ Add loading prop to Button (497d5c9)
  • ✨ Add loading prop to ButtonProps (3151a8c)
  • ✨ Add ButtonThemeColor type (4e49140)
  • ✨ Add static sizing when button is loading (97a1d42)

0.18.1 (2020-06-17)

Note: Version bump only for package @hover/blueprint

0.18.0 (2020-06-16)

Features

  • components: add textAlign prop to Body component (09c430b)
  • components: add textAlign prop to Heading component (91de446)

0.17.1 (2020-06-09)

Bug Fixes

  • components: set box-sizing explicitly on toggle (de68296)

0.17.0 (2020-05-28)

Features

  • components: add Toggle component (79836fd)

0.16.3 (2020-05-28)

Bug Fixes

  • components: make 'name' optional (67eb678)

0.16.2 (2020-05-26)

Bug Fixes

  • components: attach test ID to Body element (b9381dd)
  • components: attach test ID to Box element (e9ae2da)
  • components: attach test ID to Heading element (9e65c72)
  • components: attach test ID to Link element (d24d6fc)
  • components: implement display on Link (0cafcef)

0.16.1 (2020-05-21)

Bug Fixes

  • components: apply transition to AwesomeIcon correctly (1e63c59)

0.16.0 (2020-05-18)

Bug Fixes

  • components: use number instead of string type for Body size (3dbafa5)
  • components: use number instead of string type for Heading size (6422009)
  • components: use number instead of string type for system scales (990ac2c)

BREAKING CHANGES

  • components: size prop on Heading now must use numbers instead of strings, e.g: <Heading size={200}> instead of <Heading size="200">.
  • components: size prop on Body now must use numbers instead of strings, e.g: <Body size={200}> instead of <Body size="200">.
  • components: system props on components now must use numbers instead of strings, e.g: <Box paddingX={200}> instead of <Box paddingX="200">.

0.15.6 (2020-05-15)

Note: Version bump only for package @hover/blueprint

0.15.5 (2020-05-14)

Bug Fixes

  • components: add missing form related attributes to Button (e6599b9)

0.15.4 (2020-05-13)

Bug Fixes

  • components: provide theme context to Box (62e4606)

0.15.3 (2020-05-13)

Bug Fixes

  • components: make Box prop types theme aware (77728a3)

0.15.2 (2020-05-12)

Note: Version bump only for package @hover/blueprint

0.15.1 (2020-05-12)

Bug Fixes

  • components: only attach ID to internal input element in TextInput (e0cc9eb)

0.15.0 (2020-05-12)

Bug Fixes

  • components: add color transition to AwesomeIcon (c00a6b8)
  • components: add ID attribute to TextInput (99c6c5c)
  • components: attach test ID to TextInput element (8ff252f)
  • components: remove browser focus outline from text input (1607439)
  • components: use idle and invalid border styles in TextInput (da6962a)

Features

  • components: implement icon support on TextInput component (d4b2a72)

0.14.0 (2020-05-07)

Bug Fixes

  • components: make Box default to flex display (37b6e0e)

Features

  • components: add TextInput component (80a9889)

0.13.1 (2020-05-01)

Note: Version bump only for package @hover/blueprint

0.13.0 (2020-04-28)

Bug Fixes

  • components: attach test ID to button element (3b36909)
  • components: ensure button element properly disabled in Button (8bbd0aa)
  • components: only use pointer cursor on Button when enabled (f80754e)
  • components: use margin for AwesomeIcon bounding box (b50319b)
  • components: use size tokens to specify button size (c393a89)

Features

  • components: add 'minimal' fill to Button (c912426)
  • components: add icon API to button component (d972097)
  • components: implement disabled state on Button (3e1e5e9)

0.12.0 (2020-04-24)

Features

  • components: add Link component (f549b0b)

0.11.0 (2020-04-22)

Bug Fixes

  • components: export BaseProps from API (c9fd9b6)
  • components: implement 'sizes' not 'size' on theme (abfa489)

Features

  • components: add AwesomeIcon component (d6dd558)
  • components: bump styled-components peer dependency to 5.1.0 (de13858)

0.10.3 (2020-04-21)

Note: Version bump only for package @hover/blueprint

0.10.2 (2020-04-13)

Note: Version bump only for package @hover/blueprint

0.10.1 (2020-04-13)

Note: Version bump only for package @hover/blueprint

0.10.0 (2020-04-10)

Features

  • components: add Button component (d3bc1ab)

0.9.3 (2020-04-10)

Note: Version bump only for package @hover/blueprint

0.9.2 (2020-04-03)

Note: Version bump only for package @hover/blueprint

0.9.1 (2020-03-26)

Bug Fixes

  • components: update Slider styles, ensure cross-browser consistency (226fd45)

0.9.0 (2020-03-26)

Features

  • components: add border widths to theme (c6255a9)

0.8.4 (2020-03-13)

Reverts

  • Revert "fix(components): remove file field from package.json, add .npmignore" (fb76110)

0.8.3 (2020-03-13)

Bug Fixes

  • components/slider: pass defaulted props to internal element (ecd1ccc)

0.8.2 (2020-03-11)

Bug Fixes

  • components/slider: move all defaults to props destructure (453827a)

0.8.1 (2020-03-11)

Bug Fixes

  • components: remove file field from package.json, add .npmignore (1902d76)

0.8.0 (2020-03-10)

Features

  • components/blockoption: add BlockOption component (#70) (d743bb4)

0.7.0 (2020-03-10)

Features

  • components/blockoption: add BlockOption component (#70) (9e44531)

0.6.1 (2020-03-10)

Bug Fixes

  • components/theme: add missing token to space scale (b6130a2)

0.6.0 (2020-03-09)

Features

  • components: add shadows to theme (f5faefb)

0.5.0 (2020-03-06)

Bug Fixes

  • components: default Slider props in destructured assignment (c106395)
  • components: remove color style function and fix styling in Slider (7590792)

Features

  • components: add Slider component and story (85edc88)
  • components: add Slider properties (bcb52cb)
  • components: fix story, add additional props, extra styling (3001688)
  • components: update story for slider and add aria props for a11n (14f38b5)

Performance Improvements

  • components: use useCallback for Slider onChange handler (1a2ce52)

0.4.0 (2020-03-06)

Bug Fixes

  • components: re-export theme types from index (41e9770)
  • components: remove extraneous re-export from hoc (6507a9a)

Features

  • components: add radii and border styles to theme (ccba99d)

0.3.2 (2020-03-06)

Note: Version bump only for package @hover/blueprint

0.3.1 (2020-03-05)

Note: Version bump only for package @hover/blueprint

0.3.0 (2020-03-04)

Bug Fixes

  • components: reference correct tokens for headingStyle 700 (3db2e40)

Features

  • components: add color to text and heading styles on theme (451bdaa)
  • components: add fonts to theme (29c47bc)
  • components: add Heading component (a61a2b3)
  • components: add initial Theme and context foundation (c4aa0e1)
  • components: add initial working version of Body component (f08b0ae)
  • components: add text and heading styles to theme (f37bc8c)
  • components: implement basic theme internally (3860665)

0.2.0 (2020-02-07)

Features

  • components: add super basic Paragraph and Box components (7cb18ae)