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

feat(image): add hexagon as an image shape #564

Merged
merged 2 commits into from
Oct 17, 2023
Merged

Conversation

mbove-square
Copy link
Collaborator

@mbove-square mbove-square commented Oct 12, 2023

Describe the problem this PR addresses

Add hexagon as an image shape option

Describe the changes in this PR

Screenshot 2023-10-12 at 12 44 41 PM
  • Implemented using css clip-path with an inline svg

Other information

  • Initially tried implementing this using a shared svg file, but the clip-path css property only works with a specific id on clipPath which made referencing the file difficult. Documentation suggests that this can be done with clip-path: url(hexagon.svg#hexPath), but I was not able to get this to work in the same way we would reference background-image: url(./hexagon.svg). I could only get this to work if the referenced svg was visible in the DOM without being conditionally rendered. Referencing svg via file path would also have to add additional webpack loaders.
    I also considered appending an svg to the DOM if one is not present, but that didn't quite seem best practice.
    Open to suggestions here

@mbove-square mbove-square requested a review from a team as a code owner October 12, 2023 17:03
@github-actions
Copy link

Deployed Styleguide and Lab.

Notes
  1. Links may take a few minutes to update after PR is opened or commit is pushed.
  2. Links may become invalidated after PR is merged or closed.
  3. Links for all releases and open PRs can be found on the Maker Deploys page.

Copy link
Collaborator

@laurenhu laurenhu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comment otherwise lgtm! 👍

src/components/Image/src/Image.vue Show resolved Hide resolved
@mbove-square mbove-square merged commit 5ba90d5 into master Oct 17, 2023
4 checks passed
@mbove-square mbove-square deleted the image-shape-hexagon branch October 17, 2023 14:53
@github-actions
Copy link

🎉 This PR is included in version 19.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants