chore(PPDSC-2358): removed loading state for Tag and Flag components

site/pages/components/tag.mdx

@@ -39,10 +39,6 @@ Tags have a number of props to facilitate a variety of uses:
     If true, the Tag will render the disabled state of the style preset. If an
     href is also passed, the Tag will not open the provided href on click.
   </Prop>
-  <Prop name="loading" type="boolean" default={false}>
-    If true, this will cause the Tag to render the loading state of the style
-    preset.
-  </Prop>
   <Prop name="overrides" type="object">
     If provided, overrides the respective presets for the component and provided
     elements. Here are the overrides that the Tag accepts:

src/button/styled.ts

@@ -1,20 +1,23 @@
-import {Flag} from '../flag';
+import {BaseFlag} from '../flag/flag';
 import {logicalProps} from '../utils/logical-properties';
 import {styled} from '../utils/style';
 import {getTransitionPreset} from '../utils/style/transition-preset';
 import {ButtonOrButtonLinkProps} from './types';
 
-export const StyledFlag = styled(Flag)<Omit<ButtonOrButtonLinkProps, 'size'>>`
+export const StyledFlag = styled(BaseFlag)<
+  Omit<ButtonOrButtonLinkProps, 'size'>
+>`
   margin: 0; //reset for safari
 
-  ${({size}) => getTransitionPreset(`button.${size}`, '')};
+  ${({size}) => getTransitionPreset(`button.${size}`, '')}
   ${({loading, disabled}) => {
     if (disabled) {
       return null;
     }
     const cursor = loading ? 'progress' : 'pointer';
     return {cursor};
   }}
+
   ${({size}) =>
     logicalProps(
       `button.${size}`,

src/flag/flag.tsx

@@ -11,7 +11,7 @@ import defaults from './defaults';
 import stylePresets from './style-presets';
 import {withOwnTheme} from '../utils/with-own-theme';
 
-const BaseFlag = React.forwardRef<
+export const BaseFlag = React.forwardRef<
   HTMLDivElement,
   BaseFlagProps<BaseFlagOverrides>
 >(({children, overrides, loading, disabled, as, ...props}, ref) => {
@@ -59,6 +59,7 @@ const ThemelessFlag = React.forwardRef<HTMLDivElement, FlagProps>(
       <BaseFlag
         data-testid="flag"
         {...props}
+        loading={false}
         ref={ref}
         overrides={{
           ...theme.componentDefaults.flag[size],

src/flag/types.ts

@@ -30,4 +30,7 @@ export interface BaseFlagProps<TOverrides> {
   as?: keyof JSX.IntrinsicElements;
 }
 export interface FlagProps
-  extends BaseFlagProps<Omit<BaseFlagOverrides, 'transitionPreset'>> {}
+  extends Omit<
+    BaseFlagProps<Omit<BaseFlagOverrides, 'transitionPreset'>>,
+    'loading'
+  > {}

src/tag/tag.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {TagProps} from './types';
-import {Flag} from '../flag';
+import {BaseFlag} from '../flag/flag';
 import {filterOutFalsyProperties} from '../utils/filter-object';
 import {as as emotionAs} from '../utils/component';
 import {useTheme} from '../theme';
@@ -10,7 +10,7 @@ import stylePresets from './style-presets';
 import {withOwnTheme} from '../utils/with-own-theme';
 import {getTransitionPreset} from '../utils/style/transition-preset';
 
-const StyledFlag = styled(Flag)`
+const StyledFlag = styled(BaseFlag)`
   ${({href, disabled}: TagProps) => href && !disabled && {cursor: 'pointer'}}
   ${({size}) => getTransitionPreset(`tag.${size}`, '')};
 `;

src/tag/types.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import {BaseFlagOverrides, BaseFlagProps} from '../flag';
 
 export interface TagProps
-  extends BaseFlagProps<BaseFlagOverrides>,
+  extends Omit<BaseFlagProps<BaseFlagOverrides>, 'loading'>,
     React.AnchorHTMLAttributes<HTMLAnchorElement> {}