From 9efd607d742fd3bf1c52a1c36a173c79c270d3ee Mon Sep 17 00:00:00 2001 From: Haosheng Li Date: Mon, 9 Aug 2021 13:04:21 -0500 Subject: [PATCH] refactor loader class name --- src/components/Loader/Loader.module.css | 6 +++--- src/components/Loader/Loader.test.tsx | 4 ++-- src/components/Loader/Loader.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Loader/Loader.module.css b/src/components/Loader/Loader.module.css index 91209344..a423a407 100644 --- a/src/components/Loader/Loader.module.css +++ b/src/components/Loader/Loader.module.css @@ -10,14 +10,14 @@ } } -.loader { +.Loader { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; } -.loader::before { +.Loader::before { content: ''; background-color: transparent; position: absolute; @@ -32,7 +32,7 @@ animation-delay: 0s; } -.loader::after { +.Loader::after { content: ''; background-color: transparent; position: absolute; diff --git a/src/components/Loader/Loader.test.tsx b/src/components/Loader/Loader.test.tsx index 85122730..26d90087 100644 --- a/src/components/Loader/Loader.test.tsx +++ b/src/components/Loader/Loader.test.tsx @@ -27,13 +27,13 @@ describe('Loader', () => { describe('when rendered with additional class names', () => { it('should not replace the default classes', () => { const { getByTestId } = render( - + ); const loaderElem = getByTestId('loaderElem') as HTMLDivElement; const loaderClasses = loaderElem.className .split(' ') - .filter((classes) => classes.match('\\w*(loader)\\w*')); + .filter((classes) => classes.match('\\w*(Loader)\\w*')); expect(loaderClasses.length).toBe(2); }); }); diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx index e388e83d..3831f50a 100644 --- a/src/components/Loader/Loader.tsx +++ b/src/components/Loader/Loader.tsx @@ -12,7 +12,7 @@ interface LoaderProps extends React.HTMLAttributes { const Loader: React.FC = ({ size = 'lg', ...rest }) => { const mainClass = classNames( - styles.loader, + styles.Loader, rest.className, `${styles[size]}` );