Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v35: Remove type aliases for ActionList #1937

Merged
merged 3 commits into from
Mar 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/ActionList/Description.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {SxProp, merge} from '../sx'
import Truncate from '../Truncate'
import {Slot, ItemContext} from './Item'

export type DescriptionProps = {
export type ActionListDescriptionProps = {
/**
* Secondary text style variations.
*
Expand All @@ -14,7 +14,7 @@ export type DescriptionProps = {
variant?: 'inline' | 'block'
} & SxProp

export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
export const Description: React.FC<ActionListDescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
const styles = {
fontSize: 0,
lineHeight: '16px',
Expand Down
12 changes: 6 additions & 6 deletions src/ActionList/Group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React from 'react'
import {useSSRSafeId} from '@react-aria/ssr'
import Box from '../Box'
import {SxProp} from '../sx'
import {ListContext, ListProps} from './List'
import {ListContext, ActionListProps} from './List'
import {AriaRole} from '../utils/types'

export type GroupProps = {
export type ActionListGroupProps = {
/**
* Style variations. Usage is discretionary.
*
Expand All @@ -29,13 +29,13 @@ export type GroupProps = {
/**
* Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
*/
selectionVariant?: ListProps['selectionVariant'] | false
selectionVariant?: ActionListProps['selectionVariant'] | false
}

type ContextProps = Pick<GroupProps, 'selectionVariant'>
type ContextProps = Pick<ActionListGroupProps, 'selectionVariant'>
export const GroupContext = React.createContext<ContextProps>({})

export const Group: React.FC<GroupProps> = ({
export const Group: React.FC<ActionListGroupProps> = ({
title,
variant = 'subtle',
auxiliaryText,
Expand Down Expand Up @@ -73,7 +73,7 @@ export const Group: React.FC<GroupProps> = ({
)
}

export type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
export type HeaderProps = Pick<ActionListGroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
labelId: string
}

Expand Down
21 changes: 12 additions & 9 deletions src/ActionList/Item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,15 @@ import Box, {BoxProps} from '../Box'
import sx, {SxProp, merge} from '../sx'
import createSlots from '../utils/create-slots'
import {AriaRole} from '../utils/types'
import {ListContext, ListProps} from './List'
import {GroupContext, GroupProps} from './Group'
import {ListContext, ActionListProps} from './List'
import {GroupContext, ActionListGroupProps} from './Group'
import {ActionListContainerContext} from './ActionListContainerContext'
import {Selection} from './Selection'

export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
export const getVariantStyles = (
variant: ActionListItemProps['variant'],
disabled: ActionListItemProps['disabled']
) => {
if (disabled) {
return {
color: 'primer.fg.disabled',
Expand All @@ -39,7 +42,7 @@ export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemPr
}
}

export type ItemProps = {
export type ActionListItemProps = {
/**
* Primary content for an Item
*/
Expand Down Expand Up @@ -79,15 +82,15 @@ export type ItemProps = {

const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
export {Slot}
export type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
export type ItemContext = Pick<ActionListItemProps, 'variant' | 'disabled'> & {
inlineDescriptionId: string
blockDescriptionId: string
}

const LiBox = styled.li<SxProp>(sx)
export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale

export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
(
{
variant = 'default',
Expand All @@ -106,12 +109,12 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)

let selectionVariant: ListProps['selectionVariant'] | GroupProps['selectionVariant']
let selectionVariant: ActionListProps['selectionVariant'] | ActionListGroupProps['selectionVariant']
if (typeof groupSelectionVariant !== 'undefined') selectionVariant = groupSelectionVariant
else selectionVariant = listSelectionVariant

/** Infer item role based on the container */
let itemRole: ItemProps['role']
let itemRole: ActionListItemProps['role']
if (container === 'ActionMenu' || container === 'DropdownMenu') {
if (selectionVariant === 'single') itemRole = 'menuitemradio'
else if (selectionVariant === 'multiple') itemRole = 'menuitemcheckbox'
Expand Down Expand Up @@ -257,7 +260,7 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
</Slots>
)
}
) as PolymorphicForwardRefComponent<'li', ItemProps>
) as PolymorphicForwardRefComponent<'li', ActionListItemProps>

Item.displayName = 'ActionList.Item'

Expand Down
6 changes: 3 additions & 3 deletions src/ActionList/LinkItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
import Link from '../Link'
import {SxProp, merge} from '../sx'
import {Item, ItemProps} from './Item'
import {Item, ActionListItemProps} from './Item'

// adopted from React.AnchorHTMLAttributes
type LinkProps = {
Expand All @@ -18,7 +18,7 @@ type LinkProps = {
}

// LinkItem does not support selected, variants, etc.
type LinkItemProps = Pick<ItemProps, 'children' | 'sx'> & LinkProps
export type ActionListLinkItemProps = Pick<ActionListItemProps, 'children' | 'sx'> & LinkProps

export const LinkItem = React.forwardRef(({sx = {}, as: Component, ...props}, forwardedRef) => {
const styles = {
Expand Down Expand Up @@ -46,4 +46,4 @@ export const LinkItem = React.forwardRef(({sx = {}, as: Component, ...props}, fo
{props.children}
</Item>
)
}) as PolymorphicForwardRefComponent<'a', LinkItemProps>
}) as PolymorphicForwardRefComponent<'a', ActionListLinkItemProps>
8 changes: 4 additions & 4 deletions src/ActionList/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import sx, {SxProp, merge} from '../sx'
import {AriaRole} from '../utils/types'
import {ActionListContainerContext} from './ActionListContainerContext'

export type ListProps = {
export type ActionListProps = {
/**
* `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
*/
Expand All @@ -24,12 +24,12 @@ export type ListProps = {
role?: AriaRole
} & SxProp

type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'>
type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'>
export const ListContext = React.createContext<ContextProps>({})

const ListBox = styled.ul<SxProp>(sx)

export const List = React.forwardRef<HTMLUListElement, ListProps>(
export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
(
{variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props},
forwardedRef
Expand Down Expand Up @@ -68,6 +68,6 @@ export const List = React.forwardRef<HTMLUListElement, ListProps>(
</ListBox>
)
}
) as PolymorphicForwardRefComponent<'ul', ListProps>
) as PolymorphicForwardRefComponent<'ul', ActionListProps>

List.displayName = 'ActionList'
10 changes: 5 additions & 5 deletions src/ActionList/Selection.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from 'react'
import {CheckIcon} from '@primer/octicons-react'
import {ListContext, ListProps} from './List'
import {GroupContext, GroupProps} from './Group'
import {ItemProps} from './Item'
import {ListContext, ActionListProps} from './List'
import {GroupContext, ActionListGroupProps} from './Group'
import {ActionListItemProps} from './Item'
import {LeadingVisualContainer} from './Visuals'

type SelectionProps = Pick<ItemProps, 'selected'>
type SelectionProps = Pick<ActionListItemProps, 'selected'>
export const Selection: React.FC<SelectionProps> = ({selected}) => {
const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)

/** selectionVariant in Group can override the selectionVariant in List root */
/** fallback to selectionVariant from container menu if any (ActionMenu, SelectPanel ) */
let selectionVariant: ListProps['selectionVariant'] | GroupProps['selectionVariant']
let selectionVariant: ActionListProps['selectionVariant'] | ActionListGroupProps['selectionVariant']
if (typeof groupSelectionVariant !== 'undefined') selectionVariant = groupSelectionVariant
else selectionVariant = listSelectionVariant

Expand Down
4 changes: 2 additions & 2 deletions src/ActionList/Visuals.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props
)
}

export type LeadingVisualProps = VisualProps
export type ActionListLeadingVisualProps = VisualProps
export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
return (
<Slot name="LeadingVisual">
Expand All @@ -50,7 +50,7 @@ export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
)
}

export type TrailingVisualProps = VisualProps
export type ActionListTrailingVisualProps = VisualProps
export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
return (
<Slot name="TrailingVisual">
Expand Down
14 changes: 6 additions & 8 deletions src/ActionList/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,12 @@ import {Divider} from './Divider'
import {Description} from './Description'
import {LeadingVisual, TrailingVisual} from './Visuals'

export type {ListProps as ActionListProps} from './List'
export type {GroupProps as ActionListGroupProps} from './Group'
export type {ItemProps as ActionListItemProps} from './Item'
export type {DescriptionProps as ActionListDescriptionProps} from './Description'
export type {
LeadingVisualProps as ActionListLeadingVisualProps,
TrailingVisualProps as ActionListTrailingVisualProps
} from './Visuals'
export type {ActionListProps} from './List'
export type {ActionListGroupProps} from './Group'
export type {ActionListItemProps} from './Item'
export type {ActionListLinkItemProps} from './LinkItem'
export type {ActionListDescriptionProps} from './Description'
export type {ActionListLeadingVisualProps, ActionListTrailingVisualProps} from './Visuals'

/**
* Collection of list-related components.
Expand Down
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export type {
ActionListProps,
ActionListGroupProps,
ActionListItemProps,
ActionListLinkItemProps,
ActionListDescriptionProps,
ActionListLeadingVisualProps,
ActionListTrailingVisualProps
Expand Down