@innovaccer/design-system 2.7.0-1 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 
-## 2.7.0  (2021-12-20)
+
+
+
+## 2.7.0  (2021-12-23)
 ### Highlights
 
 ### Breaking changes
@@ -17,12 +20,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 +42,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

@@ -12,6 +12,7 @@ exports[`Chip component
       <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
@@ -39,6 +40,7 @@ exports[`Chip component
       <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
@@ -66,6 +68,7 @@ exports[`Chip component
       <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
@@ -93,6 +96,7 @@ exports[`Chip component
       <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
@@ -120,6 +124,7 @@ exports[`Chip component
       <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
@@ -156,6 +161,7 @@ exports[`Chip component
       <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
@@ -192,6 +198,7 @@ exports[`Chip component
       <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
@@ -228,6 +235,7 @@ exports[`Chip component
       <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/avatarGroup/AvatarGroup.tsx

@@ -178,6 +178,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
           position={position}
           appendToBody={appendToBody}
           className={popperClass}
+          offset="medium"
         >
           {renderPopper()}
         </Popover>

package/core/components/atoms/avatarGroup/__stories__/index.story.tsx

@@ -7,7 +7,7 @@ export const all = () => {
   const position = select(
     'position',
     ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
-    'bottom'
+    'bottom-end'
   );
 
   const on = select('on', ['click', 'hover'], 'hover');

package/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -440,6 +440,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 20px; width: 20px;"
         >
           events_round
@@ -467,6 +468,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 20px; width: 20px;"
         >
           events_round
@@ -494,6 +496,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 20px; width: 20px;"
         >
           events_round
@@ -537,6 +540,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           events_round
@@ -564,6 +568,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           events_round
@@ -591,6 +596,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           events_round
@@ -634,6 +640,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 12px; width: 12px;"
         >
           events_round
@@ -661,6 +668,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 12px; width: 12px;"
         >
           events_round
@@ -688,6 +696,7 @@ exports[`Button component
         <i
           class="material-icons material-icons-round Icon Icon--default"
           data-test="DesignSystem-Button--Icon"
+          role="button"
           style="font-size: 12px; width: 12px;"
         >
           events_round

package/core/components/atoms/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -138,6 +138,7 @@ exports[`Checkbox component
         >
           <i
             class="material-icons material-icons-round Icon Icon--white"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             check_round
@@ -201,6 +202,7 @@ exports[`Checkbox component
         >
           <i
             class="material-icons material-icons-round Icon Icon--white"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             check_round
@@ -262,6 +264,7 @@ exports[`Checkbox component
         >
           <i
             class="material-icons material-icons-round Icon Icon--white"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             remove_round
@@ -324,6 +327,7 @@ exports[`Checkbox component
         >
           <i
             class="material-icons material-icons-round Icon Icon--white"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             remove_round
@@ -386,6 +390,7 @@ exports[`Checkbox component
         >
           <i
             class="material-icons material-icons-round Icon Icon--white"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             check_round
@@ -448,6 +453,7 @@ exports[`Checkbox component
         >
           <i
             class="material-icons material-icons-round Icon Icon--white"
+            role="button"
             style="font-size: 12px; width: 12px;"
           >
             check_round

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

@@ -19,6 +19,7 @@ exports[`ChipGroup component
           <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;"
           >
             assessment_round
@@ -41,6 +42,7 @@ exports[`ChipGroup component
           <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;"
           >
             assessment_round
@@ -72,6 +74,7 @@ exports[`ChipGroup component
           <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;"
           >
             assessment_round
@@ -103,6 +106,7 @@ exports[`ChipGroup component
           <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;"
           >
             assessment_round

package/core/components/atoms/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -29,6 +29,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -69,6 +70,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -109,6 +111,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -149,6 +152,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -183,6 +187,7 @@ exports[`Dropdown component
           >
             <i
               class="material-icons material-icons-round Icon Icon--default d-flex align-items-center mr-4"
+              role="button"
               style="font-size: 16px; width: 16px;"
             >
               events_round
@@ -195,6 +200,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -241,6 +247,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -281,6 +288,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -316,6 +324,7 @@ exports[`Dropdown component
           >
             <i
               class="material-icons material-icons-round Icon Icon--disabled d-flex align-items-center mr-4"
+              role="button"
               style="font-size: 16px; width: 16px;"
             >
               events_round
@@ -328,6 +337,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -375,6 +385,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -416,6 +427,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--disabled"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -456,6 +468,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -496,6 +509,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -536,6 +550,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -576,6 +591,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -616,6 +632,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -647,6 +664,7 @@ exports[`Dropdown component
         >
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             more_horiz_round
@@ -687,6 +705,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -727,6 +746,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -767,6 +787,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -807,6 +828,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -847,6 +869,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -887,6 +910,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -927,6 +951,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -967,6 +992,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -1007,6 +1033,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -1047,6 +1074,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round
@@ -1087,6 +1115,7 @@ exports[`Dropdown component
           </div>
           <i
             class="material-icons material-icons-round Icon Icon--default"
+            role="button"
             style="font-size: 16px; width: 16px;"
           >
             keyboard_arrow_down_round

package/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap

@@ -40,6 +40,7 @@ exports[`Input component
       >
         <i
           class="material-icons material-icons-round Icon"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           events_round
@@ -98,6 +99,7 @@ exports[`Input component
       >
         <i
           class="material-icons material-icons-round Icon"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           events_round
@@ -390,6 +392,7 @@ exports[`Input component
       >
         <i
           class="material-icons material-icons-round Icon"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           events_round
@@ -450,6 +453,7 @@ exports[`Input component
       >
         <i
           class="material-icons material-icons-round Icon"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           events_round
@@ -508,6 +512,7 @@ exports[`Input component
       >
         <i
           class="material-icons material-icons-round Icon"
+          role="button"
           style="font-size: 16px; width: 16px;"
         >
           events_round

package/core/components/atoms/message/__tests__/__snapshots__/Message.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`Message component
       <i
         class="material-icons material-icons-round Icon Icon--alert Message-icon Message-icon--alert Message-icon--withTitle"
         data-test="DesignSystem-Message--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         error_round
@@ -64,6 +65,7 @@ exports[`Message component
       <i
         class="material-icons material-icons-round Icon Icon--info Message-icon Message-icon--info Message-icon--withTitle"
         data-test="DesignSystem-Message--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         info_round
@@ -116,6 +118,7 @@ exports[`Message component
       <i
         class="material-icons material-icons-round Icon Icon--success Message-icon Message-icon--success Message-icon--withTitle"
         data-test="DesignSystem-Message--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         check_circle_round
@@ -168,6 +171,7 @@ exports[`Message component
       <i
         class="material-icons material-icons-round Icon Icon--warning Message-icon Message-icon--warning Message-icon--withTitle"
         data-test="DesignSystem-Message--Icon"
+        role="button"
         style="font-size: 16px; width: 16px;"
       >
         warning_round