@innovaccer/design-system 2.13.4-3 → 2.13.4-5

package/.all-contributorsrc

@@ -164,6 +164,42 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Rashi-Gupta-2000",
+      "name": "Rashi Gupta",
+      "avatar_url": "https://avatars.githubusercontent.com/u/99866103?v=4",
+      "profile": "https://github.com/Rashi-Gupta-2000",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "varnikajain15",
+      "name": "Varnika Jain",
+      "avatar_url": "https://avatars.githubusercontent.com/u/55780559?v=4",
+      "profile": "https://github.com/varnikajain15",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "aman2000verma",
+      "name": "Aman Verma",
+      "avatar_url": "https://avatars.githubusercontent.com/u/45339091?v=4",
+      "profile": "https://github.com/aman2000verma",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "samyak3009",
+      "name": "SAMYAK JAIN",
+      "avatar_url": "https://avatars.githubusercontent.com/u/56395892?v=4",
+      "profile": "https://github.com/samyak3009",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7

package/README.md

@@ -46,14 +46,11 @@ For more details see our [styling](#styling) section
 import '@innovaccer/design-system/css';
 ```
 
-
-
 If you want to try out `@innovaccer/design-system`, you can also use
 [CodeSandbox](https://codesandbox.io/s/focused-germain-shbcw).
 
 [![Edit @innovaccer/design-system](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/focused-germain-shbcw)
 
-
 ## Usage
 
 ```js
@@ -127,7 +124,9 @@ For css variables to work on IE we use a polyfill at runtime to achieve dynamic
 ```
 
 ## :card_file_box: Repos
+
 Here are the supporting repositories.
+
 - **[MDS Rich Text Editor](https://github.com/innovaccer/mds-rich-text-editor)** - Feature-rich WYSIWYG (What You See Is What You Get) HTML editor and WYSIWYG Markdown editor. It is used to create blogs, notes sections, comment sections etc. It has a variety of tools to edit and format rich content.
 - **[MDS Docs](https://github.com/innovaccer/mds-docs)** - Documentation site for Masala design system.
 - **[MDS Helpers](https://github.com/innovaccer/mds-helpers)** - Alert Service.
@@ -178,6 +177,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/atifzaidi92"><img src="https://avatars.githubusercontent.com/u/54103064?v=4?s=100" width="100px;" alt=""/><br /><sub><b>atifzaidi92</b></sub></a><br /><a href="https://github.com/innovaccer/design-system/commits?author=atifzaidi92" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/Sumit2399"><img src="https://avatars.githubusercontent.com/u/66456021?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sumit Dhyani</b></sub></a><br /><a href="https://github.com/innovaccer/design-system/commits?author=Sumit2399" title="Code">💻</a></td>
     <td align="center"><a href="https://tanmay-portfolio.herokuapp.com/"><img src="https://avatars.githubusercontent.com/u/36269283?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tanmay Sharma</b></sub></a><br /><a href="https://github.com/innovaccer/design-system/commits?author=927tanmay" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Rashi-Gupta-2000"><img src="https://avatars.githubusercontent.com/u/99866103?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rashi Gupta</b></sub></a><br /><a href="https://github.com/innovaccer/design-system/commits?author=Rashi-Gupta-2000" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/varnikajain15"><img src="https://avatars.githubusercontent.com/u/55780559?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Varnika Jain</b></sub></a><br /><a href="https://github.com/innovaccer/design-system/commits?author=varnikajain15" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/aman2000verma"><img src="https://avatars.githubusercontent.com/u/45339091?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aman Verma</b></sub></a><br /><a href="https://github.com/innovaccer/design-system/commits?author=aman2000verma" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/samyak3009"><img src="https://avatars.githubusercontent.com/u/56395892?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SAMYAK JAIN</b></sub></a><br /><a href="https://github.com/innovaccer/design-system/commits?author=samyak3009" title="Code">💻</a></td>
   </tr>
 </table>
 

package/core/components/atoms/breadcrumbs/Breadcrumbs.tsx

@@ -56,6 +56,8 @@ const renderDropdown = (list: BreadcrumbsProps['list'], onClick: BreadcrumbsProp
         size="tiny"
         appearance="transparent"
         icon="more_horiz_filled"
+        largeIcon={true}
+        className="Breadcrumbs-Button"
         data-test="DesignSystem-Breadcrumbs--Button"
       />
     );

package/core/components/atoms/checkbox/Checkbox.tsx

@@ -54,6 +54,10 @@ export interface CheckboxProps extends BaseProps, OmitNativeProps<HTMLInputEleme
    * Callback function called when user the selects an option
    */
   onChange?: (event: ChangeEvent) => void;
+  /**
+   * htmlFor label id for checkbox
+   */
+  id?: string;
 }
 
 /**
@@ -75,6 +79,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props
     className,
     checked: checkedProp,
     helpText,
+    id = `${name}-${label}-${uidGenerator()}`,
     ...rest
   } = props;
 
@@ -134,7 +139,6 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props
     }
     if (onChange) onChange(e);
   };
-  const id = `${name}-${label}-${uidGenerator()}`;
   const IconName = indeterminate ? 'remove' : checked ? 'check' : '';
   const IconSize = size === 'tiny' ? 12 : 16;
 

package/core/components/atoms/dropdown/DropdownList.tsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import Loading from './Loading';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { ChangeEvent } from '@/common.type';
+import uidGenerator from '@/utils/uidGenerator';
 
 export type DropdownAlign = 'left' | 'right';
 export type OptionType = 'DEFAULT' | 'WITH_ICON' | 'WITH_META' | 'ICON_WITH_META';
@@ -295,6 +296,7 @@ const DropdownList = (props: OptionsProps) => {
   const getDropdownClass = (index: number, isGroup: boolean) => {
     const Dropdown = classNames({
       ['Dropdown--border']: isGroup && index !== 0,
+      ['Option-checkboxWrapper']: true,
     });
 
     return Dropdown;
@@ -320,9 +322,9 @@ const DropdownList = (props: OptionsProps) => {
   });
 
   const SelectAllClass = classNames({
-    ['Option-checkbox']: true,
     ['Option-checkbox--active']: cursor === 0,
-    ['OptionWrapper']: true,
+    ['Option-checkboxWrapper']: true,
+    ['Option-checkbox']: true,
   });
 
   const onToggleDropdown = (open: boolean, type?: string) => {
@@ -463,17 +465,21 @@ const DropdownList = (props: OptionsProps) => {
     const { selectAllLabel = 'Select All', selectAll, onSelectAll } = props;
 
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
+    const [id] = React.useState(() => uidGenerator());
 
     return (
       <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
-        <Checkbox
-          label={label}
-          onChange={onSelectAll}
-          checked={selectAll.checked}
-          indeterminate={selectAll.indeterminate}
-          tabIndex={-1}
-          className="OptionCheckbox"
-        />
+        <label htmlFor={id} className="Checkbox-label">
+          <Checkbox
+            label={label}
+            onChange={onSelectAll}
+            checked={selectAll.checked}
+            indeterminate={selectAll.indeterminate}
+            tabIndex={-1}
+            className="OptionCheckbox"
+            id={id}
+          />
+        </label>
       </div>
     );
   };
@@ -488,21 +494,26 @@ const DropdownList = (props: OptionsProps) => {
 
     const active = selectAllPresent ? index + 1 === cursor : index === cursor;
     const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
+    const id = `Checkbox-option-${index}-${item.value}`;
+
     return (
-      <Option
-        optionData={item}
-        truncateOption={truncateOption}
-        selected={optionIsSelected}
-        index={index}
-        updateActiveOption={updateActiveOption}
-        optionRenderer={optionRenderer}
-        active={active}
-        checkboxes={withCheckbox}
-        menu={menu}
-        onClick={() => optionClickHandler(item)}
-        onChange={(e) => props.onSelect(item, e.target.checked)}
-        optionType={props.optionType}
-      />
+      <label htmlFor={id}>
+        <Option
+          optionData={item}
+          truncateOption={truncateOption}
+          selected={optionIsSelected}
+          index={index}
+          updateActiveOption={updateActiveOption}
+          optionRenderer={optionRenderer}
+          active={active}
+          checkboxes={withCheckbox}
+          menu={menu}
+          onClick={() => optionClickHandler(item)}
+          onChange={(e) => props.onSelect(item, e.target.checked)}
+          optionType={props.optionType}
+          id={id}
+        />
+      </label>
     );
   };
 

package/core/components/atoms/dropdown/__stories__/MenuWithInfo.story.jsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Dropdown from '../Dropdown';
+import { Uncontrolled, Controlled } from './_common_/types';
+
+// CSF format story
+export const dropdownAsMenuWithSubinfo = () => {
+  const options = [
+    { label: 'Below 18', subInfo: 'People below 18 years old', value: 'below_18', optionType: 'WITH_META' },
+    { label: '19 - 35', subInfo: 'People 19-35 years old', value: '19-35', optionType: 'WITH_META' },
+    { label: '36 - 55', subInfo: 'People 36-55 years old', value: '36-55', optionType: 'WITH_META' },
+    { label: '56 and above', subInfo: 'People above 56 years old', value: '56_above', optionType: 'WITH_META' },
+  ];
+  return (
+    <div className="d-flex w-50">
+      <Dropdown options={options} menu={true} className="mr-5" align="right" />
+      <Dropdown options={options} menu={true} className="mr-5" align="right" />
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Dropdown/Dropdown As Menu With Subinfo',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Dropdown',
+        props: {
+          components: { Uncontrolled, Controlled },
+          exclude: ['showHead'],
+        },
+      },
+    },
+  },
+};

package/core/components/atoms/dropdown/__stories__/WithCheckboxAndSubInfo.story.jsx

@@ -8,7 +8,7 @@ export const dropdownItemsWithCheckboxAndSubinfo = () => {
     {
       label: 'Below 18',
       value: 'below_18',
-      subInfo: 'People bewlow 18 years old',
+      subInfo: 'People below 18 years old',
     },
     {
       label: '19 - 35',

package/core/components/atoms/dropdown/option/CheckboxOption.tsx

@@ -5,7 +5,7 @@ import { Text, MetaList } from '@/index';
 import { MetaListProps } from '@/index.type';
 
 const CheckboxOption = (props: OptionTypeProps) => {
-  const { className, selected, optionData, onChangeHandler, onUpdateActiveOption, dataTest } = props;
+  const { className, selected, optionData, onChangeHandler, onUpdateActiveOption, dataTest, id = '' } = props;
   const { subInfo, label, disabled } = optionData;
 
   const renderSubInfo = (subInfo: string | MetaListProps) => {
@@ -48,6 +48,7 @@ const CheckboxOption = (props: OptionTypeProps) => {
         tabIndex={-1}
         className={`OptionCheckbox ${subInfo ? 'pb-0' : ''}`}
         data-test={`${dataTest}--Checkbox`}
+        id={id}
       />
       {subInfo && <div className="pl-8 ml-3">{renderSubInfo(subInfo)}</div>}
     </div>

package/core/components/atoms/dropdown/option/index.tsx

@@ -56,6 +56,7 @@ export interface OptionTypeProps {
   onClickHandler?: (event: ClickEvent) => void;
   onChangeHandler?: (event: ChangeEvent) => void;
   renderSubInfo: (subInfo: string | MetaListProps) => React.ReactElement;
+  id?: string;
 }
 
 interface OptionProps extends OptionRendererProps {
@@ -69,6 +70,7 @@ interface OptionProps extends OptionRendererProps {
   onClick?: () => void;
   onChange?: (event: ChangeEvent) => void;
   updateActiveOption?: (index: number) => void;
+  id?: string;
 }
 
 const OptionTypeMapping: { [key: string]: (props: OptionTypeProps) => JSX.Element } = {
@@ -80,7 +82,18 @@ const OptionTypeMapping: { [key: string]: (props: OptionTypeProps) => JSX.Elemen
 };
 
 const Option = (props: OptionProps) => {
-  const { optionData, selected, onClick, updateActiveOption, onChange, active, index, checkboxes, menu } = props;
+  const {
+    optionData,
+    selected,
+    onClick,
+    updateActiveOption,
+    onChange,
+    active,
+    index,
+    checkboxes,
+    menu,
+    id = '',
+  } = props;
 
   const { optionType = 'DEFAULT' } = optionData.optionType ? optionData : props;
   const { disabled } = optionData;
@@ -150,7 +163,7 @@ const Option = (props: OptionProps) => {
   }
 
   const renderSubInfo = (subInfo: string | MetaListProps) => {
-    const labelAppearance = disabled ? 'disabled' : selected ? 'white' : 'subtle';
+    const labelAppearance = disabled ? 'disabled' : selected && !menu ? 'white' : 'subtle';
     const iconAppearance = selected ? 'white' : 'disabled';
 
     if (typeof subInfo === 'string') {
@@ -195,6 +208,7 @@ const Option = (props: OptionProps) => {
     onUpdateActiveOption,
     dataTest: `DesignSystem-DropdownOption--${type}`,
     className: checkboxes ? CheckboxClassName : OptionClassName,
+    id,
   });
 };
 

package/core/components/atoms/metricInput/MetricInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon, Text } from '@/index';
+import { Button, Icon, Text } from '@/index';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
 import { AutoComplete } from '@/common.type';
 
@@ -168,12 +168,10 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
     [`MetricInput-icon--${size}`]: size,
   });
 
-  const getArrowClass = (direction: string) =>
-    classNames({
-      ['MetricInput-arrowIcon']: true,
-      [`MetricInput-arrowIcon--${size}`]: size,
-      [`MetricInput-arrowIcon--${direction}`]: direction,
-    });
+  const actionButton = classNames({
+    ['p-0']: true,
+    [`MetricInput-arrowIcon--${size}`]: size,
+  });
 
   const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (isUncontrolled) {
@@ -226,17 +224,10 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
     }
   };
 
-  const iconSize = size === 'regular' ? 12 : 16;
+  const actionButtonSize = size === 'large' ? 'regular' : 'tiny';
 
   return (
-    <div
-      data-test="DesignSystem-MetricInputWrapper"
-      className={classes}
-      onClick={() => ref.current?.focus()}
-      onFocus={() => ref.current?.focus()}
-      onKeyDown={() => {}}
-      role="presentation"
-    >
+    <div data-test="DesignSystem-MetricInputWrapper" className={classes} onKeyDown={() => {}} role="presentation">
       {icon && (
         <Icon
           data-test="DesignSystem-MetricInput--icon"
@@ -286,20 +277,18 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
         </Text>
       )}
 
-      <div className="MetricInput-arrowIcons">
-        <Icon
-          tabIndex={-1}
-          className={getArrowClass('up')}
-          size={iconSize}
-          name="keyboard_arrow_up"
+      <div>
+        <Button
+          icon="keyboard_arrow_up"
+          size={actionButtonSize}
+          className={`${actionButton} mb-2`}
           onClick={(e) => onArrowClick(e, 'up')}
           data-test="DesignSystem-MetricInput--upIcon"
         />
-        <Icon
-          tabIndex={-1}
-          className={getArrowClass('down')}
-          size={iconSize}
-          name="keyboard_arrow_down"
+        <Button
+          icon="keyboard_arrow_down"
+          size={actionButtonSize}
+          className={actionButton}
           onClick={(e) => onArrowClick(e, 'down')}
           data-test="DesignSystem-MetricInput--downIcon"
         />

package/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap

@@ -24,27 +24,43 @@ exports[`MetricInput component
         type="number"
         value="10"
       />
-      <div
-        class="MetricInput-arrowIcons"
-      >
-        <i
-          class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--up"
+      <div>
+        <button
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular mb-2"
           data-test="DesignSystem-MetricInput--upIcon"
-          role="button"
-          style="font-size: 12px; width: 12px;"
           tabindex="0"
         >
-          keyboard_arrow_up_round
-        </i>
-        <i
-          class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--down"
+          <div
+            class="Button-icon"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default"
+              data-test="DesignSystem-Button--Icon"
+              role="button"
+              style="font-size: 12px; width: 12px;"
+            >
+              keyboard_arrow_up_round
+            </i>
+          </div>
+        </button>
+        <button
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular"
           data-test="DesignSystem-MetricInput--downIcon"
-          role="button"
-          style="font-size: 12px; width: 12px;"
           tabindex="0"
         >
-          keyboard_arrow_down_round
-        </i>
+          <div
+            class="Button-icon"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default"
+              data-test="DesignSystem-Button--Icon"
+              role="button"
+              style="font-size: 12px; width: 12px;"
+            >
+              keyboard_arrow_down_round
+            </i>
+          </div>
+        </button>
       </div>
     </div>
   </div>
@@ -75,27 +91,43 @@ exports[`MetricInput component
         type="number"
         value="10"
       />
-      <div
-        class="MetricInput-arrowIcons"
-      >
-        <i
-          class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--up"
+      <div>
+        <button
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular mb-2"
           data-test="DesignSystem-MetricInput--upIcon"
-          role="button"
-          style="font-size: 12px; width: 12px;"
           tabindex="0"
         >
-          keyboard_arrow_up_round
-        </i>
-        <i
-          class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--down"
+          <div
+            class="Button-icon"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default"
+              data-test="DesignSystem-Button--Icon"
+              role="button"
+              style="font-size: 12px; width: 12px;"
+            >
+              keyboard_arrow_up_round
+            </i>
+          </div>
+        </button>
+        <button
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular"
           data-test="DesignSystem-MetricInput--downIcon"
-          role="button"
-          style="font-size: 12px; width: 12px;"
           tabindex="0"
         >
-          keyboard_arrow_down_round
-        </i>
+          <div
+            class="Button-icon"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default"
+              data-test="DesignSystem-Button--Icon"
+              role="button"
+              style="font-size: 12px; width: 12px;"
+            >
+              keyboard_arrow_down_round
+            </i>
+          </div>
+        </button>
       </div>
     </div>
   </div>
@@ -131,27 +163,43 @@ exports[`MetricInput component
       >
         kg
       </span>
-      <div
-        class="MetricInput-arrowIcons"
-      >
-        <i
-          class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--large MetricInput-arrowIcon--up"
+      <div>
+        <button
+          class="Button Button--regular Button--regularSquare Button--basic p-0 MetricInput-arrowIcon--large mb-2"
           data-test="DesignSystem-MetricInput--upIcon"
-          role="button"
-          style="font-size: 16px; width: 16px;"
           tabindex="0"
         >
-          keyboard_arrow_up_round
-        </i>
-        <i
-          class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--large MetricInput-arrowIcon--down"
+          <div
+            class="Button-icon"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default"
+              data-test="DesignSystem-Button--Icon"
+              role="button"
+              style="font-size: 16px; width: 16px;"
+            >
+              keyboard_arrow_up_round
+            </i>
+          </div>
+        </button>
+        <button
+          class="Button Button--regular Button--regularSquare Button--basic p-0 MetricInput-arrowIcon--large"
           data-test="DesignSystem-MetricInput--downIcon"
-          role="button"
-          style="font-size: 16px; width: 16px;"
           tabindex="0"
         >
-          keyboard_arrow_down_round
-        </i>
+          <div
+            class="Button-icon"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default"
+              data-test="DesignSystem-Button--Icon"
+              role="button"
+              style="font-size: 16px; width: 16px;"
+            >
+              keyboard_arrow_down_round
+            </i>
+          </div>
+        </button>
       </div>
     </div>
   </div>
@@ -187,27 +235,43 @@ exports[`MetricInput component
       >
         kg
       </span>
-      <div
-        class="MetricInput-arrowIcons"
-      >
-        <i
-          class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--up"
+      <div>
+        <button
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular mb-2"
           data-test="DesignSystem-MetricInput--upIcon"
-          role="button"
-          style="font-size: 12px; width: 12px;"
           tabindex="0"
         >
-          keyboard_arrow_up_round
-        </i>
-        <i
-          class="material-icons material-icons-round Icon MetricInput-arrowIcon MetricInput-arrowIcon--regular MetricInput-arrowIcon--down"
+          <div
+            class="Button-icon"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default"
+              data-test="DesignSystem-Button--Icon"
+              role="button"
+              style="font-size: 12px; width: 12px;"
+            >
+              keyboard_arrow_up_round
+            </i>
+          </div>
+        </button>
+        <button
+          class="Button Button--tiny Button--tinySquare Button--basic p-0 MetricInput-arrowIcon--regular"
           data-test="DesignSystem-MetricInput--downIcon"
-          role="button"
-          style="font-size: 12px; width: 12px;"
           tabindex="0"
         >
-          keyboard_arrow_down_round
-        </i>
+          <div
+            class="Button-icon"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default"
+              data-test="DesignSystem-Button--Icon"
+              role="button"
+              style="font-size: 12px; width: 12px;"
+            >
+              keyboard_arrow_down_round
+            </i>
+          </div>
+        </button>
       </div>
     </div>
   </div>

package/core/components/atoms/toast/Toast.tsx

@@ -72,7 +72,7 @@ export const Toast = (props: ToastProps) => {
     info: 'info',
     success: 'check_circle',
     alert: 'error',
-    warning: 'error',
+    warning: 'warning',
   };
 
   const icon = IconMapping[appearance];