@scality/core-ui 0.118.0 → 0.119.0

package/dist/index.d.ts

@@ -6,7 +6,6 @@ export { Button } from './components/button/Button.component';
 export { Checkbox } from './components/checkbox/Checkbox.component';
 export { Chips } from './components/chips/Chips.component';
 export { Dropdown } from './components/dropdown/Dropdown.component';
-export { Input } from './components/input/Input.component';
 export { LOADER_SIZE } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
 export { Loader } from './components/loader/Loader.component';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -6,7 +6,6 @@ export { Button } from './components/button/Button.component';
 export { Checkbox } from './components/checkbox/Checkbox.component';
 export { Chips } from './components/chips/Chips.component';
 export { Dropdown } from './components/dropdown/Dropdown.component';
-export { Input } from './components/input/Input.component';
 export { LOADER_SIZE } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
 export { Loader } from './components/loader/Loader.component';

package/dist/style/theme.js

@@ -61,25 +61,25 @@ export const coreUIAvailableThemes = {
     },
     artescaLight: {
         statusHealthy: '#009E93',
-        statusHealthyRGB: '43,171,81',
+        statusHealthyRGB: '0, 158, 147',
         statusWarning: '#E77B00',
-        statusWarningRGB: '252,138,50',
+        statusWarningRGB: '231, 123, 0',
         statusCritical: '#C10004',
-        statusCriticalRGB: '232,72,85,1',
-        selectedActive: '#90D0FF',
+        statusCriticalRGB: '193, 0, 4',
+        selectedActive: '#63A9D4',
         highlight: '#E3F2FD',
-        border: '#999999',
-        buttonPrimary: '#9DA6EC',
-        buttonSecondary: '#CACFE3',
+        border: '#A9A9A9',
+        buttonPrimary: '#ABB4F5',
+        buttonSecondary: '#B8BCCD',
         buttonDelete: '#FFCDD2',
         infoPrimary: '#5C486D',
-        infoSecondary: '#EBE3F1',
-        backgroundLevel1: '#F9F9FB',
-        backgroundLevel2: '#F3F3F5',
-        backgroundLevel3: '#EAEAEC',
-        backgroundLevel4: '#FAFAF8',
-        textPrimary: '#101010',
-        textSecondary: '#515170',
+        infoSecondary: '#E2D0E2',
+        backgroundLevel1: '#FCFCFC',
+        backgroundLevel2: '#F0F0F4',
+        backgroundLevel3: '#E4E6EC',
+        backgroundLevel4: '#FAFAF6',
+        textPrimary: '#0D0D0D',
+        textSecondary: '#4F506D',
         textTertiary: '#DFDFDF', // TO CHECK
         textReverse: '#EAEAEA',
         textLink: '#1349C5',
@@ -90,7 +90,7 @@ export const coreUIAvailableThemes = {
         statusWarning: '#FC8A32',
         statusWarningRGB: '252,138,50',
         statusCritical: '#E84855',
-        statusCriticalRGB: '232,72,85,1',
+        statusCriticalRGB: '232,72,85',
         selectedActive: '#2196F3',
         highlight: '#1A3C75',
         border: '#313131',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.118.0",
+  "version": "0.119.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -33,18 +33,18 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-actions": "^7.6.6",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-mdx-gfm": "^7.6.6",
-    "@storybook/addon-storyshots": "^7.6.6",
-    "@storybook/addon-storysource": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/manager-api": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-webpack5": "^7.6.6",
+    "@storybook/addon-actions": "^7.6.14",
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-links": "^7.6.14",
+    "@storybook/addon-mdx-gfm": "^7.6.14",
+    "@storybook/addon-storyshots": "^7.6.14",
+    "@storybook/addon-storysource": "^7.6.14",
+    "@storybook/blocks": "^7.6.14",
+    "@storybook/manager-api": "^7.6.14",
+    "@storybook/react": "^7.6.14",
+    "@storybook/react-webpack5": "^7.6.14",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^7.6.6",
+    "@storybook/theming": "^7.6.14",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^8.0.1",
@@ -75,7 +75,7 @@
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.0",
     "source-map-explorer": "^2.0.1",
-    "storybook": "^7.6.6",
+    "storybook": "^7.6.14",
     "typescript": "^5.3.2"
   },
   "husky": {
@@ -93,14 +93,14 @@
     }
   },
   "dependencies": {
-    "@floating-ui/dom": "^0.1.10",
+    "@floating-ui/dom": "^1.6.3",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.4",
-    "@storybook/preview-api": "^7.6.6",
+    "@storybook/preview-api": "^7.6.14",
     "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -53,7 +53,7 @@ export const ButtonStyled = styled.button<Props>`
         return css`
           background-color: ${brand.buttonPrimary};
           border: ${spacing.r1} solid ${brand.buttonPrimary};
-          color: ${brand.textSecondary};
+          color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
             border: ${spacing.r1} solid ${brand.infoPrimary};
@@ -75,7 +75,7 @@ export const ButtonStyled = styled.button<Props>`
         return css`
           background-color: ${brand.buttonSecondary};
           border: ${spacing.r1} solid ${brand.buttonSecondary};
-          color: ${brand.textSecondary};
+          color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
             border: ${spacing.r1} solid ${brand.infoPrimary};

package/src/lib/components/card/Card.component.tsx

@@ -2,7 +2,6 @@
 import { HTMLProps } from 'react';
 import { createContext } from 'react';
 import styled, { css } from 'styled-components';
-import { hex2RGB } from '../../utils';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const CardContext = createContext(null);
 type CardElementProps = {
@@ -42,7 +41,8 @@ function withCompoundCheck(Component) {
 
 const StyledCardHeader = styled.div`
   padding: 0.7rem;
-  border-radius: 3px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
   font-weight: bold;
 `;
 StyledCardHeader.displayName = 'CardHeader';
@@ -76,27 +76,18 @@ const StyledCard = styled.div<{
   flex-flow: column;
   width: ${(props) => props.width};
   height: ${(props) => props.height};
-  background: ${(props) =>
-    props.theme[props.bodyBackgroundColor || 'backgroundLevel3']};
-
+  background: ${(props) => props.theme[props.bodyBackgroundColor]};
+  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
   ${StyledCardBody} {
     opacity: ${(props) => (props.disabled ? '0.2' : '1')};
   }
 
   ${StyledCardHeader} {
-    border-radius: 2px;
     color: ${(props) => props.theme.textPrimary};
-    ${(props) => {
-      const hexColor = hex2RGB(
-        props.theme[
-          props.colorStatus || props.headerBackgroundColor || 'backgroundLevel4'
-        ],
-      ).join(',');
-      let opacity = 1;
-      if (props.colorStatus && props.colorStatus !== 'backgroundLevel4')
-        opacity = 0.4;
-      return `background: rgba(${hexColor}, ${opacity});`;
-    }}
+    background: ${(props) =>
+      props.theme[props.colorStatus || props.headerBackgroundColor]};
+    opacity: ${(props) =>
+      props.colorStatus && props.colorStatus !== 'backgroundLevel4' ? 0.4 : 1};
     ${(props) => props.disabled && 'opacity: 0.3;'}
   }
 
@@ -129,13 +120,13 @@ type CardProps = {
   onClick?: () => void;
   active?: boolean;
   disabled?: boolean;
-  children: Node;
+  children: React.ReactNode;
   className?: string;
 } & HTMLProps<HTMLDivElement>;
 function Card({
   width = 'auto',
   height = 'auto',
-  headerBackgroundColor = 'backgroundLevel4',
+  headerBackgroundColor = 'buttonSecondary',
   bodyBackgroundColor = 'backgroundLevel3',
   status = null,
   onClick = null,

package/src/lib/components/checkbox/Checkbox.component.tsx

@@ -87,7 +87,13 @@ const StyledCheckbox = styled.label<{
 
   [type='checkbox']:checked::before {
     box-shadow: none;
-    background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cpath d="M3 6.68646L5.0671 9L9 3" stroke="%23fff" stroke-width="1.5"/%3E %3C/svg%3E');
+    background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cpath d="M3 6.68646L5.0671 9L9 3" stroke="${(
+      props,
+    ) =>
+      props.theme.textPrimary.replace(
+        '#',
+        '%23',
+      )}" stroke-width="1.5"/%3E %3C/svg%3E');
     background-repeat: no-repeat;
     background-position: center;
   }
@@ -98,7 +104,13 @@ const StyledCheckbox = styled.label<{
     box-shadow: inset 0 0 0 ${spacing.r1}
       ${(props) => props.theme.selectedActive};
     background-color: ${(props) => props.theme.highlight};
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='6' y1='12' x2='20' y2='12' style='stroke:%23fff;stroke-width:4'/%3E %3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='6' y1='12' x2='20' y2='12' style='stroke:${(
+      props,
+    ) =>
+      props.theme.textPrimary.replace(
+        '#',
+        '%23',
+      )};stroke-width:4'/%3E %3C/svg%3E");
   }
 
   /* Hover & focus */

package/src/lib/components/dropdown/Dropdown.component.tsx

@@ -60,7 +60,6 @@ const DropdownMenuItemStyled = styled.li`
   cursor: pointer;
   font-size: ${fontSize.base};
   ${(props) => {
-    console.log(props.isSelected);
     return props.isSelected
       ? `background-color: ${props.theme.highlight};`
       : `background-color: ${props.theme.backgroundLevel1};`;

package/src/lib/components/inputv2/inputv2.tsx

@@ -1,8 +1,6 @@
 import { forwardRef, InputHTMLAttributes } from 'react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
-
-import { Box } from '../box/Box';
 import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
 import { Icon, IconName } from '../icon/Icon.component';
 
@@ -13,8 +11,10 @@ export const convertSizeToRem = (size?: '1' | '2/3' | '1/2' | '1/3') => {
   else return '20.5rem';
 };
 
-const StyledInput = styled.input`
-  max-width: 100%;
+const StyledInput = styled.input<{ hasIcon: boolean }>`
+  max-width: ${(props) =>
+    props.hasIcon ? `calc(100% - 1rem - ${spacing.f8})` : '100%'};
+
   font-family: 'Lato';
   ${(props) =>
     props.disabled &&
@@ -49,6 +49,7 @@ const InputContainer = styled.div<{
   height: 100%;
   display: flex;
   align-items: center;
+  gap: ${spacing.f8};
   padding: 0 ${spacing.r8} 0 ${spacing.r8};
   background: ${(props) => props.theme.backgroundLevel1};
   border-radius: ${spacing.r4};
@@ -85,9 +86,10 @@ const InputBorder = styled.div<{
 
 const SelfCenterredIcon = styled(Icon)`
   align-self: center;
+  color: ${(props) => props.theme.textSecondary};
 `;
 
-type InputSize = '1' | '2/3' | '1/2' | '1/3';
+export type InputSize = '1' | '2/3' | '1/2' | '1/3';
 
 export type InputProps = {
   error?: string;
@@ -129,25 +131,18 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           disabled={!!(disabled || disabledFromFieldContext)}
           hasError={!!(error || errorFromFieldContext)}
         >
-          <Box
-            display={'flex'}
-            flexDirection={'row'}
-            alignItems={'baseline'}
-            width="100%"
-            gap={spacing['f8']}
-          >
-            {leftIcon && <SelfCenterredIcon name={leftIcon} />}
-            <StyledInput
-              ref={ref}
-              disabled={disabled || disabledFromFieldContext}
-              aria-invalid={!!(error || errorFromFieldContext)}
-              aria-describedby={`${DESCRIPTION_PREFIX}${id}`}
-              id={id}
-              {...inputProps}
-              placeholder={placeholder}
-            />
-            {rightIcon && <SelfCenterredIcon name={rightIcon} />}
-          </Box>
+          {leftIcon && <SelfCenterredIcon name={leftIcon} />}
+          <StyledInput
+            ref={ref}
+            disabled={disabled || disabledFromFieldContext}
+            aria-invalid={!!(error || errorFromFieldContext)}
+            aria-describedby={`${DESCRIPTION_PREFIX}${id}`}
+            hasIcon={!!(leftIcon || rightIcon)}
+            id={id}
+            {...inputProps}
+            placeholder={placeholder}
+          />
+          {rightIcon && <SelfCenterredIcon name={rightIcon} />}
         </InputContainer>
       </InputBorder>
     );

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

@@ -1,9 +1,9 @@
-import { ChangeEvent, forwardRef, useRef, useState } from 'react';
+import { ChangeEvent, forwardRef, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { fontSize } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
-import { Input } from '../input/Input.component';
+import { Input, InputSize } from '../inputv2/inputv2';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { spacing } from '../../spacing';
 export type Props = {
   placeholder?: string;
   value: string;
@@ -11,12 +11,18 @@ export type Props = {
   onReset?: () => void;
   disableToggle: boolean;
   disabled?: boolean;
+  id?: string;
+  size?: InputSize;
 };
 const SearchInputContainer = styled.div<{
   docked?: boolean;
   disabled?: boolean;
 }>`
   position: relative;
+  width: max-content;
+  input {
+    max-width: calc(100% - 1rem - ${spacing.f8} - 1rem);
+  }
 
   ${(props) => {
     if (props.disabled) {
@@ -29,47 +35,16 @@ const SearchInputContainer = styled.div<{
     }
   }}
 
-  .sc-input {
-    display: block;
-    input[type='text'] {
-      width: ${(props) => (props.docked ? '40px' : '100%')};
-      box-sizing: border-box;
-      padding-left: ${(props) => (props.docked ? '28px' : '40px')};
-      transition: width 0.2s ease-in-out;
-    }
+  //hide the default clear button in chrome
+  .search-box::-webkit-search-cancel-button {
+    display: none;
   }
 `;
-const IconButton = styled.button`
+
+const ClearButton = styled.div`
   position: absolute;
-  border: none;
-  outline: none;
-  top: 1px;
-  padding: 8px 12px;
-  border-radius: 5px;
-  font-size: ${fontSize.base};
-  color: ${getThemePropSelector('textSecondary')};
-  background-color: transparent;
-  ${(props) => {
-    // TODO
-    return (
-      !props.disabled &&
-      css`
-        cursor: pointer;
-        &:hover {
-          color: ${getThemePropSelector('selectedActive')};
-        }
-      `
-    );
-  }};
-`;
-const SearchIcon = styled(IconButton)`
-  left: 1px;
-`;
-const ResetIcon = styled(IconButton)<{ visible?: boolean }>`
   right: 1px;
-  visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
-  opacity: ${(props) => (props.visible ? 1 : 0)};
-  transition: opacity 0.5s ease-in-out;
+  top: 0px;
 `;
 
 const SearchInput = forwardRef(
@@ -81,49 +56,63 @@ const SearchInput = forwardRef(
       onChange,
       onReset,
       disabled,
+      id,
+      size,
       ...rest
     }: Props,
     forwardedRef,
   ) => {
-    const [docked, setDocked] = useState(!disableToggle);
     const myInputRef = useRef<HTMLInputElement | null>(null);
+    const debounce = useRef<NodeJS.Timeout | null>(null);
+    const [debouncedValue, setDebouncedValue] = useState(value);
 
-    const toggle = () => {
-      if (!disableToggle) {
-        setDocked(!docked);
-        if (myInputRef.current) {
-          myInputRef.current.focus();
+    useEffect(() => {
+      return () => {
+        if (debounce.current) {
+          clearTimeout(debounce.current);
         }
-      }
-    };
+      };
+    }, []);
 
     const reset = () => {
+      setDebouncedValue('');
       if (onReset) {
         onReset();
       }
+    };
 
-      if (!disableToggle) {
-        setDocked(true);
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      setDebouncedValue(e.target.value);
+      if (debounce.current) {
+        clearTimeout(debounce.current);
       }
+
+      debounce.current = setTimeout(() => {
+        onChange(e);
+      }, 300);
     };
 
     return (
       <SearchInputContainer
         className="sc-searchinput"
         disabled={disabled}
-        docked={docked}
         {...rest}
       >
         <Input
           min={'1'}
-          type="text"
+          id={id || 'search'}
+          type="search"
           aria-label="search"
           name="search"
           placeholder={placeholder}
-          value={value}
-          onChange={onChange}
+          value={debouncedValue}
+          onChange={handleChange}
+          onReset={reset}
+          size={size}
+          leftIcon="Search"
+          className="search-box"
           disabled={disabled}
-          inputRef={(element) => {
+          ref={(element) => {
             myInputRef.current = element;
             if (typeof forwardedRef === 'function') {
               forwardedRef(element);
@@ -132,12 +121,15 @@ const SearchInput = forwardRef(
             }
           }}
         />
-        <SearchIcon onClick={toggle} disabled={!docked}>
-          <Icon name="Search" />
-        </SearchIcon>
-        <ResetIcon onClick={reset} visible={!!value && !docked && !!onReset}>
-          <Icon name="Times-circle" />
-        </ResetIcon>
+        {debouncedValue && (
+          <ClearButton className="close-icon">
+            <Button
+              icon={<Icon name="Close" />}
+              tooltip={{ overlay: 'Reset' }}
+              onClick={reset}
+            />
+          </ClearButton>
+        )}
       </SearchInputContainer>
     );
   },

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

@@ -7,8 +7,7 @@ import {
   sidebarWidth,
   sidebarItemHeight,
 } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
-import { Button } from '../button/Button.component';
+import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon } from '../icon/Icon.component';
 import { spacing } from '../../spacing';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
@@ -42,7 +41,8 @@ const Wrapper = styled.div<WrapperProps>`
       }
     `;
   }}
-
+  margin-top: 1px;
+  border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
   ${(props) => {
     if (props.expanded) {
       return css`
@@ -96,9 +96,10 @@ const SidebarContainer = styled.div<WrapperProps>`
 
   .sc-button {
     border-radius: 0;
-    background-color: ${getThemePropSelector('backgroundLevel1')};
+    background-color: ${(props) => props.theme.backgroundLevel1};
+    color: ${(props) => props.theme.textPrimary};
     &:hover {
-      background-color: ${getThemePropSelector('highlight')};
+      background-color: ${(props) => props.theme.highlight};
     }
     &:focus-visible {
       ${FocusVisibleStyle}
@@ -153,7 +154,7 @@ const MenuItemSelected = styled.div`
   width: 3px;
   height: 100%;
   right: 0;
-  background-color: ${getThemePropSelector('selectedActive')};
+  background-color: ${(props) => props.theme.selectedActive};
 `;
 const MenuItemIcon = styled.div`
   width: ${sidebarWidth};
@@ -189,9 +190,7 @@ function Sidebar({
         {onToggleClick && (
           <MenuItemIcon>
             <Button
-              size="larger"
-              variant="backgroundLevel1"
-              icon={<Icon name="Lat-menu" />}
+              icon={<Icon size="lg" name="Lat-menu" />}
               onClick={() => {
                 setHovered(false);
                 onToggleClick();

package/src/lib/components/tablev2/Search.tsx

@@ -23,7 +23,7 @@ export type SearchProps = {
   displayedName: DisplayedName;
   locale?: TableLocalType;
   totalCount?: number;
-} & Omit<Props, 'disableToggle'>;
+} & Omit<Props, 'disableToggle' | 'onChange'>;
 
 const SearchContainer = styled.div`
   display: flex;
@@ -99,6 +99,7 @@ export function TableSearch(props: SearchProps) {
         value={value}
         placeholder={translations[locale].search}
         disableToggle
+        size="2/3"
         onChange={(evt) => {
           if (typeof onChange === 'function') {
             // @ts-ignore

package/src/lib/components/tablev2/SearchWithQueryParams.tsx

@@ -4,14 +4,15 @@ import { TableSearch as Search, SearchProps } from './Search';
 
 export type SearchWithQueryParamsProps = {
   queryParams?: string;
-} & SearchProps;
+} & Omit<SearchProps, 'onChange' | 'value'> &
+  Partial<Pick<SearchProps, 'onChange'>>;
 
-export function SearchWithQueryParams(props) {
+export function SearchWithQueryParams(props: SearchWithQueryParamsProps) {
   const { queryParams = 'search', onChange, ...rest } = props;
   const { search, pathname } = useLocation();
   const history = useHistory();
   const params = new URLSearchParams(search);
-  const initialValue = params.get(queryParams);
+  const initialValue = params.get(queryParams) || '';
   const [value, setValue] = useState(initialValue);
 
   function handleOnChange(value: string) {

package/src/lib/components/tablev2/Tablestyle.tsx

@@ -53,8 +53,8 @@ export const HeadRow = styled.div<HeadRowType>`
   height: 2.286rem;
   width: ${(props) =>
     props.hasScrollBar
-      ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important;` // -4px for border
-      : `calc(100% - ${borderSize} ) !important;`}
+      ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important` // -4px for border
+      : `calc(100% - ${borderSize} ) !important`};
   height: ${(props) => tableRowHeight[props.rowHeight]}rem;
   table-layout: fixed;
   color: ${(props) => props.theme.textPrimary};