chore(spinner): camel case classname

core-ds · Oct 28, 2024 · 7d9c660 · 7d9c660
1 parent 054d4c9
commit 7d9c660
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 17 deletions.
diff --git a/packages/button/src/__snapshots__/Component.test.tsx.snap b/packages/button/src/__snapshots__/Component.test.tsx.snap
@@ -311,7 +311,7 @@ Object {
         href="https://some-url"
       >
         <svg
-          class="spinner component size-24 loader loader loader visible"
+          class="spinner component preset24 loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -355,7 +355,7 @@ Object {
       href="https://some-url"
     >
       <svg
-        class="spinner component size-24 loader loader loader visible"
+        class="spinner component preset24 loader loader loader visible"
         style="height: 20px; width: 20px;"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -456,7 +456,7 @@ Object {
         type="button"
       >
         <svg
-          class="spinner component size-24 loader loader loader visible"
+          class="spinner component preset24 loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -500,7 +500,7 @@ Object {
       type="button"
     >
       <svg
-        class="spinner component size-24 loader loader loader visible"
+        class="spinner component preset24 loader loader loader visible"
         style="height: 20px; width: 20px;"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
@@ -141,7 +141,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_CHECKING st
         class="loaderWrap countdownContainer typographyTheme"
       >
         <svg
-          class="spinner component size-24 visible"
+          class="spinner component preset24 visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -341,7 +341,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_SENDING sta
         class="loaderWrap countdownContainer typographyTheme"
       >
         <svg
-          class="spinner component size-24 visible"
+          class="spinner component preset24 visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
@@ -304,7 +304,7 @@ Object {
         type="button"
       >
         <svg
-          class="spinner component size-24 loader loader loader visible"
+          class="spinner component preset24 loader loader loader visible"
           style="height: 20px; width: 20px;"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -349,7 +349,7 @@ Object {
       type="button"
     >
       <svg
-        class="spinner component size-24 loader loader loader visible"
+        class="spinner component preset24 loader loader loader visible"
         style="height: 20px; width: 20px;"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/spinner/src/__snapshots__/Component.test.tsx.snap b/packages/spinner/src/__snapshots__/Component.test.tsx.snap
@@ -123,7 +123,7 @@ exports[`Spinner props should support \`style\` 1`] = `
 exports[`SpinnerPreset should render preset 16 correctly 1`] = `
 <div>
   <svg
-    class="spinner component size-16 visible"
+    class="spinner component preset16 visible"
     style="height: 14px; width: 14px;"
     viewBox="0 0 14 14"
     xmlns="http://www.w3.org/2000/svg"
@@ -163,7 +163,7 @@ exports[`SpinnerPreset should render preset 16 correctly 1`] = `
 exports[`SpinnerPreset should render preset 24 correctly 1`] = `
 <div>
   <svg
-    class="spinner component size-24 visible"
+    class="spinner component preset24 visible"
     style="height: 20px; width: 20px;"
     viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
@@ -203,7 +203,7 @@ exports[`SpinnerPreset should render preset 24 correctly 1`] = `
 exports[`SpinnerPreset should render preset 48 correctly 1`] = `
 <div>
   <svg
-    class="spinner component size-48 visible"
+    class="spinner component preset48 visible"
     style="height: 40px; width: 40px;"
     viewBox="0 0 40 40"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/spinner/src/preset/Component.tsx b/packages/spinner/src/preset/Component.tsx
@@ -15,9 +15,9 @@ export type SpinnerPresetProps = Omit<SpinnerProps, 'size' | 'lineWidth'> & {
 };
 
 const PRESET_CONFIG = {
-    16: [2, 14, 'size-16'],
-    24: [2, 20, 'size-24'],
-    48: [4, 40, 'size-48'],
+    16: [2, 14, 'preset16'],
+    24: [2, 20, 'preset24'],
+    48: [4, 40, 'preset48'],
 } as const;
 
 export const SpinnerPreset: FC<SpinnerPresetProps> = ({ preset = 24, className, ...restProps }) => {

diff --git a/packages/spinner/src/preset/index.module.css b/packages/spinner/src/preset/index.module.css
@@ -1,13 +1,13 @@
 @import '../vars.css';
 
-.size-16 {
+.preset16 {
     padding: 1px;
 }
 
-.size-24 {
+.preset24 {
     padding: var(--gap-3xs);
 }
 
-.size-48 {
+.preset48 {
     padding: var(--gap-2xs);
 }