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]: Component doc pages should show a preview in view when you load the page #1822

Open
1 task done
adixon-adobe opened this issue Sep 28, 2021 · 5 comments
Open
1 task done

Comments

@adixon-adobe
Copy link
Collaborator

Code of conduct

  • I agree to follow this project's code of conduct.

Impacted component(s)

documentation/all

Description of the requested feature

Sometimes I'm looking for a component by the look of it, and I noticed that we often don't show the actual component examples until pretty low down on the page. It'd be nice to have a quick preview at the top of each page.

Mockups or screenshots

No response

Implementation notes or ideas

No response

@adixon-adobe adixon-adobe added enhancement New feature or request triage An issue needing triage labels Sep 28, 2021
@hunterloftis hunterloftis added Documentation and removed triage An issue needing triage labels Oct 13, 2021
@hunterloftis
Copy link
Contributor

We should schedule this for after #1663

@Westbrook
Copy link
Contributor

Other feedback for docs design/layout...

Re: "Try it on WebComponents.dev" buttons.

Honestly they just all blended together for me and looked like status badges

@najikahalsema najikahalsema added triage An issue needing triage Discovery and removed triage An issue needing triage labels Oct 25, 2022
@Westbrook
Copy link
Contributor

@Rajdeepc you mentioned an interest in our 11ty usage. This is one place where we'd like to leverage it more directly. A POC of what this could look like is available at https://demo-first-docs--spectrum-web-components.netlify.app/components/button/. If you have thoughts on smart ways to bind custom-element.json files with 11ty to make this possible, that would be great to hear. Even if we were to drop the attribute Pickers for an initial release, there would be lots of benefit from including something like this in the docs.

@Westbrook
Copy link
Contributor

These are starting to make their way into the public docs site: https://opensource.adobe.com/spectrum-web-components/components/action-bar/

As template.ts and args.ts files are abstracted in the stories directory of each package, this technique will propagate through the project.

@Westbrook Westbrook pinned this issue Feb 18, 2024
@Westbrook
Copy link
Contributor

Westbrook commented Mar 22, 2024

We've got a pretty "small" library here at this point, so only a few packages remain to adopt the template.ts and args.ts approach to allow them to be consumed at full fidelity into the documentation site. Some of these might not make sense in this context, but the more creativity at play here, the better...

To Do:

  • Action Bar
    • args.ts
  • Action Button
    • template.ts
    • args.ts
  • Action Group
    • template.ts
    • args.ts
  • Action Menu
    • template.ts
    • args.ts
  • Asset
    • template.ts
    • args.ts
  • Avatar
    • template.ts
    • args.ts
  • Badge
    • template.ts
    • args.ts
  • Button
    • args.ts
  • Button Group
    • template.ts
    • args.ts
  • Card
    • template.ts
    • args.ts
  • Checkbox
    • template.ts
    • args.ts
  • Coachmark
    • template.ts
    • args.ts
  • Color Area
    • template.ts
    • args.ts
  • Color Handle
    • template.ts
    • args.ts
  • Color Loupe
    • template.ts
    • args.ts
  • Color Slider
    • template.ts
    • args.ts
  • Color Wheel
    • template.ts
    • args.ts
  • Combobox
    • template.ts
    • args.ts
  • Dialog
    • template.ts
    • args.ts
  • Divider
    • template.ts
    • args.ts
  • Dropzone
    • template.ts
    • args.ts
  • Field Group
    • template.ts
    • args.ts
  • Field Label
    • template.ts
    • args.ts
  • Help Text
    • template.ts
    • args.ts
  • Icon
    • template.ts
    • args.ts
  • Icons
    • template.ts
    • args.ts
  • Icons UI
    • template.ts
    • args.ts
  • Icons Workflow
    • template.ts
    • args.ts
  • Iconset
    • template.ts
    • args.ts
  • Illustrated Message
    • template.ts
    • args.ts
  • Infield Button
    • template.ts
    • args.ts
  • Link
    • template.ts
    • args.ts
  • Menu
    • template.ts
    • args.ts
  • Meter
    • template.ts
    • args.ts
  • Number Field
    • template.ts
    • args.ts
  • Overlay
    • template.ts
    • args.ts
  • Picker Button
    • template.ts
    • args.ts
  • Popover
    • template.ts
    • args.ts
  • Progress Bar
    • template.ts
    • args.ts
  • Progress Circle
    • template.ts
    • args.ts
  • Radio
    • template.ts
    • args.ts
  • Search
    • template.ts
    • args.ts
  • Side Nav
    • template.ts
    • args.ts
  • Slider
    • template.ts
    • args.ts
  • Split View
    • template.ts
    • args.ts
  • Status Light
    • template.ts
    • args.ts
  • Swatch
    • template.ts
    • args.ts
  • Switch
    • template.ts
    • args.ts
  • Table
    • template.ts
    • args.ts
  • Tabs
    • template.ts
    • args.ts
  • Tags
    • template.ts
    • args.ts
  • Text Field
    • template.ts
    • args.ts
  • Thumbnail
    • template.ts
    • args.ts
  • Toast
    • template.ts
    • args.ts
  • Tooltip
    • template.ts
    • args.ts
  • Top Nav
    • template.ts
    • args.ts
  • Tray
    • template.ts
    • args.ts
  • Underlay
    • template.ts
    • args.ts
  • Base? Bundle?
    • template.ts
    • args.ts
  • Grid
    • template.ts
    • args.ts
  • Opacity Checkerboard
    • template.ts
    • args.ts
  • Reactive Controllers?
    • template.ts
    • args.ts
  • Shared?
    • template.ts
    • args.ts
  • Styles?
    • template.ts
    • args.ts
  • Theme?
    • template.ts
    • args.ts
  • Truncated
    • template.ts
    • args.ts

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

No branches or pull requests

4 participants