refactor: rename ProgressIndicator to CircularProgressIndicator

Author: szuperaz

…components/Loading/ProgressIndicator.tsx …ts/Loading/CircularProgressIndicator.tsxsrc/components/Loading/ProgressIndicator.tsx renamed to src/components/Loading/CircularProgressIndicator.tsx src/components/Loading/ProgressIndicator.tsx renamed to src/components/Loading/CircularProgressIndicator.tsx

@@ -5,24 +5,26 @@ import { useTranslationContext } from '../../context/TranslationContext';
 const RING_RADIUS = 12;
 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 
-export type ProgressIndicatorProps = {
+export type CircularProgressIndicatorProps = {
   /** Clamped 0–100 completion. */
   percent: number;
 };
 
 /** Circular progress indicator with input from 0 to 100. */
-export const ProgressIndicator = ({ percent }: ProgressIndicatorProps) => {
-  const { t } = useTranslationContext('ProgressIndicator');
+export const CircularProgressIndicator = ({
+  percent,
+}: CircularProgressIndicatorProps) => {
+  const { t } = useTranslationContext('CircularProgressIndicator');
   const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);
 
   return (
-    <div className='str-chat__progress-indicator'>
+    <div className='str-chat__circular-progress-indicator'>
       <svg
         aria-label={t('aria/Percent complete', { percent })}
         aria-valuemax={100}
         aria-valuemin={0}
         aria-valuenow={percent}
-        data-testid='progress-ring'
+        data-testid='circular-progress-ring'
         height='100%'
         role='progressbar'
         viewBox='0 0 32 32'

src/components/Loading/index.ts

@@ -2,4 +2,4 @@ export * from './LoadingChannel';
 export * from './LoadingChannels';
 export * from './LoadingErrorIndicator';
 export * from './LoadingIndicator';
-export * from './ProgressIndicator';
+export * from './CircularProgressIndicator';

…s/Loading/styling/ProgressIndicator.scss …g/styling/CircularProgressIndicator.scsssrc/components/Loading/styling/ProgressIndicator.scss renamed to src/components/Loading/styling/CircularProgressIndicator.scss src/components/Loading/styling/ProgressIndicator.scss renamed to src/components/Loading/styling/CircularProgressIndicator.scss

@@ -1,4 +1,4 @@
-.str-chat__progress-indicator {
+.str-chat__circular-progress-indicator {
   width: 100%;
   height: 100%;
 

src/components/Loading/styling/index.scss

@@ -1,3 +1,3 @@
 @use 'LoadingChannels';
 @use 'LoadingIndicator';
-@use 'ProgressIndicator';
+@use 'CircularProgressIndicator';

src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadProgressIndicator.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { type ReactNode } from 'react';
 
-import { ProgressIndicator as DefaultProgressIndicator } from '../../Loading';
+import { CircularProgressIndicator as DefaultCircularProgressIndicator } from '../../Loading';
 import { useComponentContext } from '../../../context';
 import { LoadingIndicatorIcon } from '../icons';
 
@@ -17,15 +17,16 @@ export const AttachmentUploadProgressIndicator = ({
   fallback,
   uploadProgress,
 }: AttachmentUploadProgressIndicatorProps) => {
-  const { ProgressIndicator = DefaultProgressIndicator } = useComponentContext();
+  const { CircularProgressIndicator = DefaultCircularProgressIndicator } =
+    useComponentContext();
 
   if (uploadProgress === undefined) {
     return <>{fallback ?? <LoadingIndicatorIcon data-testid='loading-indicator' />}</>;
   }
 
   return (
     <div className={clsx('str-chat__attachment-upload-progress', className)}>
-      <ProgressIndicator percent={uploadProgress} />
+      <CircularProgressIndicator percent={uploadProgress} />
     </div>
   );
 };

src/components/MessageComposer/__tests__/AttachmentPreviewList.test.tsx

@@ -353,7 +353,7 @@ describe('AttachmentPreviewList', () => {
       });
 
       expect(screen.getByTestId(LOADING_INDICATOR_TEST_ID)).toBeInTheDocument();
-      expect(screen.queryByTestId('progress-ring')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('circular-progress-ring')).not.toBeInTheDocument();
     });
 
     it('shows ring while uploading when uploadProgress is numeric', async () => {
@@ -370,7 +370,7 @@ describe('AttachmentPreviewList', () => {
         ],
       });
 
-      expect(screen.getByTestId('progress-ring')).toBeInTheDocument();
+      expect(screen.getByTestId('circular-progress-ring')).toBeInTheDocument();
       expect(screen.queryByTestId(LOADING_INDICATOR_TEST_ID)).not.toBeInTheDocument();
     });
 

src/context/ComponentContext.tsx

@@ -74,7 +74,7 @@ import type { VideoPlayerProps } from '../components/VideoPlayer';
 import type { EditedMessagePreviewProps } from '../components/MessageComposer/EditedMessagePreview';
 import type { FileIconProps } from '../components/FileIcon/FileIcon';
 import type { CommandChipProps } from '../components/MessageComposer/CommandChip';
-import type { ProgressIndicatorProps } from '../components/Loading/ProgressIndicator';
+import type { CircularProgressIndicatorProps } from '../components/Loading/CircularProgressIndicator';
 
 export type ComponentContextValue = {
   /** Custom UI component to display additional message composer action buttons left to the textarea, defaults to and accepts same props as: [AdditionalMessageComposerActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/MessageComposerActions.tsx) */
@@ -149,8 +149,8 @@ export type ComponentContextValue = {
   LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
   /** Custom UI component to render while the `MessageList` is loading new messages, defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) */
   LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
-  /** Custom UI component for determinate progress (0–100), defaults to and accepts same props as: [ProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/ProgressIndicator.tsx) */
-  ProgressIndicator?: React.ComponentType<ProgressIndicatorProps>;
+  /** Custom UI component for determinate progress (0–100), defaults to and accepts same props as: [CircularProgressIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/CircularProgressIndicator.tsx) */
+  CircularProgressIndicator?: React.ComponentType<CircularProgressIndicatorProps>;
   /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageUI.tsx) */
   Message?: React.ComponentType<MessageUIComponentProps>;
   /** Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions (unstable)](https://github.com/GetStream/stream-chat-react/blob/master/src/experimental/MessageActions/MessageActions.tsx) */