From f9c6f1b601ac9a5aafba6b3e6b7783ac3265cb5c Mon Sep 17 00:00:00 2001
From: Yash raj chhabra <95337653+ychhabra-eightfold@users.noreply.github.com>
Date: Thu, 5 May 2022 17:02:10 +0530
Subject: [PATCH] feat: abstract out common component props as oc base props,
 add ability to forward ref (#106)

* feat: extract out common component props as oc base props

* feat: extend HTMLAttributes

* feat: use OcBaseProps in button

* feat: use base prop in all components

* chore: update snapshots
---
 src/__snapshots__/storybook.test.js.snap      |  21 +++
 src/components/Badge/Badge.tsx                |   3 +-
 src/components/Badge/Badge.types.tsx          |  11 +-
 src/components/Button/Button.types.ts         |   3 +-
 .../Button/PrimaryButton/PrimaryButton.tsx    |   2 +
 .../SecondaryButton/SecondaryButton.tsx       |   2 +
 .../Dialog/BaseDialog/BaseDialog.tsx          | 154 ++++++++++--------
 .../Dialog/BaseDialog/BaseDialog.types.ts     |  10 +-
 src/components/Dialog/Dialog.tsx              | 110 +++++++------
 src/components/InfoBar/InfoBar.tsx            | 118 ++++++++------
 src/components/InfoBar/InfoBar.types.ts       |  12 +-
 src/components/Inputs/Input.types.ts          |  22 ++-
 src/components/Inputs/SearchBox/SearchBox.tsx |   2 +
 src/components/Inputs/TextArea/TextArea.tsx   |   4 +-
 src/components/Inputs/TextInput/TextInput.tsx |   4 +-
 src/components/Label/Label.tsx                |   3 +-
 src/components/Label/Label.types.ts           |   3 +-
 src/components/List/List.tsx                  |   3 +-
 src/components/List/List.types.ts             |  11 +-
 src/components/MatchScore/MatchScore.tsx      |  81 +++++----
 src/components/MatchScore/MatchScore.types.ts |   7 +-
 src/components/Menu/Menu.tsx                  |   4 +-
 src/components/Modal/Modal.tsx                |  82 +++++-----
 src/components/OcBase/Base.types.ts           |  12 ++
 src/components/OcBase/index.ts                |   1 +
 src/components/Panel/Panel.tsx                |   2 +
 src/components/Panel/Panel.types.ts           |   3 +-
 src/components/Pills/Pill.tsx                 | 144 ++++++++--------
 src/components/Pills/Pills.types.ts           |   3 +-
 src/components/Snackbar/Snackbar.test.tsx     |   1 -
 src/components/Snackbar/Snackbar.types.ts     |   2 +-
 src/components/Snackbar/SnackbarContainer.tsx |   2 +-
 src/components/Tabs/Tab/Tab.tsx               | 104 ++++++------
 src/components/Tabs/Tabs.types.ts             |  18 +-
 src/components/Tabs/Tabs/AnimatedTabs.tsx     |  61 ++++---
 src/components/Tabs/Tabs/index.tsx            |  22 ++-
 .../Tabs/__snapshots__/Tabs.test.tsx.snap     |   1 +
 src/components/Tooltip/Tooltip.tsx            |   2 +
 src/components/Tooltip/Tooltip.types.ts       |  11 +-
 39 files changed, 578 insertions(+), 483 deletions(-)
 create mode 100644 src/components/OcBase/Base.types.ts
 create mode 100644 src/components/OcBase/index.ts

diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
index 03d470538..a9b09e6a9 100644
--- a/src/__snapshots__/storybook.test.js.snap
+++ b/src/__snapshots__/storybook.test.js.snap
@@ -848,7 +848,10 @@ Array [
     className="mainWrapper"
   >
     <button
+      aria-controls="dropdown-1"
       aria-disabled={false}
+      aria-expanded={false}
+      aria-haspopup={true}
       aria-label="Split Button"
       className="button buttonPrimary splitLeft"
       defaultChecked={false}
@@ -3446,6 +3449,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
     <div
       className="tabWrap"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -3514,6 +3518,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
     <div
       className="tabWrap"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -3662,6 +3667,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
     <div
       className="tabWrap small"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -3730,6 +3736,7 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
     <div
       className="tabWrap pill"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -10581,6 +10588,7 @@ Array [
     <div
       className="tabWrap"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -10650,6 +10658,7 @@ Array [
     <div
       className="tabWrap"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -10739,6 +10748,7 @@ Array [
     <div
       className="tabWrap"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -10888,6 +10898,7 @@ Array [
     <div
       className="tabWrap"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -11064,6 +11075,7 @@ Array [
       <div
         className="tabWrap scrollable"
         role="tablist"
+        value="tab1"
       >
         <button
           aria-label="Tab 1"
@@ -11222,6 +11234,7 @@ Array [
     <div
       className="tabWrap pill"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -11291,6 +11304,7 @@ Array [
     <div
       className="tabWrap pill"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -11380,6 +11394,7 @@ Array [
     <div
       className="tabWrap pill"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -11529,6 +11544,7 @@ Array [
     <div
       className="tabWrap pill"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -11703,6 +11719,7 @@ Array [
     <div
       className="tabWrap small"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -11772,6 +11789,7 @@ Array [
     <div
       className="tabWrap small"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -11861,6 +11879,7 @@ Array [
     <div
       className="tabWrap small"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -12010,6 +12029,7 @@ Array [
     <div
       className="tabWrap small"
       role="tablist"
+      value="tab1"
     >
       <button
         aria-label="Tab 1"
@@ -12186,6 +12206,7 @@ Array [
       <div
         className="tabWrap small scrollable"
         role="tablist"
+        value="tab1"
       >
         <button
           aria-label="Tab 1"
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 800bcd184..72894ca44 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -10,6 +10,7 @@ export const Badge: FC<BadgeProps> = ({
     style,
     children,
     disruptive,
+    ...rest
 }) => {
     const badgeClasses: string = mergeClasses([
         styles.badge,
@@ -19,7 +20,7 @@ export const Badge: FC<BadgeProps> = ({
         { [styles.active]: active },
     ]);
     return (
-        <span className={badgeClasses} style={style}>
+        <span className={badgeClasses} style={style} {...rest}>
             {children}
         </span>
     );
diff --git a/src/components/Badge/Badge.types.tsx b/src/components/Badge/Badge.types.tsx
index 3ada2087c..8621015f6 100644
--- a/src/components/Badge/Badge.types.tsx
+++ b/src/components/Badge/Badge.types.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
+import { OcBaseProps } from '../OcBase';
 
-export interface BadgeProps {
+export interface BadgeProps extends OcBaseProps<HTMLSpanElement> {
     /**
      * Badge is in an active state or not
      */
@@ -9,12 +10,4 @@ export interface BadgeProps {
      * If badge is disruptive or not
      */
     disruptive?: boolean;
-    /**
-     * Custom badge classNames
-     */
-    classNames?: string;
-    /**
-     * Custom badge style
-     */
-    style?: React.CSSProperties;
 }
diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
index 9f48a06c6..ccb70e69c 100644
--- a/src/components/Button/Button.types.ts
+++ b/src/components/Button/Button.types.ts
@@ -1,5 +1,6 @@
 import React, { Ref } from 'react';
 import { IconProps } from '../Icon';
+import { OcBaseProps } from '../OcBase';
 
 export enum ButtonIconAlign {
     Left = 'left',
@@ -52,7 +53,7 @@ export interface InternalButtonProps extends ButtonProps {
     ref?: Ref<HTMLButtonElement>;
 }
 
-export type NativeButtonProps = Omit<React.ButtonHTMLAttributes<any>, 'type'>;
+export type NativeButtonProps = Omit<OcBaseProps<HTMLButtonElement>, 'type'>;
 
 export interface SplitButtonProps
     extends Omit<
diff --git a/src/components/Button/PrimaryButton/PrimaryButton.tsx b/src/components/Button/PrimaryButton/PrimaryButton.tsx
index e0d4b443d..91dd41523 100644
--- a/src/components/Button/PrimaryButton/PrimaryButton.tsx
+++ b/src/components/Button/PrimaryButton/PrimaryButton.tsx
@@ -38,6 +38,7 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
             theme,
             toggle,
             buttonWidth,
+            ...rest
         },
         ref: Ref<HTMLButtonElement>
     ) => {
@@ -50,6 +51,7 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
 
         return (
             <BaseButton
+                {...rest}
                 ref={ref}
                 alignIcon={alignIcon}
                 alignText={alignText}
diff --git a/src/components/Button/SecondaryButton/SecondaryButton.tsx b/src/components/Button/SecondaryButton/SecondaryButton.tsx
index af8f55daa..8d4190fc6 100644
--- a/src/components/Button/SecondaryButton/SecondaryButton.tsx
+++ b/src/components/Button/SecondaryButton/SecondaryButton.tsx
@@ -37,6 +37,7 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
             style,
             toggle,
             buttonWidth,
+            ...rest
         },
         ref: Ref<HTMLButtonElement>
     ) => {
@@ -49,6 +50,7 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
 
         return (
             <BaseButton
+                {...rest}
                 ref={ref}
                 alignIcon={alignIcon}
                 alignText={alignText}
diff --git a/src/components/Dialog/BaseDialog/BaseDialog.tsx b/src/components/Dialog/BaseDialog/BaseDialog.tsx
index 8ea3976a8..0d1788217 100644
--- a/src/components/Dialog/BaseDialog/BaseDialog.tsx
+++ b/src/components/Dialog/BaseDialog/BaseDialog.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC, Ref, useEffect } from 'react';
 import { BaseDialogProps } from './BaseDialog.types';
 import { Portal } from '../../Portal';
 import {
@@ -12,85 +12,95 @@ import { useScrollLock } from '../../../hooks/useScrollLock';
 
 import styles from './base-dialog.module.scss';
 
-export const BaseDialog: FC<BaseDialogProps> = ({
-    parent = document.body,
-    visible,
-    onClose,
-    maskClosable = true,
-    onVisibleChange,
-    height,
-    width,
-    zIndex,
-    header,
-    headerClassNames,
-    body,
-    bodyClassNames,
-    actions,
-    actionsClassNames,
-    dialogWrapperClassNames,
-    dialogClassNames,
-}) => {
-    const labelId = uniqueId('dialog-label-');
+export const BaseDialog: FC<BaseDialogProps> = React.forwardRef(
+    (
+        {
+            parent = document.body,
+            visible,
+            onClose,
+            maskClosable = true,
+            onVisibleChange,
+            height,
+            width,
+            zIndex,
+            header,
+            headerClassNames,
+            body,
+            bodyClassNames,
+            actions,
+            actionsClassNames,
+            dialogWrapperClassNames,
+            dialogClassNames,
+            ...rest
+        },
+        ref: Ref<HTMLDivElement>
+    ) => {
+        const labelId = uniqueId('dialog-label-');
 
-    const { lockScroll, unlockScroll } = useScrollLock(parent);
+        const { lockScroll, unlockScroll } = useScrollLock(parent);
 
-    const dialogBackdropClasses: string = mergeClasses([
-        styles.dialogBackdrop,
-        dialogWrapperClassNames,
-        { [styles.visible]: visible },
-    ]);
+        const dialogBackdropClasses: string = mergeClasses([
+            styles.dialogBackdrop,
+            dialogWrapperClassNames,
+            { [styles.visible]: visible },
+        ]);
 
-    const dialogClasses: string = mergeClasses([
-        styles.dialog,
-        dialogClassNames,
-    ]);
+        const dialogClasses: string = mergeClasses([
+            styles.dialog,
+            dialogClassNames,
+        ]);
 
-    const headerClasses: string = mergeClasses([
-        styles.header,
-        headerClassNames,
-    ]);
+        const headerClasses: string = mergeClasses([
+            styles.header,
+            headerClassNames,
+        ]);
 
-    const dialogStyle: React.CSSProperties = {
-        zIndex,
-        height,
-        width,
-    };
+        const dialogStyle: React.CSSProperties = {
+            zIndex,
+            height,
+            width,
+        };
 
-    useEffect(() => {
-        onVisibleChange?.(visible);
-        if (visible) {
-            lockScroll();
-        } else {
-            unlockScroll();
-        }
-    }, [visible]);
+        useEffect(() => {
+            onVisibleChange?.(visible);
+            if (visible) {
+                lockScroll();
+            } else {
+                unlockScroll();
+            }
+        }, [visible]);
 
-    const getDialog = (): JSX.Element => (
-        <div
-            role="dialog"
-            aria-modal={true}
-            aria-labelledby={labelId}
-            className={dialogBackdropClasses}
-            onClick={(e: React.MouseEvent<HTMLDivElement>) => {
-                maskClosable && onClose?.(e);
-            }}
-        >
+        const getDialog = (): JSX.Element => (
             <div
-                className={dialogClasses}
-                style={dialogStyle}
-                onClick={stopPropagation}
+                {...rest}
+                ref={ref}
+                role="dialog"
+                aria-modal={true}
+                aria-labelledby={labelId}
+                className={dialogBackdropClasses}
+                onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+                    maskClosable && onClose?.(e);
+                }}
             >
-                <div className={headerClasses}>
-                    <span id={labelId}>{header}</span>
-                    <NeutralButton
-                        iconProps={{ path: IconName.mdiClose }}
-                        onClick={onClose}
-                    />
+                <div
+                    className={dialogClasses}
+                    style={dialogStyle}
+                    onClick={stopPropagation}
+                >
+                    <div className={headerClasses}>
+                        <span id={labelId}>{header}</span>
+                        <NeutralButton
+                            iconProps={{ path: IconName.mdiClose }}
+                            onClick={onClose}
+                        />
+                    </div>
+                    <div className={bodyClassNames}>{body}</div>
+                    {actions && (
+                        <div className={actionsClassNames}>{actions}</div>
+                    )}
                 </div>
-                <div className={bodyClassNames}>{body}</div>
-                {actions && <div className={actionsClassNames}>{actions}</div>}
             </div>
-        </div>
-    );
-    return <Portal getContainer={() => parent}>{getDialog()}</Portal>;
-};
+        );
+        return <Portal getContainer={() => parent}>{getDialog()}</Portal>;
+    }
+);
diff --git a/src/components/Dialog/BaseDialog/BaseDialog.types.ts b/src/components/Dialog/BaseDialog/BaseDialog.types.ts
index 3ec9eea8a..9372a939e 100644
--- a/src/components/Dialog/BaseDialog/BaseDialog.types.ts
+++ b/src/components/Dialog/BaseDialog/BaseDialog.types.ts
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { Ref } from 'react';
+import { OcBaseProps } from '../../OcBase';
 
 type EventType =
     | React.KeyboardEvent<HTMLDivElement>
     | React.MouseEvent<HTMLDivElement | HTMLButtonElement>;
 
-export interface BaseDialogProps {
+export interface BaseDialogProps
+    extends Omit<OcBaseProps<HTMLDivElement>, 'classNames'> {
     /**
      * Dialog is visible or not
      */
@@ -73,4 +75,8 @@ export interface BaseDialogProps {
      * @default HTMLBodyElement
      */
     parent?: HTMLDivElement | HTMLBodyElement;
+    /**
+     * Ref for the dialog element
+     */
+    ref?: Ref<HTMLDivElement>;
 }
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index a2cce9bb0..570fcf0eb 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import { DialogProps, DialogSize } from './Dialog.types';
 import { mergeClasses } from '../../shared/utilities';
 import { DefaultButton, PrimaryButton } from '../Button';
@@ -6,58 +6,64 @@ import { BaseDialog } from './BaseDialog/BaseDialog';
 
 import styles from './dialog.module.scss';
 
-export const Dialog: FC<DialogProps> = ({
-    parent = document.body,
-    size = DialogSize.medium,
-    headerClassNames,
-    bodyClassNames,
-    actionsClassNames,
-    dialogClassNames,
-    okButtonProps,
-    cancelButtonProps,
-    onOk,
-    onCancel,
-    ...rest
-}) => {
-    const dialogClasses: string = mergeClasses([
-        styles.dialog,
-        dialogClassNames,
-        { [styles.small]: size === DialogSize.small },
-        { [styles.medium]: size === DialogSize.medium },
-    ]);
+export const Dialog: FC<DialogProps> = React.forwardRef(
+    (
+        {
+            parent = document.body,
+            size = DialogSize.medium,
+            headerClassNames,
+            bodyClassNames,
+            actionsClassNames,
+            dialogClassNames,
+            okButtonProps,
+            cancelButtonProps,
+            onOk,
+            onCancel,
+            ...rest
+        },
+        ref: Ref<HTMLDivElement>
+    ) => {
+        const dialogClasses: string = mergeClasses([
+            styles.dialog,
+            dialogClassNames,
+            { [styles.small]: size === DialogSize.small },
+            { [styles.medium]: size === DialogSize.medium },
+        ]);
 
-    const headerClasses: string = mergeClasses([
-        styles.header,
-        headerClassNames,
-    ]);
+        const headerClasses: string = mergeClasses([
+            styles.header,
+            headerClassNames,
+        ]);
 
-    const bodyClasses: string = mergeClasses([styles.body, bodyClassNames]);
+        const bodyClasses: string = mergeClasses([styles.body, bodyClassNames]);
 
-    const actionClasses: string = mergeClasses([
-        styles.actions,
-        actionsClassNames,
-    ]);
+        const actionClasses: string = mergeClasses([
+            styles.actions,
+            actionsClassNames,
+        ]);
 
-    return (
-        <BaseDialog
-            {...rest}
-            dialogClassNames={dialogClasses}
-            headerClassNames={headerClasses}
-            bodyClassNames={bodyClasses}
-            actionsClassNames={actionClasses}
-            actions={
-                <>
-                    {cancelButtonProps && (
-                        <DefaultButton
-                            {...cancelButtonProps}
-                            onClick={onCancel}
-                        />
-                    )}
-                    {okButtonProps && (
-                        <PrimaryButton {...okButtonProps} onClick={onOk} />
-                    )}
-                </>
-            }
-        />
-    );
-};
+        return (
+            <BaseDialog
+                {...rest}
+                ref={ref}
+                dialogClassNames={dialogClasses}
+                headerClassNames={headerClasses}
+                bodyClassNames={bodyClasses}
+                actionsClassNames={actionClasses}
+                actions={
+                    <>
+                        {cancelButtonProps && (
+                            <DefaultButton
+                                {...cancelButtonProps}
+                                onClick={onCancel}
+                            />
+                        )}
+                        {okButtonProps && (
+                            <PrimaryButton {...okButtonProps} onClick={onOk} />
+                        )}
+                    </>
+                }
+            />
+        );
+    }
+);
diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx
index 02d635b3a..cb9e7501d 100644
--- a/src/components/InfoBar/InfoBar.tsx
+++ b/src/components/InfoBar/InfoBar.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import { InfoBarsProps, InfoBarType } from './InfoBar.types';
 import { Icon, IconName } from '../Icon';
 import { mergeClasses } from '../../shared/utilities';
@@ -6,58 +6,70 @@ import { NeutralButton } from '../Button';
 
 import styles from './infoBar.module.scss';
 
-export const InfoBar: FC<InfoBarsProps> = ({
-    content,
-    icon,
-    type = InfoBarType.neutral,
-    closable,
-    onClose,
-    style,
-    classNames,
-    closeIcon = IconName.mdiClose,
-    closeButtonProps,
-    actionButtonProps,
-    role = 'presentation',
-}) => {
-    const infoBarClasses: string = mergeClasses([
-        styles.infoBar,
-        classNames,
-        { [styles.neutral]: type === InfoBarType.neutral },
-        { [styles.positive]: type === InfoBarType.positive },
-        { [styles.warning]: type === InfoBarType.warning },
-        { [styles.disruptive]: type === InfoBarType.disruptive },
-    ]);
+export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
+    (
+        {
+            content,
+            icon,
+            type = InfoBarType.neutral,
+            closable,
+            onClose,
+            style,
+            classNames,
+            closeIcon = IconName.mdiClose,
+            closeButtonProps,
+            actionButtonProps,
+            role = 'presentation',
+            ...rest
+        },
+        ref: Ref<HTMLDivElement>
+    ) => {
+        const infoBarClasses: string = mergeClasses([
+            styles.infoBar,
+            classNames,
+            { [styles.neutral]: type === InfoBarType.neutral },
+            { [styles.positive]: type === InfoBarType.positive },
+            { [styles.warning]: type === InfoBarType.warning },
+            { [styles.disruptive]: type === InfoBarType.disruptive },
+        ]);
 
-    const messageClasses: string = mergeClasses([styles.message, 'body2']);
+        const messageClasses: string = mergeClasses([styles.message, 'body2']);
 
-    const getIconName = (): IconName => {
-        if (icon) {
-            return icon;
-        }
-        switch (type) {
-            case InfoBarType.disruptive:
-            case InfoBarType.neutral:
-                return IconName.mdiInformation;
-            case InfoBarType.positive:
-                return IconName.mdiCheckCircle;
-            case InfoBarType.warning:
-                return IconName.mdiAlert;
-        }
-    };
+        const getIconName = (): IconName => {
+            if (icon) {
+                return icon;
+            }
+            switch (type) {
+                case InfoBarType.disruptive:
+                case InfoBarType.neutral:
+                    return IconName.mdiInformation;
+                case InfoBarType.positive:
+                    return IconName.mdiCheckCircle;
+                case InfoBarType.warning:
+                    return IconName.mdiAlert;
+            }
+        };
 
-    return (
-        <div className={infoBarClasses} style={style} role={role}>
-            <Icon path={getIconName()} classNames={styles.icon} />
-            <div className={messageClasses}>{content}</div>
-            {actionButtonProps && <NeutralButton {...actionButtonProps} />}
-            {closable && (
-                <NeutralButton
-                    iconProps={{ path: closeIcon }}
-                    ariaLabel={'Close'}
-                    onClick={onClose}
-                    {...closeButtonProps}
-                />
-            )}
-        </div>
-    );
-};
+        return (
+            <div
+                {...rest}
+                className={infoBarClasses}
+                ref={ref}
+                style={style}
+                role={role}
+            >
+                <Icon path={getIconName()} classNames={styles.icon} />
+                <div className={messageClasses}>{content}</div>
+                {actionButtonProps && <NeutralButton {...actionButtonProps} />}
+                {closable && (
+                    <NeutralButton
+                        iconProps={{ path: closeIcon }}
+                        ariaLabel={'Close'}
+                        onClick={onClose}
+                        {...closeButtonProps}
+                    />
+                )}
+            </div>
+        );
+    }
+);
diff --git a/src/components/InfoBar/InfoBar.types.ts b/src/components/InfoBar/InfoBar.types.ts
index 6f9876461..6372f7b05 100644
--- a/src/components/InfoBar/InfoBar.types.ts
+++ b/src/components/InfoBar/InfoBar.types.ts
@@ -1,6 +1,6 @@
-import React from 'react';
 import { IconName } from '../Icon';
 import { ButtonProps } from '../Button';
+import { OcBaseProps } from '../OcBase';
 
 export type CloseButtonProps = Omit<ButtonProps, 'onClick' | 'icon'>;
 
@@ -11,7 +11,7 @@ export enum InfoBarType {
     disruptive = 'disruptive',
 }
 
-export interface InfoBarsProps {
+export interface InfoBarsProps extends OcBaseProps<HTMLDivElement> {
     /**
      * Content of the info bar
      */
@@ -26,14 +26,6 @@ export interface InfoBarsProps {
      * @default IconName.mdiInformation | IconName.mdiCheckCircle | IconName.mdiAlert
      */
     icon?: IconName;
-    /**
-     * Custom style for the infoBar
-     */
-    style?: React.CSSProperties;
-    /**
-     * Custom classnames for the infoBar
-     */
-    classNames?: string;
     /**
      * If the infoBar is closable or not
      */
diff --git a/src/components/Inputs/Input.types.ts b/src/components/Inputs/Input.types.ts
index 3df8680be..db4c66eca 100644
--- a/src/components/Inputs/Input.types.ts
+++ b/src/components/Inputs/Input.types.ts
@@ -3,6 +3,7 @@ import { Placement, Strategy } from '@floating-ui/react-dom';
 import { IconName, IconProps } from '../Icon';
 import { LabelProps } from '../Label';
 import { TooltipTheme } from '../Tooltip';
+import { OcBaseProps } from '../OcBase';
 
 export enum TextInputTheme {
     light = 'light',
@@ -127,14 +128,15 @@ export interface InputLabelIconButtonProps {
     toolTipPositionStrategy?: Strategy;
 }
 
-export interface SearchBoxProps extends Omit<InputProps, 'htmlType'> {
+export interface SearchBoxProps
+    extends Omit<InputProps<HTMLInputElement>, 'htmlType'> {
     /**
      * The search box value.
      */
     value?: string;
 }
 
-export interface TextAreaProps extends InputProps {
+export interface TextAreaProps extends InputProps<HTMLTextAreaElement> {
     /**
      * The text area is expandable.
      * @default false
@@ -157,7 +159,7 @@ export interface TextAreaProps extends InputProps {
     textAreaRows?: number;
 }
 
-export interface TextInputProps extends InputProps {
+export interface TextInputProps extends InputProps<HTMLInputElement> {
     /**
      * The input html type.
      * @default 'text'
@@ -175,7 +177,11 @@ export interface TextInputProps extends InputProps {
     required?: boolean;
 }
 
-export interface InputProps {
+export interface InputProps<T>
+    extends Omit<
+        OcBaseProps<T>,
+        'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown'
+    > {
     /**
      * Allows focus on the input when it's disabled.
      * @default false
@@ -190,10 +196,6 @@ export interface InputProps {
      * @default false
      */
     autoFocus?: boolean;
-    /**
-     * The input class names.
-     */
-    classNames?: string;
     /**
      * The input clear button aria label text.
      */
@@ -267,10 +269,6 @@ export interface InputProps {
      * @default TextInputShape.Rectangle
      */
     shape?: TextInputShape;
-    /**
-     * Style of the input.
-     */
-    style?: React.CSSProperties;
     /**
      * Theme of the input.
      * @default TextInputTheme.light
diff --git a/src/components/Inputs/SearchBox/SearchBox.tsx b/src/components/Inputs/SearchBox/SearchBox.tsx
index b12e18bb6..793092181 100644
--- a/src/components/Inputs/SearchBox/SearchBox.tsx
+++ b/src/components/Inputs/SearchBox/SearchBox.tsx
@@ -36,9 +36,11 @@ export const SearchBox: FC<SearchBoxProps> = ({
     theme = TextInputTheme.light,
     value,
     waitInterval = 500,
+    ...rest
 }) => (
     <form role="search">
         <TextInput
+            {...rest}
             allowDisabledFocus={allowDisabledFocus}
             ariaLabel={ariaLabel}
             autoFocus={autoFocus}
diff --git a/src/components/Inputs/TextArea/TextArea.tsx b/src/components/Inputs/TextArea/TextArea.tsx
index 2d890e98b..2c1259da1 100644
--- a/src/components/Inputs/TextArea/TextArea.tsx
+++ b/src/components/Inputs/TextArea/TextArea.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { Icon, IconName } from '../../Icon/index';
+import { Icon, IconName } from '../../Icon';
 import { Label } from '../../Label';
 import { TextInputWidth, TextAreaProps, TextInputTheme } from '../index';
 import { useDebounce } from '../../../hooks/useDebounce';
@@ -32,6 +32,7 @@ export const TextArea: FC<TextAreaProps> = ({
     theme = TextInputTheme.light,
     value,
     waitInterval = 10,
+    ...rest
 }) => {
     const [textAreaId] = useState<string>(uniqueId(id || 'textarea-'));
 
@@ -66,6 +67,7 @@ export const TextArea: FC<TextAreaProps> = ({
         <div className={textAreaWrapperClassNames}>
             {labelProps && <Label {...labelProps} />}
             <textarea
+                {...rest}
                 aria-disabled={allowDisabledFocus}
                 aria-label={ariaLabel}
                 autoFocus={autoFocus}
diff --git a/src/components/Inputs/TextInput/TextInput.tsx b/src/components/Inputs/TextInput/TextInput.tsx
index f469327c4..ff6f2688a 100644
--- a/src/components/Inputs/TextInput/TextInput.tsx
+++ b/src/components/Inputs/TextInput/TextInput.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react';
 import { ButtonSize, DefaultButton } from '../../Button';
-import { Icon, IconName, IconSize } from '../../Icon/index';
+import { Icon, IconName, IconSize } from '../../Icon';
 import { Label } from '../../Label';
 import {
     TextInputWidth,
@@ -41,6 +41,7 @@ export const TextInput: FC<TextInputProps> = ({
     theme = TextInputTheme.light,
     value,
     waitInterval = 10,
+    ...rest
 }) => {
     const [clearButtonShown, setClearButtonShown] = useState<boolean>(false);
     const [inputId] = useState<string>(uniqueId(id || 'input-'));
@@ -132,6 +133,7 @@ export const TextInput: FC<TextInputProps> = ({
         <div className={textInputWrapperClassNames}>
             {labelProps && <Label {...labelProps} />}
             <input
+                {...rest}
                 aria-label={ariaLabel}
                 autoFocus={autoFocus}
                 className={textInputClassNames}
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index e6220769e..16767ecef 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -13,6 +13,7 @@ export const Label: FC<LabelProps> = ({
     labelIconButtonProps,
     size = LabelSize.Medium,
     text,
+    ...rest
 }) => {
     const sizeClassNames: string = mergeClasses([
         { [styles.large]: size === LabelSize.Large },
@@ -33,7 +34,7 @@ export const Label: FC<LabelProps> = ({
         sizeClassNames,
     ]);
     return (
-        <div className={labelClassNames}>
+        <div {...rest} className={labelClassNames}>
             {text && (
                 <label className={labelTextClassNames} htmlFor={htmlFor}>
                     {text}
diff --git a/src/components/Label/Label.types.ts b/src/components/Label/Label.types.ts
index 9fc97682e..f68daaf5b 100644
--- a/src/components/Label/Label.types.ts
+++ b/src/components/Label/Label.types.ts
@@ -1,6 +1,7 @@
 import { ButtonProps } from '../Button';
 import { Placement, Strategy } from '@floating-ui/react-dom';
 import { TooltipTheme } from '../Tooltip';
+import { OcBaseProps } from '../OcBase';
 
 export enum LabelSize {
     Large = 'large',
@@ -48,7 +49,7 @@ export interface LabelIconButtonProps
     toolTipPositionStrategy?: Strategy;
 }
 
-export interface LabelProps {
+export interface LabelProps extends OcBaseProps<HTMLDivElement> {
     /**
      * The label class names.
      */
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index aebe186f9..6157a4c09 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -18,6 +18,7 @@ export const List = <T extends any>({
     listType = 'ul',
     role,
     itemRole,
+    ...rest
 }: ListProps<T>) => {
     const containerClasses: string = mergeClasses([
         styles.listContainer,
@@ -54,7 +55,7 @@ export const List = <T extends any>({
         items.map((item: T, index) => getItem(item, index));
 
     return (
-        <div className={classNames} style={style}>
+        <div {...rest} className={classNames} style={style}>
             {getHeader()}
             {listType === 'ul' && (
                 <ul role={role} className={containerClasses}>
diff --git a/src/components/List/List.types.ts b/src/components/List/List.types.ts
index 92bae9c85..2cc901f0a 100644
--- a/src/components/List/List.types.ts
+++ b/src/components/List/List.types.ts
@@ -1,9 +1,10 @@
 import { Key, ReactNode } from 'react';
 import * as React from 'react';
+import { OcBaseProps } from '../OcBase';
 
 export type ItemLayout = 'horizontal' | 'vertical';
 
-export interface ListProps<T> {
+export interface ListProps<T> extends OcBaseProps<HTMLDivElement> {
     /**
      * Array off items
      */
@@ -18,18 +19,10 @@ export interface ListProps<T> {
      * @param item
      */
     rowKey?: (item: T) => Key | keyof T;
-    /**
-     * Custom classes for the list container
-     */
-    classNames?: string;
     /**
      * Custom classes for list item
      */
     itemClassNames?: string;
-    /**
-     * Style of list container
-     */
-    style?: React.CSSProperties;
     /**
      * Style of the item
      */
diff --git a/src/components/MatchScore/MatchScore.tsx b/src/components/MatchScore/MatchScore.tsx
index b57db9d90..6d342e017 100644
--- a/src/components/MatchScore/MatchScore.tsx
+++ b/src/components/MatchScore/MatchScore.tsx
@@ -1,41 +1,54 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import styles from './matchScore.module.scss';
 import { mergeClasses } from '../../shared/utilities';
 import { FillType, MatchScoreProps } from './MatchScore.types';
 
-export const MatchScore: FC<MatchScoreProps> = ({
-    classNames,
-    score = 0,
-    total = 5,
-    hideLabel = false,
-    ariaLabel = 'score',
-}) => {
-    const absTotal: number = Math.abs(total);
-    const matchScoreClasses = mergeClasses(
-        classNames,
-        styles.matchScoreContainer
-    );
-    return (
-        <div className={matchScoreClasses} aria-label={ariaLabel}>
-            {getArrayOfSize(Math.min(Math.floor(score), absTotal)).map(
-                (_val, index) => (
-                    <MatchScoreCircle fill="full" key={index} />
-                )
-            )}
-            {Math.floor(score) !== score && <MatchScoreCircle fill="half" />}
-            {getArrayOfSize(Math.max(Math.floor(absTotal - score), 0)).map(
-                (_val, index) => (
-                    <MatchScoreCircle key={index} />
-                )
-            )}
-            {!hideLabel && (
-                <p className={styles.label}>
-                    {score}/{absTotal}
-                </p>
-            )}
-        </div>
-    );
-};
+export const MatchScore: FC<MatchScoreProps> = React.forwardRef(
+    (
+        {
+            classNames,
+            score = 0,
+            total = 5,
+            hideLabel = false,
+            ariaLabel = 'score',
+            ...rest
+        },
+        ref: Ref<HTMLDivElement>
+    ) => {
+        const absTotal: number = Math.abs(total);
+        const matchScoreClasses = mergeClasses(
+            classNames,
+            styles.matchScoreContainer
+        );
+        return (
+            <div
+                {...rest}
+                ref={ref}
+                className={matchScoreClasses}
+                aria-label={ariaLabel}
+            >
+                {getArrayOfSize(Math.min(Math.floor(score), absTotal)).map(
+                    (_val, index) => (
+                        <MatchScoreCircle fill="full" key={index} />
+                    )
+                )}
+                {Math.floor(score) !== score && (
+                    <MatchScoreCircle fill="half" />
+                )}
+                {getArrayOfSize(Math.max(Math.floor(absTotal - score), 0)).map(
+                    (_val, index) => (
+                        <MatchScoreCircle key={index} />
+                    )
+                )}
+                {!hideLabel && (
+                    <p className={styles.label}>
+                        {score}/{absTotal}
+                    </p>
+                )}
+            </div>
+        );
+    }
+);
 
 const getArrayOfSize = (n: number) => Array.from(Array(n));
 
diff --git a/src/components/MatchScore/MatchScore.types.ts b/src/components/MatchScore/MatchScore.types.ts
index 516175826..c3b4ada25 100644
--- a/src/components/MatchScore/MatchScore.types.ts
+++ b/src/components/MatchScore/MatchScore.types.ts
@@ -1,9 +1,6 @@
-export interface MatchScoreProps {
-    /**
-     * The input class names.
-     */
-    classNames?: string;
+import { OcBaseProps } from '../OcBase';
 
+export interface MatchScoreProps extends OcBaseProps<HTMLDivElement> {
     /**
      * The score value, like 2, 3.5, etc.
      */
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 16032c794..3087bb179 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -14,12 +14,13 @@ export const Menu: FC<MenuProps> = ({
     header,
     footer,
     listType,
+    ...rest
 }) => {
     const getDefaultButton = (item: MenuItem): JSX.Element => (
         <DefaultButton
+            {...item}
             alignText={ButtonTextAlign.Left}
             buttonWidth={ButtonWidth.fill}
-            {...item}
             disruptive={disruptive}
             onClick={() => onChange(item.value)}
         />
@@ -27,6 +28,7 @@ export const Menu: FC<MenuProps> = ({
 
     return (
         <List<MenuItem>
+            {...rest}
             items={items}
             renderItem={getDefaultButton}
             classNames={classNames}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 29535f37d..8788f4485 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,48 +1,54 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import { ModalProps, ModalSize } from './Modal.types';
 import { mergeClasses } from '../../shared/utilities';
 import { BaseDialog } from '../Dialog/BaseDialog/BaseDialog';
 
 import styles from './modal.module.scss';
 
-export const Modal: FC<ModalProps> = ({
-    size = ModalSize.medium,
-    headerClassNames,
-    bodyClassNames,
-    actionsClassNames,
-    modalClassNames,
-    modalWrapperClassNames,
-    ...rest
-}) => {
-    const modalClasses: string = mergeClasses([
-        styles.modal,
-        modalClassNames,
-        { [styles.small]: size === ModalSize.small },
-        { [styles.medium]: size === ModalSize.medium },
-        { [styles.large]: size === ModalSize.large },
-        { [styles.fullscreen]: size === ModalSize.fullscreen },
-    ]);
+export const Modal: FC<ModalProps> = React.forwardRef(
+    (
+        {
+            size = ModalSize.medium,
+            headerClassNames,
+            bodyClassNames,
+            actionsClassNames,
+            modalClassNames,
+            modalWrapperClassNames,
+            ...rest
+        },
+        ref: Ref<HTMLDivElement>
+    ) => {
+        const modalClasses: string = mergeClasses([
+            styles.modal,
+            modalClassNames,
+            { [styles.small]: size === ModalSize.small },
+            { [styles.medium]: size === ModalSize.medium },
+            { [styles.large]: size === ModalSize.large },
+            { [styles.fullscreen]: size === ModalSize.fullscreen },
+        ]);
 
-    const headerClasses: string = mergeClasses([
-        styles.header,
-        headerClassNames,
-    ]);
+        const headerClasses: string = mergeClasses([
+            styles.header,
+            headerClassNames,
+        ]);
 
-    const bodyClasses: string = mergeClasses([styles.body, bodyClassNames]);
+        const bodyClasses: string = mergeClasses([styles.body, bodyClassNames]);
 
-    const actionsClasses: string = mergeClasses([
-        styles.footer,
-        actionsClassNames,
-    ]);
+        const actionsClasses: string = mergeClasses([
+            styles.footer,
+            actionsClassNames,
+        ]);
 
-    return (
-        <BaseDialog
-            {...rest}
-            dialogWrapperClassNames={modalWrapperClassNames}
-            dialogClassNames={modalClasses}
-            headerClassNames={headerClasses}
-            bodyClassNames={bodyClasses}
-            actionsClassNames={actionsClasses}
-        />
-    );
-};
+        return (
+            <BaseDialog
+                {...rest}
+                ref={ref}
+                dialogWrapperClassNames={modalWrapperClassNames}
+                dialogClassNames={modalClasses}
+                headerClassNames={headerClasses}
+                bodyClassNames={bodyClasses}
+                actionsClassNames={actionsClasses}
+            />
+        );
+    }
+);
diff --git a/src/components/OcBase/Base.types.ts b/src/components/OcBase/Base.types.ts
new file mode 100644
index 000000000..ea1194388
--- /dev/null
+++ b/src/components/OcBase/Base.types.ts
@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+
+export interface OcBaseProps<T> extends HTMLAttributes<T> {
+    /**
+     * Custom classnames of the component
+     */
+    classNames?: string;
+    /**
+     * Unique id used to target element for testing
+     */
+    'data-test-id'?: string;
+}
diff --git a/src/components/OcBase/index.ts b/src/components/OcBase/index.ts
new file mode 100644
index 000000000..d00adf8d0
--- /dev/null
+++ b/src/components/OcBase/index.ts
@@ -0,0 +1 @@
+export * from './Base.types';
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index 9b84419f4..f4c23b6b1 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -49,6 +49,7 @@ export const Panel = React.forwardRef<PanelRef, PanelProps>(
             footerClassNames,
             closeButtonProps,
             autoFocus = true,
+            ...rest
         },
         ref
     ) => {
@@ -181,6 +182,7 @@ export const Panel = React.forwardRef<PanelRef, PanelProps>(
         const getPanel = (): JSX.Element => (
             <PanelContext.Provider value={operations}>
                 <div
+                    {...rest}
                     tabIndex={-1}
                     ref={containerRef}
                     className={panelBackdropClasses}
diff --git a/src/components/Panel/Panel.types.ts b/src/components/Panel/Panel.types.ts
index ce9feaaa0..d9d8366c8 100644
--- a/src/components/Panel/Panel.types.ts
+++ b/src/components/Panel/Panel.types.ts
@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconName } from '../Icon';
 import { ButtonProps } from '../Button';
+import { OcBaseProps } from '../OcBase';
 
 export enum PanelSize {
     small = 'small',
@@ -21,7 +22,7 @@ type EventType =
 
 export type CloseButtonProps = Omit<ButtonProps, 'onClick' | 'icon'>;
 
-export interface PanelProps {
+export interface PanelProps extends Omit<OcBaseProps<HTMLElement>, 'title'> {
     /**
      * Autofocus on the panel on visible
      * @default true
diff --git a/src/components/Pills/Pill.tsx b/src/components/Pills/Pill.tsx
index 67b0d01fd..43d7d65a7 100644
--- a/src/components/Pills/Pill.tsx
+++ b/src/components/Pills/Pill.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import { PillProps, PillSize, PillType } from './Pills.types';
 import { mergeClasses } from '../../shared/utilities';
 import { Icon, IconName, IconSize } from '../Icon';
@@ -6,71 +6,77 @@ import { Icon, IconName, IconSize } from '../Icon';
 import styles from './pills.module.scss';
 import { ButtonSize, DefaultButton } from '../Button';
 
-export const Pill: FC<PillProps> = ({
-    color,
-    label,
-    iconProps,
-    theme = 'blue',
-    onClose,
-    onClick,
-    closeButtonProps,
-    pillButtonProps,
-    type = PillType.default,
-    size = PillSize.Large,
-}) => {
-    const pillSizeToButtonSizeMap = new Map<PillSize, ButtonSize>([
-        [PillSize.Large, ButtonSize.Medium],
-        [PillSize.Medium, ButtonSize.Small],
-        [PillSize.Small, ButtonSize.Small],
-    ]);
-    const pillSizeToIconSizeMap = new Map<PillSize, IconSize>([
-        [PillSize.Large, IconSize.Medium],
-        [PillSize.Medium, IconSize.Small],
-        [PillSize.Small, IconSize.XSmall],
-    ]);
-    const labelClassName: string = mergeClasses([
-        styles.label,
-        { [styles.medium]: size === PillSize.Medium },
-        { [styles.small]: size === PillSize.Small },
-    ]);
-    const tagClassName: string = mergeClasses([
-        styles.tagPills,
-        { [styles.red]: theme === 'red' },
-        { [styles.orange]: theme === 'orange' },
-        { [styles.yellow]: theme === 'yellow' },
-        { [styles.green]: theme === 'green' },
-        { [styles.bluegreen]: theme === 'bluegreen' },
-        { [styles.blue]: theme === 'blue' },
-        { [styles.violet]: theme === 'violet' },
-        { [styles.grey]: theme === 'grey' },
-    ]);
-    return (
-        <div className={tagClassName} style={{ color }}>
-            {iconProps && (
-                <Icon
-                    {...iconProps}
-                    size={pillSizeToIconSizeMap.get(size)}
-                    classNames={styles.icon}
-                />
-            )}
-            <span className={labelClassName}>{label}</span>
-            {type === PillType.withButton && (
-                <DefaultButton
-                    {...pillButtonProps}
-                    onClick={onClick}
-                    size={pillSizeToButtonSizeMap.get(size)}
-                    classNames={styles.button}
-                />
-            )}
-            {type === PillType.closable && (
-                <DefaultButton
-                    {...closeButtonProps}
-                    iconProps={{ path: IconName.mdiClose }}
-                    onClick={onClose}
-                    size={pillSizeToButtonSizeMap.get(size)}
-                    classNames={styles.closeButton}
-                />
-            )}
-        </div>
-    );
-};
+export const Pill: FC<PillProps> = React.forwardRef(
+    (
+        {
+            color,
+            label,
+            iconProps,
+            theme = 'blue',
+            onClose,
+            onClick,
+            closeButtonProps,
+            pillButtonProps,
+            type = PillType.default,
+            size = PillSize.Large,
+            ...rest
+        },
+        ref: Ref<HTMLDivElement>
+    ) => {
+        const pillSizeToButtonSizeMap = new Map<PillSize, ButtonSize>([
+            [PillSize.Large, ButtonSize.Medium],
+            [PillSize.Medium, ButtonSize.Small],
+            [PillSize.Small, ButtonSize.Small],
+        ]);
+        const pillSizeToIconSizeMap = new Map<PillSize, IconSize>([
+            [PillSize.Large, IconSize.Medium],
+            [PillSize.Medium, IconSize.Small],
+            [PillSize.Small, IconSize.XSmall],
+        ]);
+        const labelClassName: string = mergeClasses([
+            styles.label,
+            { [styles.medium]: size === PillSize.Medium },
+            { [styles.small]: size === PillSize.Small },
+        ]);
+        const tagClassName: string = mergeClasses([
+            styles.tagPills,
+            { [styles.red]: theme === 'red' },
+            { [styles.orange]: theme === 'orange' },
+            { [styles.yellow]: theme === 'yellow' },
+            { [styles.green]: theme === 'green' },
+            { [styles.bluegreen]: theme === 'bluegreen' },
+            { [styles.blue]: theme === 'blue' },
+            { [styles.violet]: theme === 'violet' },
+            { [styles.grey]: theme === 'grey' },
+        ]);
+        return (
+            <div {...rest} className={tagClassName} style={{ color }} ref={ref}>
+                {iconProps && (
+                    <Icon
+                        {...iconProps}
+                        size={pillSizeToIconSizeMap.get(size)}
+                        classNames={styles.icon}
+                    />
+                )}
+                <span className={labelClassName}>{label}</span>
+                {type === PillType.withButton && (
+                    <DefaultButton
+                        {...pillButtonProps}
+                        onClick={onClick}
+                        size={pillSizeToButtonSizeMap.get(size)}
+                        classNames={styles.button}
+                    />
+                )}
+                {type === PillType.closable && (
+                    <DefaultButton
+                        {...closeButtonProps}
+                        iconProps={{ path: IconName.mdiClose }}
+                        onClick={onClose}
+                        size={pillSizeToButtonSizeMap.get(size)}
+                        classNames={styles.closeButton}
+                    />
+                )}
+            </div>
+        );
+    }
+);
diff --git a/src/components/Pills/Pills.types.ts b/src/components/Pills/Pills.types.ts
index 0ac56421b..acef2220b 100644
--- a/src/components/Pills/Pills.types.ts
+++ b/src/components/Pills/Pills.types.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IconProps } from '../Icon';
 import { OcThemeNames } from '../ConfigProvider';
 import { ButtonProps } from '../Button';
+import { OcBaseProps } from '../OcBase';
 
 export enum PillType {
     default = 'default',
@@ -31,7 +32,7 @@ export type pillButtonProps = Omit<
     'onClick' | 'size' | 'classNames'
 >;
 
-export interface PillProps {
+export interface PillProps extends OcBaseProps<HTMLElement> {
     /**
      * Label of the pill
      */
diff --git a/src/components/Snackbar/Snackbar.test.tsx b/src/components/Snackbar/Snackbar.test.tsx
index 452d68731..2f101810b 100644
--- a/src/components/Snackbar/Snackbar.test.tsx
+++ b/src/components/Snackbar/Snackbar.test.tsx
@@ -136,7 +136,6 @@ describe('Snackbar', () => {
             });
             await new Promise((r) => setTimeout(r, 300));
             const actionButton = wrapper.queryByRole('button');
-            console.log(actionButton);
             const event = createEvent.click(actionButton);
             fireEvent(actionButton, event);
             expect(onClick).toBeCalled();
diff --git a/src/components/Snackbar/Snackbar.types.ts b/src/components/Snackbar/Snackbar.types.ts
index 4437ccb1f..0d2be1265 100644
--- a/src/components/Snackbar/Snackbar.types.ts
+++ b/src/components/Snackbar/Snackbar.types.ts
@@ -10,7 +10,7 @@ export type SnackbarPosition =
 
 export type SnackbarType = InfoBarType;
 
-export interface SnackbarProps extends InfoBarsProps {
+export interface SnackbarProps extends Omit<InfoBarsProps, 'onClick'> {
     /**
      * Unique id of the snackbar
      */
diff --git a/src/components/Snackbar/SnackbarContainer.tsx b/src/components/Snackbar/SnackbarContainer.tsx
index 109848017..4f35d1aa5 100644
--- a/src/components/Snackbar/SnackbarContainer.tsx
+++ b/src/components/Snackbar/SnackbarContainer.tsx
@@ -61,8 +61,8 @@ export const SnackbarContainer: FC<SnackbarContainerProps> = ({
             >
                 {getPositionSnacks(position).map((snack) => (
                     <Snackbar
-                        key={snack.id}
                         {...snack}
+                        key={snack.id}
                         onClose={() => {
                             eat(snack.id);
                             snack.onClose?.();
diff --git a/src/components/Tabs/Tab/Tab.tsx b/src/components/Tabs/Tab/Tab.tsx
index 3abe4b4c0..11a2a1d2a 100644
--- a/src/components/Tabs/Tab/Tab.tsx
+++ b/src/components/Tabs/Tab/Tab.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import { mergeClasses } from '../../../shared/utilities';
 import { TabProps } from '../Tabs.types';
 import { useTabs } from '../Tabs.context';
@@ -10,63 +10,61 @@ import { Badge } from '../../Badge';
 
 import styles from '../tabs.module.scss';
 
-export const Tab: FC<TabProps> = ({
-    value,
-    label,
-    icon,
-    disabled,
-    ariaLabel,
-    badgeContent,
-    ...rest
-}) => {
-    const { onTabClick, currentActiveTab } = useTabs();
+export const Tab: FC<TabProps> = React.forwardRef(
+    (
+        { value, label, icon, disabled, ariaLabel, badgeContent, ...rest },
+        ref: Ref<HTMLButtonElement>
+    ) => {
+        const { onTabClick, currentActiveTab } = useTabs();
 
-    const iconExists: boolean = !!icon;
-    const labelExists: boolean = !!label;
-    const isActive: boolean = value === currentActiveTab;
+        const iconExists: boolean = !!icon;
+        const labelExists: boolean = !!label;
+        const isActive: boolean = value === currentActiveTab;
 
-    const { registeredTheme: { light = false } = {} } = useConfig();
+        const { registeredTheme: { light = false } = {} } = useConfig();
 
-    const tabClassName: string = mergeClasses([
-        styles.tab,
-        { [styles.active]: isActive },
-        { [styles.inverse]: light },
-    ]);
+        const tabClassName: string = mergeClasses([
+            styles.tab,
+            { [styles.active]: isActive },
+            { [styles.inverse]: light },
+        ]);
 
-    const getIcon = (): JSX.Element =>
-        iconExists && <Icon path={icon} classNames={styles.icon} />;
+        const getIcon = (): JSX.Element =>
+            iconExists && <Icon path={icon} classNames={styles.icon} />;
 
-    const getLabel = (): JSX.Element =>
-        labelExists && <span className={styles.label}>{label}</span>;
+        const getLabel = (): JSX.Element =>
+            labelExists && <span className={styles.label}>{label}</span>;
 
-    const getTabIndicator = (): JSX.Element =>
-        isActive && (
-            <Flipped flipId="tabIndicator">
-                <div className={styles.tabIndicator} />
-            </Flipped>
-        );
+        const getTabIndicator = (): JSX.Element =>
+            isActive && (
+                <Flipped flipId="tabIndicator">
+                    <div className={styles.tabIndicator} />
+                </Flipped>
+            );
 
-    const getBadge = (): JSX.Element =>
-        !!badgeContent && (
-            <Badge active={isActive} classNames={styles.badge}>
-                {badgeContent}
-            </Badge>
-        );
+        const getBadge = (): JSX.Element =>
+            !!badgeContent && (
+                <Badge active={isActive} classNames={styles.badge}>
+                    {badgeContent}
+                </Badge>
+            );
 
-    return (
-        <button
-            {...rest}
-            className={tabClassName}
-            aria-label={ariaLabel}
-            aria-selected={isActive}
-            role="tab"
-            disabled={disabled}
-            onClick={(e) => onTabClick(value, e)}
-        >
-            {getIcon()}
-            {getLabel()}
-            {getTabIndicator()}
-            {getBadge()}
-        </button>
-    );
-};
+        return (
+            <button
+                {...rest}
+                ref={ref}
+                className={tabClassName}
+                aria-label={ariaLabel}
+                aria-selected={isActive}
+                role="tab"
+                disabled={disabled}
+                onClick={(e) => onTabClick(value, e)}
+            >
+                {getIcon()}
+                {getLabel()}
+                {getTabIndicator()}
+                {getBadge()}
+            </button>
+        );
+    }
+);
diff --git a/src/components/Tabs/Tabs.types.ts b/src/components/Tabs/Tabs.types.ts
index e959104c0..351e089c8 100644
--- a/src/components/Tabs/Tabs.types.ts
+++ b/src/components/Tabs/Tabs.types.ts
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { IconName } from '../Icon';
+import { OcBaseProps } from '../OcBase';
+import { Ref } from 'react';
 
 export type SelectTabEvent<E = HTMLElement> =
     | React.MouseEvent<E>
@@ -29,7 +31,7 @@ export interface ITabsContext {
     onTabClick: OnChangeHandler;
 }
 
-export interface TabProps extends React.ButtonHTMLAttributes<any> {
+export interface TabProps extends OcBaseProps<HTMLButtonElement> {
     /**
      * Active value of the tab.
      */
@@ -56,7 +58,7 @@ export interface TabProps extends React.ButtonHTMLAttributes<any> {
     badgeContent?: React.ReactNode;
 }
 
-export interface TabsProps {
+export interface TabsProps extends Omit<OcBaseProps<HTMLElement>, 'onChange'> {
     /**
      * List of Tab element
      */
@@ -71,14 +73,6 @@ export interface TabsProps {
      * @param event {SelectTabEvent}
      */
     onChange?: OnChangeHandler;
-    /**
-     * Custom classes that can be applied on tabs container
-     */
-    classNames?: string;
-    /**
-     * Css properties top be applied on tabs container
-     */
-    style?: React.CSSProperties;
     /**
      * Variant of the tab
      * @default default
@@ -89,4 +83,8 @@ export interface TabsProps {
      * @default false
      */
     scrollable?: boolean;
+    /**
+     * Ref of the tabs
+     */
+    ref?: Ref<HTMLDivElement>;
 }
diff --git a/src/components/Tabs/Tabs/AnimatedTabs.tsx b/src/components/Tabs/Tabs/AnimatedTabs.tsx
index ea537268d..c203efb11 100644
--- a/src/components/Tabs/Tabs/AnimatedTabs.tsx
+++ b/src/components/Tabs/Tabs/AnimatedTabs.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import { mergeClasses } from '../../../shared/utilities';
 import { TabsProps, TabVariant } from '../Tabs.types';
 import { useTabs } from '../Tabs.context';
@@ -6,26 +6,39 @@ import { Flipper } from 'react-flip-toolkit';
 
 import styles from '../tabs.module.scss';
 
-export const AnimatedTabs: FC<TabsProps> = ({
-    children,
-    classNames,
-    style,
-    variant = TabVariant.default,
-    scrollable,
-}) => {
-    const { currentActiveTab } = useTabs();
-    const tabClassName: string = mergeClasses([
-        styles.tabWrap,
-        { [styles.small]: variant === TabVariant.small },
-        { [styles.pill]: variant === TabVariant.pill },
-        { [styles.scrollable]: scrollable },
-        classNames,
-    ]);
-    return (
-        <Flipper flipKey={currentActiveTab}>
-            <div role="tablist" className={tabClassName} style={style}>
-                {children}
-            </div>
-        </Flipper>
-    );
-};
+export const AnimatedTabs: FC<TabsProps> = React.forwardRef(
+    (
+        {
+            children,
+            classNames,
+            style,
+            variant = TabVariant.default,
+            scrollable,
+            onChange,
+            ...rest
+        },
+        ref: Ref<HTMLDivElement>
+    ) => {
+        const { currentActiveTab } = useTabs();
+        const tabClassName: string = mergeClasses([
+            styles.tabWrap,
+            { [styles.small]: variant === TabVariant.small },
+            { [styles.pill]: variant === TabVariant.pill },
+            { [styles.scrollable]: scrollable },
+            classNames,
+        ]);
+        return (
+            <Flipper flipKey={currentActiveTab}>
+                <div
+                    {...rest}
+                    ref={ref}
+                    role="tablist"
+                    className={tabClassName}
+                    style={style}
+                >
+                    {children}
+                </div>
+            </Flipper>
+        );
+    }
+);
diff --git a/src/components/Tabs/Tabs/index.tsx b/src/components/Tabs/Tabs/index.tsx
index 76705cecf..454887606 100644
--- a/src/components/Tabs/Tabs/index.tsx
+++ b/src/components/Tabs/Tabs/index.tsx
@@ -1,13 +1,17 @@
-import React, { FC } from 'react';
+import React, { FC, Ref } from 'react';
 import { TabsProps } from '../Tabs.types';
 import { TabsProvider } from '../Tabs.context';
 import { AnimatedTabs } from './AnimatedTabs';
 
-export const Tabs: FC<TabsProps> = (props) => {
-    const { value, onChange, children } = props;
-    return (
-        <TabsProvider onChange={onChange} value={value}>
-            <AnimatedTabs {...props}>{children}</AnimatedTabs>
-        </TabsProvider>
-    );
-};
+export const Tabs: FC<TabsProps> = React.forwardRef(
+    (props, ref: Ref<HTMLDivElement>) => {
+        const { value, onChange, children } = props;
+        return (
+            <TabsProvider onChange={onChange} value={value}>
+                <AnimatedTabs {...props} ref={ref}>
+                    {children}
+                </AnimatedTabs>
+            </TabsProvider>
+        );
+    }
+);
diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index 63f4b5de4..49fc351dc 100644
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`Panel tabs snapshot 1`] = `
   <div
     className="tabWrap"
     role="tablist"
+    value="tab1"
   >
     <button
       aria-label="Tab 1"
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 6093e1730..47a337fe5 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -26,6 +26,7 @@ export const Tooltip: FC<TooltipProps> = ({
     hideAfter = 0,
     tabIndex = 0,
     positionStrategy = 'absolute',
+    ...rest
 }) => {
     const tooltipSide: string = placement.split('-')?.[0];
     const [visible, setVisible] = useState<boolean>(false);
@@ -128,6 +129,7 @@ export const Tooltip: FC<TooltipProps> = ({
                 {children}
             </div>
             <div
+                {...rest}
                 role="tooltip"
                 aria-hidden={!visible}
                 ref={floating}
diff --git a/src/components/Tooltip/Tooltip.types.ts b/src/components/Tooltip/Tooltip.types.ts
index e2680b1a2..f2c1c5aea 100644
--- a/src/components/Tooltip/Tooltip.types.ts
+++ b/src/components/Tooltip/Tooltip.types.ts
@@ -1,16 +1,13 @@
 import { Placement, Strategy } from '@floating-ui/react-dom';
 import React from 'react';
+import { OcBaseProps } from '../OcBase';
 
 export enum TooltipTheme {
     light = 'light',
     dark = 'dark',
 }
 
-export interface TooltipProps {
-    /**
-     * Element the tooltip needs to be shown on
-     */
-    children: React.ReactNode;
+export interface TooltipProps extends OcBaseProps<HTMLDivElement> {
     /**
      * Content to show on the tooltip
      */
@@ -45,10 +42,6 @@ export interface TooltipProps {
      * @default 0
      */
     openDelay?: number;
-    /**
-     * Custom class names for Tooltip's popper
-     */
-    classNames?: string;
     /**
      * Positioning strategy for the tooltip
      * @default absolute