Merge branch 'master' of github.com:carbon-design-system/carbon-addon…

…s-iot-react into dashboard-editor
carbon-design-system · Oct 12, 2020 · fa4597d · fa4597d
2 parents 0d15201 + b3a9106
commit fa4597d
Show file tree

Hide file tree

Showing 15 changed files with 398 additions and 274 deletions.
diff --git a/src/components/NavigationBar/__snapshots__/NavigationBar.story.storyshot b/src/components/NavigationBar/__snapshots__/NavigationBar.story.storyshot
@@ -26,7 +26,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Navig
         <div
           className="page-title-bar-header"
         >
-          <div>
+          <div
+            className="page-title-bar-header-left"
+          >
             <div
               className="page-title-bar-title"
             >
@@ -45,13 +47,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Navig
             </p>
           </div>
           <div
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          />
-          <div>
+            className="page-title-bar-header-right"
+          >
             <div>
               Extra Content
             </div>
@@ -238,7 +235,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Navig
         <div
           className="page-title-bar-header"
         >
-          <div>
+          <div
+            className="page-title-bar-header-left"
+          >
             <div
               className="page-title-bar-title"
             >
@@ -257,13 +256,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Navig
             </p>
           </div>
           <div
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          />
-          <div>
+            className="page-title-bar-header-right"
+          >
             <div>
               Extra Content
             </div>
@@ -437,7 +431,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Navig
         <div
           className="page-title-bar-header"
         >
-          <div>
+          <div
+            className="page-title-bar-header-left"
+          >
             <div
               className="page-title-bar-title"
             >
@@ -456,13 +452,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Navig
             </p>
           </div>
           <div
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          />
-          <div>
+            className="page-title-bar-header-right"
+          >
             <div>
               Extra Content
             </div>
@@ -636,7 +627,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Navig
         <div
           className="page-title-bar-header"
         >
-          <div>
+          <div
+            className="page-title-bar-header-left"
+          >
             <div
               className="page-title-bar-title"
             >
@@ -655,13 +648,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Navig
             </p>
           </div>
           <div
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          />
-          <div>
+            className="page-title-bar-header-right"
+          >
             <div>
               Extra Content
             </div>

diff --git a/src/components/PageTitleBar/PageTitleBar.jsx b/src/components/PageTitleBar/PageTitleBar.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import { Information20, Edit20 } from '@carbon/icons-react';
 import { Breadcrumb, BreadcrumbItem, Tooltip, SkeletonText, Tabs } from 'carbon-components-react';
@@ -75,16 +75,15 @@ const PageTitleBar = ({
   tabs,
   content,
 }) => {
-  //
   const titleBarContent = content || tabs;
   return (
     <div className={classnames(className, 'page-title-bar')}>
       {isLoading ? (
         <SkeletonText className="page-title-bar-loading" heading width="30%" />
       ) : (
-        <Fragment>
+        <>
           <div className="page-title-bar-header">
-            <div>
+            <div className="page-title-bar-header-left">
               {breadcrumb ? (
                 <div className="page-title-bar-breadcrumb">
                   <Breadcrumb>
@@ -113,7 +112,7 @@ const PageTitleBar = ({
                     <Button
                       className="page-title-bar-title--edit"
                       kind="ghost"
-                      size="small"
+                      size="field"
                       hasIconOnly
                       renderIcon={Edit20}
                       iconDescription={editIconDescription}
@@ -129,14 +128,11 @@ const PageTitleBar = ({
               ) : null}
             </div>
             {extraContent || rightContent ? (
-              <Fragment>
-                <div style={{ flex: 1 }} />
-                <div>{extraContent || rightContent}</div>
-              </Fragment>
+              <div className="page-title-bar-header-right">{extraContent || rightContent}</div>
             ) : null}
           </div>
           {titleBarContent ? <div className="page-title-bar-content">{titleBarContent}</div> : null}
-        </Fragment>
+        </>
       )}
     </div>
   );

diff --git a/src/components/PageTitleBar/PageTitleBar.story.jsx b/src/components/PageTitleBar/PageTitleBar.story.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { Add24 } from '@carbon/icons-react';
+import { Add24, TrashCan24 } from '@carbon/icons-react';
 import { spacing05 } from '@carbon/layout';
 import { Tabs, Tab } from 'carbon-components-react';
 
@@ -104,7 +104,41 @@ storiesOf('Watson IoT/PageTitleBar', module)
       title={commonPageTitleBarProps.title}
       description={commonPageTitleBarProps.description}
       breadcrumb={pageTitleBarBreadcrumb}
-      extraContent={commonPageTitleBarProps.extraContent}
+      extraContent={
+        <div>
+          <div
+            className="top"
+            style={{ marginBottom: '8px', display: 'flex', flexDirection: 'row-reverse' }}
+          >
+            <span>Last updated: yesterday</span>
+          </div>
+          <div className="bottom">
+            <Button
+              renderIcon={Add24}
+              onClick={action('click')}
+              size="field"
+              hasIconOnly
+              iconDescription="Add"
+              kind="ghost"
+              tooltipPosition="bottom"
+              tooltipAlignment="center"
+            />
+            <Button
+              renderIcon={TrashCan24}
+              onClick={action('click')}
+              size="field"
+              hasIconOnly
+              iconDescription="Remove"
+              kind="ghost"
+              tooltipPosition="bottom"
+              tooltipAlignment="center"
+            />
+            <Button onClick={action('click')} size="field">
+              Take an action
+            </Button>
+          </div>
+        </div>
+      }
       editable
       content={
         <Tabs>