feat: v0 Loader style migration from v9 (#25169)

* Add new secondary svg loader

* Remove the unused style

* Generate loader svg based on theme color

* Add new svg loader

* Encode svg color with encodeURIComponent function

* Loader gets rendered as <svg> and <circle> tags

* Removed svg urls

* Add stroke color variables and secondary stroke

* Change svg heights

* Styling the Loader's <svg> and <circle>

* Use defined classname instead of nested selectors

* Remove unused interface variables

* Add @NoFlip to fix rtl rotate animation

* Set the loader track color of HC theme in black

* Set black background to HC secondary example

* Renamed variable

* Change loader's height when it is inside a button

* Add changelog entry

* Update changelog entry

* Change background color to secondary examples

* Function to get the common styles of the circles

* Remove unused svg classname

* Change loader's height when inside an attachment

Co-authored-by: Enrico <[email protected]>

packages/fluentui/CHANGELOG.md

@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add new style to v0 Tooltip to match v9 Tooltip @GianoglioEnrico ([#24908](https://github.com/microsoft/fluentui/pull/24908))
 - Limit keyboard detection in inputs @jurokapsiar ([#25087](https://github.com/microsoft/fluentui/pull/25087))
 - Dropdown Freeform search should be case insensitive @jurokapsiar ([#24879](https://github.com/microsoft/fluentui/pull/24879))
+- Update styles to v0 Loader to match v9 Spinner @GianoglioEnrico ([#25169](https://github.com/microsoft/fluentui/pull/25169))
 
 ### Fixes
 - Allow React 17 in `peerDependencies` of all packages and bump react-is to 17 @TristanWatanabe ([#24356](https://github.com/microsoft/fluentui/pull/24356))

packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx

@@ -1,20 +1,24 @@
 import { Loader, Flex, Provider } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const LoaderExampleSecondary: React.FC = () => (
-  <Provider.Consumer
-    render={theme => (
-      <Flex
-        style={{
-          backgroundColor: theme.siteVariables.colorScheme.brand.background,
-          padding: 8,
-          width: 'fit-content',
-        }}
-      >
-        <Loader secondary />
-      </Flex>
-    )}
-  />
-);
+const LoaderExampleSecondary: React.FC = () => {
+  return (
+    <Provider.Consumer
+      render={theme => {
+        return (
+          <Flex
+            style={{
+              backgroundColor: theme.siteVariables.colorScheme.brand.backgroundActive,
+              padding: 8,
+              width: 'fit-content',
+            }}
+          >
+            <Loader secondary />
+          </Flex>
+        );
+      }}
+    />
+  );
+};
 
 export default LoaderExampleSecondary;

packages/fluentui/react-northstar/src/components/Loader/Loader.tsx

@@ -26,7 +26,6 @@ import { Text, TextProps } from '../Text/Text';
 export interface LoaderSlotClassNames {
   indicator: string;
   label: string;
-  svg: string;
 }
 
 export interface LoaderProps extends UIComponentProps {
@@ -67,7 +66,6 @@ export const loaderClassName = 'ui-loader';
 export const loaderSlotClassNames: LoaderSlotClassNames = {
   indicator: `${loaderClassName}__indicator`,
   label: `${loaderClassName}__label`,
-  svg: `${loaderClassName}__svg`,
 };
 
 export type LoaderStylesProps = Pick<LoaderProps, 'inline' | 'labelPosition' | 'size' | 'secondary'>;
@@ -87,7 +85,6 @@ export const Loader = (React.forwardRef<HTMLDivElement, LoaderProps>((props, ref
     secondary,
     label,
     indicator,
-    svg,
     inline,
     labelPosition,
     className,
@@ -142,9 +139,12 @@ export const Loader = (React.forwardRef<HTMLDivElement, LoaderProps>((props, ref
     return () => clearTimeout(delayTimer.current);
   }, [delay]);
 
-  const svgElement = Box.create(svg, {
-    defaultProps: () => ({ className: loaderSlotClassNames.svg, styles: resolvedStyles.svg }),
-  });
+  const svgElement = (
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" className={classes.svg}>
+      <circle className={classes.svgTrack} />
+      <circle className={classes.svgTail} />
+    </svg>
+  );
 
   const element = visible && (
     <ElementType

packages/fluentui/react-northstar/src/themes/teams-high-contrast/componentVariables.ts

@@ -45,3 +45,4 @@ export { datepickerCalendarCellButtonVariables as DatepickerCalendarCellButton }
 export { datepickerCalendarGridRowVariables as DatepickerCalendarGridRow } from './components/Datepicker/datepickerCalendarGridRowVariables';
 export { cardVariables as Card } from './components/Card/cardVariables';
 export { splitButtonVariables as SplitButtonDivider } from './components/SplitButton/splitButtonVariables';
+export { loaderVariables as Loader } from './components/Loader/loaderVariables';

packages/fluentui/react-northstar/src/themes/teams-high-contrast/components/Loader/loaderVariables.ts

@@ -0,0 +1,5 @@
+import { LoaderVariables } from '../../../teams/components/Loader/loaderVariables';
+
+export const loaderVariables = (siteVariables: any): Partial<LoaderVariables> => ({
+  svgTrackColor: siteVariables.colors.black,
+});

packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentActionStyles.ts

@@ -94,17 +94,9 @@ export const attachmentActionStyles: ComponentSlotStylesPrepared<AttachmentActio
       width: v.actionLoaderSize,
       height: v.actionLoaderSize,
     },
-    [`& .${loaderSlotClassNames.svg}`]: {
-      ':before': {
-        animationName: {
-          to: {
-            transform: `translate3d(0, ${v.actionLoaderSvgAnimationHeight}, 0)`,
-          },
-        },
-        borderWidth: v.actionLoaderBorderSize,
-        width: v.actionLoaderSize,
-        height: v.actionLoaderSvgHeight,
-      },
+    [`& .${loaderSlotClassNames.indicator} > svg`]: {
+      width: v.actionLoaderSize,
+      height: v.actionLoaderSvgHeight,
     },
 
     ...(p.hasContent && {

packages/fluentui/react-northstar/src/themes/teams/components/Attachment/attachmentVariables.ts

@@ -75,7 +75,7 @@ export const attachmentVariables = (siteVariables: any): AttachmentVariables =>
   actionIconSize: pxToRem(16),
   actionLoaderBorderSize: pxToRem(2),
   actionLoaderSize: pxToRem(20),
-  actionLoaderSvgHeight: pxToRem(1220),
+  actionLoaderSvgHeight: pxToRem(20),
   actionLoaderSvgAnimationHeight: pxToRem(-1200),
   actionFocusBorderRadius: siteVariables.borderRadiusMedium,
 });

packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonStyles.ts

@@ -295,19 +295,9 @@ export const buttonStyles: ComponentSlotStylesPrepared<ButtonStylesProps, Button
       width: p.size === 'small' ? v.sizeSmallLoaderSize : v.loaderSize,
       height: p.size === 'small' ? v.sizeSmallLoaderSize : v.loaderSize,
     },
-    [`& .${loaderSlotClassNames.svg}`]: {
-      ':before': {
-        animationName: {
-          to: {
-            transform: `translate3d(0, ${
-              p.size === 'small' ? v.sizeSmallLoaderSvgAnimationHeight : v.loaderSvgAnimationHeight
-            }, 0)`,
-          },
-        },
-        borderWidth: p.size === 'small' ? v.sizeSmallLoaderBorderSize : v.loaderBorderSize,
-        width: p.size === 'small' ? v.sizeSmallLoaderSize : v.loaderSize,
-        height: p.size === 'small' ? v.sizeSmallLoaderSvgHeight : v.loaderSvgHeight,
-      },
+    [`& .${loaderSlotClassNames.indicator} > svg`]: {
+      width: p.size === 'small' ? v.sizeSmallLoaderSize : v.loaderSize,
+      height: p.size === 'small' ? v.sizeSmallLoaderSvgHeight : v.loaderSvgHeight,
     },
 
     ...(p.hasContent && {

packages/fluentui/react-northstar/src/themes/teams/components/Button/buttonVariables.ts

@@ -139,7 +139,7 @@ export const buttonVariables = (siteVars: any): ButtonVariables => ({
 
   loaderBorderSize: pxToRem(2),
   loaderSize: pxToRem(20),
-  loaderSvgHeight: pxToRem(1220),
+  loaderSvgHeight: pxToRem(20),
   loaderSvgAnimationHeight: pxToRem(-1200),
 
   sizeSmallContentFontSize: siteVars.fontSizes.small,
@@ -149,6 +149,6 @@ export const buttonVariables = (siteVars: any): ButtonVariables => ({
   sizeSmallPadding: `0 ${pxToRem(8)}`,
   sizeSmallLoaderBorderSize: pxToRem(2),
   sizeSmallLoaderSize: pxToRem(15),
-  sizeSmallLoaderSvgHeight: pxToRem(895),
+  sizeSmallLoaderSvgHeight: pxToRem(15),
   sizeSmallLoaderSvgAnimationHeight: pxToRem(-880),
 });