From e1c0e5a6af1596b381892f61c10ceacd3676d307 Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Mon, 5 Aug 2024 22:06:28 -0700 Subject: [PATCH 1/5] Make priority a prop --- packages/ui/src/Button/index.tsx | 6 +-- packages/ui/src/ButtonGroup/index.stories.tsx | 1 + packages/ui/src/ButtonGroup/index.tsx | 49 ++++++++++++------- .../ui/src/utils/ButtonPriorityContext.ts | 14 ------ 4 files changed, 36 insertions(+), 34 deletions(-) delete mode 100644 packages/ui/src/utils/ButtonPriorityContext.ts diff --git a/packages/ui/src/Button/index.tsx b/packages/ui/src/Button/index.tsx index 543c08bb03..403d0b411a 100644 --- a/packages/ui/src/Button/index.tsx +++ b/packages/ui/src/Button/index.tsx @@ -1,11 +1,10 @@ -import { MouseEventHandler, useContext } from 'react'; +import { MouseEventHandler } from 'react'; import styled, { css, DefaultTheme } from 'styled-components'; import { asTransientProps } from '../utils/asTransientProps'; import { Priority, ActionType, focusOutline, overlays, buttonBase } from '../utils/button'; import { getBackgroundColor } from './helpers'; import { button } from '../utils/typography'; import { LucideIcon } from 'lucide-react'; -import { ButtonPriorityContext } from '../utils/ButtonPriorityContext'; import { Density } from '../types/Density'; import { useDensity } from '../hooks/useDensity'; @@ -108,6 +107,7 @@ interface BaseButtonProps { actionType?: ActionType; disabled?: boolean; onClick?: MouseEventHandler; + priority?: Priority; } interface IconOnlyProps { @@ -167,8 +167,8 @@ export const Button = ({ iconOnly, actionType = 'default', type = 'button', + priority = 'primary', }: ButtonProps) => { - const priority = useContext(ButtonPriorityContext); const density = useDensity(); return ( diff --git a/packages/ui/src/ButtonGroup/index.stories.tsx b/packages/ui/src/ButtonGroup/index.stories.tsx index c1814bfaae..0d29f3eff4 100644 --- a/packages/ui/src/ButtonGroup/index.stories.tsx +++ b/packages/ui/src/ButtonGroup/index.stories.tsx @@ -19,6 +19,7 @@ export const Basic: Story = { actionType: 'default', iconOnly: false, column: false, + hasPrimaryButton: true, buttons: [ { label: 'Delegate', diff --git a/packages/ui/src/ButtonGroup/index.tsx b/packages/ui/src/ButtonGroup/index.tsx index 6c45f5cea8..99c1f60d89 100644 --- a/packages/ui/src/ButtonGroup/index.tsx +++ b/packages/ui/src/ButtonGroup/index.tsx @@ -4,7 +4,6 @@ import { ActionType } from '../utils/button'; import { Button } from '../Button'; import styled from 'styled-components'; import { media } from '../utils/media'; -import { ButtonPriorityContext } from '../utils/ButtonPriorityContext'; import { Density } from '../types/Density'; import { useDensity } from '../hooks/useDensity'; @@ -56,6 +55,14 @@ export interface ButtonGroupProps { * narrow layout width, such as a dialog). In those cases, set this to `true`. */ column?: boolean; + /** + * Often, a button group should have a primary button for the action that the + * user is most likely to take. In those cases, pass `hasPrimaryButton` to + * ``. When you do, the first button will have a `priority` of + * `primary`, while the rest will be `secondary`. (Note that there can only be + * one primary button in a button group.) + */ + hasPrimaryButton?: boolean; } const isIconOnly = (props: ButtonGroupProps): props is ButtonGroupProps => @@ -68,13 +75,14 @@ const isIconOnly = (props: ButtonGroupProps): props is ButtonGroupProps * When rendering multiple Penumbra UI buttons together, always use a * `` rather than individual ` - - + + + ))} {!isIconOnly(props) && props.buttons.map((button, index) => ( - - - - - + + + ))} ); diff --git a/packages/ui/src/utils/ButtonPriorityContext.ts b/packages/ui/src/utils/ButtonPriorityContext.ts deleted file mode 100644 index d66fd30a10..0000000000 --- a/packages/ui/src/utils/ButtonPriorityContext.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { createContext } from 'react'; -import { Priority } from './button'; - -/** - * For internal Penumbra UI library use only. ` + + )} From 4463753bf8237d9daaa13a5178cb1013e9c78feb Mon Sep 17 00:00:00 2001 From: Jesse Pinho Date: Mon, 5 Aug 2024 22:23:28 -0700 Subject: [PATCH 5/5] Remove unused vars --- packages/ui/src/Dialog/index.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/ui/src/Dialog/index.tsx b/packages/ui/src/Dialog/index.tsx index 541e77a99f..b5a47ed3b0 100644 --- a/packages/ui/src/Dialog/index.tsx +++ b/packages/ui/src/Dialog/index.tsx @@ -2,7 +2,6 @@ import { createContext, ReactNode, useContext } from 'react'; import styled, { keyframes } from 'styled-components'; import * as RadixDialog from '@radix-ui/react-dialog'; import { Text } from '../Text'; -import { Icon } from '../Icon'; import { X } from 'lucide-react'; import { ButtonGroup, ButtonGroupProps } from '../ButtonGroup'; import { Button } from '../Button'; @@ -188,13 +187,6 @@ const DialogContext = createContext<{ showCloseButton: boolean }>({ showCloseButton: true, }); -const CloseButton = styled.button` - appearance: none; - background: none; - border: none; - color: ${props => props.theme.color.text.primary}; -`; - export interface DialogContentProps { children?: ReactNode; title: string;