Improvement/artesca 10858 empty state

.storybook/preview.js

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
 import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
 import { Wrapper } from '../stories/common';
-import { ToastProvider } from '../src/lib';
+import { ScrollbarWrapper, ToastProvider } from '../src/lib';
 
 export const globalTypes = {
   theme: {
@@ -12,27 +12,47 @@ export const globalTypes = {
     defaultValue: 'darkRebrand',
     toolbar: {
       title: 'Preview Theme',
-      dynamicTitle: false,
+      dynamicTitle: true,
       // array of plain string values or MenuItem shape (see below)
       items: [
-        { value: 'darkRebrand', title: 'Dark', icon: 'moon' },
-        { value: 'artescaLight', title: 'Light', icon: 'sun' },
-        { value: 'ring9dark', title: 'Ring Dark', icon: 'moon' },
+        { value: 'darkRebrand', title: ' A-Dark', icon: 'moon' },
+        { value: 'artescaLight', title: 'A-Light', icon: 'sun' },
+        { value: 'ring9dark', title: 'R-Dark', icon: 'moon' },
       ],
     },
   },
+  background: {
+    name: 'Background Level',
+    description: 'Background for the wrapper',
+    toolbar: {
+      title: 'Background Level',
+      items: [
+        { value: 'backgroundLevel1', title: 'backgroundLevel 1' },
+        { value: 'backgroundLevel2', title: 'backgroundLevel 2' },
+        { value: 'backgroundLevel3', title: 'backgroundLevel 3' },
+        { value: 'backgroundLevel4', title: 'backgroundLevel 4' },
+      ],
+      dynamicTitle: true,
+    },
+  },
 };
-
 const withThemeProvider = (Story, context) => {
   const theme = coreUIAvailableThemes[context.globals.theme];
+  const { background } = context.globals;
   const { viewMode } = context;
   return (
     <QueryClientProvider client={new QueryClient()}>
       <CoreUiThemeProvider theme={theme}>
         {/* Wrapper to make the stories take the full screen but not in docs */}
-        <div style={viewMode === 'story' ? { height: 100 + 'vh' } : null}>
+        <div
+          style={
+            viewMode === 'story'
+              ? { height: 100 + 'vh', overflow: 'scroll' }
+              : null
+          }
+        >
           <ToastProvider>
-            <Wrapper>
+            <Wrapper style={{ backgroundColor: background }}>
               <Story {...context} />
             </Wrapper>
           </ToastProvider>

src/lib/components/constrainedtext/Constrainedtext.component.tsx

@@ -28,10 +28,7 @@ const ConstrainedTextContainer = styled.div`
   overflow-wrap: break-word;
   `
       : `overflow-wrap: break-word;
-      white-space: nowrap;`}
-}
-
-;
+      white-space: nowrap;`};
 `;
 const BlockTooltip = styled.div`
   width: stretch;

src/lib/components/emptystate/Emptystate.component.tsx

@@ -4,17 +4,30 @@ import { spacing } from '../../spacing';
 import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon, IconName } from '../icon/Icon.component';
 import { LargeText } from '../text/Text.component';
+import { CoreUITheme } from '../../style/theme';
 type Props = {
-  label: string;
+  listedResource: {
+    singular: string;
+    plural: string;
+  };
   icon: IconName;
   link?: string;
   history?: Record<string, any>;
+  backgroundColor?: keyof CoreUITheme;
+  /**
+   * The resource to create before browsing the listed resource
+   * Only used when resource to create is different from listed resource
+   */
+  resourceToCreate?: string;
 };
-const EmptystateContainer = styled.div`
+const EmptystateContainer = styled.div<{ backgroundColor?: keyof CoreUITheme }>`
   ${(props) => {
-    const brand = props.theme;
+    const { theme, backgroundColor } = props;
     return css`
-      color: ${brand.textSecondary};
+      color: ${theme.textSecondary};
+      background-color: ${backgroundColor
+        ? theme[backgroundColor]
+        : 'transparent'};
     `;
   }}
   display: flex;
@@ -33,25 +46,36 @@ export const ActionWrapper = styled.div`
 `;
 
 function EmptyState(props: Props) {
-  const { icon, label, link, history } = props;
+  const {
+    icon,
+    listedResource,
+    link,
+    history,
+    resourceToCreate,
+    backgroundColor,
+  } = props;
   return (
-    <EmptystateContainer className="sc-emptystate">
+    <EmptystateContainer
+      className="sc-emptystate"
+      backgroundColor={backgroundColor}
+    >
       <EmptyStateRow>
         <Icon name={icon} color="infoPrimary" size="5x" withWrapper />
       </EmptyStateRow>
       <EmptyStateRow>
-        <LargeText>A list of {`${label}s`} will appear here.</LargeText>
+        <LargeText>{`A list of ${listedResource.plural} will appear here.`}</LargeText>
       </EmptyStateRow>
       <EmptyStateRow>
         <LargeText>
-          There are no {`${label}s`} created yet, let's create your first{' '}
-          {label}.
+          {!resourceToCreate
+            ? `There are no ${listedResource.plural} created yet, let's create your first ${listedResource.singular}.`
+            : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.`}
         </LargeText>
       </EmptyStateRow>
       {history && (
         <ActionWrapper>
           <Button
-            label={`Create ${label}`}
+            label={`Create ${resourceToCreate || listedResource.singular}`}
             icon={<Icon name="Create-add" />}
             type="button"
             variant="primary"

src/lib/components/icon/Icon.component.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import styled, { css } from 'styled-components';
-import { brand } from '../../style/theme';
+import { CoreUITheme } from '../../style/theme';
 
 import { Loader } from '../loader/Loader.component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -142,7 +142,7 @@ const IconStyled = styled(FontAwesomeIcon)`
 `;
 
 export type IconName = keyof typeof iconTable;
-export type IconColor = keyof typeof brand;
+export type IconColor = keyof CoreUITheme;
 type Props = {
   name: IconName;
   size?: SizeProp;

src/lib/components/infomessage/InfoMessageUtils.ts

@@ -1,39 +1,45 @@
-import { DefaultTheme, useTheme } from "styled-components";
-import { hex2RGB } from "../../utils";
-import { useEffect, useRef, useState } from "react";
+import { DefaultTheme, useTheme } from 'styled-components';
+import { hex2RGB } from '../../utils';
+import { useEffect, useRef, useState } from 'react';
 
 export const useComputeBackgroundColor = () => {
-    const theme = useTheme();
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const [backgroundColor, setBackgroundColor] = useState('');
-
-    useEffect(() => {
-      containerRef.current &&
-        setBackgroundColor(getBackgroundColor(containerRef.current, theme));
-    }, [containerRef,theme]);
-
-    return {
-      containerRef,
-      backgroundColor,
-    };
+  const theme = useTheme();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [backgroundColor, setBackgroundColor] = useState('');
+
+  useEffect(() => {
+    containerRef.current &&
+      setBackgroundColor(getBackgroundColor(containerRef.current, theme));
+  }, [containerRef, theme]);
+
+  return {
+    containerRef,
+    backgroundColor,
   };
+};
 
-export const getBackgroundColor = (element: HTMLElement, theme: DefaultTheme) => {
-    if (element.parentElement) {
-      const parentElementBackgroundColor = window.getComputedStyle(
-        element.parentElement,
-      )['background-color'];
-      if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) || !window.getComputedStyle(element.parentElement,)['background-color']) {
-        return getBackgroundColor(element.parentElement, theme);
-      } else {
-        const rgbArray = hex2RGB(theme.backgroundLevel2);
-        if (
-          `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` ===
-          parentElementBackgroundColor
-        ) {
-          return theme.backgroundLevel3;
-        }
+export const getBackgroundColor = (
+  element: HTMLElement,
+  theme: DefaultTheme,
+) => {
+  if (element.parentElement) {
+    const parentElementBackgroundColor = window.getComputedStyle(
+      element.parentElement,
+    )['background-color'];
+    if (
+      /rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) ||
+      !window.getComputedStyle(element.parentElement)['background-color']
+    ) {
+      return getBackgroundColor(element.parentElement, theme);
+    } else {
+      const rgbArray = hex2RGB(theme.backgroundLevel2);
+      if (
+        `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` ===
+        parentElementBackgroundColor
+      ) {
+        return theme.backgroundLevel3;
       }
     }
-    return theme.backgroundLevel2;
-  };
+  }
+  return theme.backgroundLevel2;
+};

src/lib/components/navbar/Navbar.component.tsx

@@ -37,6 +37,7 @@ const NavbarContainer = styled.div`
       color: ${getThemePropSelector('textPrimary')};
     }
     border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
