Blueprint

GuidesFoundationComponentsReleases
⌘K

Change Log

1.2.0

Minor Changes

1.1.0

Minor Changes

1.0.2

Patch Changes

1.0.1

Patch Changes

1.0.0

Major Changes

  • #2927 5ca3d0553 Thanks @fhuyghe! - Breaking: useGallery is being replaced with useGalleryContext.

    App.tsx

    // Before
    import { useGallery } from '@hover/gallery';
    const { currentImage, currentIndex } = useGallery();
    //After
    import { useGalleryContext } from '@hover/gallery';
    const { currentImage, currentIndex } = useGalleryContext();

    Adding theming to the gallery component in anticipation of future variants.

    The theme for the Gallery component must also be added to your DesignSystemProvider.

    App.tsx

    import { DesignSystemProvider } from '@hover/blueprint';
    import { Gallery } from '@hover/blueprint/extra/theme';
    interface AppProps {
    children: React.ReactNode;
    }
    const App = ({ children }: AppProps) => (
    <DesignSystemProvider extraComponentThemes={{ Gallery }}>
    {children}
    </DesignSystemProvider>
    );
    export { App };

0.10.0

Minor Changes

  • #2926 96a4d4398 Thanks @fhuyghe! - Adding renderSlideContent prop and change the title prop to also accept a render function.

    Set renderSlideContent to render a custom component instead of an image. The function takes the current image as parameter, whose type is defined as the generic TImage.

    live

    <Gallery
    size="full"
    columns={3}
    images={[
    {
    url: '/images/kitten--300-300.jpg',
    title: 'A wonderful title',
    tags: ['whiskers', 'paws'],
    },
    {
    url: '/images/kitten--400-400.jpg',
    title: "Next one won't have a title",
    tags: ['whiskers', 'tail'],
    },
    {
    url: '/images/kitten--1920-1080.jpg',
    tags: ['tail'],
    },
    ]}
    showHover={false}
    spacing={400}
    title={image => image.title}
    renderSlideContent={image => (
    <Box p={500}>
    <Box>
    <Image
    alt={image.title ?? ''}
    draggable={false}
    maxW="100%"
    src={image.url}
    />
    </Box>
    <Box flexFlow="column" gap={300} px={500} width={700}>
    <Box gap={100}>
    {image.tags.map(tag => (
    <Badge key={tag}>{tag}</Badge>
    ))}
    </Box>
    {image.title}
    </Box>
    </Box>
    )}
    />

0.9.0

Minor Changes

  • #2610 3e637108 Thanks @jrolfs! - Add keys option allowing custom keys to be bound to next and previous or for keyboard interaction to be disabled by passing null

  • #2610 3e637108 Thanks @jrolfs! - Make API generic over image type so that additional properties can be added to the image objects

  • #2610 3e637108 Thanks @jrolfs! - Rename useGallery to useGalleryContext and export separate useGallery hook that implements all gallery state to allow fully custom gallery interfaces.

    Breaking Change

    The useGallery hook has been renamed to useGalleryContext.

0.8.0

Minor Changes

Patch Changes

0.7.0

Minor Changes

  • #2589 b2fce528 Thanks @jrolfs! - Add support for panning zoomed images in fullscreen version of gallery modal. Note that the pagination buttons in the fullscreen modal now take up some screen space to either side of the image in fullscreen to prevent interference with the mouse events used for panning.

0.6.0

Minor Changes

  • be2fda43 Thanks @jrolfs! - Update Framer Motion peer dependency to be >= 7.2 which is when the popLayout mode for AnimatePresence was introduced which we now use in the image carousel. The carousel still functions with older versions but the transition is somewhat broken.

0.5.0

Minor Changes

  • #2570 0ea6e9fa Thanks @jrolfs! - Add support for providing separate thumbnail URLs so we don't have to load the full resolution images to display the thumbnail grid

  • #2570 a6719e1a Thanks @jrolfs! - Preload images when opening the gallery modal and paging through the carousel and display loading indicators accordingly.

    BREAKING CHANGE: this version of @hover/gallery requires the latest @hover/blueprint (>= 1.20)

  • #2569 3b0dc3a1 Thanks @jrolfs! - Add ephemeral overlay with instructions to use arrow keys for paging and add hideZoomInstructions and hidePagingInstructions props to FullscreenGalleryModal.

  • #2569 3b0dc3a1 Thanks @jrolfs! - Use custom carousel next and previous buttons for FullscreenGalleryModal that are positioned relative to the window instead of the image so they aren't moving targets when paging between images with different aspect ratios.

Patch Changes

  • #2569 6723de69 Thanks @jrolfs! - Fix a bug where zoom resize/reset functionality breaks after the user pages to any subsequent image.

  • #2567 d58b7bc7 Thanks @jrolfs! - Fix a couple unwanted animations in the GalleryGrid component by removing the height animation on the grid.

  • #2570 0c87e329 Thanks @jrolfs! - Fix weird layout jank that happened sometimes in the image transition in the gallery carousel

  • #2570 ed7e5b2b Thanks @jrolfs! - Reduce default max content height on fullscreen modal so that it doesn't clip content on smaller displays.

  • #2570 aac7c0b6 Thanks @jrolfs! - Fix mouse wheel event interception in fullscreen modal (the modal shouldn't scroll, but this fixes warnings that were being printed to the console when we failed to intercept the events in the passive onWheel handler in React)

0.4.1

Patch Changes

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

0.4.0

Minor Changes

  • 5071308e Thanks @jrolfs! - Export GalleryImageCarousel component so that it can be composed in custom modal components

  • 5071308e Thanks @jrolfs! - Add FullscreenGalleryModal as an alternative modal that displays the image carousel in a fullscreen modal and supports scroll-based zoom for high resolution images

Patch Changes

  • 5071308e Thanks @jrolfs! - Tweak motion on gallery carousel to be smoother, especially for large images

0.3.0

Minor Changes

0.2.1

Patch Changes

  • c0413290 Thanks @jrolfs! - Fix default modal size in Gallery (default to auto instead of default Modal responsive sizing)

0.2.0

Minor Changes

  • #2507 819016b8 Thanks @jrolfs! - Add support for custom modal size via size prop on Gallery component

Patch Changes

0.1.2

Patch Changes

  • Updated dependencies [37aafd59]:
    • @hover/utilities@0.19.0

0.1.1

Patch Changes

Copyright © 2024 Hover Inc. All Rights Reserved.