feat(button): add custom color to color prop (#624)

juntossomosmais · Nov 19, 2024 · 67ebf03 · 67ebf03
1 parent 3989741
commit 67ebf03
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 5 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -34,7 +34,7 @@ export namespace Components {
         "items": BreadcrumbItemProp[];
     }
     interface AtomButton {
-        "color": 'primary' | 'secondary' | 'white';
+        "color": 'primary' | 'secondary' | 'white' | 'custom';
         "disabled"?: boolean;
         "download"?: string;
         "expand"?: 'block';
@@ -648,7 +648,7 @@ declare namespace LocalJSX {
         "items"?: BreadcrumbItemProp[];
     }
     interface AtomButton {
-        "color"?: 'primary' | 'secondary' | 'white';
+        "color"?: 'primary' | 'secondary' | 'white' | 'custom';
         "disabled"?: boolean;
         "download"?: string;
         "expand"?: 'block';

diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
@@ -28,6 +28,11 @@
     --ion-color-contrast: var(--color-neutral-black);
   }
 
+  &[color='custom'] {
+    --ion-color-contrast: var(--atom-button-color-contrast);
+    --ion-color-base: var(--atom-button-color);
+  }
+
   &[size='small'],
   &[size='default'],
   &[size='large'] {

diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
@@ -15,7 +15,8 @@ import {
   shadow: true,
 })
 export class AtomButton {
-  @Prop({ mutable: true }) color: 'primary' | 'secondary' | 'white' = 'primary'
+  @Prop({ mutable: true }) color: 'primary' | 'secondary' | 'white' | 'custom' =
+    'primary'
   @Prop({ mutable: true }) disabled?: boolean
   @Prop({ mutable: true }) download?: string
   @Prop({ mutable: true }) expand?: 'block'

diff --git a/packages/core/src/components/button/stories/button.args.ts b/packages/core/src/components/button/stories/button.args.ts
@@ -21,7 +21,7 @@ export const ButtonStoryArgs = {
     },
     color: {
       control: 'select',
-      options: ['primary', 'secondary', 'white'],
+      options: ['primary', 'secondary', 'white', 'custom'],
       defaultValue: { summary: 'primary' },
       description: "The color to use from your application's color palette.",
       table: {
@@ -122,6 +122,20 @@ export const ButtonStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    '--atom-button-color': {
+      description:
+        'Custom color of the button. It just works with `color="custom"`.',
+      table: {
+        category: Category.CSS_CUSTOM_PROPERTIES,
+      },
+    },
+    '--atom-button-color-contrast': {
+      description:
+        'Custom color contrast of the button. It just works with `color="custom"`.',
+      table: {
+        category: Category.CSS_CUSTOM_PROPERTIES,
+      },
+    },
   },
 }
 

diff --git a/packages/core/src/components/button/stories/button.core.stories.tsx b/packages/core/src/components/button/stories/button.core.stories.tsx
@@ -3,6 +3,8 @@ import { html } from 'lit'
 
 import { ButtonComponentArgs, ButtonStoryArgs } from './button.args'
 
+import './button.css'
+
 export default {
   title: 'Components/Button',
   ...ButtonStoryArgs,
@@ -12,6 +14,7 @@ const createButton = (args, themeColor = 'light') => {
   return html`
     <div class="theme-${themeColor}">
       <atom-button
+        class="button"
         color="${args.color}"
         fill="${args.fill}"
         expand="${args.expand}"

diff --git a/packages/core/src/components/button/stories/button.css b/packages/core/src/components/button/stories/button.css
@@ -0,0 +1,4 @@
+.button {
+  --atom-button-color: #25d366;
+  --atom-button-color-contrast: #fff;
+}
diff --git a/packages/core/src/components/button/stories/button.react.stories.tsx b/packages/core/src/components/button/stories/button.react.stories.tsx
@@ -4,6 +4,8 @@ import React from 'react'
 
 import { ButtonComponentArgs, ButtonStoryArgs } from './button.args'
 
+import './button.css'
+
 export default {
   title: 'Components/Button',
   component: AtomButton,
@@ -13,6 +15,7 @@ export default {
 const createButton = (args, themeColor = 'light') => (
   <div className={`theme-${themeColor}`}>
     <AtomButton
+      className='button'
       color={args.color}
       fill={args.fill}
       size={args.size}

diff --git a/packages/core/src/components/button/stories/button.vue.stories.tsx b/packages/core/src/components/button/stories/button.vue.stories.tsx
@@ -1,9 +1,10 @@
 import { AtomButton, AtomIcon } from '@juntossomosmais/atomium/vue'
 import { Meta, StoryObj } from '@storybook/vue3'
 
-
 import { ButtonComponentArgs, ButtonStoryArgs } from './button.args'
 
+import './button.css'
+
 export default {
   title: 'Components/Button',
   ...ButtonStoryArgs,
@@ -17,6 +18,7 @@ const createButton = (args, themeColor = 'light') => ({
   template: `
     <div :class="'theme-' + themeColor">
       <AtomButton
+        class="button"
         color="${args.color}"
         fill="${args.fill}"
         size="${args.size}"