+    box-sizing: border-box;
   `};
 `;
 const NavbarMenu = styled.div`

src/lib/components/searchinput/SearchInput.component.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ChangeEvent, forwardRef, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../icon/Icon.component';

src/lib/components/selectv2/Selectv2.component.tsx

@@ -24,7 +24,7 @@ export type OptionProps = {
   icon?: React.ReactNode;
   children?: React.ReactNode;
   value: string;
-  disabledReason?: JSX.Element;
+  disabledReason?: React.ReactNode;
 };
 const usePreviousValue = (value) => {
   const ref = useRef(null);

src/lib/components/sidebar/Sidebar.component.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import {
@@ -30,6 +30,7 @@ export type WrapperProps = {
   hovered?: boolean;
 };
 const Wrapper = styled.div<WrapperProps>`
+  margin-top: 1px;
   flex-shrink: 0;
   ${(props) => {
     const { backgroundLevel1, textPrimary } = props.theme;
@@ -41,7 +42,6 @@ const Wrapper = styled.div<WrapperProps>`
       }
     `;
   }}
-  margin-top: 1px;
   border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
   ${(props) => {
     if (props.expanded) {
@@ -66,6 +66,7 @@ const Wrapper = styled.div<WrapperProps>`
           height: 100%;
           background-color: ${backgroundLevel1};
           z-index: ${zIndex.sidebar};
+          border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
         }
       `;
     }