fix(card): fix spelling of raisable and deprecate raiseable prop

raiseable will be removed in the next major release

Author: mlaursen

packages/card/src/Card.tsx

@@ -8,7 +8,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
    * Boolean if the card should gain additional box-shadow elevation once
    * hovered.
    */
-  raiseable?: boolean;
+  raisable?: boolean;
 
   /**
    * Boolean if the card should no longer be `display: inline-block`, but
@@ -18,9 +18,12 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
 
   /**
    * Boolean if the card should use a border instead of box-shadow. Enabling
-   * this prop will always disable the `raiseable` prop.
+   * this prop will always disable the `raisable` prop.
    */
   bordered?: boolean;
+
+  /** @deprecated \@since 5.1.3 Use {@link raisable} instead. */
+  raiseable?: boolean;
 }
 
 const block = bem("rmd-card");
@@ -35,6 +38,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
     className,
     children,
     raiseable = false,
+    raisable = raiseable,
     fullWidth = false,
     bordered = false,
     ...props
@@ -49,7 +53,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
         block({
           bordered,
           shadowed: !bordered,
-          raiseable: !bordered && raiseable,
+          raisable: !bordered && raisable,
           "full-width": fullWidth,
         }),
         className

packages/card/src/__tests__/Card.tsx

@@ -11,14 +11,14 @@ describe("Card", () => {
     rerender(<Card bordered />);
     expect(container).toMatchSnapshot();
 
-    rerender(<Card bordered raiseable />);
+    rerender(<Card bordered raisable />);
     expect(container).toMatchSnapshot();
 
-    rerender(<Card bordered fullWidth raiseable />);
+    rerender(<Card bordered fullWidth raisable />);
     expect(container).toMatchSnapshot();
 
     rerender(
-      <Card bordered fullWidth raiseable>
+      <Card bordered fullWidth raisable>
         <div>Content</div>
       </Card>
     );

packages/card/src/_mixins.scss

@@ -66,7 +66,9 @@
   @include rmd-card-theme(background-color);
   @include rmd-card-theme(color);
   @include rmd-utils-mouse-only {
-    &--raiseable {
+    // TODO: Remove misspelled version in next major release
+    &--raiseable,
+    &--raisable {
       // Note: Only worthwhile with the `--shadowed` class
       @include rmd-elevation-transition(
         $rmd-card-base-elevation,

packages/documentation/src/components/Demos/Card/WithActions.md

@@ -3,5 +3,5 @@ actions using the `CardActions` component. This is normally used alongside the
 `Button` component from #button as the `CardActions` just applies some simple
 padding and `flex` behavior.
 
-This example will also show how cards can be "raiseable" so that when a desktop
+This example will also show how cards can be "raisable" so that when a desktop
 user can hover the card to raise the elevation.

packages/documentation/src/components/Demos/Card/WithActions.tsx

@@ -13,7 +13,7 @@ import Container from "./Container";
 export default function WithActions(): ReactElement {
   return (
     <Container>
-      <Card raiseable>
+      <Card raisable>
         <CardHeader>
           <CardTitle>This is a title</CardTitle>
         </CardHeader>