diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx index 4df49d6066c..03c9373946a 100644 --- a/packages/@react-spectrum/s2/src/Accordion.tsx +++ b/packages/@react-spectrum/s2/src/Accordion.tsx @@ -10,26 +10,23 @@ * governing permissions and limitations under the License. */ -import {ContextValue, DisclosureGroup, DisclosureGroupProps, SlotProps} from 'react-aria-components'; +import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared'; +import {ContextValue, DisclosureGroup, RenderProps, SlotProps} from 'react-aria-components'; import { Disclosure, DisclosureContext, DisclosureHeader, DisclosurePanel, - DisclosurePanelProps, - DisclosureProps, - DisclosureTitle, - DisclosureTitleProps + DisclosureTitle } from './Disclosure'; -import {DOMProps, DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared'; -import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' }; +import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' }; import React, {createContext, forwardRef, ReactNode} from 'react'; import {style} from '../style' with { type: 'macro' }; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; -export interface AccordionProps extends Omit, UnsafeStyles, DOMProps, SlotProps { - /** The disclosure elements in the accordion. */ +export interface AccordionProps extends UnsafeStyles, DOMProps, SlotProps { + /** The accordion item elements in the accordion. */ children: React.ReactNode, /** Spectrum-defined styles, returned by the `style()` macro. */ styles?: StylesPropWithHeight, @@ -39,12 +36,22 @@ export interface AccordionProps extends Omit, + /** The initial expanded keys in the accordion (uncontrolled). */ + defaultExpandedKeys?: Iterable, + /** Handler that is called when accordion items are expanded or collapsed. */ + onExpandedChange?: (keys: Set) => any } const accordion = style({ @@ -80,10 +87,68 @@ export const Accordion = forwardRef(function Accordion(props: AccordionProps, re ); }); -export interface AccordionItemProps extends DisclosureProps { - /** The contents of the accordion, consisting of a AccordionItemTitle and AccordionItemPanel. */ - children: ReactNode +export interface AccordionItemState { + /** Whether the accordion item is currently expanded. */ + readonly isExpanded: boolean, + /** Sets whether the accordion item is expanded. */ + setExpanded(isExpanded: boolean): void, + /** Expand the accordion item. */ + expand(): void, + /** Collapse the accordion item. */ + collapse(): void, + /** Toggles the accordion item's visibility. */ + toggle(): void } + +export interface AccordionItemRenderProps { + /** + * Whether the accordion item is expanded. + * @selector [data-expanded] + */ + isExpanded: boolean, + /** + * Whether the accordion item has keyboard focus. + * @selector [data-focus-visible-within] + */ + isFocusVisibleWithin: boolean, + /** + * Whether the accordion item is disabled. + * @selector [data-disabled] + */ + isDisabled: boolean, + /** + * State of the accordion item. + */ + state: AccordionItemState +} + +export interface AccordionItemProps extends Omit, 'className' | 'style'>, SlotProps, StyleProps { + /** + * The size of the accordion item. + * @default 'M' + */ + size?: 'S' | 'M' | 'L' | 'XL', + /** + * The amount of space between the accordion item. + * @default 'regular' + */ + density?: 'compact' | 'regular' | 'spacious', + /** Whether the accordion item should be displayed with a quiet style. */ + isQuiet?: boolean, + /** The contents of the accordion item, consisting of a accordion item title and accordion item panel. */ + children: ReactNode, + /** An id for the accordion item, matching the id used in `expandedKeys`. */ + id?: Key, + /** Whether the accordion item is disabled. */ + isDisabled?: boolean, + /** Handler that is called when the accordion item's expanded state changes. */ + onExpandedChange?: (isExpanded: boolean) => void, + /** Whether the accordion item is expanded (controlled). */ + isExpanded?: boolean, + /** Whether the accordion item is expanded by default (uncontrolled). */ + defaultExpanded?: boolean +} + /** * A accordion item is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content. */ @@ -91,7 +156,16 @@ export const AccordionItem = forwardRef(function AccordionItem(props: AccordionI return ; }); -export interface AccordionItemTitleProps extends DisclosureTitleProps {} +export interface AccordionItemTitleProps extends UnsafeStyles, DOMProps { + /** The heading level of the accordion item title. + * + * @default 3 + */ + level?: number, + /** The contents of the accordion item title. */ + children: React.ReactNode +} + /** * An accordion item title consisting of a heading and a trigger button to expand/collapse the panel. */ @@ -100,8 +174,10 @@ export const AccordionItemTitle = forwardRef(function AccordionItemTitle(props: }); export interface AccordionItemHeaderProps extends UnsafeStyles, DOMProps { + /** The contents of the accordion item header. */ children: React.ReactNode } + /** * A wrapper element for the accordion item title that can contain other elements not part of the trigger. */ @@ -109,7 +185,16 @@ export const AccordionItemHeader = forwardRef(function AccordionItemHeader(props return ; }); -export interface AccordionItemPanelProps extends DisclosurePanelProps {} +export interface AccordionItemPanelProps extends UnsafeStyles, DOMProps, AriaLabelingProps { + /** The contents of the accordion item panel. */ + children: React.ReactNode, + /** + * The accessibility role for the accordion item panel. + * @default 'group' + */ + role?: 'group' | 'region' +} + /** * An accordion item panel is a collapsible section of content that is hidden until the accordion item is expanded. */ diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx index acd77cb9721..5db089a9bfa 100644 --- a/packages/@react-spectrum/s2/src/Button.tsx +++ b/packages/@react-spectrum/s2/src/Button.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {baseColor, focusRing, fontRelative, lightDark, linearGradient, style} from '../style' with {type: 'macro'}; +import {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'}; import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components'; import {centerBaseline} from './CenterBaseline'; import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'}; @@ -19,6 +19,7 @@ import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types import {IconContext} from './Icon'; // @ts-ignore import intlMessages from '../intl/*.json'; +import {linearGradient} from '../style/spectrum-theme' with {type: 'macro'}; import {pressScale} from './pressScale'; import {ProgressCircle} from './ProgressCircle'; import {SkeletonContext} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx index 9f5ea1cfb9d..0f336cd54d2 100644 --- a/packages/@react-spectrum/s2/src/ComboBox.tsx +++ b/packages/@react-spectrum/s2/src/ComboBox.tsx @@ -36,7 +36,7 @@ import { import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared'; import {AvatarContext} from './Avatar'; import {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections'; -import {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'}; +import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'}; import {centerBaseline} from './CenterBaseline'; import {centerPadding, control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import { @@ -51,6 +51,7 @@ import CheckmarkIcon from '../ui-icons/Checkmark'; import ChevronIcon from '../ui-icons/Chevron'; import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {createFocusableRef} from '@react-spectrum/utils'; +import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'}; import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field'; import {FormContext, useFormProps} from './Form'; import {forwardRefType} from './types'; diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx index 4871a6050a6..b2e52299d2d 100644 --- a/packages/@react-spectrum/s2/src/Menu.tsx +++ b/packages/@react-spectrum/s2/src/Menu.tsx @@ -28,7 +28,7 @@ import { Separator, SeparatorProps } from 'react-aria-components'; -import {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'}; +import {baseColor, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'}; import {box, iconStyles} from './Checkbox'; import {centerBaseline} from './CenterBaseline'; import {centerPadding, control, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; @@ -37,6 +37,7 @@ import ChevronRightIcon from '../ui-icons/Chevron'; import {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react'; import {divider} from './Divider'; import {DOMRef, DOMRefValue, GlobalDOMAttributes, PressEvent} from '@react-types/shared'; +import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'}; import {forwardRefType} from './types'; import {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content'; import {IconContext} from './Icon'; // chevron right removed?? diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx index bc93a178e33..10ffb7bffab 100644 --- a/packages/@react-spectrum/s2/src/Picker.tsx +++ b/packages/@react-spectrum/s2/src/Picker.tsx @@ -34,7 +34,7 @@ import { } from 'react-aria-components'; import {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared'; import {AvatarContext} from './Avatar'; -import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'}; +import {baseColor, focusRing, style} from '../style' with {type: 'macro'}; import {box, iconStyles as checkboxIconStyles} from './Checkbox'; import {centerBaseline} from './CenterBaseline'; import { @@ -57,6 +57,7 @@ import { listboxItem, LOADER_ROW_HEIGHTS } from './ComboBox'; +import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'}; import { FieldErrorIcon, FieldLabel, diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx index 3d059106abe..0d5faf4b7c3 100644 --- a/packages/@react-spectrum/s2/src/TabsPicker.tsx +++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx @@ -23,7 +23,7 @@ import { Provider, SelectValue } from 'react-aria-components'; -import {baseColor, edgeToText, focusRing, size, style} from '../style' with {type: 'macro'}; +import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'}; import {centerBaseline} from './CenterBaseline'; import { checkmark, @@ -37,6 +37,7 @@ import { import CheckmarkIcon from '../ui-icons/Checkmark'; import ChevronIcon from '../ui-icons/Chevron'; import {controlFont, fieldInput, StyleProps} from './style-utils' with {type: 'macro'}; +import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'}; import { FieldLabel } from './Field'; diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts index 2d495809dd2..41aaa06b79d 100644 --- a/packages/@react-spectrum/s2/src/index.ts +++ b/packages/@react-spectrum/s2/src/index.ts @@ -94,7 +94,7 @@ export {pressScale} from './pressScale'; export {Autocomplete, Collection, FileTrigger, parseColor, useLocale} from 'react-aria-components'; export {useListData, useTreeData, useAsyncList} from 'react-stately'; -export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps} from './Accordion'; +export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps, AccordionItemState, AccordionItemRenderProps} from './Accordion'; export type {ActionBarProps} from './ActionBar'; export type {ActionButtonProps} from './ActionButton'; export type {ActionButtonGroupProps} from './ActionButtonGroup'; diff --git a/packages/@react-spectrum/s2/style/index.ts b/packages/@react-spectrum/s2/style/index.ts index 7ca5b24f0b4..41e4be388d7 100644 --- a/packages/@react-spectrum/s2/style/index.ts +++ b/packages/@react-spectrum/s2/style/index.ts @@ -15,7 +15,7 @@ import {Inset, fontRelative as internalFontRelative, space as internalSpace, Spa import type {MacroContext} from '@parcel/macros'; import {StyleString} from './types'; -export {baseColor, color, edgeToText, lightDark, linearGradient, colorMix, size, style} from './spectrum-theme'; +export {baseColor, color, lightDark, colorMix, size, style} from './spectrum-theme'; export type {StyleString} from './types'; // Wrap these functions in arbitrary value syntax when called from the outside. diff --git a/packages/dev/s2-docs/pages/s2/ActionButton.mdx b/packages/dev/s2-docs/pages/s2/ActionButton.mdx index fd8d70719c6..5d33be3e19b 100644 --- a/packages/dev/s2-docs/pages/s2/ActionButton.mdx +++ b/packages/dev/s2-docs/pages/s2/ActionButton.mdx @@ -74,7 +74,7 @@ function PendingButton() { ## API -```tsx links={{ActionButton: '#actionbutton', Avatar: 'Avatar', Icon: 'icons'}} +```tsx links={{ActionButton: '#actionbutton', Avatar: 'Avatar', Icon: 'icons', Text: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span'}} or diff --git a/packages/dev/s2-docs/pages/s2/Button.mdx b/packages/dev/s2-docs/pages/s2/Button.mdx index c67a5ba7f61..f1b9ae062f1 100644 --- a/packages/dev/s2-docs/pages/s2/Button.mdx +++ b/packages/dev/s2-docs/pages/s2/Button.mdx @@ -74,7 +74,7 @@ function PendingButton() { ## API -```tsx links={{Button: '#button', Icon: 'icons'}} +```tsx links={{Button: '#button', Icon: 'icons', Text: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span'}}