feat: abstract out common component props as oc base props, add abili…

…ty 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
EightfoldAI · May 5, 2022 · f9c6f1b · f9c6f1b
1 parent e647143
commit f9c6f1b
Show file tree

Hide file tree

Showing 39 changed files with 578 additions and 483 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}