crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Export button props, improve styling of swatches

Browse Source
This commit is contained in:
paco
2020-10-08 16:20:27 -06:00
parent a2de6cef2e
commit ccf6074573
6 changed files with 98 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/ui/Button/Button.module.css
View File

@@ -1,17 +1,17 @@
.root {
@apply cursor-pointer inline-flex px-10 rounded-sm border border-transparent leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center;
@apply cursor-pointer inline-flex px-10 rounded-sm leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center focus:outline-none;
}
.root:hover {
@apply bg-white text-black border-black;
@apply bg-gray-800;
}
.root:focus {
@apply border-gray-700 shadow-outline;
@apply shadow-outline;
}
.root[data-active] {
@apply bg-gray-200;
@apply bg-gray-600;
}
s.filled {

4
components/ui/Button/Button.tsx
View File

@@ -9,7 +9,7 @@ import mergeRefs from 'react-merge-refs'
import { useButton } from 'react-aria'
import s from './Button.module.css'
interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
href?: string
className?: string
variant?: 'filled' | 'outlined' | 'flat' | 'none'
@@ -18,7 +18,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
Component?: string | JSXElementConstructor<any>
}
const Button: React.FC<Props> = forwardRef((props, buttonRef) => {
const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
const {
className,
variant = 'filled',

1
components/ui/Button/index.ts
View File

@@ -1 +1,2 @@
export { default } from './Button'
export * from './Button'