Add labelStyle prop to modify the inner label styles of the button.

Khan · Nov 14, 2023 · 44bfcb5 · 44bfcb5
1 parent 7b24db9
commit 44bfcb5
Show file tree

Hide file tree

Showing 6 changed files with 429 additions and 444 deletions.
diff --git a/.changeset/fluffy-beers-reply.md b/.changeset/fluffy-beers-reply.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": minor
+---
+
+Add `labelStyle` to override the styles of the internal label
diff --git a/__docs__/wonder-blocks-button/button.argtypes.ts b/__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"},

diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__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!");
@@ -591,6 +596,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: () => (