diff --git a/src/breadcrumbs/Breadcrumbs.tsx b/src/breadcrumbs/Breadcrumbs.tsx index 1b1135d6..122e302d 100644 --- a/src/breadcrumbs/Breadcrumbs.tsx +++ b/src/breadcrumbs/Breadcrumbs.tsx @@ -6,17 +6,49 @@ import { FolderOutline } from '../icon/Icons'; import { Menu } from '../menu/Menu'; import { MenuTrigger } from '../menu/MenuTrigger'; import React, { Key, ReactElement, useCallback, useRef } from 'react'; -import { SpectrumBreadcrumbsProps } from '@react-types/breadcrumbs'; import { useBreadcrumbs } from '@react-aria/breadcrumbs'; import { useLayoutEffect, useValueEffect } from '@react-aria/utils'; import { useProviderProps } from '../provider'; import { useResizeObserver } from '@react-aria/utils'; import { css } from '@emotion/react'; import theme from '../theme'; +import { AriaLabelingProps, DOMProps, ItemProps, StyleProps } from '../types'; const MIN_VISIBLE_ITEMS = 1; const MAX_VISIBLE_ITEMS = 4; +export interface BreadcrumbsProps {} +export interface AriaBreadcrumbsProps + extends BreadcrumbsProps, + DOMProps, + AriaLabelingProps {} + +export interface ArizeBreadcrumbsProps + extends AriaBreadcrumbsProps, + StyleProps { + /** The breadcrumb items. */ + children: ReactElement> | ReactElement>[]; + /** Whether the Breadcrumbs are disabled. */ + isDisabled?: boolean; + /** Called when an item is acted upon (usually selection via press). */ + onAction?: (key: Key) => void; + /** + * Size of the Breadcrumbs including spacing and layout. + * @default 'L' + */ + size?: 'S' | 'M' | 'L'; + /** Whether to always show the root item if the items are collapsed. */ + showRoot?: boolean; + /** + * Whether to place the last Breadcrumb item onto a new line. + */ + isMultiline?: boolean; + /** + * Whether to autoFocus the last Breadcrumb item when the Breadcrumbs render. + */ + autoFocusCurrent?: boolean; +} + const ulCSS = css` flex-wrap: nowrap; flex: 1 0; @@ -55,7 +87,7 @@ const liCSS = css` } `; -function Breadcrumbs(props: SpectrumBreadcrumbsProps, ref: DOMRef) { +function Breadcrumbs(props: ArizeBreadcrumbsProps, ref: DOMRef) { props = useProviderProps(props); let { size = 'L', diff --git a/src/field/HelpText.tsx b/src/field/HelpText.tsx index 3b0c4832..e63132e0 100644 --- a/src/field/HelpText.tsx +++ b/src/field/HelpText.tsx @@ -1,4 +1,3 @@ -// import AlertMedium from '@spectrum-icons/ui/AlertMedium'; import { classNames, useDOMRef } from '../utils'; import { DOMRef, HelpTextProps, Validation } from '../types'; import React, { HTMLAttributes } from 'react'; diff --git a/src/layout/Flex.tsx b/src/layout/Flex.tsx index 6d31c40a..96f2f177 100644 --- a/src/layout/Flex.tsx +++ b/src/layout/Flex.tsx @@ -98,7 +98,7 @@ function flexWrapValue(value: boolean | 'wrap' | 'nowrap') { } /** - * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap + * A layout container using flexbox. Provides AC dimension values, and supports the gap * property to define consistent spacing between items. */ const _Flex = forwardRef(Flex); diff --git a/src/switch/styles.ts b/src/switch/styles.ts index c4d68e0f..6f6d7834 100644 --- a/src/switch/styles.ts +++ b/src/switch/styles.ts @@ -2,9 +2,6 @@ import { css } from '@emotion/react'; import theme from '../theme'; export const switchCSS = css` - --ac-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); --ac-switch-label-color-disabled: ${theme.textColors.white50}; --ac-switch-background-color: ${theme.colors.gray300}; diff --git a/src/types/menu.ts b/src/types/menu.ts index e0d37b6f..14dcbd02 100644 --- a/src/types/menu.ts +++ b/src/types/menu.ts @@ -63,7 +63,8 @@ export interface AriaMenuProps extends MenuProps, DOMProps, AriaLabelingProps {} -export interface SpectrumMenuProps extends AriaMenuProps, StyleProps {} + +export interface ArizeMenuProps extends AriaMenuProps, StyleProps {} export interface ActionMenuProps extends CollectionBase, @@ -88,7 +89,7 @@ export interface ActionMenuProps shouldFlip?: boolean; /** Whether the button is disabled. */ isDisabled?: boolean; - /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */ + /** Whether the button should be displayed with a quiet style. */ isQuiet?: boolean; /** Whether the element should receive focus on render. */ autoFocus?: boolean; diff --git a/src/utils/styleProps.ts b/src/utils/styleProps.ts index ae130646..954046be 100644 --- a/src/utils/styleProps.ts +++ b/src/utils/styleProps.ts @@ -301,7 +301,7 @@ export function useStyleProps( if (otherProps.className) { console.warn( 'The className prop is unsafe and is unsupported in Arize Components. ' + - 'Please use style props with Spectrum variables, or UNSAFE_className if you absolutely must do something custom. ' + + 'Please use style props with AC variables, or UNSAFE_className if you absolutely must do something custom. ' + 'Note that this may break in future versions due to DOM structure changes.' ); } @@ -310,7 +310,7 @@ export function useStyleProps( if (otherProps.style) { console.warn( 'The style prop is unsafe and is unsupported in React Arize Components. ' + - 'Please use style props with Spectrum variables, or UNSAFE_style if you absolutely must do something custom. ' + + 'Please use style props with AC variables, or UNSAFE_style if you absolutely must do something custom. ' + 'Note that this may break in future versions due to DOM structure changes.' ); }