Merge pull request #1870 from oliv37/fix/1852-button-toolbar-alignment

fix(button toolbar): align buttons to the right in the toolbar

src/__tests__/page-header/ButtonToolBar.test.tsx

@@ -19,9 +19,18 @@ describe('Button Tool Bar', () => {
     jest.spyOn(ButtonBarProvider, 'useButtons')
     mocked(ButtonBarProvider).useButtons.mockReturnValue(buttons)
 
-    const wrapper = mount(<ButtonToolBar />)
+    const wrapper = mount(<ButtonToolBar />).find('.button-toolbar')
 
     expect(wrapper.childAt(0).getElement()).toEqual(buttons[0])
     expect(wrapper.childAt(1).getElement()).toEqual(buttons[1])
   })
+
+  it('should return null when there is no button in the provider', () => {
+    jest.spyOn(ButtonBarProvider, 'useButtons')
+    mocked(ButtonBarProvider).useButtons.mockReturnValue([])
+
+    const wrapper = mount(<ButtonToolBar />)
+
+    expect(wrapper.html()).toBeNull()
+  })
 })

src/index.css

@@ -93,3 +93,7 @@ code {
   padding: 0;
   background-color: white;
 }
+
+.button-toolbar > button {
+	margin-left: .5rem;
+}

src/page-header/ButtonToolBar.tsx

@@ -3,7 +3,12 @@ import { useButtons } from './ButtonBarProvider'
 
 const ButtonToolBar = () => {
   const buttons = useButtons()
-  return <>{buttons.map((button) => button)}</>
+
+  if (buttons.length === 0) {
+    return null
+  }
+
+  return <div className="button-toolbar">{buttons.map((button) => button)}</div>
 }
 
 export default ButtonToolBar