Fix/button v1 props (#236)

* fix: maxWidth instead of width * refactor: remove danger and secondary props, rename primary to solid * style: add styles for variants * style: css fixes * chore: remove comment * docs: update mdx * feat: add box shadow * chore: change css * feat: add width prop with style * chore: update mdx
raystack · Feb 3, 2025 · 08cd080 · 08cd080
1 parent aee9bc5
commit 08cd080
Show file tree

Hide file tree

Showing 4 changed files with 288 additions and 152 deletions.
diff --git a/apps/www/content/primitives/components/button.mdx b/apps/www/content/primitives/components/button.mdx
@@ -5,7 +5,9 @@ description: Triggers a click action usually performed by the user to trigger an
 ---
 
 <Preview>
-  <Button variant="primary">Primary button</Button>
+  <Button variant="solid" color="accent">
+    Solid button
+  </Button>
 </Preview>
 
 ## Usages
@@ -26,109 +28,132 @@ Import all parts and piece them together.
     <LiveEditor code={`
 import { Button } from '@raystack/apsara/v1'
 
-<Button variant="primary">Click here!</Button>`} border />
+<Button variant="solid" color="accent">Click here!</Button>`} border />
 </LiveProvider>
 
-
 ## Props
 
 The `Button` component accepts the following props:
 
-- `variant`: Visual style variant (`"primary"` | `"secondary"` | `"outline"` | `"ghost"` | `"danger"` | `"text"`, default: "primary")
+- `variant`: Visual style variant (`"solid"` | `"outline"` | `"ghost"` | `"text"`, default: "solid")
+- `color`: Color theme (`"accent"` | `"danger"` | `"neutral"` | `"success"`, default: "accent")
 - `size`: Size of the button (`"small"` | `"normal"`, default: "normal")
 - `disabled`: Whether the button is disabled (boolean, default: false)
 - `loading`: Shows a loading spinner inside the button (boolean)
 - `loaderText`: Optional text to display next to the loading spinner (ReactNode)
 - `leadingIcon`: Icon element to display before button text (ReactNode)
 - `trailingIcon`: Icon element to display after button text (ReactNode)
+- `maxWidth`: Custom maximum width for the button (string | number)
 - `width`: Custom width for the button (string | number)
 - `asChild`: Boolean to merge props onto child element
 - `className`: Additional CSS class names
 - All other ButtonHTMLAttributes from React
 
+## Variants
 
-## Variant
-
-Variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes. Default is `Primary`.
+Variants allow you to customize the button's style, making it visually distinctive and suitable for different purposes. Default is `solid`.
 
 <Playground
   scope={{ Button }}
   tabs={[
     {
-      name: "Primary",
-      code: `<Button variant="primary">Primary button</Button>`,
-    },
-    {
-      name: "Secondary",
-      code: `<Button variant="secondary">Secondary button</Button>`,
+      name: "Solid",
+      code: `<Button variant="solid" color="accent">Solid button</Button>`,
     },
     {
       name: "Outline",
-      code: `<Button variant="outline">Outline button</Button>`,
+      code: `<Button variant="outline" color="accent">Outline button</Button>`,
     },
     {
       name: "Ghost",
       code: `<Button variant="ghost">Ghost button</Button>`,
     },
-    {
-      name: "Danger",
-      code: `<Button variant="danger">Danger button</Button>`,
-    },
     {
       name: "Text",
       code: `<Button variant="text">Text button</Button>`,
     },
   ]}
 />
 
+## Colors
+
+Colors help convey the purpose and importance of actions. The color prop only affects solid and outline variants. Default is `accent`.
+
+<Playground
+  scope={{ Button }}
+  tabs={[
+    {
+      name: "Accent",
+      code: `
+<div style={{display:'flex', gap: '8px'}}>
+  <Button variant="solid" color="accent">Solid</Button>
+  <Button variant="outline" color="accent">Outline</Button>
+</div>`,
+    },
+    {
+      name: "Danger",
+      code: `
+<div style={{display:'flex', gap: '8px'}}>
+  <Button variant="solid" color="danger">Solid</Button>
+  <Button variant="outline" color="danger">Outline</Button>
+</div>`,
+    },
+    {
+      name: "Neutral",
+      code: `
+<div style={{display:'flex', gap: '8px'}}>
+  <Button variant="solid" color="neutral">Solid</Button>
+  <Button variant="outline" color="neutral">Outline</Button>
+</div>`,
+    },
+    {
+      name: "Success",
+      code: `
+<div style={{display:'flex', gap: '8px'}}>
+  <Button variant="solid" color="success">Solid</Button>
+  <Button variant="outline" color="success">Outline</Button>
+</div>`,
+    },
+  ]}
+/>
 
 ## Scale
 
-The Button component offers two size options to accommodate various design requirements. By selecting the `normal` size, you can create buttons that are visually larger, making it more prominent and noticeable within the user interface. Default size is `normal`.
+The Button component offers two size options. Default size is `normal`.
 
 <Playground
   scope={{ Button }}
   tabs={[
     {
       name: "Small",
-      code: `<Button variant="primary" size="small">primary button</Button>`,
+      code: `<Button variant="solid" color="accent" size="small">Small button</Button>`,
     },
     {
       name: "Normal",
-      code: `<Button variant="primary" size="normal">primary button</Button>`,
+      code: `<Button variant="solid" color="accent" size="normal">Normal button</Button>`,
     },
   ]}
 />
 
 ## Disabled
 
-The Button component provides a "disabled" state, which prevents the button from responding to any user actions. When a button is disabled, it becomes unclickable and does not trigger any associated actions or events.
-
-This feature is useful when you want to indicate that a button is temporarily inactive or unavailable for interaction. Default is `false`.
+The Button component provides a "disabled" state, which prevents the button from responding to any user actions. Default is `false`.
 
 <Playground
   scope={{ Button }}
   tabs={[
     {
-      name: "Primary",
-      code: `<Button disabled variant="primary">Primary button</Button>`,
-    },
-    {
-      name: "Secondary",
-      code: `<Button disabled variant="secondary">Secondary button</Button>`,
+      name: "Solid",
+      code: `<Button disabled variant="solid" color="accent">Solid button</Button>`,
     },
     {
       name: "Outline",
-      code: `<Button disabled variant="outline">Outline button</Button>`,
+      code: `<Button disabled variant="outline" color="accent">Outline button</Button>`,
     },
     {
       name: "Ghost",
       code: `<Button disabled variant="ghost">Ghost button</Button>`,
     },
-    {
-      name: "Danger",
-      code: `<Button disabled variant="danger">Danger button</Button>`,
-    },
     {
       name: "Text",
       code: `<Button disabled variant="text">Text button</Button>`,
@@ -138,32 +163,30 @@ This feature is useful when you want to indicate that a button is temporarily in
 
 ## Loading
 
-The Button component offers inbuilt loading states. Loading state is used to signify an ongoing process after the user has clicked on the button. Loading is an optional prop.
-
-Note: A loading as `true` only disables the button click and displays a spinner within the button. `loading` does not changes the button appearance as disabled. For changing the appearance to disabled state, a `disabled` prop as `true` has to passed.
+The Button component offers inbuilt loading states. Loading state is used to signify an ongoing process after the user has clicked on the button.
 
 <Playground
   scope={{ Button }}
   code={`
 <div style={{display:'flex', gap: '8px'}}>
-    <Button variant="primary" loading>Click here</Button>
-    <Button variant="primary" loading loaderText="Custom Loading...">Click here</Button>
-    <Button variant="primary" loading loaderText="Loading..." disabled>Click here</Button>
+    <Button variant="solid" color="accent" loading>Loading</Button>
+    <Button variant="solid" color="accent" loading loaderText="Custom Loading...">Loading</Button>
+    <Button variant="solid" color="accent" loading loaderText="Loading..." disabled>Loading</Button>
 </div>
 `}
 />
 
 ## With leading and trailing icons
 
-The button component accepts optional leading and/or trailing icons. A `ReactNode` can be passed as a prop.
+The button component accepts optional leading and/or trailing icons.
 
 <Playground
   scope={{ Button }}
   code={`
 <div style={{display:'flex', gap: '8px'}}>
-    <Button variant="primary" leadingIcon={<>I</>}>With leading icon</Button>
-    <Button variant="primary" trailingIcon={<>O</>}>With trailing icon</Button>
-    <Button variant="primary" leadingIcon={<>I</>} trailingIcon={<>O</>}>With both icons</Button>
+    <Button variant="solid" color="accent" leadingIcon={<>I</>}>With leading icon</Button>
+    <Button variant="solid" color="accent" trailingIcon={<>O</>}>With trailing icon</Button>
+    <Button variant="solid" color="accent" leadingIcon={<>I</>} trailingIcon={<>O</>}>With both icons</Button>
 </div>
 `}
 />
diff --git a/apps/www/examples/shield-ts/assets.tsx b/apps/www/examples/shield-ts/assets.tsx
@@ -182,9 +182,44 @@ export const Assets = () => {
     <div style={{ padding: "var(--rs-space-5)", width: "100%" }}>
       <Flex direction="column" gap="large" style={{ width: "100%" }}>
         <Flex direction="column" gap="medium" style={{ width: "100%" }}>
-          <Flex justify="between" align="center">
-            <Title>Assets</Title>
-            <Button>Create Asset</Button>
+          <Flex direction="column" gap="medium">
+            <Title>Solid Buttons</Title>
+            <Flex gap="small" wrap="wrap">
+              <Button variant="solid" color="accent">solid-accent</Button>
+              <Button variant="solid" color="danger">solid-danger</Button>
+              <Button variant="solid" color="neutral">solid-neutral</Button>
+              <Button variant="solid" color="success">solid-success</Button>
+            </Flex>
+
+            <Title>Outline Buttons</Title>
+            <Flex gap="small" wrap="wrap">
+              <Button variant="outline" color="accent">outline-accent</Button>
+              <Button variant="outline" color="danger">outline-danger</Button>
+              <Button variant="outline" color="neutral">outline-neutral</Button>
+              <Button variant="outline" color="success">outline-success</Button>
+            </Flex>
+
+            <Title>Ghost & Text Buttons</Title>
+            <Flex gap="small" wrap="wrap">
+              <Button variant="ghost">ghost</Button>
+              <Button variant="text">text</Button>
+            </Flex>
+
+            <Title>Loading State</Title>
+            <Flex gap="small" wrap="wrap">
+              <Button variant="solid" color="accent" loading>Loading</Button>
+              <Button variant="outline" color="accent" loading>Loading</Button>
+              <Button variant="ghost" loading>Loading</Button>
+              <Button variant="text" loading>Loading</Button>
+            </Flex>
+
+            <Title>Disabled State</Title>
+            <Flex gap="small" wrap="wrap">
+              <Button variant="solid" color="accent" disabled>Disabled</Button>
+              <Button variant="outline" color="accent" disabled>Disabled</Button>
+              <Button variant="ghost" disabled>Disabled</Button>
+              <Button variant="text" disabled>Disabled</Button>
+            </Flex>
           </Flex>
 
           <InputField
@@ -257,7 +292,7 @@ const AssetsHeader = () => {
       style={{ width: "100%", padding: "4px", paddingTop: "48px" }}
     >
       <Flex gap="extra-large" align="center" style={{ width: "100%" }}>
-      <Search 
+        <Search 
           placeholder="Search assets..."
           value={searchValue}
           onChange={(e) => setSearchValue(e.target.value)}