diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js index 6dacd8b814e0..fa144c9578d9 100644 --- a/addons/knobs/src/components/Panel.js +++ b/addons/knobs/src/components/Panel.js @@ -21,7 +21,7 @@ import PropForm from './PropForm'; const getTimestamp = () => +new Date(); -const DEFAULT_GROUP_ID = 'ALL'; +const DEFAULT_GROUP_ID = 'Other'; const PanelWrapper = styled(({ children, className }) => ( @@ -197,6 +197,9 @@ export default class KnobPanel extends PureComponent { } const entries = Object.entries(groups); + // Always sort 'Other' (ungrouped) tab last without changing the remaining tabs + entries.sort((a, b) => (a[0] === 'Other' ? 1 : 0)); // eslint-disable-line no-unused-vars + return ( diff --git a/addons/knobs/src/components/__tests__/Panel.js b/addons/knobs/src/components/__tests__/Panel.js index 60bd11af4649..6b20e30da0d5 100644 --- a/addons/knobs/src/components/__tests__/Panel.js +++ b/addons/knobs/src/components/__tests__/Panel.js @@ -223,7 +223,7 @@ describe('Panel', () => { root.unmount(); }); - it('should have one tab per groupId and an empty ALL tab when all are defined', () => { + it('should have one tab per groupId and an empty Other tab when all are defined', () => { const root = mount( @@ -263,7 +263,7 @@ describe('Panel', () => { root.unmount(); }); - it('the ALL tab should have its own additional content when there are knobs both with and without a groupId', () => { + it('the Other tab should have its own additional content when there are knobs both with and without a groupId', () => { const root = mount( @@ -293,10 +293,10 @@ describe('Panel', () => { .find(TabsState) .find('button') .map(child => child.prop('children')); - expect(titles).toEqual(['foo', 'ALL']); + expect(titles).toEqual(['foo', 'Other']); const knobs = wrapper.find(PropForm).map(propForm => propForm.prop('knobs')); - // there are props with no groupId so ALL should also have its own PropForm + // there are props with no groupId so Other should also have its own PropForm expect(knobs.length).toEqual(titles.length); expect(knobs).toMatchSnapshot(); diff --git a/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap b/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap index d6b39c95eb6f..839fe427caa5 100644 --- a/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap +++ b/addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap @@ -17,7 +17,7 @@ Array [ ] `; -exports[`Panel groups should have one tab per groupId and an empty ALL tab when all are defined 1`] = ` +exports[`Panel groups should have one tab per groupId and an empty Other tab when all are defined 1`] = ` Array [ .emotion-2 { box-sizing: border-box; @@ -212,7 +212,7 @@ Array [ ] `; -exports[`Panel groups the ALL tab should have its own additional content when there are knobs both with and without a groupId 1`] = ` +exports[`Panel groups the Other tab should have its own additional content when there are knobs both with and without a groupId 1`] = ` Array [ Array [ Object { diff --git a/addons/ondevice-knobs/src/panel.js b/addons/ondevice-knobs/src/panel.js index af25f2d1e6e6..e82662078879 100644 --- a/addons/ondevice-knobs/src/panel.js +++ b/addons/ondevice-knobs/src/panel.js @@ -8,7 +8,7 @@ import PropForm from './PropForm'; const getTimestamp = () => +new Date(); -const DEFAULT_GROUP_ID = 'ALL'; +const DEFAULT_GROUP_ID = 'Other'; export default class Panel extends React.Component { constructor(props) { diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot index 1044c4aaf929..51c97243f729 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot @@ -170,6 +170,9 @@ exports[`Storyshots Addons|Knobs.withKnobs tweaks static values organized in gro Whiskey +

+ When I'm by myself, I say: "Mumble" +

`; diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js index 608832d150c5..a6c3a39b4c5a 100644 --- a/examples/official-storybook/stories/addon-knobs.stories.js +++ b/examples/official-storybook/stories/addon-knobs.stories.js @@ -154,6 +154,9 @@ storiesOf('Addons|Knobs.withKnobs', module) GROUP_IDS.DISPLAY ); + // Ungrouped + const ungrouped = text('Ungrouped', 'Mumble'); + const style = { backgroundColor, ...otherStyles }; const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; @@ -178,6 +181,7 @@ storiesOf('Addons|Knobs.withKnobs', module)
  • {item}
  • ))} +

    When I'm by myself, I say: "{ungrouped}"

    ); })