Merge pull request #6232 from storybooks/5256-fix-ungrouped-knobs

Knobs: Rename ALL panel to Other for ungrouped knobs

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 }) => (
   <ScrollArea horizontal vertical className={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 (
       <Fragment>
         <PanelWrapper>

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(
         <ThemeProvider theme={convert(themes.light)}>
           <Panel channel={testChannel} api={testApi} active />
@@ -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(
         <ThemeProvider theme={convert(themes.light)}>
           <Panel channel={testChannel} api={testApi} active />
@@ -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();
 

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 {

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) {

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
     </li>
   </ul>
+  <p>
+    When I'm by myself, I say: "Mumble"
+  </p>
 </div>
 `;
 

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)
             <li key={`${item}`}>{item}</li>
           ))}
         </ul>
+        <p>When I'm by myself, I say: "{ungrouped}"</p>
       </div>
     );
   })