Add FAB

sandbox/grommet-app/src/App.jsx

@@ -7,6 +7,7 @@ import Home from './pages/index';
 import NextDashboard from './pages/next/index';
 import { Login } from './Login';
 import { GlobalHeader } from './components/GlobalHeader';
+import { FloatingActionButton } from './components';
 
 export const BackgroundContext = createContext({});
 
@@ -39,6 +40,7 @@ const App = () => {
           cssGap: true,
         },
       }}
+      style={{ display: 'relative' }}
     >
       {authenticated ? (
         <BackgroundContext.Provider value={contextValue}>
@@ -56,6 +58,9 @@ const App = () => {
               <Route path="/next" element={<NextDashboard />} />
             </Routes>
           </BrowserRouter>
+          {window.location.pathname === '/next' ? (
+            <FloatingActionButton label="Ask HPE" />
+          ) : undefined}
         </BackgroundContext.Provider>
       ) : (
         <Login setAuthenticated={setAuthenticated} />

sandbox/grommet-app/src/components/FloatingActionButton/FloatingActionButton.jsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { Box, Button } from 'grommet';
+
+const PositionedBox = styled(Box)`
+  position: fixed;
+  bottom: 0px;
+  border-radius: 2em;
+  right: 0px;
+  z-index: 10;
+`;
+
+export const FloatingActionButton = ({ ...rest }) => {
+  return (
+    <PositionedBox elevation="large" margin="medium">
+      <Button {...rest} kind="fab" size="large" />
+    </PositionedBox>
+  );
+};

sandbox/grommet-app/src/components/FloatingActionButton/index.js

@@ -0,0 +1 @@
+export * from './FloatingActionButton';

sandbox/grommet-app/src/components/index.js

@@ -6,3 +6,4 @@ export * from './NotificationMetric';
 export * from './ContentPane';
 export * from './GlobalHeader';
 export * from './ToggleGroup';
+export * from './FloatingActionButton';

sandbox/grommet-app/src/theme.js

@@ -268,6 +268,10 @@ const buildTheme = tokens => {
           light: light.color.chart.qualitative['70-secondary'].$value,
           dark: dark.color.chart.qualitative['70-secondary'].$value,
         },
+        'background-brand-default': {
+          light: light.color.background.brand.default.$value,
+          dark: dark.color.background.brand.default.$value,
+        },
         'background-brand-weak': {
           light: light.color.background.brand.weak.$value,
           dark: dark.color.background.brand.weak.$value,
@@ -292,6 +296,11 @@ const buildTheme = tokens => {
           light: light.color.foreground.status.info.$value,
           dark: dark.color.foreground.status.info.$value,
         },
+
+        'foreground-onBrand': {
+          light: light.color.foreground.onBrand.$value,
+          dark: dark.color.foreground.onBrand.$value,
+        },
         'button-secondary-border-default': {
           light: light.color.button.secondary.border.default.$value,
           dark: dark.color.button.secondary.border.default.$value,
@@ -329,6 +338,13 @@ const buildTheme = tokens => {
           weight: 600,
         },
       },
+      fab: {
+        background: 'background-brand-default',
+        color: 'foreground-onBrand',
+        font: {
+          weight: 600,
+        },
+      },
       tab: {
         color: 'text-strong',
         font: {