feat(react): remove large overlay (#1205)

BREAKING CHANGE: Removed variant property from Loader/LoaderOverlay components.
dequelabs · Dec 5, 2023 · e93ae35 · e93ae35
1 parent 301c546
commit e93ae35
Show file tree

Hide file tree

Showing 7 changed files with 4 additions and 86 deletions.
diff --git a/docs/pages/components/Loader.mdx b/docs/pages/components/Loader.mdx
@@ -27,12 +27,6 @@ import { Loader } from '@deque/cauldron-react'
       name: 'label',
       type: 'string',
       description: 'The desired label will be rendered offscreen. If not provided, aria-hidden="true" will be applied to the element.',
-    },
-    {
-      name: 'variant',
-      type: ['small', 'large'],
-      description: 'Loader variant, this property will be removed in a future version.',
-      deprecated: true
     }
   ]}
 />

diff --git a/docs/pages/components/LoaderOverlay.mdx b/docs/pages/components/LoaderOverlay.mdx
@@ -61,12 +61,6 @@ function LoaderOverlayExample() {
       type: 'string',
       description: 'A primary label for the loader',
     },
-    {
-      name: 'variant',
-      type: ['small', 'large'],
-      description: 'Loader variant, this property will be removed in a future version.',
-      deprecated: true
-    },
     {
       name: 'focusOnInitialRender',
       type: 'boolean',

diff --git a/packages/react/__tests__/src/components/Loader/index.js b/packages/react/__tests__/src/components/Loader/index.js
@@ -25,16 +25,6 @@ test('sets expected role attributes given an aria-label', () => {
   expect(loaderNode.getAttribute('role')).toBe('alert');
 });
 
-test('sets loader variants', () => {
-  const small = mount(<Loader variant="small" />);
-  const large = mount(<Loader variant="large" />);
-  const smallNode = small.getDOMNode();
-  const largeNode = large.getDOMNode();
-
-  expect(smallNode.classList.contains('Loader--small')).toBe(true);
-  expect(largeNode.classList.contains('Loader--large')).toBe(true);
-});
-
 test('returns no axe violations', async () => {
   const withLabel = shallow(<Loader label="hi" />);
   const withoutLabel = shallow(<Loader />);

diff --git a/packages/react/__tests__/src/components/LoaderOverlay/index.js b/packages/react/__tests__/src/components/LoaderOverlay/index.js
@@ -13,30 +13,6 @@ test('handles classNames/additional attributes properly', () => {
   expect(node.getAttribute('role')).toBe('alert');
 });
 
-test('handles variants', () => {
-  const small = mount(
-    <LoaderOverlay
-      className="baz"
-      role="alert"
-      label="loading"
-      variant="small"
-    />
-  );
-  const large = mount(
-    <LoaderOverlay
-      className="baz"
-      role="alert"
-      label="loading"
-      variant="large"
-    />
-  );
-  const smallNode = small.getDOMNode();
-  const largeNode = large.getDOMNode();
-
-  expect(smallNode.classList.contains('Loader__overlay--small')).toBe(true);
-  expect(largeNode.classList.contains('Loader__overlay--large')).toBe(true);
-});
-
 test('handles focus', () => {
   const loaderOverlay = mount(
     <LoaderOverlay

diff --git a/packages/react/src/components/Loader/index.tsx b/packages/react/src/components/Loader/index.tsx
@@ -4,11 +4,10 @@ import classNames from 'classnames';
 
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
   label?: string;
-  variant?: 'large' | 'small';
 }
 
 const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
-  ({ className, variant = 'small', label, ...props }: LoaderProps, ref) => {
+  ({ className, label, ...props }: LoaderProps, ref) => {
     if (label?.length) {
       props['role'] = 'alert';
       props.children = <Offscreen>{label}</Offscreen>;
@@ -17,16 +16,7 @@ const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
     }
 
     return (
-      <div
-        ref={ref}
-        className={classNames(
-          'Loader',
-          className,
-          variant === 'large' && 'Loader--large',
-          variant === 'small' && 'Loader--small'
-        )}
-        {...props}
-      />
+      <div ref={ref} className={classNames('Loader', className)} {...props} />
     );
   }
 );

diff --git a/packages/react/src/components/LoaderOverlay/index.tsx b/packages/react/src/components/LoaderOverlay/index.tsx
@@ -8,7 +8,6 @@ import useSharedRef from '../../utils/useSharedRef';
 
 export interface LoaderOverlayProps
   extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: 'large' | 'small';
   label?: string;
   focusOnInitialRender?: boolean;
   children?: React.ReactNode;
@@ -19,7 +18,6 @@ const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(
   (
     {
       className,
-      variant,
       label,
       children,
       focusOnInitialRender,
@@ -65,21 +63,13 @@ const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(
     return (
       <Wrapper {...wrapperProps}>
         <div
-          className={classNames(
-            'Loader__overlay',
-            className,
-            variant === 'large'
-              ? 'Loader__overlay--large'
-              : variant === 'small'
-              ? 'Loader__overlay--small'
-              : ''
-          )}
+          className={classNames('Loader__overlay', className)}
           ref={overlayRef}
           tabIndex={-1}
           {...other}
         >
           <div className="Loader__overlay__loader">
-            <Loader variant={variant} />
+            <Loader />
             <AxeLoader />
           </div>
           {label ? (

diff --git a/packages/styles/loader.css b/packages/styles/loader.css
@@ -19,12 +19,6 @@
   --loader-overlay-background-color: var(--accent-medium);
 }
 
-.Loader--large {
-  --loader-ring-size: 192px;
-  --loader-ring-thickness: 16px;
-  --loader-inner-ring-size: calc(var(--loader-ring-thickness) * 0.5);
-}
-
 .Loader {
   margin: 50px auto;
   position: relative;
@@ -95,11 +89,6 @@
   margin-bottom: var(--space-small);
 }
 
-.Loader__overlay--large .Loader__overlay__loader {
-  min-height: 192px;
-  min-width: 192px;
-}
-
 .Loader__overlay__label {
   color: var(--loader-text-color);
   font-size: var(--text-size-normal);
@@ -121,11 +110,6 @@
   width: calc(var(--loader-ring-size) * 0.7);
 }
 
-.Loader__overlay--large svg {
-  height: 120px;
-  width: 120px;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);