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 new component: image placeholder #3960

Closed
CuddleBunny opened this issue Sep 24, 2020 · 5 comments
Closed

Add new component: image placeholder #3960

CuddleBunny opened this issue Sep 24, 2020 · 5 comments
Labels
area:fast-foundation Pertains to fast-foundation feature A new feature status:under-consideration Issue is being reviewed by the team.

Comments

@CuddleBunny
Copy link
Contributor

What feature are you requesting?

Image placeholder component, similar to placeholder services such as https://placeholder.com/ but without a web request.

What would be the benefit of adding this feature?

Custom, fast, image placeholders without external dependencies.

What solution would be ideal for you?

Placeholder component, ideally a separate package so it can be used independent of fast, that may be styled with fast-design-system tokens. End user should be able to specify a height and width and possibly a label to describe image intent (logo, hero, figure, etc).

Attach screenshots or images add detail to your request:

This idea came about while discussing placeholder services in the project discord channel. I've created a quick prototype here: https://webcomponents.dev/edit/fpZQRNOHFSb8RIhJBVly with two possible implementations. One uses an SVG and the other creates an IMG by converting an SVG to base64.

@CuddleBunny CuddleBunny added the status:triage New Issue - needs triage label Sep 24, 2020
@awentzel
Copy link
Collaborator

Additionally, this could be used in production for code examples, because it would be locally built into the bundle, not requested from 3rd party, thus solving subresource integrity concerns for security.

@chrisdholt chrisdholt added area:fast-components area:fast-foundation Pertains to fast-foundation feature A new feature status:under-consideration Issue is being reviewed by the team. and removed status:triage New Issue - needs triage labels Sep 28, 2020
@chrisdholt
Copy link
Member

Thanks @CuddleBunny - I think the primary question here is if this goes into the foundation bundle itself or whether this would be more worthwhile as part of an additional package or utility.

@CuddleBunny
Copy link
Contributor Author

I think it makes sense as a standalone component that can optionally use the fast design properties whilst falling back to sensible defaults. This way it can be consumed without fast components if desired. Should a fast-contrib repo be set up for this purpose or should I just go ahead and roll my own repo?

@chrisdholt
Copy link
Member

Given #5853, I think I'm going to close this. With that said, I'd love to see this as a utility library available on NPM perhaps :)

@CuddleBunny
Copy link
Contributor Author

Given #5853, I think I'm going to close this. With that said, I'd love to see this as a utility library available on NPM perhaps :)

Can do, I've already made this and just need to spend the time to bundle it up separate some day.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:fast-foundation Pertains to fast-foundation feature A new feature status:under-consideration Issue is being reviewed by the team.
Projects
None yet
Development

No branches or pull requests

3 participants