@scality/core-ui 0.116.0 → 0.117.0

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

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled, { css } from 'styled-components';
 import { Logo } from '../../icons/branding';
 import { spacing } from '../../spacing';
 import { fontSize, navbarHeight, navbarItemWidth } from '../../style/theme';
 import { getThemePropSelector } from '../../utils';
-import { Button } from '../button/Button.component';
 import { Dropdown, Item } from '../dropdown/Dropdown.component';
 import { Icon } from '../icon/Icon.component';
+import { Button, FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 type Action = {
   type: string;
   items?: Array<Item>;
@@ -17,6 +17,7 @@ type Tab = {
   selected?: boolean;
   onClick?: (arg0: any) => void;
   link?: JSX.Element;
+  render?: JSX.Element;
 };
 export type Props = {
   onToggleClick?: () => void;
@@ -35,8 +36,7 @@ const NavbarContainer = styled.div`
     .sc-trigger-text {
       color: ${getThemePropSelector('textPrimary')};
     }
-    border-bottom: ${spacing.r1} solid
-      ${getThemePropSelector('backgroundLevel1')};
+    border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
   `};
 `;
 const NavbarMenu = styled.div`
@@ -72,6 +72,11 @@ const NavbarTabs = styled.div`
           font-weight: bold;
           border-bottom-color: ${selectedActive};
         }
+        // :focus-visible is the keyboard-only version of :focus
+        &:focus-visible {
+          ${FocusVisibleStyle}
+          color: ${props.theme.textPrimary};
+        }
       `;
     }};
   }
@@ -92,6 +97,11 @@ const TabItem = styled.div<{ selected: boolean }>`
         border-top: ${spacing.r2} solid;
         cursor: pointer;
       }
+      // :focus-visible is the keyboard-only version of :focus
+      &:focus-visible {
+        ${FocusVisibleStyle}
+        color: ${props.theme.textPrimary};
+      }
     `;
   }};
   ${(props) =>
@@ -128,6 +138,11 @@ const NavbarMenuItem = styled.div`
     &:hover {
       background-color: ${getThemePropSelector('highlight')};
     }
+    // :focus-visible is the keyboard-only version of :focus
+    &:focus-visible {
+      ${FocusVisibleStyle}
+      color: ${(props) => props.theme.textPrimary};
+    }
     width: ${navbarItemWidth};
   }
 `;
@@ -156,14 +171,7 @@ const getActionRenderer = ({ type, items = null, ...rest }, index) => {
       />
     ) : null;
   } else if (type === 'button') {
-    return (
-      <Button
-        key={`navbar_right_action_${index}`}
-        size="larger"
-        variant="backgroundLevel1"
-        {...rest}
-      />
-    );
+    return <Button key={`navbar_right_action_${index}`} {...rest} />;
   } else if (type === 'custom') {
     return <rest.render key={`navbar_right_action_${index}`} />;
   }
@@ -183,12 +191,7 @@ function NavBar({
       <NavbarMenu>
         {onToggleClick && (
           <NavbarMenuItem onClick={onToggleClick}>
-            <Button
-              size="larger"
-              variant="backgroundLevel1"
-              icon={<Icon name="Lat-menu" />}
-              title="Main Menu"
-            />
+            <Button icon={<Icon name="Lat-menu" />} title="Main Menu" />
           </NavbarMenuItem>
         )}
         <NavbarMenuItem>
@@ -199,7 +202,12 @@ function NavBar({
       </NavbarMenu>
       {tabs.length ? (
         <NavbarTabs>
-          {tabs.map(({ link, title, selected, onClick }, index) => {
+          {tabs.map(({ link, title, selected, onClick, render }, index) => {
+            if (render) {
+              return (
+                <Fragment key={`navbar_tab_item_${index}`}>{render}</Fragment>
+              );
+            }
             return link ? (
               React.cloneElement(link, {
                 className: selected ? 'selected' : '',

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

@@ -11,6 +11,7 @@ import { getThemePropSelector } from '../../utils';
 import { Button } from '../button/Button.component';
 import { Icon } from '../icon/Icon.component';
 import { spacing } from '../../spacing';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 type Item = {
   label: string;
   onClick: (arg0: any) => void;
@@ -99,6 +100,9 @@ const SidebarContainer = styled.div<WrapperProps>`
     &:hover {
       background-color: ${getThemePropSelector('highlight')};
     }
+    &:focus-visible {
+      ${FocusVisibleStyle}
+    }
     height: ${sidebarItemHeight};
     width: ${sidebarWidth};
     padding: 0px;
@@ -121,12 +125,18 @@ const SidebarItem = styled.div<{ active?: boolean }>`
           background-color: ${highlight};
           color: ${textPrimary};
           cursor: default;
+          &:focus-visible {
+            ${FocusVisibleStyle}
+          }
         `
       : css`
           &:hover {
             background-color: ${highlight};
             color: ${textPrimary};
           }
+          &:focus-visible {
+            ${FocusVisibleStyle}
+          }
           &:active {
             background-color: ${highlight};
             color: ${textPrimary};
@@ -198,6 +208,17 @@ function Sidebar({
                 active={active}
                 title={label}
                 onClick={onClick}
+                onKeyDown={(event) => {
+                  if (
+                    event.key === ' ' ||
+                    event.key === 'Enter' ||
+                    event.key === 'Spacebar'
+                  ) {
+                    event.preventDefault();
+                    onClick(event);
+                  }
+                }}
+                tabIndex={0}
                 {...actionRest}
               >
                 {!!icon && <MenuItemIcon>{icon}</MenuItemIcon>}

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

@@ -242,7 +242,23 @@ export const MultiSelectableContent = <
               );
 
               return (
-                <TableHeader {...headerStyleProps} role="columnheader">
+                <TableHeader
+                  {...headerStyleProps}
+                  role="columnheader"
+                  tabIndex={!column.disableSortBy ? 0 : undefined}
+                  onKeyDown={(event) => {
+                    if (
+                      !column.disableSortBy &&
+                      (event.key === ' ' ||
+                        event.key === 'Enter' ||
+                        event.key === 'Spacebar')
+                    ) {
+                      event.preventDefault();
+                      // @ts-expect-error - getSortByToggleProps is joined to getHeaderProps
+                      headerStyleProps.onClick(event);
+                    }
+                  }}
+                >
                   <div>
                     {column.id === 'selection' ? (
                       <div

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

@@ -99,6 +99,18 @@ export function SingleSelectableContent<
         onClick: () => {
           if (onRowSelected) return onRowSelected(row);
         },
+        tabIndex: onRowSelected ? 0 : undefined,
+        onKeyDown: (event) => {
+          if (
+            onRowSelected &&
+            (event.key === ' ' ||
+              event.key === 'Enter' ||
+              event.key === 'Spacebar')
+          ) {
+            event.preventDefault();
+            onRowSelected(row);
+          }
+        },
       },
     };
 
@@ -167,7 +179,23 @@ export function SingleSelectableContent<
                 }),
               );
               return (
-                <TableHeader {...headerStyleProps} role="columnheader">
+                <TableHeader
+                  {...headerStyleProps}
+                  role="columnheader"
+                  tabIndex={!column.disableSortBy ? 0 : undefined}
+                  onKeyDown={(event) => {
+                    if (
+                      !column.disableSortBy &&
+                      (event.key === ' ' ||
+                        event.key === 'Enter' ||
+                        event.key === 'Spacebar')
+                    ) {
+                      event.preventDefault();
+                      // @ts-expect-error - getSortByToggleProps is joined to getHeaderProps
+                      headerStyleProps.onClick(event);
+                    }
+                  }}
+                >
                   <div>
                     {column.render('Header')}
                     <SortCaret column={column} />

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

@@ -8,6 +8,7 @@ import {
 } from './TableUtils';
 import { HeaderGroup } from 'react-table';
 import { Icon } from '../icon/Icon.component';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
 const borderSize = '4px';
 export const SortIncentive = styled.span`
@@ -18,16 +19,26 @@ export const SortCaretWrapper = styled.span`
   padding-left: ${spacing.sp4};
   position: absolute;
 `;
-export const TableHeader = styled.div<{ headerHeight?: number | string }>`
+export const TableHeader = styled.div<{
+  headerHeight?: number | string;
+  tabIndex: number | undefined;
+}>`
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: ${(props) => props.headerHeight};
+  cursor: ${(props) =>
+    props.tabIndex !== undefined && props.tabIndex >= 0
+      ? 'pointer'
+      : 'default'};
   &:hover {
     ${SortIncentive} {
       display: block;
     }
   }
+  &:focus-visible {
+    ${FocusVisibleStyle}
+  }
 `;
 
 type HeadRowType = {
@@ -46,7 +57,6 @@ export const HeadRow = styled.div<HeadRowType>`
       : `calc(100% - ${borderSize} ) !important;`}
   height: ${(props) => tableRowHeight[props.rowHeight]}rem;
   table-layout: fixed;
-  cursor: pointer;
   color: ${(props) => props.theme.textPrimary};
   font-weight: bold;
   overflow: hidden;
@@ -78,6 +88,9 @@ export const TableRow = styled.div<TableRowType>`
           outline: none;
           cursor: pointer;
         }
+        &:focus-visible {
+          ${FocusVisibleStyle}
+        }
       `;
     }
   }}

package/src/lib/components/text/Text.component.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { CoreUITheme } from '../../style/theme';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
 type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
 type Props = {
@@ -188,7 +189,6 @@ export const Link = styled.a`
   }
   // :focus-visible is the keyboard-only version of :focus
   &:focus-visible {
-    outline: dashed ${spacing.r2} ${(props) => props.theme.textLink};
-    outline-offset: ${spacing.r2};
+    ${FocusVisibleStyle}
   }
 `;

package/src/lib/index.ts

@@ -73,3 +73,4 @@ export { useMutationsHandler } from './components/toast/useMutationsHandler';
 export { Stepper } from './components/steppers/Stepper.component';
 export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
+export { InlineInput } from './components/inlineinput/InlineInput';

package/src/lib/spacing.tsx

@@ -36,7 +36,7 @@ export const spacing = {
 const HSeparator = styled.div`
   min-height: ${spacing.r40};
   min-width: ${spacing.r2};
-  background: ${(props) => props.theme.backgroundLevel1};
+  background: ${(props) => props.theme.border};
 `;
 
 const VSeparator = styled.div`

package/stories/InlineInput/InlineInput.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { InlineInput } from '../../src/lib';
+import { useMutation } from 'react-query';
+
+export default {
+  title: 'Components/InlineInput',
+  component: InlineInput,
+  args: {
+    id: 'instanceName',
+    defaultValue: 'My instance',
+  },
+  argTypes: {
+    changeMutation: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: ({ ...args }) => {
+    const changeMutation = useMutation<unknown, unknown, { value: string }>({
+      mutationFn: ({ value }) => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(null);
+          }, 2000);
+        });
+      },
+    });
+    return <InlineInput {...args} changeMutation={changeMutation} />;
+  },
+};
+
+export const Playground = {
+  args: {
+    label: 'Playground',
+  },
+};
+
+export const WithConfirmationModal = {
+  args: {
+    confirmationModal: {
+      title: 'Confirm the instance name change',
+      body: 'Are you sure you want to change the instance name?',
+    },
+  },
+};

package/stories/navbar.stories.tsx

@@ -2,9 +2,23 @@ import React from 'react';
 import { Navbar } from '../src/lib/components/navbar/Navbar.component';
 import { action } from '@storybook/addon-actions';
 import { Link } from '../src/lib/components/text/Text.component';
+import { InlineInput } from '../src/lib';
 import { Stack } from '../src/lib/spacing';
 
 const tabs = [
+  {
+    render: (
+      <InlineInput
+        id="instanceName"
+        changeMutation={{
+          isLoading: false,
+          mutate: () => {},
+        }}
+        defaultValue="My instance"
+        maxLength={14}
+      />
+    ),
+  },
   {
     selected: true,
     title: 'Groups',
@@ -14,21 +28,25 @@ const tabs = [
   {
     selected: false,
     title: 'Users',
+    link: <a href="/users">Users</a>,
     onClick: action('Users clicked'),
   },
   {
     selected: false,
     title: 'Policies',
+    link: <a href="/policies">Policies</a>,
     onClick: action('Policies clicked'),
   },
   {
     selected: false,
     title: 'Buckets',
+    link: <a href="/buckets">Buckets</a>,
     onClick: action('Buckets clicked'),
   },
   {
     selected: false,
     title: 'Workflows',
+    link: <a href="/workflows">Workflows</a>,
     onClick: action('Workflows clicked'),
   },
 ];