@innovaccer/design-system 2.7.0-1 → 2.8.1-0

package/.github/workflows/chromatic.yml

@@ -11,7 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
       
       - uses: actions/setup-node@v1
         with:

package/.github/workflows/main.yml

@@ -10,7 +10,7 @@ jobs:
     name: Release tag
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       
       - name: Check for release commit
         id: 'is_release_commit'

package/.github/workflows/manual.yml

@@ -13,7 +13,7 @@ jobs:
     name: Release tag
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       
       - uses: actions/setup-node@v1
         with:

package/.github/workflows/pull_request.yml

@@ -7,7 +7,7 @@ jobs:
     name: lint, test and build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
             
       - uses: actions/setup-node@v1
         with:

package/.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
     name: Test for coverage
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
             
       - uses: actions/setup-node@v1
         with:

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 
-## 2.7.0  (2021-12-20)
+## 2.8.0-0  (2022-01-12)
+### Highlights
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+* Fix chip inline alignment problem (253ba672)
+* Fix progressbar background color (938be99b)
+* Fix disabled  slider knob shadow (aff1ddb6)
+* Fix broken alignment due to inlineLabel in Dropdown (d7b51053)
+* Resolve tooltip close issue on disabled button (cc0c693d)
+
+### Improvements
+* Add popover transitions (f1873f65)
+* Add support for three characters in Avatar component (ba6bc35b)
+
+### Documentation
+NA
+
+-------------------
+
+## 2.7.0  (2021-12-23)
 ### Highlights
 
 ### Breaking changes
@@ -17,12 +48,20 @@ NA
 
 ### Features
 * Option to use custom search placeholder in Dropdown search input (9fcb2b65)
+* Adds keyboard interactions in Dropzone component. (8541a26d)
+* Adds subinfo option when checkbox is true Dropdown (96a581a3)
+* Adds transition to switch component (f8cbba79)
+* Transition in sidesheet component added (8c61ef05)
 
 ### Fixes
 * fix: updates docpage for stories without components exported (d5138109)
 * fix(storybook): update package json file to fix storybook docs page (149f8ec8)
 * fix(InputMask): fixes issue with fast input (4d1f8330)
 * fix(switch): add styling for hover and active state (3a54a934)
+* Button re-rendering issue is fixed, which was sometimes causing button to be clicked twice. (6b46d66f)
+* FileList truncates long file names now. (0c2a07b6)
+* Breadcrumbs separator color updated. (5b88f5c5)
+* Fixed loader issue when Table has nested rows. (f41f7f96)
 
 ### Improvements
 *  Added transitions to fullscreenModal component (98cac857)
@@ -31,6 +70,9 @@ NA
 ### Documentation
 * Example for custom header in sidesheet added (edc300cc)
 * Input examples (stories) are interactive now (ead16746)
+* add npm ci command to use package.lock freezed versions on CI environments on github actions (621d0934)
+* updates versions of dev dependencies for security issues (3c3d5288)
+* adds manual release workflow (e31559d3)
 
 
 -------------------

package/core/accessibility/utils/useAccessibilityProps.ts

@@ -1,19 +1,39 @@
 import * as React from 'react';
