Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add objectFit prop to Thumbnail component #842

Closed
lyzadanger opened this issue Feb 10, 2023 · 0 comments · Fixed by #1032
Closed

Add objectFit prop to Thumbnail component #842

lyzadanger opened this issue Feb 10, 2023 · 0 comments · Fixed by #1032

Comments

@lyzadanger
Copy link
Contributor

Right now a !-rule is required to adjust object-fit for content within a Thumbnail:

        <Thumbnail loading={isLoadingBook} ratio="4/5">
          {selectedBook && (
            <img
              alt={`Book cover for ${selectedBook.title}`}
              className="!object-contain"
              src={selectedBook.cover_image}
              data-testid="cover-image"
            />
          )}
        </Thumbnail>

AspectRatio, which is used by Thumbnail, takes an objectFit prop but Thumbnail doesn't take or set objectFit, so we're stuck with the default object-cover when using Thumbnail currently (well, this can be worked around temporarily with a !-rule).

Let's add flexibility by adding an objectFit prop to Thumbnail and forward that on to AspectRatio.

lyzadanger added a commit that referenced this issue May 18, 2023
lyzadanger added a commit that referenced this issue May 18, 2023
lyzadanger added a commit that referenced this issue May 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant