UI: Add initialActive option parameter

[alexandre-lelain]

Issue: #9127

What I did

• Added initialActive option parameter to storybook-ui config.
• Active tabs in Mobile layout are now handled using constants instead of hardcoded numbers.
• Updated Options Parameters doc page.

Users can now set the default active tab on Mobile.

How to test

To test this feature, simply set initialActive in the options of the storybook config, and check that the default active tab on Mobile matches your setup:

// config.js
...

/**
 * 'sidebar' - Sidebar
 * 'canvas' - Canvas
 * 'addons' - Addons
 */
const initialActive = X // one of above values
addParameters({
  options: {
     initialActive,
  },
})

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/ge573viyc
✅ Preview: https://monorepo-git-fork-alexandre-lelain-feat-initialactivetaboption.storybook.now.sh

[shilman]

Can we make constants for this, something like this:

export const ACTIVE = {
  SIDEBAR: 0,
  ...
}

[shilman]

Can we make constants for this, something like this:

export const ACTIVE = {
  SIDEBAR: 0,
  ...
}

[alexandre-lelain]

Thanks for the review 👍

You are right, we should use constants. I pushed the update @shilman

[alexandre-lelain]

Hello @shilman , do you have any updates on this ? 🙏

[shilman]

@alexandre-lelain yeah we're basically in feature freeze while we ship 5.3, which is in RC now and scheduled to ship in the first two weeks of january

was addressed

[shilman]

WDYT about making these strings? Strings are self-documenting. Consider:

initialActive: 'sidebar'

vs

initialActive: 0

[alexandre-lelain]

Yup you got a point 👍

[shilman]

💥 thanks!!

[kumarharsh]

+1 for this feature. I was looking for a way to set the default tab when storybook first loads... Right now, it always loads Canvas no matter the order of the tabs.

[chavlji]

Setting initialActive isn't working for me. I've set it up in manager like this: