diff --git a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx index 8b2cc5c3e6d..3db86eb4db8 100644 --- a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx @@ -37,18 +37,18 @@ export const Example = { Empire -
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.
Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.
-
+
Alea jacta est.
diff --git a/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx new file mode 100644 index 00000000000..580a3810d4a --- /dev/null +++ b/packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx @@ -0,0 +1,252 @@ +/* + * Copyright 2024 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +import {ActionMenu, Content, Heading, IllustratedMessage, Link, MenuItem, Text, TreeView, TreeViewItem} from '../src'; +import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg'; +import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg'; +import FileTxt from '../s2wf-icons/S2_Icon_FileText_20_N.svg'; +import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg'; +import FolderOpen from '../spectrum-illustrations/linear/FolderOpen'; +import type {Meta} from '@storybook/react'; + +const meta: Meta = { + component: TreeView, + parameters: { + chromaticProvider: {disableAnimations: true} + }, + title: 'S2 Chromatic/TreeView' +}; + +export default meta; + +function TreeExample(props) { + return ( +
+ + + Photos + + + + + Edit + + + + Delete + + + + + Projects + + + + + Edit + + + + Delete + + + + Projects-1 + + + + + Edit + + + + Delete + + + + Projects-1A + + + + + Edit + + + + Delete + + + + + + Projects-2 + + + + + Edit + + + + Delete + + + + + Projects-3 + + + + + Edit + + + + Delete + + + + + +
+ ); +} + + +export const TreeStatic = { + render: (args) => +}; + +export const TreeSelection = { + ...TreeStatic, + args: { + selectionMode: 'multiple', + defaultSelectedKeys: ['projects-2', 'projects-3'] + } +}; + +export const TreeIsDetached = { + ...TreeStatic, + args: { + isDetached: true, + selectionMode: 'multiple', + defaultSelectedKeys: ['projects-2', 'projects-3'] + } +}; + +export const TreeIsEmphasized = { + ...TreeStatic, + args: { + isEmphasized: true, + selectionMode: 'multiple', + defaultSelectedKeys: ['projects-2', 'projects-3'] + } +}; + +export const TreeIsDetachedIsEmphasized = { + ...TreeStatic, + args: { + isDetached: true, + isEmphasized: true, + selectionMode: 'multiple', + defaultSelectedKeys: ['projects-2', 'projects-3'] + } +}; + +export const TreeIsDetachedMobile = { + ...TreeStatic, + args: { + isDetached: true, + selectionMode: 'multiple', + defaultSelectedKeys: ['projects-2', 'projects-3'] + } +}; + + +let rows = [ + {id: 'projects', name: 'Projects', icon: , childItems: [ + {id: 'project-1', name: 'Project 1 Level 1', icon: }, + {id: 'project-2', name: 'Project 2 Level 1', icon: , childItems: [ + {id: 'project-2A', name: 'Project 2A Level 2', icon: }, + {id: 'project-2B', name: 'Project 2B Level 2', icon: }, + {id: 'project-2C', name: 'Project 2C Level 3', icon: } + ]}, + {id: 'project-3', name: 'Project 3', icon: }, + {id: 'project-4', name: 'Project 4', icon: }, + {id: 'project-5', name: 'Project 5', icon: , childItems: [ + {id: 'project-5A', name: 'Project 5A', icon: }, + {id: 'project-5B', name: 'Project 5B', icon: }, + {id: 'project-5C', name: 'Project 5C', icon: } + ]} + ]}, + {id: 'reports', name: 'Reports', icon: , childItems: [ + {id: 'reports-1', name: 'Reports 1', icon: , childItems: [ + {id: 'reports-1A', name: 'Reports 1A', icon: , childItems: [ + {id: 'reports-1AB', name: 'Reports 1AB', icon: , childItems: [ + {id: 'reports-1ABC', name: 'Reports 1ABC', icon: } + ]} + ]}, + {id: 'reports-1B', name: 'Reports 1B', icon: }, + {id: 'reports-1C', name: 'Reports 1C', icon: } + ]}, + {id: 'reports-2', name: 'Reports 2', icon: }, + ...Array.from({length: 100}, (_, i) => ({id: `reports-repeat-${i}`, name: `Reports ${i}`, icon: })) + ]} +]; + +const TreeExampleDynamic = (args) => ( +
+ + {(item: any) => ( + + {item.name} + {item.icon} + + )} + +
+); + +export const Dynamic = { + render: (args) => , + args: { + disabledKeys: ['project-2C', 'project-5'], + defaultExpandedKeys: ['projects', 'projects-2', 'projects-5'] + } +}; + + +function renderEmptyState() { + return ( + + + + No results + + + No results found, press here for more info. + + + ); +} + +export const Empty = { + render: TreeExampleDynamic, + args: { + renderEmptyState, + items: [] + } +}; diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx index f461136deb9..3e7553c7e7d 100644 --- a/packages/@react-spectrum/s2/src/Tabs.tsx +++ b/packages/@react-spectrum/s2/src/Tabs.tsx @@ -31,11 +31,11 @@ import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect import {focusRing, size, style} from '../style' with {type: 'macro'}; import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {IconContext} from './Icon'; +import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {Picker, PickerItem} from './TabsPicker'; import {Text, TextContext} from './Content'; import {useControlledState} from '@react-stately/utils'; import {useDOMRef} from '@react-spectrum/utils'; -import {useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils'; import {useHasTabbableChild} from '@react-aria/focus'; import {useLocale} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; @@ -346,7 +346,8 @@ const tab = style({ labelBehavior: { hide: size(6) } - } + }, + disableTapHighlight: true }, getAllowedOverrides()); const icon = style({ @@ -409,17 +410,12 @@ export function Tab(props: TabProps) { const tabPanel = style({ ...focusRing(), - display: 'flex', marginTop: 4, - marginX: -4, - paddingX: 4, color: 'gray-800', flexGrow: 1, - flexShrink: 1, flexBasis: '[0%]', minHeight: 0, - minWidth: 0, - overflow: 'auto' + minWidth: 0 }, getAllowedOverrides({height: true})); export function TabPanel(props: TabPanelProps) { @@ -489,7 +485,7 @@ let HiddenTabs = function (props: { return (
(null); useLayoutEffect(() => { if (collection.size > 0 && prevOrientation.current !== orientation) { updateOverflow(); diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx index 639678a7e0b..35f47001cd6 100644 --- a/packages/@react-spectrum/s2/src/TreeView.tsx +++ b/packages/@react-spectrum/s2/src/TreeView.tsx @@ -39,6 +39,7 @@ import React, {createContext, forwardRef, isValidElement, JSXElementConstructor, import {Text, TextContext} from './Content'; import {useDOMRef} from '@react-spectrum/utils'; import {useLocale} from 'react-aria'; +import {useScale} from './utils'; interface S2TreeProps { // Only detatched is supported right now with the current styles from Spectrum @@ -99,6 +100,7 @@ const tree = style({ function TreeView(props: TreeViewProps, ref: DOMRef) { let {children, isDetached, isEmphasized} = props; + let scale = useScale(); let renderer; if (typeof children === 'function') { @@ -107,11 +109,15 @@ function TreeView(props: TreeViewProps, ref: DOMRef) { let domRef = useDOMRef(ref); + let rowHeight = isDetached ? 44 : 40; + if (scale === 'large') { + rowHeight = isDetached ? 54 : 50; + } let layout = useMemo(() => { return new UNSTABLE_ListLayout({ - rowHeight: isDetached ? 42 : 40 + rowHeight }); - }, [isDetached]); + }, [rowHeight]); return ( @@ -189,9 +195,10 @@ const treeRow = style({ const treeCellGrid = style({ display: 'grid', width: 'full', + height: 'full', alignContent: 'center', alignItems: 'center', - gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 40, 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'], + gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'], gridTemplateRows: '1fr', gridTemplateAreas: [ 'drag-handle checkbox level-padding expand-button icon content actions actionmenu' @@ -306,8 +313,6 @@ const treeContent = style({ const treeActions = style({ gridArea: 'actions', - flexGrow: 0, - flexShrink: 0, /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */ marginStart: 2, marginEnd: 4 @@ -356,6 +361,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => { let nestedRows; let {renderer} = useTreeRendererContext(); let {isDetached, isEmphasized} = useContext(InternalTreeContext); + let scale = useScale(); if (typeof children === 'string') { content = {children}; @@ -408,7 +414,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => { width: '[calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))]' })} /> {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */} - {(hasChildRows || hasChildItems) && } + (props: TreeViewItemProps) => { interface ExpandableRowChevronProps { isExpanded?: boolean, isDisabled?: boolean, - isRTL?: boolean + isRTL?: boolean, + scale: 'medium' | 'large', + isHidden?: boolean } const expandButton = style({ gridArea: 'expand-button', - height: 'full', - aspectRatio: 'square', + color: { + default: '[inherit]', + isDisabled: { + default: 'disabled', + forcedColors: 'GrayText' + } + }, + height: 40, + width: 40, display: 'flex', flexWrap: 'wrap', alignContent: 'center', @@ -453,16 +468,22 @@ const expandButton = style({ isRTL: 'rotate(-90deg)' } }, + padding: 0, transition: 'default', backgroundColor: 'transparent', - borderStyle: 'none' + borderStyle: 'none', + disableTapHighlight: true, + visibility: { + isHidden: 'hidden' + } }); function ExpandableRowChevron(props: ExpandableRowChevronProps) { let expandButtonRef = useRef(null); let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext); - let {isExpanded, isDisabled} = fullProps; + let {isExpanded, isDisabled, scale, isHidden} = fullProps; let {direction} = useLocale(); + isDisabled = isDisabled || isHidden; return (