From ccfdecb3181fc4803d8caaadfea74fe27b246842 Mon Sep 17 00:00:00 2001 From: Juan Olvera Date: Mon, 15 Jan 2024 13:48:18 -0600 Subject: [PATCH] feat: complete select --- .storybook/output.css | 84 ++++++++++++-------------- src/components/Input/Input.tsx | 14 ++--- src/components/Label.tsx | 28 +++++++++ src/components/Select/Select.styles.ts | 30 ++++++--- src/components/Select/Select.tsx | 22 ++++--- src/components/Select/Select.types.ts | 4 +- tailwind.config.js | 2 +- 7 files changed, 114 insertions(+), 70 deletions(-) create mode 100644 src/components/Label.tsx diff --git a/.storybook/output.css b/.storybook/output.css index 9c4e46e..64c0afd 100644 --- a/.storybook/output.css +++ b/.storybook/output.css @@ -751,12 +751,12 @@ select { right: 0.75rem; } -.isolate { - isolation: isolate; +.right-2 { + right: 0.5rem; } -.z-50 { - z-index: 50; +.isolate { + isolation: isolate; } .m-0 { @@ -799,10 +799,6 @@ select { height: 2px; } -.h-10 { - height: 2.5rem; -} - .max-h-96 { max-height: 24rem; } @@ -922,6 +918,10 @@ select { border-radius: 0.375rem; } +.rounded-sm { + border-radius: 0.125rem; +} + .border-2 { border-width: 2px; } @@ -1074,14 +1074,6 @@ select { padding-right: 0.75rem; } -.pr-2 { - padding-right: 0.5rem; -} - -.pl-8 { - padding-left: 2rem; -} - .text-left { text-align: left; } @@ -1142,12 +1134,6 @@ select { opacity: 0; } -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .outline-none { outline: 2px solid transparent; outline-offset: 2px; @@ -1191,19 +1177,28 @@ html { background-color: rgb(63 63 70 / var(--tw-bg-opacity)); } -.hover\:bg-mono-hover:hover { +.focus\:rounded-md:focus { + border-radius: 0.375rem; +} + +.focus\:border-mono-primary:focus { + --tw-border-opacity: 1; + border-color: rgb(39 39 42 / var(--tw-border-opacity)); +} + +.focus\:bg-mono-hover:focus { --tw-bg-opacity: 1; - background-color: rgb(156 163 175 / var(--tw-bg-opacity)); + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.hover\:bg-mono-primary:hover { +.focus\:bg-mono-primary:focus { --tw-bg-opacity: 1; background-color: rgb(39 39 42 / var(--tw-bg-opacity)); } -.focus\:border-mono-primary:focus { - --tw-border-opacity: 1; - border-color: rgb(39 39 42 / var(--tw-border-opacity)); +.focus\:text-white:focus { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } .focus\:outline-none:focus { @@ -1217,16 +1212,6 @@ html { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; -} - .focus-visible\:ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); @@ -1242,16 +1227,22 @@ html { --tw-ring-offset-width: 2px; } -.disabled\:cursor-not-allowed:disabled { - cursor: not-allowed; +.data-\[disabled\]\:pointer-events-none[data-disabled] { + pointer-events: none; } -.disabled\:opacity-50:disabled { - opacity: 0.5; +.data-\[highlighted\]\:border-2[data-highlighted] { + border-width: 2px; } -.data-\[disabled\]\:pointer-events-none[data-disabled] { - pointer-events: none; +.data-\[highlighted\]\:border-mono-primary[data-highlighted] { + --tw-border-opacity: 1; + border-color: rgb(39 39 42 / var(--tw-border-opacity)); +} + +.data-\[highlighted\]\:bg-gray-400[data-highlighted] { + --tw-bg-opacity: 1; + background-color: rgb(156 163 175 / var(--tw-bg-opacity)); } .data-\[disabled\]\:text-mono-text\/50[data-disabled] { @@ -1262,6 +1253,11 @@ html { opacity: 0.5; } +.data-\[highlighted\]\:outline-none[data-highlighted] { + outline: 2px solid transparent; + outline-offset: 2px; +} + .data-\[focus\]\:outline[data-focus] { outline-style: solid; } diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 978a024..67d03a2 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -3,6 +3,7 @@ import dashify from "dashify"; import { NumericFormat } from "react-number-format"; import type * as T from "./Input.types"; import { Box } from "../Box"; +import { Label } from "../Label"; import { cx } from "../../utils"; import { inputStyles } from "./Input.styles"; import { match, P } from "ts-pattern"; @@ -42,17 +43,14 @@ const Input = React.forwardRef( return ( - + ; + +type LabelProps = React.ComponentPropsWithoutRef; + +const styles = cva([ + "text-sm", + "font-semibold", + "leading-6", + "text-mono-primary", +]); + +const Label = React.forwardRef( + ({ children, ...props }, forwardRef) => { + const classes = cx(styles(), props.className); + return ( + <$.Root {...props} className={classes} ref={forwardRef}> + {children} + + ); + } +); + +export { Label }; diff --git a/src/components/Select/Select.styles.ts b/src/components/Select/Select.styles.ts index 5811d6f..b00c096 100644 --- a/src/components/Select/Select.styles.ts +++ b/src/components/Select/Select.styles.ts @@ -19,8 +19,8 @@ const content = [ "relative", "max-h-96", "min-w-[8rem]", - "py-1.5", - "px-2", + // "py-1.5", + // "px-2", "border-2", "border-mono-border", "overflow-hidden", @@ -50,13 +50,24 @@ const scroll = [ const indicator = [ "absolute", - "left-0", + "top-1/2", + "-translate-y-1/2", + "right-2", "inline-flex", "items-center", "justify-center", ]; -const selectStyles = cva(base); +const selectStyles = cva(base, { + variants: { + fullWidth: { + true: "w-full", + }, + }, + defaultVariants: { + fullWidth: false, + }, +}); const item = [ "relative", @@ -65,12 +76,15 @@ const item = [ "cursor-default", "select-none", "items-center", - "py-1.5", - "pr-2", - "pl-8", + "py-0.5", + "px-2", + "rounded-sm", "data-[disabled]:pointer-events-none", "data-[disabled]:text-mono-text/50", - "focus:outline-none", + "outline-none", + "focus:rounded-md", + "focus:bg-mono-primary", + "focus:text-white", "focus:border-mono-primary", ]; diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 29d0a91..e94152b 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -1,20 +1,26 @@ import * as React from "react"; import * as $ from "@radix-ui/react-select"; -import { Label } from "@radix-ui/react-label"; import { FaCheck, FaChevronDown, FaChevronUp } from "react-icons/fa"; import * as T from "./Select.types"; import * as styles from "./Select.styles"; import { cx } from "../../utils"; import { Box } from "../Box"; +import { Label } from "../Label"; const Select = React.forwardRef( - ({ children, className, ...props }, ref) => { - const classes = cx([styles.selectStyles()], className); - console.log("classes", classes); + ({ hideLabel = false, fullWidth, children, className, ...props }, ref) => { + const classes = cx([styles.selectStyles({ fullWidth })], className); return ( - - - + + + <$.Root> <$.Trigger id="select" {...props} className={classes} ref={ref}> <$.Value placeholder={props.placeholder} /> @@ -49,7 +55,7 @@ const SelectItem = React.forwardRef( ({ children, className, ...props }, forwardedRef) => { const classes = cx([styles.itemStyles()], className); return ( - <$.Item {...props} ref={forwardedRef}> + <$.Item {...props} className={classes} ref={forwardedRef}> <$.ItemText>{children} <$.ItemIndicator className={cx([styles.indicator])}> diff --git a/src/components/Select/Select.types.ts b/src/components/Select/Select.types.ts index 7a537fd..04911af 100644 --- a/src/components/Select/Select.types.ts +++ b/src/components/Select/Select.types.ts @@ -16,7 +16,9 @@ type SelectSection = { type SelectElement = React.ElementRef; type SelectProps = React.ComponentPropsWithoutRef & - VariantProps & {}; + VariantProps & { + hideLabel?: boolean; + }; type SelectItemElement = React.ElementRef; diff --git a/tailwind.config.js b/tailwind.config.js index 12a42d2..8debb32 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,7 +29,7 @@ module.exports = { DEFAULT: colors.gray["500"], }, "mono-hover": { - DEFAULT: colors.gray[400], + DEFAULT: colors.gray[200], }, "mono-rounded": { DEFAULT: defaultTheme.borderRadius["lg"],