From ae08ee02f4d3e2dec67113daf91ad7214126dd99 Mon Sep 17 00:00:00 2001 From: Samuel Gunter Date: Tue, 6 Feb 2024 23:56:35 -0600 Subject: [PATCH] feat: tailwind version of Button component still WIP, need to figure out icon spacing exactly --- package.json | 1 + pnpm-lock.yaml | 7 +++ src/stories/components/Button.stories.tsx | 47 ++++++++++++++----- src/views/components/common/Button/Button.tsx | 38 ++++++++------- .../common/ExtensionRoot/ExtensionRoot.tsx | 1 + .../CourseButtons/CourseButtons.tsx | 8 ++-- .../components/injected/TableRow/TableRow.tsx | 2 +- 7 files changed, 70 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index e8515d4e..4994bca5 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ }, "dependencies": { "@types/sql.js": "^1.4.9", + "@unocss/reset": "^0.58.5", "@vitejs/plugin-react": "^4.2.1", "chrome-extension-toolkit": "^0.0.51", "classnames": "^2.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4310cf74..d8f3b44e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,6 +16,9 @@ dependencies: '@types/sql.js': specifier: ^1.4.9 version: 1.4.9 + '@unocss/reset': + specifier: ^0.58.5 + version: 0.58.5 '@vitejs/plugin-react': specifier: ^4.2.1 version: 4.2.1(vite@5.0.12) @@ -5046,6 +5049,10 @@ packages: resolution: {integrity: sha512-ZZTrAdl4WWmMjQdOqcOSWdgFH6kdFKZjPu4c6Ijxk7KvY2BW3nttTTBa7IYeuXFHVfcExUFqlOgRurt+NeWYyQ==} dev: true + /@unocss/reset@0.58.5: + resolution: {integrity: sha512-2wMrkCj3SSb5hrx9TKs5jZa34QIRkHv9FotbJutAPo7o8hx+XXn56ogzdoUrcFPJZJUx2R2nyOVbSlGMIjtFtw==} + dev: false + /@unocss/rule-utils@0.58.4: resolution: {integrity: sha512-52Jp4I+joGTaDm7ehB/7uZ2kJL+9BZcYRDUVk4IDacDH5W9yxf1F75LzYT8jJVWXD/HIhiS0r9V6qhcBq2OWZw==} engines: {node: '>=14'} diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx index 1a6b993e..b095168e 100644 --- a/src/stories/components/Button.stories.tsx +++ b/src/stories/components/Button.stories.tsx @@ -1,6 +1,7 @@ import { Button } from 'src/views/components/common/Button/Button'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; +import ImagePlaceholderIcon from '~icons/material-symbols/image'; // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export const meta = { @@ -39,15 +40,37 @@ export const Grid: Story = { render: props => (
-
-
+ +
+
+
+
+
+
+ ), +}; + +export const Icons: Story = { + render: props => ( +
+
), }; @@ -60,14 +83,14 @@ export const CourseButtons: Story = { render: props => (
-
-
), diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx index b51532bd..c5638970 100644 --- a/src/views/components/common/Button/Button.tsx +++ b/src/views/components/common/Button/Button.tsx @@ -5,18 +5,18 @@ import styles from './Button.module.scss'; interface Props { className?: string; style?: React.CSSProperties; - type?: 'filled' | 'outline' | 'single'; + variant?: 'filled' | 'outline' | 'single'; onClick?: () => void; - iconOnly?: boolean; - showSymbol?: boolean; - symbol?: React.ReactNode; + icon?: React.ReactNode; disabled?: boolean; title?: string; testId?: string; - primaryColor?: string; - secondaryColor?: string; + useScss?: boolean; } +const BUTTON_BASE_CLASS = + 'm-2.5 h-10 w-auto flex cursor-pointer content-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 font-500 leading-normal font-sans btn-transition'; + /** * A reusable button component that follows the design system of the extension. * @returns @@ -24,35 +24,39 @@ interface Props { export function Button({ className, style, - type, + variant, onClick, - iconOnly, - showSymbol, - symbol, + icon, disabled, title, testId, - primaryColor, - secondaryColor, children, + useScss = false, }: React.PropsWithChildren): JSX.Element { return ( ); } diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx index 9bc27972..b843f074 100644 --- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx +++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx @@ -2,6 +2,7 @@ import React from 'react'; import styles from './ExtensionRoot.module.scss'; import 'uno.css'; +import '@unocss/reset/tailwind-compat.css'; interface Props { testId?: string; diff --git a/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx b/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx index d89c6dde..db841455 100644 --- a/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx +++ b/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx @@ -83,7 +83,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) { {conflicts.length > 0 && (