fix(Spinner): Enabled Spinning again (#59)

Closes #57

Author: MarcusNotheis

packages/main/src/components/ActionSheet/index.tsx

@@ -1,6 +1,5 @@
 import { Device, StyleClassHelper, useConsolidatedRef } from '@ui5/webcomponents-react-base';
 import React, { Children, cloneElement, forwardRef, ReactElement, ReactNode, RefObject } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef';
 import { ButtonDesign } from '../../lib/ButtonDesign';
@@ -17,12 +16,10 @@ export interface ActionSheetPropTypes extends CommonProps {
   children?: ReactElement<ButtonPropTypes> | Array<ReactElement<ButtonPropTypes>>;
 }
 
-export interface ActionSheetPropsInternal extends ActionSheetPropTypes, ClassProps {}
-
 const useStyles = createUseStyles(styles);
 
 const ActionSheet = forwardRef((props: ActionSheetPropTypes, ref: RefObject<Ui5PopoverDomRef>) => {
-  const { children, placement, openBy, style, slot } = props as ActionSheetPropsInternal;
+  const { children, placement, openBy, style, slot } = props;
 
   const classes = useStyles();
 

packages/main/src/components/Spinner/Spinner.jss.ts

@@ -35,6 +35,6 @@ export const styles = {
     borderBottom: '4px solid rgba(54, 64, 81, 0.16)',
     borderLeft: '4px solid rgba(54, 64, 81, 1)',
     transform: 'translateZ(0)',
-    animation: 'spin .8s infinite linear'
+    animation: '$spin .8s infinite linear'
   }
 };

packages/main/src/components/Spinner/Spinner.test.tsx

@@ -18,4 +18,9 @@ describe('Spinner', () => {
     const wrapper = renderThemedComponent(<Spinner size={Size.Large} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('with custom class name', () => {
+    const wrapper = renderThemedComponent(<Spinner size={Size.Large} className="testClassName1337" />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });

packages/main/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Spinner large 1`] = `
   aria-busy="true"
   aria-valuemax="100"
   aria-valuemin="0"
-  class="Component-spinner- Component-spinnerLarge-"
+  class="-spinner- -spinnerLarge-"
   data-component-name="BusyIndicator"
   role="progressbar"
   tabindex="0"
@@ -20,7 +20,7 @@ exports[`Spinner medium 1`] = `
   aria-busy="true"
   aria-valuemax="100"
   aria-valuemin="0"
-  class="Component-spinner- Component-spinnerMedium-"
+  class="-spinner- -spinnerMedium-"
   data-component-name="BusyIndicator"
   role="progressbar"
   tabindex="0"
@@ -35,7 +35,22 @@ exports[`Spinner small 1`] = `
   aria-busy="true"
   aria-valuemax="100"
   aria-valuemin="0"
-  class="Component-spinner- Component-spinnerSmall-"
+  class="-spinner- -spinnerSmall-"
+  data-component-name="BusyIndicator"
+  role="progressbar"
+  tabindex="0"
+  title="Please wait"
+>
+  Loading...
+</div>
+`;
+
+exports[`Spinner with custom class name 1`] = `
+<div
+  aria-busy="true"
+  aria-valuemax="100"
+  aria-valuemin="0"
+  class="-spinner- testClassName1337 -spinnerLarge-"
   data-component-name="BusyIndicator"
   role="progressbar"
   tabindex="0"

packages/main/src/components/Spinner/index.tsx

@@ -1,6 +1,7 @@
-import { StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { FC } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base';
+import React, { forwardRef, RefObject } from 'react';
+// @ts-ignore
+import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { Size } from '../../lib/Size';
 import { styles } from './Spinner.jss';
@@ -9,10 +10,11 @@ export interface SpinnerProps extends CommonProps {
   size?: Size;
 }
 
-interface SpinnerInternalProps extends SpinnerProps, ClassProps {}
+const useStyles = createUseStyles(styles);
 
-export const Spinner: FC<SpinnerProps> = withStyles(styles)((props: SpinnerProps) => {
-  const { classes, className, size, tooltip, innerRef, slot } = props as SpinnerInternalProps;
+const Spinner = forwardRef((props: SpinnerProps, ref: RefObject<HTMLDivElement>) => {
+  const { className, size, tooltip, slot } = props;
+  const classes = useStyles();
 
   const spinnerClasses = StyleClassHelper.of(classes.spinner);
   if (className) {
@@ -23,7 +25,7 @@ export const Spinner: FC<SpinnerProps> = withStyles(styles)((props: SpinnerProps
 
   return (
     <div
-      ref={innerRef}
+      ref={ref}
       className={spinnerClasses.valueOf()}
       data-component-name="BusyIndicator"
       aria-busy="true"
@@ -42,3 +44,7 @@ export const Spinner: FC<SpinnerProps> = withStyles(styles)((props: SpinnerProps
 Spinner.defaultProps = {
   size: Size.Medium
 };
+
+Spinner.displayName = 'Spinner';
+
+export { Spinner };