-import { isEnterKey } from '@/accessibility/utils';
+
+type AriaRoleType = React.AriaRole;
+type KeyboardEventKeyType = KeyboardEvent['key'];
 
 interface IProps {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
-  role?: React.AriaRole;
+  role?: AriaRoleType;
   'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
-const useAccessibilityProps = ({ onClick, onKeyDown, role, ...rest }: IProps) => {
+const allowed: Record<string, Set<KeyboardEventKeyType>> = {
+  button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
+  link: new Set(['Enter']),
+  // onChange handles everything, no need for extra keyboard interaction
+  checkbox: new Set([]),
+  radio: new Set([]),
+};
+
+// Refer for keyboard interactions: https://webaim.org/techniques/keyboard/#testing
+const isKeyboardInteractionAllowed = (role: AriaRoleType, key: KeyboardEventKeyType) => {
+  if (!allowed[role]) {
+    return false;
+  }
+
+  const allowedKeys = allowed[role];
+  return allowedKeys.has(key);
+};
+
+const useAccessibilityProps = ({ onClick, onKeyDown, role = 'button', ...rest }: IProps) => {
   return {
     ...(onClick
       ? {
           onClick: onClick,
-          role: role || 'button',
+          role: role,
           tabIndex: 0,
           'aria-label': rest['aria-label'],
           onKeyDown: (e: React.SyntheticEvent<HTMLElement>) => {
@@ -21,8 +41,12 @@ const useAccessibilityProps = ({ onClick, onKeyDown, role, ...rest }: IProps) =>
               onKeyDown(e as React.KeyboardEvent<HTMLElement>);
               return;
             }
-            if (isEnterKey(e as React.KeyboardEvent<HTMLElement>) && onClick) {
-              onClick(e as React.MouseEvent<HTMLElement>);
+            const key = (e as React.KeyboardEvent<HTMLElement>).key;
+            if (isKeyboardInteractionAllowed(role, key)) {
+              if (onClick) {
+                e.preventDefault();
+                onClick(e as React.MouseEvent<HTMLElement>);
+              }
             }
           },
         }

package/core/components/atoms/_chip/__tests__/__snapshots__/_chip.test.tsx.snap

@@ -6,12 +6,13 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
         class="material-icons material-icons-round Icon Icon--default Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round
@@ -33,12 +34,13 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
         class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round
@@ -60,12 +62,13 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
         class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round
@@ -87,12 +90,13 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
         class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round
@@ -114,12 +118,13 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
         class="material-icons material-icons-round Icon Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round
@@ -150,12 +155,13 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
         class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round
@@ -186,12 +192,13 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
         class="material-icons material-icons-round Icon Icon--disabled Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round
@@ -222,12 +229,13 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
         class="material-icons material-icons-round Icon Icon--info Chip-icon Chip-icon--left"
         data-test="DesignSystem-GenericChip--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         events_round

package/core/components/atoms/_chip/index.tsx

@@ -57,7 +57,7 @@ export const GenericChip = (props: GenericChipProps) => {
     <div
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
       {...baseProps}
-      className={`${className}`}
+      className={`Chip-wrapper ${className}`}
       onClick={onClickHandler}
     >
       {icon && (

package/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -7,6 +7,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -25,6 +26,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -102,6 +104,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -120,6 +123,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -197,6 +201,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -215,6 +220,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -292,6 +298,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -310,6 +317,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -387,6 +395,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -405,6 +414,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -482,6 +492,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -500,6 +511,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -577,6 +589,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -595,6 +608,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -672,6 +686,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -690,6 +705,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -767,6 +783,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -785,6 +802,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -862,6 +880,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -880,6 +899,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >

package/core/components/atoms/avatarGroup/AvatarCount.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Text } from '@/index';
+
+const AvatarCount = (props: any) => {
+  const { hiddenAvatarCount, avatarStyle } = props;
+
+  const ContentClass = classNames({
+    [`Avatar-content--secondary`]: true,
+  });
+
+  const AvatarVariantsClass = classNames({
+    Avatar: true,
+    [`Avatar--regular`]: true,
+    [`Avatar--secondary`]: true,
+    ['Avatar--disabled']: true,
+  });
+  return (
+    <div data-test="DesignSystem-AvatarGroup--TriggerAvatar" style={avatarStyle}>
+      <span className={AvatarVariantsClass}>
+        <Text appearance={'white'} className={ContentClass}>
+          {`+${hiddenAvatarCount}`}
+        </Text>
+      </span>
+    </div>
+  );
+};
+
+export default AvatarCount;

package/core/components/atoms/avatarGroup/AvatarGroup.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import { Avatar, Popover, Text } from '@/index';
+import { Popover } from '@/index';
 import { AvatarProps, PopoverProps } from '@/index.type';
+import AvatarCount from './AvatarCount';
+import Avatars from './Avatars';
+import AvatarPopperBody from './AvatarPopperBody';
 
 interface AvatarData extends Record<string, any> {
   firstName?: string;
@@ -10,7 +13,7 @@ interface AvatarData extends Record<string, any> {
   appearance?: AvatarProps['appearance'];
 }
 
-interface AvatarPopperProps {
+interface AvatarPopoverProps {
   popperRenderer?: (names: AvatarData[]) => JSX.Element;
   appendToBody?: PopoverProps['appendToBody'];
   dark?: PopoverProps['dark'];
@@ -46,7 +49,7 @@ export interface AvatarGroupProps extends BaseProps {
    * **Popover for +x avatar**
    *
    * <pre className="DocPage-codeBlock">
-   * AvatarPopperProps: {
+   * AvatarPopoverProps: {
    *   popperRenderer?: (names: AvatarData[]) => JSX.Element;
    *   appendToBody?: boolean;
    *   dark?: boolean;
@@ -68,7 +71,7 @@ export interface AvatarGroupProps extends BaseProps {
    * </pre>
    *
    */
-  popoverOptions: AvatarPopperProps;
+  popoverOptions: AvatarPopoverProps;
   /**
    * Position to place the tooltip on `Avatars` shown before +x
    */
@@ -90,7 +93,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
 
   const baseProps = extractBaseProps(props);
 
-  const extraAvatars = list.length > max ? (list.length - max > 9 ? 9 : list.length - max) : 0;
+  const hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
 
   const style = {
     borderRadius: '50%',
@@ -113,73 +116,25 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
     popperClassName
   );
 
-  const trigger = (
-    <div data-test="DesignSystem-AvatarGroup--TriggerAvatar" style={style}>
-      <Avatar appearance="secondary" firstName="+" lastName={`${extraAvatars}`} withTooltip={false} />
-    </div>
-  );
-
-  const renderPopper = () => {
-    const extraAvatarsList = list.slice(max, list.length);
-
-    if (popperRenderer && typeof renderPopper === 'function') {
-      return popperRenderer(extraAvatarsList);
-    }
-
-    return (
-      <div className="py-6 pr-4 pl-6">
-        <div className="AvatarGroup-TextWrapper" style={{ maxHeight }}>
-          {extraAvatarsList.map((item, ind) => {
-            const { firstName = '', lastName = '' } = item;
-            const name = `${firstName} ${lastName}`;
-
-            return (
-              <Text
-                key={ind}
-                appearance={dark ? 'white' : 'default'}
-                className={ind < extraAvatars - 1 ? 'mb-5' : ''}
-                data-test="DesignSystem-AvatarGroup--Text"
-              >
-                {name}
-              </Text>
-            );
-          })}
-        </div>
-      </div>
-    );
-  };
-
-  const renderAvatars = () => {
-    const avatars = list.slice(0, max).map((item, index) => {
-      const { appearance, firstName, lastName } = item;
-      return (
-        <div data-test="DesignSystem-AvatarGroup--Avatar" className="AvatarGroup-item" style={style} key={index}>
-          <Avatar
-            appearance={appearance}
-            firstName={firstName}
-            lastName={lastName}
-            withTooltip={true}
-            tooltipPosition={tooltipPosition}
-          />
-        </div>
-      );
-    });
-    return avatars;
-  };
-
   return (
     <div data-test="DesignSystem-AvatarGroup" {...baseProps} className={`${AvatarGroupClass} d-inline-flex`}>
-      {renderAvatars()}
+      <Avatars avatarList={list.slice(0, max)} avatarStyle={style} tooltipPosition={tooltipPosition} />
       {list.length - max > 0 && (
         <Popover
           on={on}
           dark={dark}
-          trigger={trigger}
+          trigger={<AvatarCount hiddenAvatarCount={hiddenAvatarCount} avatarStyle={style} />}
           position={position}
           appendToBody={appendToBody}
           className={popperClass}
+          offset="medium"
         >
-          {renderPopper()}
+          <AvatarPopperBody
+            hiddenAvatarList={list.slice(max, list.length)}
+            popperRenderer={popperRenderer}
+            maxHeight={maxHeight}
+            dark={dark}
+          />
         </Popover>
       )}
     </div>

package/core/components/atoms/avatarGroup/AvatarPopperBody.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Text } from '@/index';
+import classNames from 'classnames';
+
+const AvatarPopperBody = (props: any) => {
+  const { hiddenAvatarList, popperRenderer, maxHeight, dark } = props;
+
+  if (popperRenderer) {
+    return popperRenderer(hiddenAvatarList);
+  }
+
+  return (
+    <div className="py-6 pr-4 pl-6">
+      <div className="AvatarGroup-TextWrapper" style={{ maxHeight }}>
+        {hiddenAvatarList.map((item: any, ind: any) => {
+          const { firstName = '', lastName = '' } = item;
+          const name = `${firstName} ${lastName}`;
+          const AvatarTextClass = classNames({
+            [`mb-5`]: ind < hiddenAvatarList.length - 1,
+          });
+          return (
+            <Text
+              key={ind}
+              appearance={dark ? 'white' : 'default'}
+              className={AvatarTextClass}
+              data-test="DesignSystem-AvatarGroup--Text"
+            >
+              {name}
+            </Text>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default AvatarPopperBody;

package/core/components/atoms/avatarGroup/Avatars.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Avatar } from '@/index';
+
+const Avatars = (props: any) => {
+  const { avatarList, avatarStyle, tooltipPosition } = props;
+  const avatars = avatarList.map((item: any, index: any) => {
+    const { appearance, firstName, lastName } = item;
+    return (
+      <div data-test="DesignSystem-AvatarGroup--Avatar" className="AvatarGroup-item" style={avatarStyle} key={index}>
+        <Avatar
+          appearance={appearance}
+          firstName={firstName}
+          lastName={lastName}
+          withTooltip={true}
+          tooltipPosition={tooltipPosition}
+        />
+      </div>
+    );
+  });
+  return avatars;
+};
+
+export default Avatars;