WB-1635: Button - Allow styling the inner label element (#2112)

## Summary:

The current button doesn’t allow to display the text contents in multiple lines.

This is required so we can remove the truncate functionality for certain cases
like the `ActionBubble` component in webapp. This is needed so we can wrap the
text instead and allow the button’s content to be displayed in two (or more)
lines when needed.

This PR adds a new prop `labelStyle` to the `Button` component that allows to
style the inner label element.

Also changed the `border` property to `outline` to be consistent with the
overall strategy for visual indicatorss in all the WB components. This will also
help us to avoid some layout issues in case folks override the button styles.

Issue: https://khanacademy.atlassian.net/browse/WB-1635

## Test plan:

Verify that the following story works as expected:

/?path=/story/button--custom-styles

<img width="696" alt="Screenshot 2023-11-14 at 5 00 45 PM" src="https://github.com/Khan/wonder-blocks/assets/843075/8171a66e-304b-492c-b63f-3ee0f41acd6a">

By working as expected, it means that the custom button should be displayed
in multiple lines and the text should be wrapped instead of being truncated.

Also verify that the other stories work as expected.

Author: jandrade

Reviewers: nishasy, jandrade

Required Reviewers:

Approved By: nishasy

Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Lint (ubuntu-latest, 16.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 16.x), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ⏭  dependabot

Pull Request URL: #2112

.changeset/fluffy-beers-reply.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": minor
+---
+
+Add `labelStyle` to override the styles of the internal label

__docs__/wonder-blocks-button/button.argtypes.ts

@@ -139,6 +139,15 @@ export default {
             },
         },
     },
+    labelStyle: {
+        description: "Optional custom styles for the inner label.",
+        table: {
+            category: "Layout",
+            type: {
+                summary: "StyleType",
+            },
+        },
+    },
     className: {
         description: "Adds CSS classes to the Button.",
         control: {type: "text"},

__docs__/wonder-blocks-button/button.stories.tsx

@@ -16,7 +16,11 @@ import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {
+    LabelMedium,
+    LabelLarge,
+    HeadingSmall,
+} from "@khanacademy/wonder-blocks-typography";
 
 import Button from "@khanacademy/wonder-blocks-button";
 import packageConfig from "../../packages/wonder-blocks-button/package.json";
@@ -71,6 +75,7 @@ export const Default: StoryComponentType = {
         light: false,
         disabled: false,
         style: {maxWidth: 200},
+        labelStyle: {},
         onClick: () => {
             // eslint-disable-next-line no-alert
             alert("Click!");
@@ -100,7 +105,7 @@ export const Tertiary: StoryComponentType = {
 
         // Get HTML elements
         const button = canvas.getByRole("button");
-        const computedStyleButton = getComputedStyle(button, ":after");
+        const computedStyleButton = getComputedStyle(button);
         const innerLabel = canvas.getByTestId("test-button-inner-label");
         const computedStyleLabel = getComputedStyle(innerLabel, ":after");
 
@@ -115,8 +120,10 @@ export const Tertiary: StoryComponentType = {
 
         // Focus style
         await fireEvent.focus(button);
-        await expect(computedStyleButton.borderColor).toBe("rgb(24, 101, 242)");
-        await expect(computedStyleButton.borderWidth).toBe("2px");
+        await expect(computedStyleButton.outlineColor).toBe(
+            "rgb(24, 101, 242)",
+        );
+        await expect(computedStyleButton.outlineWidth).toBe("2px");
 
         // Active (mouse down) style
         // eslint-disable-next-line testing-library/prefer-user-event
@@ -591,6 +598,51 @@ TruncatingLabels.parameters = {
     },
 };
 
+/**
+ * Buttons can be styled with custom styles. This story shows a button with a
+ * custom width and height (using the `style` prop), and also a custom label
+ * style that prevents the label from being truncated (`labelStyle`).
+ *
+ * __NOTE:__ Please use this feature sparingly. This could be useful for simple
+ * cases like the one shown below, but it could cause some issues if used in
+ * more complex cases.
+ */
+export const CustomStyles = {
+    args: {
+        children: `This button does not truncate its label and can appear in multiple lines`,
+        disabled: false,
+        kind: "secondary",
+        onClick: () => {},
+        style: {
+            maxWidth: 200,
+            minHeight: 32,
+            height: "auto",
+        },
+        labelStyle: {
+            textOverflow: "initial",
+            whiteSpace: "normal",
+        },
+    },
+    render: (args: any) => (
+        <View style={{gap: Spacing.medium_16}}>
+            <HeadingSmall>Wonder Blocks theme (default)</HeadingSmall>
+            <View style={{flexDirection: "row", gap: Spacing.medium_16}}>
+                <Button {...args} kind="primary" />
+                <Button {...args} kind="secondary" />
+                <Button {...args} kind="tertiary" />
+            </View>
+            <HeadingSmall>Khanmigo theme</HeadingSmall>
+            <View style={{flexDirection: "row", gap: Spacing.medium_16}}>
+                <ThemeSwitcherContext.Provider value="khanmigo">
+                    <Button {...args} kind="primary" />
+                    <Button {...args} kind="secondary" />
+                    <Button {...args} kind="tertiary" />
+                </ThemeSwitcherContext.Provider>
+            </View>
+        </View>
+    ),
+};
+
 export const SubmittingForms: StoryComponentType = {
     name: "Submitting forms",
     render: () => (