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.

Sign up for GitHub

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

Jump to bottom

Ensure playground stories have working controls #10751

Closed
91 tasks done
tay1orjones opened this issue Feb 14, 2022 · 6 comments
Closed
91 tasks done

Ensure playground stories have working controls #10751

tay1orjones opened this issue Feb 14, 2022 · 6 comments
Assignees
@aledavila
Labels
epic Special label used by ZenHub for epic functionality planning: umbrella Umbrella issues, surfaced in Projects views
Milestone
2022 Q4

Comments

@tay1orjones
Copy link
Member

tay1orjones commented Feb 14, 2022 •
edited

Every component in the storybook sidebar should have a Playground story, those stories should have operable controls.

High level checklist for each component:

  • Move .stories.js file out of next folder, or create .stories.js file and copy contents of *-story.js file over.
  • Remove deprecated knobs package and usage.
  • Ensure there is a playground story
  • Add argtypes to playground story
  • Pass ...args to playground story, spread them on the applicable component(s)
  • Make sure values are defined to enable controls view by default
  • Remove deprecated props from being visible in controls of storybook #11249

FAQ:

  • What if there's no playground story but other stories have controls enabled on them?
    • Ignore these components for now, we need to prioritize getting controls working for components that have nothing right now.

Checklist
@tay1orjones tay1orjones mentioned this issue Feb 15, 2022
Merged
@joshblack
Copy link
Contributor

joshblack commented Feb 21, 2022 •
edited by alisonjoseph

Process

  • Update stories to CSFv3
  • Remove withKnobs decorator, if it exists
  • Add the following snippet to the default export
export default {
  // ...
  parameters: {
    // ...
    controls: {
      hideNoControlsWarning: true,
    },
  },
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
  },
};
  • Convert knobs to controls
  • Remove action from components
  • Add args to render, restructure, and pass to component
  • Rename Preview to Canvas
  • Rename Props to ArgsTable

How-to's

  • You can switch from action('onClick') to a control by giving it the type action

Questions

  • How should controls relate to compound components?
    • For example, a control is for a prop inside of a component
  • Should props like children and className be visible under Controls?

Observations

  • Our stories are grouped around a component, like Accordion, but may include related components (like a skeleton) for which the controls do not apply
  • Controls can be confusing in compound component situations (how do we make it clear that controls are for an accordion item versus the accordion)

Approaches

  • Convert knobs directly to controls

@tay1orjones tay1orjones added this to the v11 GA milestone Feb 25, 2022
@joshblack
Copy link
Contributor

Goals

  • Easy to play around with a component to see what props may do in the component
  • Easy to reference/copy-paste an example into your project
  • It documents the component well (covers a variety of use-cases)
  • Easy to change
    • Theme
    • Language (RTL)
    • Viewport

Options

  • Keep knobs as-is
  • Controls only for top-most component
  • Controls are a mix that emulates knobs
  • Add stories for sub-components

Questions

  • All stories have controls that are configurable or one playground story?
  • If we use controls, do we want to implement changes for all or only for playground stories?
  • What's the difference between a story and the content in a docs page?
  • Should we default to docs by default, instead of stories?

What's done in the industry?

Preferences

  • Have explicit stories for common or documented use-cases

Options

  • Decision 1: controls are not prop tables
    • Controls are meant to interact with the story to mess around with the component and see what props do interactively
    • What this means:
      • Controls will likely not have descriptions shown
      • Controls will be grouped by component name
  • Decision 2: we should land on docs by default in production
  • Decision 3:

This was referenced Mar 8, 2022
Closed
Closed
Closed
@tay1orjones tay1orjones mentioned this issue Mar 28, 2022
Closed
12 tasks
@tay1orjones tay1orjones modified the milestones: v11 GA , 2022 Q2 Apr 5, 2022
@tay1orjones tay1orjones mentioned this issue Apr 19, 2022
Closed
4 tasks
@emyarod emyarod mentioned this issue Apr 22, 2022
Closed
2 tasks
@tay1orjones tay1orjones mentioned this issue May 9, 2022
Closed
29 tasks
@tay1orjones tay1orjones added the planning: umbrella Umbrella issues, surfaced in Projects views label May 9, 2022
@tay1orjones tay1orjones changed the title Ensure all v11 storybook stories have controls Ensure playground stories have working controls May 19, 2022
@tay1orjones tay1orjones modified the milestones: 2022 Q2, 2022 Q3 Jul 8, 2022
@jeffchew jeffchew added the epic Special label used by ZenHub for epic functionality label Jul 14, 2022
@tw15egan tw15egan added the hacktoberfest See https://hacktoberfest.com/ label Sep 27, 2022
@TannerS
Copy link
Contributor

TannerS commented Sep 27, 2022

Just an fyi @tay1orjones and @tw15egan I am handling

Ensure there is a playground story
Add argtypes to playground story

For TextInput in this pr => #12139

I also plan to open a pr to help out with more of these soon

@tw15egan
Copy link
Member

Thanks @TannerS!

@sstrubberg sstrubberg mentioned this issue Sep 30, 2022
Merged
@TannerS
Copy link
Contributor

TannerS commented Oct 1, 2022 •
edited

I had a question for the team. here is a screenshot with numbers relating to my quesitons

image

  1. When i see something like this (a task and a subtask of that task with two type of story files)
 components/Pagination/Pagination-story.js
    components/Pagination/next/Pagination.stories.js

does that mean too do both files? they both need playgrounds?

  1. A lot of these components have a Default set up that basically has all the args and argtypes set up, i find myself basically duplicating these for a "playground". I am curious if this is ok or are the defauts suppose to be replaced. One example is pagination. once i understand intent i can improve my ongoing PR

  2. do I need to only do storys in the next folder?

  3. Some components like the Form and others, have no props for a playground, like this one has onlye classname and children. Technically for a playground class and children dont make much sense since u cant see anything or pass in a control with jsx but they are on the list. How should these be handled?

thanks in advance

cc: @tay1orjones @tw15egan @abbeyhrt

@TannerS TannerS mentioned this issue Oct 1, 2022
Closed
@aledavila
Copy link
Contributor

@TannerS

  1. We are removing -story.js and replacing it with whats in the next folder. All files in next must move into the root component folder and the next folder deleted.
  2. Default is the main story that shows all of the component props with no controls. Controls only go in playground stories.
  3. see 1
  4. If there are no props that a user can play around with like form then you can omit the playground and do not enable controls.

@sstrubberg sstrubberg modified the milestones: 2022 Q3, 2022 Q4 Oct 6, 2022
@alisonjoseph alisonjoseph mentioned this issue Nov 9, 2022
Merged
@alisonjoseph alisonjoseph removed the hacktoberfest See https://hacktoberfest.com/ label Nov 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@aledavila aledavila

Labels
epic Special label used by ZenHub for epic functionality planning: umbrella Umbrella issues, surfaced in Projects views
Projects
Design System
Archived in project
Milestone
2022 Q4
Development

No branches or pull requests
9 participants
@jeffchew @alisonjoseph @tay1orjones @joshblack @TannerS @tw15egan @aledavila @sstrubberg @dakahn