fix: missing fill option in badge component (#17)

* fix: missing fill option in badge component * fix: input size prop conflict with size variant
cinnyapp · May 7, 2023 · e021107 · e021107
1 parent cdb9ae4
commit e021107
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/badge/Badge.css.ts b/src/components/badge/Badge.css.ts
@@ -77,6 +77,11 @@ export const Badge = recipe({
         color: OnContainer,
         borderColor: ContainerLine,
       },
+      None: {
+        backgroundColor: "inherit",
+        color: Main,
+        borderColor: Main,
+      },
     },
     outlined: {
       true: {

diff --git a/src/components/badge/Badge.stories.tsx b/src/components/badge/Badge.stories.tsx
@@ -16,7 +16,7 @@ export default {
     },
     fill: {
       control: "select",
-      options: ["Solid", "Soft"],
+      options: ["Solid", "Soft", "None"],
     },
   },
 } as ComponentMeta<typeof Badge>;

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -2,21 +2,25 @@ import React, { AllHTMLAttributes, forwardRef, ReactNode } from "react";
 import classNames from "classnames";
 import * as css from "./Input.css";
 
-type InputProps = AllHTMLAttributes<HTMLInputElement> & {
+type InputProps = Omit<AllHTMLAttributes<HTMLInputElement>, "size"> & {
   before?: ReactNode;
   after?: ReactNode;
+  inputSize?: number;
 };
 
 export const Input = forwardRef<HTMLInputElement, InputProps & css.InputVariants>(
-  ({ className, style, variant, size, outlined, radii, before, after, ...props }, ref) => (
+  (
+    { className, style, variant, size, inputSize = 1, outlined, radii, before, after, ...props },
+    ref
+  ) => (
     <div
       className={classNames(css.Input({ variant, size, outlined, radii }), className)}
       style={style}
       data-ui-before={before ? true : undefined}
       data-ui-after={after ? true : undefined}
     >
       {before}
-      <input className={css.InputInput} {...props} ref={ref} />
+      <input className={css.InputInput} size={inputSize} {...props} ref={ref} />
       {after}
     </div>
   )