+
+
+ )
+ }
+
+ );
+}
+
+/**
+ * A control items represents an individual control within a segmented control.
+ */
+const _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);
+export {_SegmentedControlItem as SegmentedControlItem};
+
+/**
+ * A segmented control is a mutually exclusive group of buttons, with or without a track.
+ */
+const _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);
+export {_SegmentedControl as SegmentedControl};
diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx
new file mode 100644
index 00000000000..ff218feefd3
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/Skeleton.tsx
@@ -0,0 +1,142 @@
+/*
+ * 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 {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
+import {colorToken} from '../style/tokens' with {type: 'macro'};
+import {mergeRefs} from '@react-aria/utils';
+import {mergeStyles} from '../style/runtime';
+import {raw} from '../style/style-macro' with {type: 'macro'};
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleString} from '../style/types';
+
+let reduceMotion = typeof window?.matchMedia === 'function'
+ ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+ : false;
+
+export function useLoadingAnimation(isAnimating: boolean) {
+ let animationRef = useRef(null);
+ return useCallback((element: HTMLElement | null) => {
+ if (isAnimating && !animationRef.current && element && !reduceMotion) {
+ // Use web animation API instead of CSS animations so that we can
+ // synchronize it between all loading elements on the page (via startTime).
+ animationRef.current = element.animate(
+ [
+ {backgroundPosition: '100%'},
+ {backgroundPosition: '0%'}
+ ],
+ {
+ duration: 2000,
+ iterations: Infinity,
+ easing: 'ease-in-out'
+ }
+ );
+ animationRef.current.startTime = 0;
+ } else if (!isAnimating && animationRef.current) {
+ animationRef.current.cancel();
+ animationRef.current = null;
+ }
+ }, [isAnimating]);
+}
+
+export type SkeletonElement = ReactElement<{
+ children?: ReactNode,
+ className?: string,
+ ref?: Ref,
+ inert?: boolean | 'true'
+}>;
+
+export const SkeletonContext = createContext(null);
+export function useIsSkeleton(): boolean {
+ return useContext(SkeletonContext) || false;
+}
+
+export interface SkeletonProps {
+ children: ReactNode,
+ isLoading: boolean
+}
+
+export function Skeleton({children, isLoading}: SkeletonProps) {
+ // Disable all form components inside a skeleton.
+ return (
+
+ {children}
+
+ );
+}
+
+export const loadingStyle = raw(`
+ background-image: linear-gradient(to right, ${colorToken('gray-100')} 33%, light-dark(${colorToken('gray-25')}, ${colorToken('gray-300')}), ${colorToken('gray-100')} 66%);
+ background-size: 300%;
+ * {
+ visibility: hidden;
+ }
+`, 'UNSAFE_overrides');
+
+export function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {
+ let isSkeleton = useContext(SkeletonContext);
+ if (isSkeleton) {
+ children = {children};
+ style = {
+ ...style,
+ // This ensures the ellipsis on truncated text is also hidden.
+ // -webkit-text-fill-color overrides any `color` property that is also set.
+ WebkitTextFillColor: 'transparent'
+ };
+ }
+ return [children, style];
+}
+
+// Rendered inside to create skeleton line boxes via box-decoration-break.
+export function SkeletonText({children}) {
+ return (
+
+ {children}
+
+ );
+}
+
+// Clones the child element and displays it with skeleton styling.
+export function SkeletonWrapper({children}: {children: SkeletonElement}) {
+ let isLoading = useContext(SkeletonContext);
+ let animation = useLoadingAnimation(isLoading || false);
+ if (isLoading == null) {
+ return children;
+ }
+
+ let childRef = 'ref' in children ? children.ref as any : children.props.ref;
+ return (
+
+ {isLoading ? cloneElement(children, {
+ ref: mergeRefs(childRef, animation),
+ className: (children.props.className || '') + ' ' + loadingStyle,
+ inert: 'true'
+ }) : children}
+
+ );
+}
+
+// Adds default border radius around icons when displayed in a skeleton.
+export function useSkeletonIcon(styles: StyleString): StyleString {
+ let isSkeleton = useContext(SkeletonContext);
+ if (isSkeleton) {
+ return mergeStyles(style({borderRadius: 'sm'}), styles);
+ }
+ return styles || '' as StyleString;
+}
diff --git a/packages/@react-spectrum/s2/src/SkeletonCollection.tsx b/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
new file mode 100644
index 00000000000..fc6c5ea7be9
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 {createLeafComponent} from '@react-aria/collections';
+import {ReactNode} from 'react';
+import {Skeleton} from './Skeleton';
+
+export interface SkeletonCollectionProps {
+ children: () => ReactNode
+}
+
+let cache = new WeakMap();
+export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
+ // Cache rendering based on node object identity. This allows the children function to randomize
+ // its content (e.g. heights) and preserve on re-renders.
+ // TODO: do we need a `dependencies` prop here?
+ let cached = cache.get(node);
+ if (!cached) {
+ cached = (
+
+ {props.children()}
+
+ );
+ cache.set(node, cached);
+ }
+ return cached;
+});
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index 5e5c5b60c04..662c23fdf39 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -17,7 +17,9 @@ import {createContext, forwardRef, ReactNode} from 'react';
import {filterDOMProps} from '@react-aria/utils';
import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {Text} from './Content';
import {useDOMRef} from '@react-spectrum/utils';
+import {useIsSkeleton} from './Skeleton';
import {useSpectrumContextProps} from './useSpectrumContextProps';
interface StatusLightStyleProps {
@@ -64,7 +66,7 @@ const wrapper = style({
disableTapHighlight: true
}, getAllowedOverrides());
-const light = style({
+const light = style({
size: {
size: {
S: 8,
@@ -94,7 +96,8 @@ const light = style({
cinnamon: 'cinnamon',
brown: 'brown',
silver: 'silver'
- }
+ },
+ isSkeleton: 'gray-200'
}
});
@@ -102,6 +105,7 @@ function StatusLight(props: StatusLightProps, ref: DOMRef) {
[props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);
let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;
let domRef = useDOMRef(ref);
+ let isSkeleton = useIsSkeleton();
if (!children && !props['aria-label']) {
console.warn('If no children are provided, an aria-label must be specified');
@@ -119,11 +123,11 @@ function StatusLight(props: StatusLightProps, ref: DOMRef) {
style={UNSAFE_style}
className={UNSAFE_className + wrapper({size, variant}, styles)}>
-
- {children}
+ {children}
);
}
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index 85599b7ce99..e5bc90b4ab7 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx
@@ -18,9 +18,11 @@ import {FocusableRef, FocusableRefValue} from '@react-types/shared';
import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
import {IconContext} from './Icon';
import {pressScale} from './pressScale';
+import {SkeletonContext} from './Skeleton';
import {StyleProps} from './style-utils';
import {Text, TextContext} from './Content';
import {useFocusableRef} from '@react-spectrum/utils';
+import {useFormProps} from './Form';
import {useSpectrumContextProps} from './useSpectrumContextProps';
export interface ToggleButtonProps extends Omit, StyleProps, ActionButtonStyleProps {
@@ -34,6 +36,7 @@ export const ToggleButtonContext = createContext) {
[props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
+ props = useFormProps(props as any);
let domRef = useFocusableRef(ref);
return (
;
-export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof heightProperties)[number]>;
+export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
export interface UnsafeStyles {
/** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
diff --git a/packages/@react-spectrum/s2/stories/Button.stories.tsx b/packages/@react-spectrum/s2/stories/Button.stories.tsx
index 10a0b89c37e..329c7111653 100644
--- a/packages/@react-spectrum/s2/stories/Button.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Button.stories.tsx
@@ -10,11 +10,13 @@
* governing permissions and limitations under the License.
*/
+import {action} from '@storybook/addon-actions';
import {Button, Text} from '../src';
import {categorizeArgTypes, StaticColorDecorator} from './utils';
import type {Meta, StoryObj} from '@storybook/react';
import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {useEffect, useRef, useState} from 'react';
const meta: Meta = {
component: Button,
@@ -48,3 +50,57 @@ export const Example: Story = {
);
}
};
+
+
+export const PendingButton = {
+ render: (args) => {
+ return (
+
+ Press me
+ Press me
+
external label
+
+ Test
+ Test
+ Test
+
+
+
+ Very long button with wrapping text to see what happens
+
+
+ );
+ },
+ parameters: {
+ docs: {
+ disable: true
+ }
+ }
+};
+
+function PendingButtonExample(props) {
+ let [isPending, setPending] = useState(false);
+
+ let timeout = useRef | undefined>(undefined);
+ let handlePress = (e) => {
+ action('pressed')(e);
+ setPending(true);
+ timeout.current = setTimeout(() => {
+ setPending(false);
+ timeout.current = undefined;
+ }, 5000);
+ };
+
+ useEffect(() => {
+ return () => {
+ clearTimeout(timeout.current);
+ };
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/packages/@react-spectrum/s2/stories/Card.stories.tsx b/packages/@react-spectrum/s2/stories/Card.stories.tsx
new file mode 100644
index 00000000000..9f781e86d8f
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/Card.stories.tsx
@@ -0,0 +1,309 @@
+/*
+ * 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, AssetCard, Avatar, Badge, Button, Card, CardPreview, CardProps, CollectionCardPreview, Content, Divider, Footer, Image, MenuItem, Meter, ProductCard, Skeleton, StatusLight, Text, UserCard} from '../src';
+import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
+import FolderGradient from 'illustration:../spectrum-illustrations/gradient/S2_fill_folderClose_generic2_160.svg';
+import type {Meta} from '@storybook/react';
+import Project from '../s2wf-icons/S2_Icon_Project_20_N.svg';
+import Select from '../s2wf-icons/S2_Icon_Select_20_N.svg';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+
+const meta: Meta = {
+ component: Card,
+ parameters: {
+ layout: 'centered'
+ },
+ tags: ['autodocs'],
+ args: {
+ isLoading: false
+ },
+ argTypes: {
+ href: {table: {disable: true}},
+ download: {table: {disable: true}},
+ hrefLang: {table: {disable: true}},
+ referrerPolicy: {table: {disable: true}},
+ rel: {table: {disable: true}},
+ routerOptions: {table: {disable: true}},
+ ping: {table: {disable: true}},
+ target: {table: {disable: true}},
+ value: {table: {disable: true}},
+ textValue: {table: {disable: true}},
+ onAction: {table: {disable: true}},
+ isDisabled: {table: {disable: true}}
+ },
+ decorators: (children, {args}) => (
+
+ {children(args)}
+
+ )
+};
+
+export default meta;
+
+export const Example = (args: any) => (
+
+
+
+
+
+
+ Card title
+
+
+
+ Card description. Give a concise overview of the context or functionality that's mentioned in the card title.
+
+ {args.size !== 'XS' && <>
+
+
+ }
+
+
+
+ Card title
+ Card description. Give a concise overview of the context or functionality that's mentioned in the card title.
+
+ {args.size !== 'XS' && <>
+
+
+ }
+
+
+
+
+
+
+
+
+ Card title
+ Card description. Give a concise overview of the context or functionality that's mentioned in the card title.
+
+
+
+
+
+
+ Card title
+ Card description. Give a concise overview of the context or functionality that's mentioned in the card title.
+
+
+
+
+
+
+
+
+
+
+ Card title
+ Card description. Give a concise overview of the context or functionality that's mentioned in the card title.
+
+
+
+
+
+
+ Card title
+ Card description. Give a concise overview of the context or functionality that's mentioned in the card title.
+
+
+
+
+ )}
+