feat: add support for aria-label and drop progressbar inline style

fkhadra · Dec 16, 2024 · 6be21c2 · 6be21c2
1 parent 3a60d48
commit 6be21c2
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 21 deletions.
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'clsx';
 
 import { Default, isFn, Type } from './../utils';
-import { TypeOptions, ToastClassName, Theme } from '../types';
+import { Theme, ToastClassName, TypeOptions } from '../types';
 
 export interface ProgressBarProps {
   /**
@@ -11,7 +11,7 @@ export interface ProgressBarProps {
   delay: number;
 
   /**
-   * Whether or not the animation is running or paused
+   * The animation is running or paused
    */
   isRunning: boolean;
 
@@ -40,11 +40,6 @@ export interface ProgressBarProps {
    */
   className?: ToastClassName;
 
-  /**
-   * Optional inline style
-   */
-  style?: React.CSSProperties;
-
   /**
    * Tell wether or not controlled progress bar is used
    */
@@ -73,7 +68,6 @@ export function ProgressBar({
   type = Type.DEFAULT,
   hide,
   className,
-  style: userStyle,
   controlledProgress,
   progress,
   rtl,
@@ -82,7 +76,6 @@ export function ProgressBar({
 }: ProgressBarProps) {
   const isHidden = hide || (controlledProgress && progress === 0);
   const style: React.CSSProperties = {
-    ...userStyle,
     animationDuration: `${delay}ms`,
     animationPlayState: isRunning ? 'running' : 'paused'
   };

diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
@@ -23,7 +23,6 @@ export const Toast: React.FC<ToastProps> = props => {
     className,
     style,
     progressClassName,
-    progressStyle,
     updateId,
     role,
     progress,
@@ -33,7 +32,8 @@ export const Toast: React.FC<ToastProps> = props => {
     isIn,
     isLoading,
     closeOnClick,
-    theme
+    theme,
+    ariaLabel
   } = props;
   const defaultClassName = cx(
     `${Default.CSS_NAMESPACE}__toast`,
@@ -88,7 +88,7 @@ export const Toast: React.FC<ToastProps> = props => {
         {...eventHandlers}
         style={style}
         ref={toastRef}
-        {...(isIn && { role: role })}
+        {...(isIn && { role: role, 'aria-label': ariaLabel })}
       >
         {icon != null && (
           <div
@@ -111,7 +111,6 @@ export const Toast: React.FC<ToastProps> = props => {
           closeToast={closeToast}
           hide={hideProgressBar}
           type={type}
-          style={progressStyle}
           className={progressClassName}
           controlledProgress={isProgressControlled}
           progress={progress || 0}

diff --git a/src/components/ToastContainer.tsx b/src/components/ToastContainer.tsx
@@ -119,7 +119,6 @@ export function ToastContainer(props: ToastContainerProps) {
                   stacked={stacked}
                   collapseAll={collapseAll}
                   isIn={isToastActive(toastProps.toastId, toastProps.containerId)}
-                  style={toastProps.style}
                   key={`toast-${toastProps.key}`}
                 >
                   {content}

diff --git a/src/types.ts b/src/types.ts
@@ -83,11 +83,6 @@ interface CommonOptions {
    */
   progressClassName?: ToastClassName;
 
-  /**
-   * An optional style to set for the progress bar.
-   */
-  progressStyle?: React.CSSProperties;
-
   /**
    * Hide or show the progress bar.
    * `Default: false`
@@ -197,14 +192,19 @@ export interface ToastOptions<Data = unknown> extends CommonOptions {
    */
   progress?: number | string;
 
+  /**
+   * Let you provide any data, useful when you are using your own component
+   */
+  data?: Data;
+
+  ariaLabel?: string;
+
   /**
    * Add a delay in ms before the toast appear.
    */
   delay?: number;
 
   isLoading?: boolean;
-
-  data?: Data;
 }
 
 export interface UpdateOptions<T = unknown> extends Nullable<ToastOptions<T>> {