From c665198e6cfe2e6d213ef75ab401990ec85c65c4 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Thu, 10 Nov 2022 13:43:31 -0600 Subject: [PATCH 1/5] simplify button styles and update all the code everywhere all the time --- app/components/Sidebar.tsx | 1 - app/components/TopBar.tsx | 6 +- app/components/form/Form.tsx | 2 +- app/components/form/SideModalForm.tsx | 2 +- .../form/fields/DisksTableField.tsx | 9 +-- .../form/fields/NetworkInterfaceField.tsx | 2 +- app/forms/firewall-rules-create.tsx | 16 +---- app/pages/LoginPage.tsx | 5 +- app/pages/OrgAccessPage.tsx | 2 +- app/pages/OrgsPage.tsx | 2 +- app/pages/ProjectsPage.tsx | 5 +- app/pages/SiloAccessPage.tsx | 2 +- .../project/access/ProjectAccessPage.tsx | 2 +- app/pages/project/disks/DisksPage.tsx | 2 +- app/pages/project/instances/InstancesPage.tsx | 2 +- .../instances/instance/SerialConsolePage.tsx | 2 +- .../instances/instance/tabs/NetworkingTab.tsx | 1 - .../instance/tabs/SerialConsoleTab.tsx | 2 +- .../instances/instance/tabs/StorageTab.tsx | 4 +- .../VpcPage/tabs/VpcFirewallRulesTab.tsx | 2 +- .../networking/VpcPage/tabs/VpcRoutersTab.tsx | 2 +- .../networking/VpcPage/tabs/VpcSubnetsTab.tsx | 2 +- app/pages/project/networking/VpcsPage.tsx | 2 +- app/pages/project/snapshots/SnapshotsPage.tsx | 5 +- app/pages/system/SilosPage.tsx | 2 +- .../lib/bulk-action-menu/BulkActionMenu.tsx | 1 - libs/ui/lib/button/Button.stories.tsx | 39 +++++-------- libs/ui/lib/button/Button.tsx | 58 +++++-------------- libs/ui/lib/button/button.css | 49 +++------------- 29 files changed, 65 insertions(+), 166 deletions(-) diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx index f9042feac7..9ecd99d849 100644 --- a/app/components/Sidebar.tsx +++ b/app/components/Sidebar.tsx @@ -28,7 +28,6 @@ const modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'cmd' : 'ctrl' const JumpToButton = () => ( - ), diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx index f5ae750370..96abc8724e 100644 --- a/app/components/form/SideModalForm.tsx +++ b/app/components/form/SideModalForm.tsx @@ -84,7 +84,7 @@ export function SideModalForm({ {submitError.error.message} )} - - diff --git a/app/components/form/fields/NetworkInterfaceField.tsx b/app/components/form/fields/NetworkInterfaceField.tsx index 20814f6a6e..33417eb8b5 100644 --- a/app/components/form/fields/NetworkInterfaceField.tsx +++ b/app/components/form/fields/NetworkInterfaceField.tsx @@ -107,7 +107,7 @@ export function NetworkInterfaceField({ /> )}
-
diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx index 706c95ef47..4db698cc5c 100644 --- a/app/forms/firewall-rules-create.tsx +++ b/app/forms/firewall-rules-create.tsx @@ -179,12 +179,7 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
- diff --git a/app/pages/OrgsPage.tsx b/app/pages/OrgsPage.tsx index 3f98ac5bc4..baa3a8c448 100644 --- a/app/pages/OrgsPage.tsx +++ b/app/pages/OrgsPage.tsx @@ -87,7 +87,7 @@ export default function OrgsPage() { }>Organizations - + New Organization diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx index 0ab93bb7af..9e14bfaf6e 100644 --- a/app/pages/ProjectsPage.tsx +++ b/app/pages/ProjectsPage.tsx @@ -97,10 +97,7 @@ export default function ProjectsPage() { }>Projects - + New Project diff --git a/app/pages/SiloAccessPage.tsx b/app/pages/SiloAccessPage.tsx index 5b7e80761d..8d11e695d3 100644 --- a/app/pages/SiloAccessPage.tsx +++ b/app/pages/SiloAccessPage.tsx @@ -147,7 +147,7 @@ export function SiloAccessPage() { - diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx index 82f8b6daf6..47e576660c 100644 --- a/app/pages/project/access/ProjectAccessPage.tsx +++ b/app/pages/project/access/ProjectAccessPage.tsx @@ -178,7 +178,7 @@ export function ProjectAccessPage() { - diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx index ea65a1b7a3..86b39eccca 100644 --- a/app/pages/project/disks/DisksPage.tsx +++ b/app/pages/project/disks/DisksPage.tsx @@ -122,7 +122,7 @@ export function DisksPage() { New Disk diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx index 2c981a7e84..d58bd791e3 100644 --- a/app/pages/project/instances/InstancesPage.tsx +++ b/app/pages/project/instances/InstancesPage.tsx @@ -94,7 +94,7 @@ export function InstancesPage() { New Instance diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx index c392017baf..cf2f44722a 100644 --- a/app/pages/project/instances/instance/SerialConsolePage.tsx +++ b/app/pages/project/instances/instance/SerialConsolePage.tsx @@ -30,7 +30,7 @@ export function SerialConsolePage() {
-
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx index 68241c77cf..f516a45dda 100644 --- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx +++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx @@ -150,7 +150,6 @@ export function NetworkingTab() {
-
diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx index 8942fe1c75..f57d6b2d3e 100644 --- a/app/pages/project/instances/instance/tabs/StorageTab.tsx +++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx @@ -133,7 +133,6 @@ export function StorageTab() {
{createModalOpen && ( diff --git a/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx index 541632d6fd..bebbeb6a8f 100644 --- a/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx +++ b/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx @@ -36,7 +36,7 @@ export const VpcRoutersTab = () => { return ( <>
- {creating && setCreating(false)} />} diff --git a/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx index 9c41bd6db8..28328170d6 100644 --- a/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx +++ b/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx @@ -35,7 +35,7 @@ export const VpcSubnetsTab = () => { return ( <>
- {creating && setCreating(false)} />} diff --git a/app/pages/project/networking/VpcsPage.tsx b/app/pages/project/networking/VpcsPage.tsx index 2a368e13d8..b2b8898ce2 100644 --- a/app/pages/project/networking/VpcsPage.tsx +++ b/app/pages/project/networking/VpcsPage.tsx @@ -94,7 +94,7 @@ export function VpcsPage() { New Vpc diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx index 3bb070a9c1..b4eff69370 100644 --- a/app/pages/project/snapshots/SnapshotsPage.tsx +++ b/app/pages/project/snapshots/SnapshotsPage.tsx @@ -67,10 +67,7 @@ export function SnapshotsPage() { }>Snapshots - + New Snapshot diff --git a/app/pages/system/SilosPage.tsx b/app/pages/system/SilosPage.tsx index 0d6295e1d5..898cfbeae9 100644 --- a/app/pages/system/SilosPage.tsx +++ b/app/pages/system/SilosPage.tsx @@ -80,7 +80,7 @@ export default function SilosPage() { }>Silos - + New silo diff --git a/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx b/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx index a0cb383bb8..5f89fe5477 100644 --- a/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx +++ b/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx @@ -24,7 +24,6 @@ export function BulkActionMenu({ children, selectedCount }: BulkActionMenuProps) BulkActionMenu.Button = (props: Omit) => ( - - - ))} -
- ))} +
+ {variants.map((variant) => ( + <> + + + + ))} +
))}
diff --git a/libs/ui/lib/button/Button.tsx b/libs/ui/lib/button/Button.tsx index 2ceec3a0ab..47051a1cd7 100644 --- a/libs/ui/lib/button/Button.tsx +++ b/libs/ui/lib/button/Button.tsx @@ -8,12 +8,10 @@ import { assertUnreachable } from '@oxide/util' import './button.css' export const buttonSizes = ['sm', 'icon', 'base'] as const -export const variants = ['default', 'ghost', 'link'] as const -export const colors = ['primary', 'secondary', 'destructive', 'notice'] as const +export const variants = ['primary', 'secondary', 'ghost', 'danger'] as const export type ButtonSize = typeof buttonSizes[number] export type Variant = typeof variants[number] -export type Color = typeof colors[number] const sizeStyle: Record = { sm: 'h-8 px-3 text-mono-sm svg:w-4', @@ -22,44 +20,23 @@ const sizeStyle: Record = { base: 'h-10 px-3 text-mono-md svg:w-5', } -const colorStyle = (variant: Variant, color: Color): string => { - const style: `${Variant} ${Color}` = `${variant} ${color}` - switch (style) { - case 'default primary': +const colorStyle = (variant: Variant): string => { + switch (variant) { + case 'primary': return 'btn-primary' - case 'default secondary': - return 'btn-secondary-solid' - case 'default destructive': - return 'btn-destructive' - case 'default notice': - return 'btn-notice' - case 'ghost primary': - return 'btn-primary-ghost' - case 'ghost secondary': + case 'secondary': return 'btn-secondary' - case 'ghost destructive': - return 'btn-destructive-ghost' - case 'ghost notice': - return 'btn-notice-ghost' - case 'link primary': - return 'btn-primary-link' - case 'link secondary': - return 'btn-secondary-link' - case 'link notice': - return 'btn-notice-link' - case 'link destructive': - return 'btn-destructive-link' + case 'ghost': + return 'btn-ghost' + case 'danger': + return 'btn-danger' default: - assertUnreachable(`Invalid button state ${style}`, style) + assertUnreachable(`Invalid button state ${variant}`, variant) } } -const ringStyle = (color: Color) => - color === 'destructive' - ? 'focus:ring-destructive-secondary' - : color === 'notice' - ? 'focus:ring-notice-secondary' - : 'focus:ring-accent-secondary' +const ringStyle = (variant: Variant) => + variant === 'danger' ? 'focus:ring-destructive-secondary' : 'focus:ring-accent-secondary' const baseStyle = ` rounded inline-flex items-center justify-center align-top @@ -69,7 +46,6 @@ const baseStyle = ` type ButtonStyleProps = { size?: ButtonSize variant?: Variant - color?: Color } export type ButtonProps = Pick< @@ -91,16 +67,15 @@ export type ButtonProps = Pick< export const buttonStyle = ({ size = 'base', - variant = 'default', - color = 'primary', + variant = 'primary', }: ButtonStyleProps = {}) => { return cn( 'ox-button', `variant-${variant}`, baseStyle, sizeStyle[size], - ringStyle(color), - colorStyle(variant, color) + ringStyle(variant), + colorStyle(variant) ) } @@ -123,7 +98,6 @@ export const Button = forwardRef( children, size, variant, - color, className, loading, innerClassName, @@ -139,7 +113,7 @@ export const Button = forwardRef( return ( }>
- - -
{error?.error.message}
+ {error?.error.message && ( + <> + +
{error.error.message}
+ + )} ) } From e152d04a601d78edaaf41ecf346999fafeaa9705 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Thu, 10 Nov 2022 16:55:06 -0600 Subject: [PATCH 3/5] fix topbar menu button --- libs/ui/lib/button/Button.tsx | 29 +++++++++-------------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/libs/ui/lib/button/Button.tsx b/libs/ui/lib/button/Button.tsx index 47051a1cd7..c6572e7e94 100644 --- a/libs/ui/lib/button/Button.tsx +++ b/libs/ui/lib/button/Button.tsx @@ -48,22 +48,11 @@ type ButtonStyleProps = { variant?: Variant } -export type ButtonProps = Pick< - React.ComponentProps<'button'>, - | 'className' - | 'onClick' - | 'aria-disabled' - | 'disabled' - | 'children' - | 'type' - | 'title' - | 'form' -> & - ButtonStyleProps & { - innerClassName?: string - loading?: boolean - disabledReason?: string - } +export interface ButtonProps extends React.ComponentProps<'button'>, ButtonStyleProps { + innerClassName?: string + loading?: boolean + disabledReason?: string +} export const buttonStyle = ({ size = 'base', @@ -105,8 +94,9 @@ export const Button = forwardRef( onClick, 'aria-disabled': ariaDisabled, disabledReason, - form, - title, + // needs to be a spread because we pass this component to Reach + // with the `as` prop and get passed arbitrary ) diff --git a/libs/ui/styles/themes/selection.css b/libs/ui/styles/themes/selection.css index 978e53988c..fa31bf0cfe 100644 --- a/libs/ui/styles/themes/selection.css +++ b/libs/ui/styles/themes/selection.css @@ -16,7 +16,7 @@ & .ox-badge:not(.variant-ghost), & .ox-tag, - & .ox-button:not(.variant-ghost):not(.variant-link), + & .ox-button:not(.btn-ghost), & .ox-avatar, & .ox-radio-card { --content-accent: var(--content-inverse); diff --git a/libs/util/index.ts b/libs/util/index.ts index 571c642dc4..64e03bc917 100644 --- a/libs/util/index.ts +++ b/libs/util/index.ts @@ -2,6 +2,5 @@ export * from './classed' export * from './str' export * from './object' export * from './children' -export * from './unreachable' export * from './array' export * from './units' diff --git a/libs/util/unreachable.ts b/libs/util/unreachable.ts deleted file mode 100644 index 66f0b8eaaf..0000000000 --- a/libs/util/unreachable.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function assertUnreachable(message: string, ..._: never[]): never { - throw new Error(message) -} From 38103b5b4a46e79566a999ccc765b52719c63c9f Mon Sep 17 00:00:00 2001 From: David Crespo Date: Thu, 10 Nov 2022 17:21:11 -0600 Subject: [PATCH 5/5] put ref prop back on ButtonProps --- libs/ui/lib/button/Button.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/ui/lib/button/Button.tsx b/libs/ui/lib/button/Button.tsx index 40f146547d..9e68e813aa 100644 --- a/libs/ui/lib/button/Button.tsx +++ b/libs/ui/lib/button/Button.tsx @@ -48,7 +48,9 @@ const noop: MouseEventHandler = (e) => { e.preventDefault() } -export interface ButtonProps extends React.ComponentProps<'button'>, ButtonStyleProps { +export interface ButtonProps + extends React.ComponentPropsWithRef<'button'>, + ButtonStyleProps { innerClassName?: string loading?: boolean disabledReason?: string