Merge pull request #1194 from Wizleap-Inc/feat/1193_text-button

Feat(text-button): 新しいvariant: grayを追加する

.changeset/ninety-rocks-heal.md

@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+[#1193] Text Button の variant に "gray" 追加

packages/styles/bases/text-button.css.ts

@@ -54,6 +54,15 @@ export const textButtonStyle = styleVariants({
       border: "none",
     },
   ],
+  gray: [
+    baseTextButtonStyle,
+    {
+      background: THEME.color.gray[600],
+      color: THEME.color.white[800],
+      boxShadow: THEME.shadow.md,
+      border: "none",
+    },
+  ],
 });
 
 export const textButtonDisabledStyle = style({

packages/wiz-ui-next/src/components/base/buttons/text/text.stories.ts

@@ -21,7 +21,7 @@ export default {
     },
     variant: {
       control: { type: "select" },
-      options: ["primary", "sub", "danger", "sub-danger"],
+      options: ["primary", "sub", "danger", "sub-danger", "gray"],
     },
     size: {
       control: { type: "select" },
@@ -59,6 +59,8 @@ const TemplateVariant: StoryFn<typeof WizTextButton> = (args) => ({
       <div>variant = danger</div>
       <WizTextButton v-bind="args" @click="() => args.click" variant="sub-danger">保存する</WizTextButton>
       <div>variant = sub-danger</div>
+       <WizTextButton v-bind="args" @click="() => args.click" variant="gray">保存する</WizTextButton>
+      <div>variant = gray</div>
     </div>
   `,
 });
@@ -180,6 +182,8 @@ IconPosition.parameters = {
   <div>variant = danger</div>
   <WizTextButton v-bind="args" @click="click" :icon="WizIAdd" iconPosition="right" variant="sub-danger">保存する</WizTextButton>
   <div>variant = sub-danger</div>
+  <WizTextButton v-bind="args" @click="click" :icon="WizIAdd" iconPosition="right" variant="gray">保存する</WizTextButton>
+  <div>variant = gray</div>
 </template>
       `,
     },

packages/wiz-ui-next/src/components/base/buttons/text/text.vue

@@ -55,7 +55,9 @@ interface Emits {
 
 const props = defineProps({
   variant: {
-    type: String as PropType<"primary" | "sub" | "danger" | "sub-danger">,
+    type: String as PropType<
+      "primary" | "sub" | "danger" | "sub-danger" | "gray"
+    >,
     required: false,
     default: "primary",
   },
@@ -99,13 +101,14 @@ const emit = defineEmits<Emits>();
 const onClick = () => props.disabled || emit("click");
 
 const variantColor: Record<
-  "primary" | "sub" | "danger" | "sub-danger",
+  "primary" | "sub" | "danger" | "sub-danger" | "gray",
   ColorKeys
 > = {
   primary: "white.800",
   sub: "green.800",
   danger: "white.800",
   "sub-danger": "red.800",
+  gray: "white.800",
 };
 
 const iconSize: Record<"xs" | "sm" | "md" | "lg", FontSizeKeys> = {

packages/wiz-ui-react/src/components/base/buttons/text/components/text-button.tsx

@@ -10,7 +10,7 @@ import { ComponentProps, ForwardedRef, ReactNode, forwardRef } from "react";
 import { TIcon, WizHStack, WizIcon } from "@/components";
 import { BaseProps } from "@/types";
 type Props = BaseProps & {
-  variant?: "primary" | "sub" | "danger" | "sub-danger";
+  variant?: "primary" | "sub" | "danger" | "sub-danger" | "gray";
   disabled?: boolean;
   rounded?: boolean;
   expand?: boolean;
@@ -21,13 +21,14 @@ type Props = BaseProps & {
 } & ComponentProps<"button">;
 
 const variantColor: Record<
-  "primary" | "sub" | "danger" | "sub-danger",
+  "primary" | "sub" | "danger" | "sub-danger" | "gray",
   ColorKeys
 > = {
   primary: "white.800",
   sub: "green.800",
   danger: "white.800",
   "sub-danger": "red.800",
+  gray: "white.800",
 };
 
 const iconSize: Record<"xs" | "sm" | "md" | "lg", FontSizeKeys> = {

packages/wiz-ui-react/src/components/base/buttons/text/stories/text-button.stories.tsx

@@ -91,6 +91,10 @@ export const Icon: Story = {
         保存する
       </WizTextButton>
       <div>variant = sub-danger</div>
+      <WizTextButton {...args} variant="gray">
+        保存する
+      </WizTextButton>
+      <div>variant = sub-danger</div>
     </div>
   ),
   parameters: {
@@ -149,6 +153,10 @@ export const Variant: Story = {
         保存する
       </WizTextButton>
       <div>variant = sub-danger</div>
+      <WizTextButton {...args} variant="gray">
+        保存する
+      </WizTextButton>
+      <div>variant = gray</div>
     </div>
   ),
 };