ref!: rename createRipple speed prop values

changelog.md

@@ -20,6 +20,10 @@
     - Constants:
       - `initialParams` ([URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)), the search params at the initial point of loading BYTM
       - `sessionStorageAvailable` (boolean), whether the browser supports [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)
+  - Changes to the BYTM API:
+    - BREAKING: Renamed `createRipple()`'s `speed` prop values:
+      - From `faster` to `fastest`
+      - From `slower` to `slowest`
 
 </details>
 

contributing.md

@@ -1944,7 +1944,7 @@ The usage and example blocks on each are written in TypeScript but can be used i
 > The exact speed values and variable names and locations can be found in [`src/components/ripple.css`](./src/components/ripple.css)
 >   
 > Properties:  
-> - `speed?: string` - The speed of the ripple effect. Can be "faster", "fast", "normal", "slow" or "slower" (defaults to "normal")
+> - `speed?: string` - The speed of the ripple effect. Can be "fastest", "fast", "normal", "slow" or "slowest" (defaults to "normal")
 > 
 > <details><summary><b>Example <i>(click to expand)</i></b></summary>
 > 

dist/BetterYTM.css

@@ -659,7 +659,7 @@ body .bytm-ripple {
   height: var(--bytm-ripple-height, auto);
 }
 
-body .bytm-ripple.faster {
+body .bytm-ripple.fastest {
   --bytm-ripple-anim-duration: 0.15s;
 }
 
@@ -671,12 +671,19 @@ body .bytm-ripple.slow {
   --bytm-ripple-anim-duration: 0.75s;
 }
 
-body .bytm-ripple.slower {
+body .bytm-ripple.slowest {
   --bytm-ripple-anim-duration: 1s;
 }
 
 .bytm-ripple-area {
   --bytm-ripple-min-size: 100px;
+  /* --bytm-ripple-cont-width is added at runtime since there's no better way of getting the parent's width */
+  --bytm-ripple-expanded-size: calc(
+    max(
+      var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
+      var(--bytm-ripple-min-size)
+    )
+  );
   position: absolute;
   background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.175));
   transform: translate(-50%, -50%);
@@ -693,19 +700,8 @@ body .bytm-ripple.slower {
     opacity: 1;
   }
   100% {
-    /* Variable is added to .bytm-ripple by JS at runtime since there's no better way of getting the parent's width inside of here */
-    width: calc(
-      max(
-        var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
-        var(--bytm-ripple-min-size)
-      )
-    );
-    height: calc(
-      max(
-        var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
-        var(--bytm-ripple-min-size)
-      )
-    );
+    width: var(--bytm-ripple-expanded-size, 100%);
+    height: var(--bytm-ripple-expanded-size, 100%);
     opacity: 0;
   }
 }

src/components/ripple.css

@@ -8,7 +8,7 @@ body .bytm-ripple {
   height: var(--bytm-ripple-height, auto);
 }
 
-body .bytm-ripple.faster {
+body .bytm-ripple.fastest {
   --bytm-ripple-anim-duration: 0.15s;
 }
 
@@ -20,12 +20,19 @@ body .bytm-ripple.slow {
   --bytm-ripple-anim-duration: 0.75s;
 }
 
-body .bytm-ripple.slower {
+body .bytm-ripple.slowest {
   --bytm-ripple-anim-duration: 1s;
 }
 
 .bytm-ripple-area {
   --bytm-ripple-min-size: 100px;
+  /* --bytm-ripple-cont-width is added at runtime since there's no better way of getting the parent's width */
+  --bytm-ripple-expanded-size: calc(
+    max(
+      var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
+      var(--bytm-ripple-min-size)
+    )
+  );
   position: absolute;
   background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.175));
   transform: translate(-50%, -50%);
@@ -42,19 +49,8 @@ body .bytm-ripple.slower {
     opacity: 1;
   }
   100% {
-    /* Variable is added to .bytm-ripple by JS at runtime since there's no better way of getting the parent's width inside of here */
-    width: calc(
-      max(
-        var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
-        var(--bytm-ripple-min-size)
-      )
-    );
-    height: calc(
-      max(
-        var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
-        var(--bytm-ripple-min-size)
-      )
-    );
+    width: var(--bytm-ripple-expanded-size, 100%);
+    height: var(--bytm-ripple-expanded-size, 100%);
     opacity: 0;
   }
 }

src/components/ripple.ts

@@ -2,24 +2,24 @@ import "./ripple.css";
 
 type RippleProps = {
   /** How fast should the animation be - defaults to "normal" */
-  speed?: "faster" | "fast" | "normal" | "slow" | "slower";
+  speed?: "fastest" | "fast" | "normal" | "slow" | "slowest";
 };
 
 /**
  * Creates an element with a ripple effect on click.
- * @param clickEl If passed, this element will be modified to have the ripple effect. Otherwise, a new element will be created.
+ * @param rippleElement If passed, this element will be modified to have the ripple effect. Otherwise, a new element will be created.
  * @returns The passed element or the newly created element with the ripple effect.
  */
 export function createRipple<TElem extends HTMLElement>(rippleElement: TElem, properties?: RippleProps): TElem;
 /**
  * Creates an element with a ripple effect on click.
- * @param clickEl If passed, this element will be modified to have the ripple effect. Otherwise, a new element will be created.
+ * @param rippleElement If passed, this element will be modified to have the ripple effect. Otherwise, a new element will be created.
  * @returns The passed element or the newly created element with the ripple effect.
  */
 export function createRipple(rippleElement?: undefined, properties?: RippleProps): HTMLDivElement;
 /**
  * Creates an element with a ripple effect on click.
- * @param clickEl If passed, this element will be modified to have the ripple effect. Otherwise, a new element will be created.
+ * @param rippleElement If passed, this element will be modified to have the ripple effect. Otherwise, a new element will be created.
  * @returns The passed element or the newly created element with the ripple effect.
  */
 export function createRipple<TElem extends HTMLElement>(rippleElement?: TElem, properties?: RippleProps) {
@@ -31,8 +31,7 @@ export function createRipple<TElem extends HTMLElement>(rippleElement?: TElem, p
   const rippleEl = rippleElement ?? document.createElement("div");
   rippleEl.classList.add("bytm-ripple", props.speed);
 
-  const updateRippleWidth = () => 
-    rippleEl.style.setProperty("--bytm-ripple-cont-width", `${rippleEl.clientWidth}px`);
+  const updateRippleWidth = () => rippleEl.style.setProperty("--bytm-ripple-cont-width", `${rippleEl.clientWidth}px`);
 
   rippleEl.addEventListener("mousedown", (e) => {
     updateRippleWidth();

src/stories/Ripple.stories.ts

@@ -16,7 +16,7 @@ const meta = {
     onClick: { action: "onClick" },
     padding: { control: "text" },
     fontSize: { control: "text" },
-    speed: { control: { type: "select" }, options: ["faster", "fast", "normal", "slow", "slower"] },
+    speed: { control: { type: "select" }, options: ["fastest", "fast", "normal", "slow", "slowest"] },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
@@ -32,7 +32,7 @@ type RippleProps = {
   onClick: (e: MouseEvent | KeyboardEvent) => void;
   padding: string;
   fontSize: string;
-  speed: "faster" | "fast" | "normal" | "slow" | "slower";
+  speed: "fastest" | "fast" | "normal" | "slow" | "slowest";
 };
 
 type Story = StoryObj<RippleProps>;