diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx index 3f77a7b4307..163837f2511 100644 --- a/.storybook-s2/docs/Migrating.jsx +++ b/.storybook-s2/docs/Migrating.jsx @@ -53,6 +53,11 @@ export function Migrating() {
  • Update size to be a pixel value if it currently matches 'avatar-size-*'
    • +

    Badge

    + +

    Breadcrumbs

    +

    Well

    + +

    Style props

    React Spectrum v3 supported a limited set of style props for layout and positioning using Spectrum-defined values. Usage of these should be updated to instead use the style macro.

    Example:

    diff --git a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx new file mode 100644 index 00000000000..07f6a69f9f3 --- /dev/null +++ b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx @@ -0,0 +1,52 @@ +/* + * 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 {Link} from '../src'; +import React from 'react'; +import {style} from '../style/spectrum-theme' with {type: 'macro'}; + +export default { + title: 'S2 Style Macro', + parameters: { + docs: {disable: true} + } +}; + +export function Example() { + return ( +
    + Test +
    + ); +} + +export function Well() { + return ( +
    + S2 style macro equivalent to v3 Well. +
    + ); +} + diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/badge.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/badge.test.ts.snap index 7c953e51439..98ce4fceed3 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/badge.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/badge.test.ts.snap @@ -1,9 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`No change 1`] = ` +exports[`Change variant info to informative 1`] = ` "import { Badge } from "@react-spectrum/s2"; - +let variant = 'info'; +let props = {variant: 'info'};
    - Licensed + + Content Info + + + Content Info + + + Content Info + + + Content Info +
    " `; diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/well.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/well.test.ts.snap new file mode 100644 index 00000000000..09bf02b3554 --- /dev/null +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/well.test.ts.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Updates Well to be div with style macro 1`] = ` +"import { Well } from "@react-spectrum/s2"; +import { style } from "@react-spectrum/s2/style" with { type: "macro" }; + +
    +
    + Well content +
    +
    +

    Shipping Address

    +

    601 Townsend Street
    San Francisco, CA 94103

    +
    +
    " +`; diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/badge.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/badge.test.ts index f43d3847bd2..431035d19d5 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/badge.test.ts +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/badge.test.ts @@ -6,10 +6,22 @@ const test = (name: string, input: string) => { defineSnapshotTest(transform, {}, input, name); }; -test('No change', ` +test('Change variant info to informative', ` import {Badge} from '@adobe/react-spectrum'; - +let variant = 'info'; +let props = {variant: 'info'};
    - Licensed + + Content Info + + + Content Info + + + Content Info + + + Content Info +
    `); diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/well.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/well.test.ts new file mode 100644 index 00000000000..d03e52d238e --- /dev/null +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/well.test.ts @@ -0,0 +1,21 @@ +// @ts-ignore +import {defineSnapshotTest} from 'jscodeshift/dist/testUtils'; +import transform from '../src/codemods/codemod'; + +const test = (name: string, input: string) => { + defineSnapshotTest(transform, {}, input, name); +}; + +test('Updates Well to be div with style macro', ` +import {Well} from '@adobe/react-spectrum'; + +
    + + Well content + + +

    Shipping Address

    +

    601 Townsend Street
    San Francisco, CA 94103

    +     +
    +`); diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts index 54dd447d9da..c1e74517171 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts @@ -132,6 +132,23 @@ export const changes: ChangesJSON = { } ] }, + Badge: { + changes: [ + { + description: "Change variant='info' to variant='informative'", + reason: 'Updated naming convention', + function: { + name: 'updatePropNameAndValue', + args: { + oldProp: 'variant', + oldValue: 'info', + newProp: 'variant', + newValue: 'informative' + } + } + } + ] + }, Breadcrumbs: { changes: [ { @@ -426,19 +443,6 @@ export const changes: ChangesJSON = { } ] }, - Flex: { - changes: [ - { - description: - 'Update Flex to be a div and apply flex styles using the style macro', - reason: 'Updated API', - function: { - name: 'updateToNewComponent', - args: {newComponent: 'div'} - } - } - ] - }, Form: { changes: [ { @@ -461,19 +465,6 @@ export const changes: ChangesJSON = { } ] }, - Grid: { - changes: [ - { - description: - 'Update Grid to be a div and apply grid styles using the style macro', - reason: 'Updated API', - function: { - name: 'updateToNewComponent', - args: {newComponent: 'div'} - } - } - ] - }, InlineAlert: { changes: [ { @@ -1200,18 +1191,5 @@ export const changes: ChangesJSON = { } } ] - }, - View: { - changes: [ - { - description: - 'Update View to be a div and apply styles using the style macro', - reason: 'Updated API', - function: { - name: 'updateToNewComponent', - args: {newComponent: 'div'} - } - } - ] } }; diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts index 11437f02938..d3ce5ed19e9 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts @@ -15,6 +15,7 @@ let availableComponents = getComponents(); availableComponents.add('View'); availableComponents.add('Flex'); availableComponents.add('Grid'); +availableComponents.add('Well'); // Replaced by collection component-specific items availableComponents.add('Item'); diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/styleProps.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/styleProps.ts index 5d8cb29e0f4..5372817977c 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/styleProps.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/styleProps.ts @@ -487,7 +487,7 @@ function handleProp( addComment(path.node, ' TODO(S2-upgrade): check this UNSAFE_style'); break; case 'UNSAFE_className': - if (element === 'Flex' || element === 'Grid' || element === 'View') { + if (element === 'Flex' || element === 'Grid' || element === 'View' || element === 'Well') { path.get('name').replaceWith(t.jsxIdentifier('className')); } else { addComment(path.node, ' TODO(S2-upgrade): check this UNSAFE_className'); @@ -511,11 +511,23 @@ export function transformStyleProps(path: NodePath, element: strin let dynamicValues = new Map; let conditions = new Map; - let isDOMElement = element === 'Flex' || element === 'Grid' || element === 'View'; + let isDOMElement = element === 'Flex' || element === 'Grid' || element === 'View' || element === 'Well'; if (element === 'Flex') { macroValues.set('display', 'flex'); } else if (element === 'Grid') { macroValues.set('display', 'grid'); + } else if (element === 'Well') { + macroValues.set('display', 'block'); + macroValues.set('textAlign', 'start'); + macroValues.set('minWidth', 160); + macroValues.set('padding', 16); + macroValues.set('marginTop', 4); + macroValues.set('borderWidth', 1); + macroValues.set('borderRadius', 'sm'); + macroValues.set('backgroundColor', 'layer-1'); + macroValues.set('borderStyle', 'solid'); + macroValues.set('borderColor', 'transparent-black-75'); + macroValues.set('font', 'body-sm'); } let attrs = path.get('openingElement').get('attributes');