From 13964d8f025e970059c7f53ed94870dcdfdc1c5a Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Mon, 8 May 2023 11:50:41 -0400 Subject: [PATCH 01/19] Implement InlineAlert component #1343 - add `inlinealert` CSS - add `@react-aria/alert` - add `@react-spectrum/inlinealert` component - add `@react-types/inlinealert` --- .../components/inlinealert/index.css | 126 ++++++++++++++++++ .../components/inlinealert/skin.css | 56 ++++++++ .../components/inlinealert/vars.css | 14 ++ packages/@react-aria/alert/README.md | 3 + .../@react-aria/alert/docs/AlertAnatomy.svg | 0 packages/@react-aria/alert/docs/useAlert.mdx | 91 +++++++++++++ packages/@react-aria/alert/index.ts | 13 ++ packages/@react-aria/alert/package.json | 34 +++++ packages/@react-aria/alert/src/index.ts | 13 ++ packages/@react-aria/alert/src/useAlert.ts | 30 +++++ .../@react-aria/alert/test/useAlert.test.js | 21 +++ .../@react-spectrum/inlinealert/README.md | 3 + .../chromatic/InLineAlert.chromatic.tsx | 37 +++++ .../inlinealert/docs/InLineAlert.mdx | 76 +++++++++++ packages/@react-spectrum/inlinealert/index.ts | 13 ++ .../inlinealert/intl/en-US.json | 7 + .../@react-spectrum/inlinealert/package.json | 60 +++++++++ .../inlinealert/src/InLineAlert.tsx | 91 +++++++++++++ .../@react-spectrum/inlinealert/src/index.ts | 15 +++ .../stories/InLineAlert.stories.tsx | 70 ++++++++++ .../inlinealert/test/InLineAlert.test.js | 26 ++++ packages/@react-types/inlinealert/README.md | 3 + .../@react-types/inlinealert/package.json | 21 +++ .../@react-types/inlinealert/src/index.d.ts | 20 +++ 24 files changed, 843 insertions(+) create mode 100644 packages/@adobe/spectrum-css-temp/components/inlinealert/index.css create mode 100644 packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css create mode 100644 packages/@adobe/spectrum-css-temp/components/inlinealert/vars.css create mode 100644 packages/@react-aria/alert/README.md create mode 100644 packages/@react-aria/alert/docs/AlertAnatomy.svg create mode 100644 packages/@react-aria/alert/docs/useAlert.mdx create mode 100644 packages/@react-aria/alert/index.ts create mode 100644 packages/@react-aria/alert/package.json create mode 100644 packages/@react-aria/alert/src/index.ts create mode 100644 packages/@react-aria/alert/src/useAlert.ts create mode 100644 packages/@react-aria/alert/test/useAlert.test.js create mode 100644 packages/@react-spectrum/inlinealert/README.md create mode 100644 packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx create mode 100644 packages/@react-spectrum/inlinealert/docs/InLineAlert.mdx create mode 100644 packages/@react-spectrum/inlinealert/index.ts create mode 100644 packages/@react-spectrum/inlinealert/intl/en-US.json create mode 100644 packages/@react-spectrum/inlinealert/package.json create mode 100644 packages/@react-spectrum/inlinealert/src/InLineAlert.tsx create mode 100644 packages/@react-spectrum/inlinealert/src/index.ts create mode 100644 packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx create mode 100644 packages/@react-spectrum/inlinealert/test/InLineAlert.test.js create mode 100644 packages/@react-types/inlinealert/README.md create mode 100644 packages/@react-types/inlinealert/package.json create mode 100644 packages/@react-types/inlinealert/src/index.d.ts diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css new file mode 100644 index 00000000000..0f1f48ecd6b --- /dev/null +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css @@ -0,0 +1,126 @@ +/*! +Copyright 2023 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 '../commons/index.css'; + +:root { + /* Font */ + --spectrum-inlinealert-heading-font-weight:var(--spectrum-alias-heading-text-font-weight-regular); + --spectrum-inlinealert-heading-font-style:var(--spectrum-global-font-style-regular); + --spectrum-inlinealert-heading-font-size:var(--spectrum-global-dimension-font-size-100); + --spectrum-inlinealert-heading-line-height:var(--spectrum-alias-heading-text-line-height); + + --spectrum-inlinealert-content-font-weight:var(--spectrum-alias-body-text-font-weight); + --spectrum-inlinealert-content-font-style:var(--spectrum-global-font-style-regular); + --spectrum-inlinealert-content-font-size:var(--spectrum-global-dimension-font-size-100); + --spectrum-inlinealert-content-line-height:var(--spectrum-alias-line-height-body); + + /* Size*/ + --spectrum-inlinealert-border-width:var(--spectrum-alias-border-size-thick); + --spectrum-inlinealert-border-radius:var(--spectrum-border-radius); + --spectrum-inlinealert-icon-size:var(--spectrum-global-dimension-size-225); + --spectrum-inlinealert-min-inline-size:240px; + --spectrum-inlinealert-header-min-block-size:var(--spectrum-global-dimension-size-250); + + /* Spacing*/ + --spectrum-inlinealert-spacing-edge-to-text:var(--spectrum-global-dimension-static-size-300); + --spectrum-inlinealert-spacing-header-to-icon:var(--spectrum-global-dimension-static-size-300); + --spectrum-inlinealert-spacing-header-content-button:var(--spectrum-global-dimension-static-size-200); + + /* Color */ + --spectrum-inlinealert-background-color:var(--spectrum-alias-background-color-default); + --spectrum-inlinealert-border-and-icon-color:var(--spectrum-gray-visual-color); + --spectrum-inlinealert-header-color:var(--spectrum-alias-heading-text-color); + --spectrum-inlinealert-content-color:var(--spectrum-alias-text-color); + --spectrum-inlinealert-border-and-icon-color-info:var(--spectrum-informative-visual-color); + --spectrum-inlinealert-border-and-icon-color-positive:var(--spectrum-positive-visual-color); + --spectrum-inlinealert-border-and-icon-color-notice:var(--spectrum-notice-visual-color); + --spectrum-inlinealert-border-and-icon-color-negative:var(--spectrum-negative-visual-color); +} + +.spectrum-InLineAlert { + position:relative; + + display:inline-block; + box-sizing:border-box; + min-inline-size:var(--spectrum-inlinealert-min-inline-size); + + padding-block:var(--spectrum-inlinealert-spacing-edge-to-text); + padding-inline:var(--spectrum-inlinealert-spacing-edge-to-text); + + border-block-width:var(--spectrum-inlinealert-border-width); + border-inline-width:var(--spectrum-inlinealert-border-width); + border-style:solid; + border-radius:var(--spectrum-inlinealert-border-radius); +} + +.spectrum-InLineAlert .spectrum-InLineAlert-grid { + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: auto auto auto; + column-gap:var(--spectrum-inlinealert-spacing-header-to-icon); + align-items: center; + grid-template-areas: + "header icon " + "content content " + "buttonGroup buttonGroup"; + width: 100%; +} + +@media (forced-colors: active) { + .spectrum-InLineAlert { + --highcontrast-inlinealert-background-color:Background; + --highcontrast-inlinealert-header-color:CanvasText; + --highcontrast-inlinealert-content-color:CanvasText; + --highcontrast-inlinealert-border-and-icon-color:ButtonBorder; + } +} + +.spectrum-InLineAlert-icon { + inline-size:var(--spectrum-inlinealert-icon-size); + block-size:var(--spectrum-inlinealert-icon-size); +} + +.spectrum-InLineAlert-header { + display:block; + + font-weight:var(--spectrum-inlinealert-heading-font-weight); + font-style:var(--spectrum-inlinealert-heading-font-style); + font-size:var(--spectrum-inlinealert-heading-font-size); + line-height:var(--spectrum-inlinealert-heading-line-height); + text-transform:none; + + min-block-size:var(--spectrum-inlinealert-header-min-block-size); +} + +.spectrum-InLineAlert-content { + display:block; + margin-block-start:var(--spectrum-inlinealert-spacing-header-content-button); + margin-block-end:0; + margin-inline-start:0; + margin-inline-end:0; + padding:0; + + word-wrap:break-word; + + font-weight:var(--spectrum-inlinealert-content-font-weight); + font-style:var(--spectrum-inlinealert-content-font-style); + font-size:var(--spectrum-inlinealert-content-font-size); + line-height:var(--spectrum-inlinealert-content-line-height); +} + +.spectrum-InLineAlert-buttonGroup { + display:flex; + justify-content:flex-end; + margin-block-start:var(--spectrum-inlinealert-spacing-header-content-button); +} + diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css new file mode 100644 index 00000000000..3a0a64057a7 --- /dev/null +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css @@ -0,0 +1,56 @@ +/* +Copyright 2023 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. +*/ + +.spectrum-InLineAlert { + background-color:var(--highcontrast-inlinealert-background-color, var(--spectrum-inlinealert-background-color)); + border-color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)); +} + +.spectrum-InLineAlert-header { + color:var(--highcontrast-inlinealert-header-color, var(--spectrum-inlinealert-header-color)); +} + +.spectrum-InLineAlert-content { + color:var(--highcontrast-inlinealert-content-color, var(--spectrum-inlinealert-content-color)); +} + +.spectrum-InLineAlert--info { + border-color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color-info)); +} + +.spectrum-InLineAlert--info .spectrum-InLineAlert-icon { + color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color-info)); +} + +.spectrum-InLineAlert--notice { + border-color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color-notice)); +} + +.spectrum-InLineAlert--notice .spectrum-InLineAlert-icon { + color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color-notice)); +} + +.spectrum-InLineAlert--positive { + border-color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color-positive)); +} + +.spectrum-InLineAlert--positive .spectrum-InLineAlert-icon { + color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color-positive)); +} + +.spectrum-InLineAlert--negative { + border-color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color-negative)); +} + +.spectrum-InLineAlert--negative .spectrum-InLineAlert-icon { + color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color-negative)); +} diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/vars.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/vars.css new file mode 100644 index 00000000000..7183b4259e6 --- /dev/null +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/vars.css @@ -0,0 +1,14 @@ +/*! +Copyright 2023 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 './index.css'; +@import './skin.css'; diff --git a/packages/@react-aria/alert/README.md b/packages/@react-aria/alert/README.md new file mode 100644 index 00000000000..d19dec8fbb5 --- /dev/null +++ b/packages/@react-aria/alert/README.md @@ -0,0 +1,3 @@ +# @react-aria/alert + +This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details. diff --git a/packages/@react-aria/alert/docs/AlertAnatomy.svg b/packages/@react-aria/alert/docs/AlertAnatomy.svg new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/@react-aria/alert/docs/useAlert.mdx b/packages/@react-aria/alert/docs/useAlert.mdx new file mode 100644 index 00000000000..b3848b8c13e --- /dev/null +++ b/packages/@react-aria/alert/docs/useAlert.mdx @@ -0,0 +1,91 @@ +{/* Copyright 2023 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 {Layout} from '@react-spectrum/docs'; +export default Layout; + +*Additional types can be imported via a direct path to the *.d.ts file if need be. See the useComboBox.mdx for an example.* +import docs from 'docs:@react-aria/alert'; +import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; +import packageData from '@react-aria/alert/package.json'; +import Anatomy from './alertAnatomy.svg' + +*Include after_version if the docs shouldn't be published to the website until reaching a specific package version.* +--- +category: Category Name +keywords: [] +after_version: 3.0.0-alpha.0 +--- + +# useAlert + +{docs.exports.useAlert.description} + +*Be sure to update the W3C url below if applicable to your hook, otherwise omit the sourceData prop.* + + +## API + +*Include an additional FunctionAPI if multiple hooks are being documented in a single file. See useTabList.mdx for an example.* + + +## Features + +*Describe what the aria hook helps with/provides.* + +## Anatomy/Usage + +*For hooks that are meant to be used with specific elements/components, include an Anatomy section detailing the props the hook returns. See useColorField.mdx for an example.* +*If applicable, the anatomy diagram should be added as a local svg file, sourced from the Spectrum XD file (ask in the #spectrum-react room if you can't find one). Follow these steps after you obtain the XD file:* +*1. Open the XD file and find the anatomy diagram. Update the diagrams to match the actual anatomy/names we use in React Aria. Spectrum often includes additional things, but we want to match the returned prop objects from the hooks so remove these extra elements. +*2. After finishing the edits, select the diagram by double clicking its artboard. Export it as an SVG via File -> Export -> Selected...* +*4. Update the fonts. the xd file might reference something like Adobe-Clean-It for italic, but in the svg it needs to always be font-family="Adobe-Clean" with font-style="italic" for example.* +*5. Replace the colors in the SVG with their spectrum color variable equivalents. See docs.css .provider for a mapping of these colors (--anatomy--gray- prefixed vars). Choose the closest one if there isn't an exact match.* +*6. Remove width and height specified on the svg element, and replace with a style attribute similar to the one in other anatomy diagrams, but change the max-height to match viewBox. That makes it responsive.* +*7. Add an aria-label that describes what is in the anatomy diagram.* + + +*For hooks that are meant for more general use, include a Usage section instead detailing the props/params the hook accepts and returns. See useKeyboard.mdx for an example.* + +*If the below doesn't work see useFocusRing.mdx, useFocusWithin.mdx, and useHover.mdx for some alternative ways of using InterfaceType. * + + + + +*If you'd like to have a inline type link (e.g. referencing the type def of the stately hook), use the TypeLink component below and replace the links to the appropriate docs import.* + + +## Example + +*Add an example of the hook (being used with native elements, etc)* +*If you create an example component that will be reused else where in this doc, include export=true so that you can directly reuse the component and avoid copy pasting the same code.* +*See useComboBox.mdx for an example.* +```tsx example export=true +import {useAlert} from '@react-aria/alert'; + +function Example(props) { + return ( +
test
+ ); +} +``` + +## Usage + +*For hooks that are meant to be used with specific elements/components, include this usage section detailing examples of how to use the hook. * +*This should roughly mirror the examples that the corresponding React Spectrum component docs have (e.g. Controlled/Uncontrolled, Disabled, change handlers, etc). * + +## Internationalization + +*Mention if RTL * diff --git a/packages/@react-aria/alert/index.ts b/packages/@react-aria/alert/index.ts new file mode 100644 index 00000000000..7e5b036e91f --- /dev/null +++ b/packages/@react-aria/alert/index.ts @@ -0,0 +1,13 @@ +/* + * Copyright 2023 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. + */ + +export * from './src'; diff --git a/packages/@react-aria/alert/package.json b/packages/@react-aria/alert/package.json new file mode 100644 index 00000000000..da9f041c658 --- /dev/null +++ b/packages/@react-aria/alert/package.json @@ -0,0 +1,34 @@ +{ + "name": "@react-aria/alert", + "version": "3.0.0-alpha.1", + "private": true, + "description": "Spectrum UI components in React", + "license": "Apache-2.0", + "main": "dist/main.js", + "module": "dist/module.js", + "types": "dist/types.d.ts", + "exports": { + "types": "./dist/types.d.ts", + "import": "./dist/import.mjs", + "require": "./dist/main.js" + }, + "source": "src/index.ts", + "files": [ + "dist", + "src" + ], + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/adobe/react-spectrum" + }, + "dependencies": { + "@swc/helpers": "^0.4.14" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/@react-aria/alert/src/index.ts b/packages/@react-aria/alert/src/index.ts new file mode 100644 index 00000000000..03d94374cf5 --- /dev/null +++ b/packages/@react-aria/alert/src/index.ts @@ -0,0 +1,13 @@ +/* + * Copyright 2023 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. + */ + +export * from './useAlert'; diff --git a/packages/@react-aria/alert/src/useAlert.ts b/packages/@react-aria/alert/src/useAlert.ts new file mode 100644 index 00000000000..0881437e4f9 --- /dev/null +++ b/packages/@react-aria/alert/src/useAlert.ts @@ -0,0 +1,30 @@ +/* + * Copyright 2023 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 {HTMLAttributes} from 'react'; + +interface AlertAria { + alertProps: HTMLAttributes +} + +/** + * Provides the behavior and accessibility implementation for an alert component. + * An alert is an element that displays a brief, important message in a way that + * attracts the user's attention without interrupting the user's task. + */ +export function useAlert(): AlertAria { + return { + alertProps: { + role: 'alert' + } + }; +} diff --git a/packages/@react-aria/alert/test/useAlert.test.js b/packages/@react-aria/alert/test/useAlert.test.js new file mode 100644 index 00000000000..c8d00bb19be --- /dev/null +++ b/packages/@react-aria/alert/test/useAlert.test.js @@ -0,0 +1,21 @@ +/* + * Copyright 2023 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 {render, renderHook} from '@react-spectrum/test-utils'; +import React, {useRef} from 'react'; +import {useAlert} from '../'; + +describe('useAlert', function () { + it('fill me in', function () { + expect(true).toBeTruthy(); + }); +}); diff --git a/packages/@react-spectrum/inlinealert/README.md b/packages/@react-spectrum/inlinealert/README.md new file mode 100644 index 00000000000..9c0d5d86cda --- /dev/null +++ b/packages/@react-spectrum/inlinealert/README.md @@ -0,0 +1,3 @@ +# @react-spectrum/inlinealert + +This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details. diff --git a/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx b/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx new file mode 100644 index 00000000000..a135323d895 --- /dev/null +++ b/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx @@ -0,0 +1,37 @@ +/* + * Copyright 2023 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 {InlineAlert} from '../'; +import {Meta, Story} from '@storybook/react'; +import React from 'react'; + +interface SpectrumInlineAlertProps { + +} + +// see https://github.com/storybookjs/storybook/issues/8426#issuecomment-669021940 +const StoryFn = ({storyFn}) => storyFn(); + +const meta: Meta = { + title: 'InlineAlert', + component: InlineAlert, + decorators: [storyFn => ] +}; + +export default meta; + +const Template = (): Story => (args) => ( + This is a React Spectrum InlineAlert +); + +export const Default = Template().bind({}); +Default.args = {}; diff --git a/packages/@react-spectrum/inlinealert/docs/InLineAlert.mdx b/packages/@react-spectrum/inlinealert/docs/InLineAlert.mdx new file mode 100644 index 00000000000..255b1f15915 --- /dev/null +++ b/packages/@react-spectrum/inlinealert/docs/InLineAlert.mdx @@ -0,0 +1,76 @@ +{/* Copyright 2023 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 {Layout} from '@react-spectrum/docs'; +export default Layout; + +import docs from 'docs:@react-spectrum/inlinealert'; +import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs'; +import packageData from '@react-spectrum/inlinealert/package.json'; + +```jsx import +import {InlineAlert} from '@react-spectrum/inlinealert'; +``` + +*Include after_version if the docs shouldn't be published to the website until reaching a specific package version.* +--- +category: Category Name +keywords: [] +after_version: 3.0.0-alpha.0 +--- + +# InlineAlert + +{docs.exports.InlineAlert.description} + +*Be sure to update the Spectrum url below to match the current component.* + + +## Example + +```tsx example +Button +``` + +## Content + +*If the component has a children prop that accepts any type of content (e.g. `ReactNode`), include this section. Please include a note about how to internationalize the content.* + +## Value + +*If the component displays or allows a user to input a value, include this section.* + +## Labeling + +*If the component supports a label prop, include this section. Please include a note about how to internationalize the content.* + +## Events + +*If the component supports event props, include this section. Only cover the events that are important to the main functionality of the component.* + +## Validation + +*If the component supports validation props, include this section.* + +## Props + +*Include an additional PropTables if multiple components are being documented in a single file. See Tabs.mdx for an example.* + + +## Visual options + +*Show examples of all variants and visual props here with links to the design website for more usage details. Examples can be grouped together for conciseness.* + +### Sample Option +[View guidelines](https://spectrum.adobe.com/page/text-field/#Width) diff --git a/packages/@react-spectrum/inlinealert/index.ts b/packages/@react-spectrum/inlinealert/index.ts new file mode 100644 index 00000000000..7e5b036e91f --- /dev/null +++ b/packages/@react-spectrum/inlinealert/index.ts @@ -0,0 +1,13 @@ +/* + * Copyright 2023 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. + */ + +export * from './src'; diff --git a/packages/@react-spectrum/inlinealert/intl/en-US.json b/packages/@react-spectrum/inlinealert/intl/en-US.json new file mode 100644 index 00000000000..7bb7656caa3 --- /dev/null +++ b/packages/@react-spectrum/inlinealert/intl/en-US.json @@ -0,0 +1,7 @@ +{ + "neutral": "Neutral", + "info": "Informative", + "positive": "Positive", + "notice": "Notice", + "negative": "Negative" +} diff --git a/packages/@react-spectrum/inlinealert/package.json b/packages/@react-spectrum/inlinealert/package.json new file mode 100644 index 00000000000..a3e795e54dc --- /dev/null +++ b/packages/@react-spectrum/inlinealert/package.json @@ -0,0 +1,60 @@ +{ + "name": "@react-spectrum/inlinealert", + "version": "3.0.0-alpha.1", + "private": true, + "description": "Spectrum UI components in React", + "license": "Apache-2.0", + "main": "dist/main.js", + "module": "dist/module.js", + "types": "dist/types.d.ts", + "exports": { + "types": "./dist/types.d.ts", + "import": "./dist/import.mjs", + "require": "./dist/main.js" + }, + "source": "src/index.ts", + "files": [ + "dist", + "src" + ], + "sideEffects": [ + "*.css" + ], + "targets": { + "main": { + "includeNodeModules": [ + "@adobe/spectrum-css-temp" + ] + }, + "module": { + "includeNodeModules": [ + "@adobe/spectrum-css-temp" + ] + } + }, + "repository": { + "type": "git", + "url": "https://github.com/adobe/react-spectrum" + }, + "dependencies": { + "@react-aria/alert": "^3.0.0-alpha.1", + "@react-aria/i18n": "^3.7.1", + "@react-aria/utils": "^3.0.0", + "@react-spectrum/layout": "^3.5.1", + "@react-spectrum/utils": "^3.0.0", + "@react-types/inlinealert": "^3.0.0-alpha.1", + "@react-types/shared": "^3.0.0", + "@spectrum-icons/ui": "^3.5.1", + "@swc/helpers": "^0.4.14" + }, + "devDependencies": { + "@adobe/spectrum-css-temp": "3.0.0-alpha.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", + "@react-spectrum/provider": "^3.0.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx new file mode 100644 index 00000000000..f358888f207 --- /dev/null +++ b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx @@ -0,0 +1,91 @@ +/* + * Copyright 2023 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 AlertMedium from '@spectrum-icons/ui/AlertMedium'; +import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils'; +import {DOMRef} from '@react-types/shared'; +import {filterDOMProps} from '@react-aria/utils'; +import {Grid} from '@react-spectrum/layout'; +import InfoMedium from '@spectrum-icons/ui/InfoMedium'; +// @ts-ignore +import intlMessages from '../intl/*.json'; +import React, {useRef} from 'react'; +import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; +import styles from '@adobe/spectrum-css-temp/components/inlinealert/vars.css'; +import SuccessMedium from '@spectrum-icons/ui/SuccessMedium'; +import {useAlert} from '@react-aria/alert'; +import {useLocalizedStringFormatter} from '@react-aria/i18n'; +import {useProviderProps} from '@react-spectrum/provider'; + +let ICONS = { + info: InfoMedium, + positive: SuccessMedium, + notice: AlertMedium, + negative: AlertMedium +}; + +function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef) { + // Grabs specific props from the closest Provider (see https://react-spectrum.adobe.com/react-spectrum/Provider.html#property-groups). Remove if your component doesn't support any of the listed props. + props = useProviderProps(props); + let { + children, + variant = 'neutral', + ...otherProps + } = props; + + // Handles RSP specific style options, UNSAFE_style, and UNSAFE_className props (see https://react-spectrum.adobe.com/react-spectrum/styling.html#style-props) + let {styleProps} = useStyleProps(otherProps); + let domRef = useDOMRef(ref); + let gridRef = useRef(); + let {alertProps} = useAlert(); + + console.log(styles); + + let slots = { + icon: {UNSAFE_className: styles['spectrum-InLineAlert-icon'], gridArea: 'icon'}, + header: {UNSAFE_className: styles['spectrum-InLineAlert-header'], gridArea: 'header'}, + content: {UNSAFE_className: styles['spectrum-InLineAlert-content'], gridArea: 'content'}, + buttonGroup: {UNSAFE_className: styles['spectrum-InLineAlert-buttonGroup'], gridArea: 'buttonGroup'} + }; + + let Icon = null; + if (variant in ICONS) { + Icon = ICONS[variant]; + } + + let stringFormatter = useLocalizedStringFormatter(intlMessages); + let iconAlt = stringFormatter.format(variant); + + return ( +
+ + + {Icon && } + {children} + + +
+ ); +} + +/** + * In-line alerts display a non-modal message associated with objects in a view. + * These are often used in form validation, providing a place to aggregate feedback related to multiple fields. + */ +const _InLineAlert = React.forwardRef(InLineAlert); +export {_InLineAlert as InLineAlert}; diff --git a/packages/@react-spectrum/inlinealert/src/index.ts b/packages/@react-spectrum/inlinealert/src/index.ts new file mode 100644 index 00000000000..9a055ef6860 --- /dev/null +++ b/packages/@react-spectrum/inlinealert/src/index.ts @@ -0,0 +1,15 @@ +/* + * Copyright 2023 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. + */ + +/// + +export * from './InLineAlert'; diff --git a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx new file mode 100644 index 00000000000..1e52132b64d --- /dev/null +++ b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx @@ -0,0 +1,70 @@ +/* + * Copyright 2023 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 {Button} from '@react-spectrum/button'; +import {ButtonGroup} from '@react-spectrum/buttongroup'; +import {Content, Header} from '@react-spectrum/view'; +import {InLineAlert} from '../'; +import {Meta, Story} from '@storybook/react'; +import React from 'react'; +import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; + +// see https://github.com/storybookjs/storybook/issues/8426#issuecomment-669021940 +const StoryFn = ({storyFn}) => storyFn(); + +type StoryArgs = SpectrumInLineAlertProps & {title: string, content: string}; + +const meta: Meta = { + title: 'InLineAlert', + component: InLineAlert, + args: { + title: 'Title', + content: 'Content', + variant: 'info' + }, + argTypes: { + variant: { + control: 'select', + options: ['neutral', 'info', 'positive', 'notice', 'negative'] + }, + title: { + control: 'text' + }, + content: { + control: 'text' + } + }, + decorators: [storyFn => ] +}; + +export default meta; + +const Template = (): Story => (args) => ( + +
{args.title}
+ {args.content} + +); + +const ButtonTemplate = (): Story => (args) => ( + +
{args.title}
+ {args.content} + + + + +); + +export const Default = Template().bind({}); + +export const WithButtons = ButtonTemplate().bind({}); diff --git a/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js b/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js new file mode 100644 index 00000000000..0ed5d0eaf29 --- /dev/null +++ b/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js @@ -0,0 +1,26 @@ +/* + * Copyright 2023 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 {InlineAlert} from '../'; +import {render} from '@react-spectrum/test-utils'; +import React from 'react'; + +describe('InlineAlert', function () { + it.each` + Name | Component | props + ${'InlineAlert'} | ${InlineAlert} | ${{}} + `('$Name handles defaults', function ({Component, props}) { + let tree = render(); + + expect(tree).toBeTruthy(); + }); +}); diff --git a/packages/@react-types/inlinealert/README.md b/packages/@react-types/inlinealert/README.md new file mode 100644 index 00000000000..77b5277f2e2 --- /dev/null +++ b/packages/@react-types/inlinealert/README.md @@ -0,0 +1,3 @@ +# @react-types/inlinealert + +This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details. diff --git a/packages/@react-types/inlinealert/package.json b/packages/@react-types/inlinealert/package.json new file mode 100644 index 00000000000..6c97b516de6 --- /dev/null +++ b/packages/@react-types/inlinealert/package.json @@ -0,0 +1,21 @@ +{ + "name": "@react-types/inlinealert", + "version": "3.0.0-alpha.1", + "description": "Spectrum UI components in React", + "license": "Apache-2.0", + "private": true, + "types": "src/index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/adobe/react-spectrum" + }, + "dependencies": { + "@react-types/shared": "^3.1.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/@react-types/inlinealert/src/index.d.ts b/packages/@react-types/inlinealert/src/index.d.ts new file mode 100644 index 00000000000..cf1a000f099 --- /dev/null +++ b/packages/@react-types/inlinealert/src/index.d.ts @@ -0,0 +1,20 @@ +/* + * Copyright 2023 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 {DOMProps, StyleProps} from '@react-types/shared'; +import {ReactNode} from 'react'; + + +export interface SpectrumInLineAlertProps extends DOMProps, StyleProps { + variant?: 'neutral' | 'info' | 'positive' | 'notice' | 'negative', + children: ReactNode +} From f8c9ae9efa36cd07d481b9cd234c9b284f38b7db Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 12:10:19 -0400 Subject: [PATCH 02/19] Implement InlineAlert component #1343 --- .../components/inlinealert/index.css | 129 +++++++++--------- .../stories/InLineAlert.stories.tsx | 5 + 2 files changed, 69 insertions(+), 65 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css index 0f1f48ecd6b..32ed075744e 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css @@ -14,61 +14,60 @@ governing permissions and limitations under the License. :root { /* Font */ - --spectrum-inlinealert-heading-font-weight:var(--spectrum-alias-heading-text-font-weight-regular); - --spectrum-inlinealert-heading-font-style:var(--spectrum-global-font-style-regular); - --spectrum-inlinealert-heading-font-size:var(--spectrum-global-dimension-font-size-100); - --spectrum-inlinealert-heading-line-height:var(--spectrum-alias-heading-text-line-height); + --spectrum-inlinealert-heading-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); + --spectrum-inlinealert-heading-font-style: var(--spectrum-global-font-style-regular); + --spectrum-inlinealert-heading-font-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-inlinealert-heading-line-height: var(--spectrum-alias-heading-text-line-height); - --spectrum-inlinealert-content-font-weight:var(--spectrum-alias-body-text-font-weight); - --spectrum-inlinealert-content-font-style:var(--spectrum-global-font-style-regular); - --spectrum-inlinealert-content-font-size:var(--spectrum-global-dimension-font-size-100); - --spectrum-inlinealert-content-line-height:var(--spectrum-alias-line-height-body); + --spectrum-inlinealert-content-font-weight: var(--spectrum-alias-body-text-font-weight); + --spectrum-inlinealert-content-font-style: var(--spectrum-global-font-style-regular); + --spectrum-inlinealert-content-font-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-inlinealert-content-line-height: var(--spectrum-alias-line-height-body); /* Size*/ - --spectrum-inlinealert-border-width:var(--spectrum-alias-border-size-thick); - --spectrum-inlinealert-border-radius:var(--spectrum-border-radius); - --spectrum-inlinealert-icon-size:var(--spectrum-global-dimension-size-225); - --spectrum-inlinealert-min-inline-size:240px; - --spectrum-inlinealert-header-min-block-size:var(--spectrum-global-dimension-size-250); + --spectrum-inlinealert-border-width: var(--spectrum-alias-border-size-thick); + --spectrum-inlinealert-border-radius: var(--spectrum-border-radius); + --spectrum-inlinealert-icon-size: var(--spectrum-global-dimension-size-225); + --spectrum-inlinealert-min-inline-size: 240px; + --spectrum-inlinealert-header-min-block-size: var(--spectrum-global-dimension-size-250); /* Spacing*/ - --spectrum-inlinealert-spacing-edge-to-text:var(--spectrum-global-dimension-static-size-300); - --spectrum-inlinealert-spacing-header-to-icon:var(--spectrum-global-dimension-static-size-300); - --spectrum-inlinealert-spacing-header-content-button:var(--spectrum-global-dimension-static-size-200); + --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-global-dimension-static-size-300); + --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-global-dimension-static-size-300); + --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-global-dimension-static-size-200); /* Color */ - --spectrum-inlinealert-background-color:var(--spectrum-alias-background-color-default); - --spectrum-inlinealert-border-and-icon-color:var(--spectrum-gray-visual-color); - --spectrum-inlinealert-header-color:var(--spectrum-alias-heading-text-color); - --spectrum-inlinealert-content-color:var(--spectrum-alias-text-color); - --spectrum-inlinealert-border-and-icon-color-info:var(--spectrum-informative-visual-color); - --spectrum-inlinealert-border-and-icon-color-positive:var(--spectrum-positive-visual-color); - --spectrum-inlinealert-border-and-icon-color-notice:var(--spectrum-notice-visual-color); - --spectrum-inlinealert-border-and-icon-color-negative:var(--spectrum-negative-visual-color); + --spectrum-inlinealert-background-color: var(--spectrum-alias-background-color-default); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-gray-visual-color); + --spectrum-inlinealert-header-color: var(--spectrum-alias-heading-text-color); + --spectrum-inlinealert-content-color: var(--spectrum-alias-text-color); + --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color); + --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); + --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); + --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); } .spectrum-InLineAlert { - position:relative; + position: relative; - display:inline-block; - box-sizing:border-box; - min-inline-size:var(--spectrum-inlinealert-min-inline-size); + display: inline-block; + box-sizing: border-box; + min-inline-size: var(--spectrum-inlinealert-min-inline-size); - padding-block:var(--spectrum-inlinealert-spacing-edge-to-text); - padding-inline:var(--spectrum-inlinealert-spacing-edge-to-text); + padding-block: var(--spectrum-inlinealert-spacing-edge-to-text); + padding-inline: var(--spectrum-inlinealert-spacing-edge-to-text); - border-block-width:var(--spectrum-inlinealert-border-width); - border-inline-width:var(--spectrum-inlinealert-border-width); - border-style:solid; - border-radius:var(--spectrum-inlinealert-border-radius); + border-block-width: var(--spectrum-inlinealert-border-width); + border-inline-width: var(--spectrum-inlinealert-border-width); + border-style: solid; + border-radius: var(--spectrum-inlinealert-border-radius); } .spectrum-InLineAlert .spectrum-InLineAlert-grid { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; - column-gap:var(--spectrum-inlinealert-spacing-header-to-icon); - align-items: center; + column-gap: var(--spectrum-inlinealert-spacing-header-to-icon); grid-template-areas: "header icon " "content content " @@ -78,49 +77,49 @@ governing permissions and limitations under the License. @media (forced-colors: active) { .spectrum-InLineAlert { - --highcontrast-inlinealert-background-color:Background; - --highcontrast-inlinealert-header-color:CanvasText; - --highcontrast-inlinealert-content-color:CanvasText; - --highcontrast-inlinealert-border-and-icon-color:ButtonBorder; + --highcontrast-inlinealert-background-color: Background; + --highcontrast-inlinealert-header-color: CanvasText; + --highcontrast-inlinealert-content-color: CanvasText; + --highcontrast-inlinealert-border-and-icon-color: ButtonBorder; } } .spectrum-InLineAlert-icon { - inline-size:var(--spectrum-inlinealert-icon-size); - block-size:var(--spectrum-inlinealert-icon-size); + inline-size: var(--spectrum-inlinealert-icon-size); + block-size: var(--spectrum-inlinealert-icon-size); } .spectrum-InLineAlert-header { - display:block; + display: block; - font-weight:var(--spectrum-inlinealert-heading-font-weight); - font-style:var(--spectrum-inlinealert-heading-font-style); - font-size:var(--spectrum-inlinealert-heading-font-size); - line-height:var(--spectrum-inlinealert-heading-line-height); - text-transform:none; + font-weight: var(--spectrum-inlinealert-heading-font-weight); + font-style: var(--spectrum-inlinealert-heading-font-style); + font-size: var(--spectrum-inlinealert-heading-font-size); + line-height: var(--spectrum-inlinealert-heading-line-height); + text-transform: none; - min-block-size:var(--spectrum-inlinealert-header-min-block-size); + min-block-size: var(--spectrum-inlinealert-header-min-block-size); } .spectrum-InLineAlert-content { - display:block; - margin-block-start:var(--spectrum-inlinealert-spacing-header-content-button); - margin-block-end:0; - margin-inline-start:0; - margin-inline-end:0; - padding:0; - - word-wrap:break-word; - - font-weight:var(--spectrum-inlinealert-content-font-weight); - font-style:var(--spectrum-inlinealert-content-font-style); - font-size:var(--spectrum-inlinealert-content-font-size); - line-height:var(--spectrum-inlinealert-content-line-height); + display: block; + margin-block-start: var(--spectrum-inlinealert-spacing-header-content-button); + margin-block-end: 0; + margin-inline-start: 0; + margin-inline-end: 0; + padding: 0; + + word-wrap: break-word; + + font-weight: var(--spectrum-inlinealert-content-font-weight); + font-style: var(--spectrum-inlinealert-content-font-style); + font-size: var(--spectrum-inlinealert-content-font-size); + line-height: var(--spectrum-inlinealert-content-line-height); } .spectrum-InLineAlert-buttonGroup { - display:flex; - justify-content:flex-end; - margin-block-start:var(--spectrum-inlinealert-spacing-header-content-button); + display: flex; + justify-content: flex-end; + margin-block-start: var(--spectrum-inlinealert-spacing-header-content-button); } diff --git a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx index 1e52132b64d..986f27ccadc 100644 --- a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx +++ b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx @@ -66,5 +66,10 @@ const ButtonTemplate = (): Story => (args) => ( ); export const Default = Template().bind({}); +export const LongContent = Template().bind({}); +LongContent.args = { + title: 'Unable to process payment', + content: 'There was an error processing your payment. Please check your credit card information is correct, then try again.' +}; export const WithButtons = ButtonTemplate().bind({}); From 66bd61df899bf8c646dee529b5c2826f0d11dc68 Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 12:23:04 -0400 Subject: [PATCH 03/19] Implement InlineAlert component #1343 --- .../chromatic/InLineAlert.chromatic.tsx | 21 ++--- .../inlinealert/docs/InLineAlert.mdx | 76 ------------------- 2 files changed, 11 insertions(+), 86 deletions(-) delete mode 100644 packages/@react-spectrum/inlinealert/docs/InLineAlert.mdx diff --git a/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx b/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx index a135323d895..a679ce8cdcc 100644 --- a/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx +++ b/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx @@ -10,27 +10,28 @@ * governing permissions and limitations under the License. */ -import {InlineAlert} from '../'; +import {Content, Header} from '@react-spectrum/view'; +import {InLineAlert} from '../'; import {Meta, Story} from '@storybook/react'; import React from 'react'; - -interface SpectrumInlineAlertProps { - -} +import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; // see https://github.com/storybookjs/storybook/issues/8426#issuecomment-669021940 const StoryFn = ({storyFn}) => storyFn(); -const meta: Meta = { - title: 'InlineAlert', - component: InlineAlert, +const meta: Meta = { + title: 'InLineAlert', + component: InLineAlert, decorators: [storyFn => ] }; export default meta; -const Template = (): Story => (args) => ( - This is a React Spectrum InlineAlert +const Template = (): Story => (args) => ( + +
In-Line Alert Header
+ This is a React Spectrum InlineAlert + ); export const Default = Template().bind({}); diff --git a/packages/@react-spectrum/inlinealert/docs/InLineAlert.mdx b/packages/@react-spectrum/inlinealert/docs/InLineAlert.mdx deleted file mode 100644 index 255b1f15915..00000000000 --- a/packages/@react-spectrum/inlinealert/docs/InLineAlert.mdx +++ /dev/null @@ -1,76 +0,0 @@ -{/* Copyright 2023 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 {Layout} from '@react-spectrum/docs'; -export default Layout; - -import docs from 'docs:@react-spectrum/inlinealert'; -import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs'; -import packageData from '@react-spectrum/inlinealert/package.json'; - -```jsx import -import {InlineAlert} from '@react-spectrum/inlinealert'; -``` - -*Include after_version if the docs shouldn't be published to the website until reaching a specific package version.* ---- -category: Category Name -keywords: [] -after_version: 3.0.0-alpha.0 ---- - -# InlineAlert - -{docs.exports.InlineAlert.description} - -*Be sure to update the Spectrum url below to match the current component.* - - -## Example - -```tsx example -Button -``` - -## Content - -*If the component has a children prop that accepts any type of content (e.g. `ReactNode`), include this section. Please include a note about how to internationalize the content.* - -## Value - -*If the component displays or allows a user to input a value, include this section.* - -## Labeling - -*If the component supports a label prop, include this section. Please include a note about how to internationalize the content.* - -## Events - -*If the component supports event props, include this section. Only cover the events that are important to the main functionality of the component.* - -## Validation - -*If the component supports validation props, include this section.* - -## Props - -*Include an additional PropTables if multiple components are being documented in a single file. See Tabs.mdx for an example.* - - -## Visual options - -*Show examples of all variants and visual props here with links to the design website for more usage details. Examples can be grouped together for conciseness.* - -### Sample Option -[View guidelines](https://spectrum.adobe.com/page/text-field/#Width) From ef50ea6a425674d792633b1da0bf5f7dd283bb85 Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 12:24:13 -0400 Subject: [PATCH 04/19] Implement InlineAlert component #1343 --- packages/@react-spectrum/inlinealert/src/InLineAlert.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx index f358888f207..e7e34e777ba 100644 --- a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx +++ b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx @@ -48,8 +48,6 @@ function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef Date: Tue, 9 May 2023 12:31:53 -0400 Subject: [PATCH 05/19] Implement InlineAlert component #1343 - remove support for button group --- .../components/inlinealert/index.css | 10 +--------- .../inlinealert/src/InLineAlert.tsx | 1 - .../inlinealert/stories/InLineAlert.stories.tsx | 14 -------------- 3 files changed, 1 insertion(+), 24 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css index 32ed075744e..e3cc85c40de 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css @@ -70,8 +70,7 @@ governing permissions and limitations under the License. column-gap: var(--spectrum-inlinealert-spacing-header-to-icon); grid-template-areas: "header icon " - "content content " - "buttonGroup buttonGroup"; + "content content "; width: 100%; } @@ -116,10 +115,3 @@ governing permissions and limitations under the License. font-size: var(--spectrum-inlinealert-content-font-size); line-height: var(--spectrum-inlinealert-content-line-height); } - -.spectrum-InLineAlert-buttonGroup { - display: flex; - justify-content: flex-end; - margin-block-start: var(--spectrum-inlinealert-spacing-header-content-button); -} - diff --git a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx index e7e34e777ba..1399cd6ae04 100644 --- a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx +++ b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx @@ -52,7 +52,6 @@ function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef => (args) => ( ); -const ButtonTemplate = (): Story => (args) => ( - -
{args.title}
- {args.content} - - - - -); - export const Default = Template().bind({}); export const LongContent = Template().bind({}); LongContent.args = { title: 'Unable to process payment', content: 'There was an error processing your payment. Please check your credit card information is correct, then try again.' }; - -export const WithButtons = ButtonTemplate().bind({}); From 66ba5ad02243fc7cc92523f7309cd9b41e4df314 Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 12:46:20 -0400 Subject: [PATCH 06/19] Implement InlineAlert component #1343 - gridRef no longer needed --- packages/@react-spectrum/inlinealert/src/InLineAlert.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx index 1399cd6ae04..d2baa94349c 100644 --- a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx +++ b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx @@ -18,7 +18,7 @@ import {Grid} from '@react-spectrum/layout'; import InfoMedium from '@spectrum-icons/ui/InfoMedium'; // @ts-ignore import intlMessages from '../intl/*.json'; -import React, {useRef} from 'react'; +import React from 'react'; import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; import styles from '@adobe/spectrum-css-temp/components/inlinealert/vars.css'; import SuccessMedium from '@spectrum-icons/ui/SuccessMedium'; @@ -34,7 +34,6 @@ let ICONS = { }; function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef) { - // Grabs specific props from the closest Provider (see https://react-spectrum.adobe.com/react-spectrum/Provider.html#property-groups). Remove if your component doesn't support any of the listed props. props = useProviderProps(props); let { children, @@ -42,10 +41,8 @@ function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef - + {Icon && } {children} From 23bb3afed9e265d6b112e11ce48d66f24eb3fc40 Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 15:23:39 -0400 Subject: [PATCH 07/19] Implement InlineAlert component #1343 - update story Co-authored-by: Robert Snow --- .../stories/InLineAlert.stories.tsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx index bab97d4dfba..c96a519ba84 100644 --- a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx +++ b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx @@ -46,16 +46,19 @@ const meta: Meta = { export default meta; -const Template = (): Story => (args) => ( - -
{args.title}
- {args.content} - -); +export const Default = { + render: (args) => ( + +
{args.title}
+ {args.content} + + ) +}; -export const Default = Template().bind({}); -export const LongContent = Template().bind({}); -LongContent.args = { - title: 'Unable to process payment', - content: 'There was an error processing your payment. Please check your credit card information is correct, then try again.' +export const LongContent = { + ...Default, + args: { + title: 'Unable to process payment', + content: 'There was an error processing your payment. Please check your credit card information is correct, then try again.' + } }; From d051ead199ae28e8cc85d5ef656f85da870b273d Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 15:27:26 -0400 Subject: [PATCH 08/19] Implement InlineAlert component #1343 - update test - remove `@react-aria/alert` --- packages/@react-aria/alert/README.md | 3 - .../@react-aria/alert/docs/AlertAnatomy.svg | 0 packages/@react-aria/alert/docs/useAlert.mdx | 91 ------------------- packages/@react-aria/alert/index.ts | 13 --- packages/@react-aria/alert/package.json | 34 ------- packages/@react-aria/alert/src/index.ts | 13 --- packages/@react-aria/alert/src/useAlert.ts | 30 ------ .../@react-aria/alert/test/useAlert.test.js | 21 ----- .../inlinealert/src/InLineAlert.tsx | 8 +- .../stories/InLineAlert.stories.tsx | 10 +- .../inlinealert/test/InLineAlert.test.js | 66 ++++++++++++-- 11 files changed, 65 insertions(+), 224 deletions(-) delete mode 100644 packages/@react-aria/alert/README.md delete mode 100644 packages/@react-aria/alert/docs/AlertAnatomy.svg delete mode 100644 packages/@react-aria/alert/docs/useAlert.mdx delete mode 100644 packages/@react-aria/alert/index.ts delete mode 100644 packages/@react-aria/alert/package.json delete mode 100644 packages/@react-aria/alert/src/index.ts delete mode 100644 packages/@react-aria/alert/src/useAlert.ts delete mode 100644 packages/@react-aria/alert/test/useAlert.test.js diff --git a/packages/@react-aria/alert/README.md b/packages/@react-aria/alert/README.md deleted file mode 100644 index d19dec8fbb5..00000000000 --- a/packages/@react-aria/alert/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# @react-aria/alert - -This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details. diff --git a/packages/@react-aria/alert/docs/AlertAnatomy.svg b/packages/@react-aria/alert/docs/AlertAnatomy.svg deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/@react-aria/alert/docs/useAlert.mdx b/packages/@react-aria/alert/docs/useAlert.mdx deleted file mode 100644 index b3848b8c13e..00000000000 --- a/packages/@react-aria/alert/docs/useAlert.mdx +++ /dev/null @@ -1,91 +0,0 @@ -{/* Copyright 2023 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 {Layout} from '@react-spectrum/docs'; -export default Layout; - -*Additional types can be imported via a direct path to the *.d.ts file if need be. See the useComboBox.mdx for an example.* -import docs from 'docs:@react-aria/alert'; -import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescription} from '@react-spectrum/docs'; -import packageData from '@react-aria/alert/package.json'; -import Anatomy from './alertAnatomy.svg' - -*Include after_version if the docs shouldn't be published to the website until reaching a specific package version.* ---- -category: Category Name -keywords: [] -after_version: 3.0.0-alpha.0 ---- - -# useAlert - -{docs.exports.useAlert.description} - -*Be sure to update the W3C url below if applicable to your hook, otherwise omit the sourceData prop.* - - -## API - -*Include an additional FunctionAPI if multiple hooks are being documented in a single file. See useTabList.mdx for an example.* - - -## Features - -*Describe what the aria hook helps with/provides.* - -## Anatomy/Usage - -*For hooks that are meant to be used with specific elements/components, include an Anatomy section detailing the props the hook returns. See useColorField.mdx for an example.* -*If applicable, the anatomy diagram should be added as a local svg file, sourced from the Spectrum XD file (ask in the #spectrum-react room if you can't find one). Follow these steps after you obtain the XD file:* -*1. Open the XD file and find the anatomy diagram. Update the diagrams to match the actual anatomy/names we use in React Aria. Spectrum often includes additional things, but we want to match the returned prop objects from the hooks so remove these extra elements. -*2. After finishing the edits, select the diagram by double clicking its artboard. Export it as an SVG via File -> Export -> Selected...* -*4. Update the fonts. the xd file might reference something like Adobe-Clean-It for italic, but in the svg it needs to always be font-family="Adobe-Clean" with font-style="italic" for example.* -*5. Replace the colors in the SVG with their spectrum color variable equivalents. See docs.css .provider for a mapping of these colors (--anatomy--gray- prefixed vars). Choose the closest one if there isn't an exact match.* -*6. Remove width and height specified on the svg element, and replace with a style attribute similar to the one in other anatomy diagrams, but change the max-height to match viewBox. That makes it responsive.* -*7. Add an aria-label that describes what is in the anatomy diagram.* - - -*For hooks that are meant for more general use, include a Usage section instead detailing the props/params the hook accepts and returns. See useKeyboard.mdx for an example.* - -*If the below doesn't work see useFocusRing.mdx, useFocusWithin.mdx, and useHover.mdx for some alternative ways of using InterfaceType. * - - - - -*If you'd like to have a inline type link (e.g. referencing the type def of the stately hook), use the TypeLink component below and replace the links to the appropriate docs import.* - - -## Example - -*Add an example of the hook (being used with native elements, etc)* -*If you create an example component that will be reused else where in this doc, include export=true so that you can directly reuse the component and avoid copy pasting the same code.* -*See useComboBox.mdx for an example.* -```tsx example export=true -import {useAlert} from '@react-aria/alert'; - -function Example(props) { - return ( -
test
- ); -} -``` - -## Usage - -*For hooks that are meant to be used with specific elements/components, include this usage section detailing examples of how to use the hook. * -*This should roughly mirror the examples that the corresponding React Spectrum component docs have (e.g. Controlled/Uncontrolled, Disabled, change handlers, etc). * - -## Internationalization - -*Mention if RTL * diff --git a/packages/@react-aria/alert/index.ts b/packages/@react-aria/alert/index.ts deleted file mode 100644 index 7e5b036e91f..00000000000 --- a/packages/@react-aria/alert/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright 2023 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. - */ - -export * from './src'; diff --git a/packages/@react-aria/alert/package.json b/packages/@react-aria/alert/package.json deleted file mode 100644 index da9f041c658..00000000000 --- a/packages/@react-aria/alert/package.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "name": "@react-aria/alert", - "version": "3.0.0-alpha.1", - "private": true, - "description": "Spectrum UI components in React", - "license": "Apache-2.0", - "main": "dist/main.js", - "module": "dist/module.js", - "types": "dist/types.d.ts", - "exports": { - "types": "./dist/types.d.ts", - "import": "./dist/import.mjs", - "require": "./dist/main.js" - }, - "source": "src/index.ts", - "files": [ - "dist", - "src" - ], - "sideEffects": false, - "repository": { - "type": "git", - "url": "https://github.com/adobe/react-spectrum" - }, - "dependencies": { - "@swc/helpers": "^0.4.14" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/@react-aria/alert/src/index.ts b/packages/@react-aria/alert/src/index.ts deleted file mode 100644 index 03d94374cf5..00000000000 --- a/packages/@react-aria/alert/src/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright 2023 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. - */ - -export * from './useAlert'; diff --git a/packages/@react-aria/alert/src/useAlert.ts b/packages/@react-aria/alert/src/useAlert.ts deleted file mode 100644 index 0881437e4f9..00000000000 --- a/packages/@react-aria/alert/src/useAlert.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Copyright 2023 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 {HTMLAttributes} from 'react'; - -interface AlertAria { - alertProps: HTMLAttributes -} - -/** - * Provides the behavior and accessibility implementation for an alert component. - * An alert is an element that displays a brief, important message in a way that - * attracts the user's attention without interrupting the user's task. - */ -export function useAlert(): AlertAria { - return { - alertProps: { - role: 'alert' - } - }; -} diff --git a/packages/@react-aria/alert/test/useAlert.test.js b/packages/@react-aria/alert/test/useAlert.test.js deleted file mode 100644 index c8d00bb19be..00000000000 --- a/packages/@react-aria/alert/test/useAlert.test.js +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2023 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 {render, renderHook} from '@react-spectrum/test-utils'; -import React, {useRef} from 'react'; -import {useAlert} from '../'; - -describe('useAlert', function () { - it('fill me in', function () { - expect(true).toBeTruthy(); - }); -}); diff --git a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx index d2baa94349c..8bb84ec3729 100644 --- a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx +++ b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx @@ -22,7 +22,6 @@ import React from 'react'; import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; import styles from '@adobe/spectrum-css-temp/components/inlinealert/vars.css'; import SuccessMedium from '@spectrum-icons/ui/SuccessMedium'; -import {useAlert} from '@react-aria/alert'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useProviderProps} from '@react-spectrum/provider'; @@ -43,12 +42,11 @@ function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef + `spectrum-InLineAlert--${variant}`, styleProps.className)} + role="alert"> {Icon && } diff --git a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx index c96a519ba84..0ed4b61632c 100644 --- a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx +++ b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx @@ -12,7 +12,7 @@ import {Content, Header} from '@react-spectrum/view'; import {InLineAlert} from '../'; -import {Meta, Story} from '@storybook/react'; +import {Meta} from '@storybook/react'; import React from 'react'; import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; @@ -48,10 +48,10 @@ export default meta; export const Default = { render: (args) => ( - -
{args.title}
- {args.content} - + +
{args.title}
+ {args.content} + ) }; diff --git a/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js b/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js index 0ed5d0eaf29..3a313ea93a5 100644 --- a/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js +++ b/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js @@ -10,17 +10,65 @@ * governing permissions and limitations under the License. */ -import {InlineAlert} from '../'; -import {render} from '@react-spectrum/test-utils'; +import {Content, Header} from '@react-spectrum/view'; +import {InLineAlert} from '../'; import React from 'react'; +import {render} from '@react-spectrum/test-utils'; -describe('InlineAlert', function () { - it.each` - Name | Component | props - ${'InlineAlert'} | ${InlineAlert} | ${{}} - `('$Name handles defaults', function ({Component, props}) { - let tree = render(); +describe('InLineAlert', function () { + it('has alert role', function () { + let {getByRole} = render( + +
Title
+ Content + + ); + + let alert = getByRole('alert'); + expect(alert).toBeVisible(); + }); + + it('has a header', function () { + let {getByTestId} = render( + +
Test Title
+ Content + + ); - expect(tree).toBeTruthy(); + let header = getByTestId('testid1'); + expect(header).toBeVisible(); + expect(header).toHaveTextContent('Test Title'); }); + + it('has body content', function () { + let {getByTestId} = render( + +
Title
+ Test Content + + ); + + let content = getByTestId('testid1'); + expect(content).toBeVisible(); + expect(content).toHaveTextContent('Test Content'); + }); + + it.each` + variant + ${'neutral'} + ${'info'} + ${'positive'} + ${'notice'} + ${'negative'} + `('$variant variant renders correctly', function ({variant}) { + let {getByTestId} = render( + +
Title
+ Content + + ); + let alert = getByTestId('testid1'); + expect(alert).toHaveClass(`spectrum-InLineAlert--${variant}`); + }); }); From a855f0da29c866d9203032dc79e0b626feabe70d Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 15:30:56 -0400 Subject: [PATCH 09/19] Implement InlineAlert component #1343 - add comments to types Co-authored-by: Robert Snow --- packages/@react-types/inlinealert/src/index.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/@react-types/inlinealert/src/index.d.ts b/packages/@react-types/inlinealert/src/index.d.ts index cf1a000f099..59c187d3b5a 100644 --- a/packages/@react-types/inlinealert/src/index.d.ts +++ b/packages/@react-types/inlinealert/src/index.d.ts @@ -15,6 +15,10 @@ import {ReactNode} from 'react'; export interface SpectrumInLineAlertProps extends DOMProps, StyleProps { + /** + * The [visual style](https://spectrum.adobe.com/page/in-line-alert/#Options) of the In Line Alert. + * @default 'neutral' + */ variant?: 'neutral' | 'info' | 'positive' | 'notice' | 'negative', children: ReactNode } From 49dd5d0f0052a6446d843df2739df0388fce1587 Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 15:32:30 -0400 Subject: [PATCH 10/19] Implement InlineAlert component #1343 - update comment in react-types --- packages/@react-types/inlinealert/src/index.d.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/@react-types/inlinealert/src/index.d.ts b/packages/@react-types/inlinealert/src/index.d.ts index 59c187d3b5a..68a756184f2 100644 --- a/packages/@react-types/inlinealert/src/index.d.ts +++ b/packages/@react-types/inlinealert/src/index.d.ts @@ -13,10 +13,9 @@ import {DOMProps, StyleProps} from '@react-types/shared'; import {ReactNode} from 'react'; - export interface SpectrumInLineAlertProps extends DOMProps, StyleProps { - /** - * The [visual style](https://spectrum.adobe.com/page/in-line-alert/#Options) of the In Line Alert. + /** + * The [visual style](https://spectrum.adobe.com/page/in-line-alert/#Options) of the In-Line Alert. * @default 'neutral' */ variant?: 'neutral' | 'info' | 'positive' | 'notice' | 'negative', From 36b0440d2d9ad4b5248b68cf295a2c506e9bd73f Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 15:34:11 -0400 Subject: [PATCH 11/19] Implement InlineAlert component #1343 - remove @react-aria/alert dependency --- packages/@react-spectrum/inlinealert/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/@react-spectrum/inlinealert/package.json b/packages/@react-spectrum/inlinealert/package.json index a3e795e54dc..9890b846386 100644 --- a/packages/@react-spectrum/inlinealert/package.json +++ b/packages/@react-spectrum/inlinealert/package.json @@ -37,7 +37,6 @@ "url": "https://github.com/adobe/react-spectrum" }, "dependencies": { - "@react-aria/alert": "^3.0.0-alpha.1", "@react-aria/i18n": "^3.7.1", "@react-aria/utils": "^3.0.0", "@react-spectrum/layout": "^3.5.1", From fc3d9346cbd7d88f560147bf74aea25925a53361 Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 9 May 2023 15:38:18 -0400 Subject: [PATCH 12/19] Implement InlineAlert component #1343 - add info variant story --- .../inlinealert/stories/InLineAlert.stories.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx index 0ed4b61632c..59a7ad23c27 100644 --- a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx +++ b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx @@ -26,8 +26,7 @@ const meta: Meta = { component: InLineAlert, args: { title: 'Title', - content: 'Content', - variant: 'info' + content: 'Content' }, argTypes: { variant: { @@ -62,3 +61,10 @@ export const LongContent = { content: 'There was an error processing your payment. Please check your credit card information is correct, then try again.' } }; + +export const InfoVariant = { + ...Default, + args: { + variant: 'info' + } +}; From ccfd78bee35c38c93d0fe8ab4452641f50ec917c Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Wed, 10 May 2023 09:19:04 -0400 Subject: [PATCH 13/19] Implement InlineAlert component #1343 - fixes based on PR comments --- .../components/inlinealert/index.css | 18 +++++++++--------- .../components/inlinealert/skin.css | 9 +++++++++ .../inlinealert/intl/ar-AE.json | 7 +++++++ .../inlinealert/src/InLineAlert.tsx | 7 +++---- .../@react-spectrum/inlinealert/src/index.ts | 2 +- .../stories/InLineAlert.stories.tsx | 6 +----- .../@react-types/inlinealert/src/index.d.ts | 3 +++ 7 files changed, 33 insertions(+), 19 deletions(-) create mode 100644 packages/@react-spectrum/inlinealert/intl/ar-AE.json diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css index e3cc85c40de..ab07ac3801f 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css @@ -34,7 +34,7 @@ governing permissions and limitations under the License. /* Spacing*/ --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-global-dimension-static-size-300); --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-global-dimension-static-size-300); - --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-global-dimension-static-size-200); + --spectrum-inlinealert-spacing-header-content: var(--spectrum-global-dimension-static-size-200); /* Color */ --spectrum-inlinealert-background-color: var(--spectrum-alias-background-color-default); @@ -74,22 +74,20 @@ governing permissions and limitations under the License. width: 100%; } -@media (forced-colors: active) { - .spectrum-InLineAlert { - --highcontrast-inlinealert-background-color: Background; - --highcontrast-inlinealert-header-color: CanvasText; - --highcontrast-inlinealert-content-color: CanvasText; - --highcontrast-inlinealert-border-and-icon-color: ButtonBorder; - } +.spectrum-InLineAlert.spectrum-InLineAlert--neutral .spectrum-InLineAlert-grid { + grid-template-areas: "header" "content"; } .spectrum-InLineAlert-icon { + grid-area: icon; + inline-size: var(--spectrum-inlinealert-icon-size); block-size: var(--spectrum-inlinealert-icon-size); } .spectrum-InLineAlert-header { display: block; + grid-area: header; font-weight: var(--spectrum-inlinealert-heading-font-weight); font-style: var(--spectrum-inlinealert-heading-font-style); @@ -102,7 +100,9 @@ governing permissions and limitations under the License. .spectrum-InLineAlert-content { display: block; - margin-block-start: var(--spectrum-inlinealert-spacing-header-content-button); + grid-area: content; + + margin-block-start: var(--spectrum-inlinealert-spacing-header-content); margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css index 3a0a64057a7..a987eee0b4b 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/skin.css @@ -10,6 +10,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +@media (forced-colors: active) { + .spectrum-InLineAlert { + --highcontrast-inlinealert-background-color: Background; + --highcontrast-inlinealert-header-color: CanvasText; + --highcontrast-inlinealert-content-color: CanvasText; + --highcontrast-inlinealert-border-and-icon-color: ButtonBorder; + } +} + .spectrum-InLineAlert { background-color:var(--highcontrast-inlinealert-background-color, var(--spectrum-inlinealert-background-color)); border-color:var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)); diff --git a/packages/@react-spectrum/inlinealert/intl/ar-AE.json b/packages/@react-spectrum/inlinealert/intl/ar-AE.json new file mode 100644 index 00000000000..7bb7656caa3 --- /dev/null +++ b/packages/@react-spectrum/inlinealert/intl/ar-AE.json @@ -0,0 +1,7 @@ +{ + "neutral": "Neutral", + "info": "Informative", + "positive": "Positive", + "notice": "Notice", + "negative": "Negative" +} diff --git a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx index 8bb84ec3729..441c4976dc2 100644 --- a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx +++ b/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx @@ -44,9 +44,8 @@ function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef - {Icon && } + {Icon && } {children} diff --git a/packages/@react-spectrum/inlinealert/src/index.ts b/packages/@react-spectrum/inlinealert/src/index.ts index 9a055ef6860..3e3061c3db4 100644 --- a/packages/@react-spectrum/inlinealert/src/index.ts +++ b/packages/@react-spectrum/inlinealert/src/index.ts @@ -12,4 +12,4 @@ /// -export * from './InLineAlert'; +export {InLineAlert} from './InLineAlert'; diff --git a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx index 59a7ad23c27..f1d3a7da2fa 100644 --- a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx +++ b/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx @@ -16,9 +16,6 @@ import {Meta} from '@storybook/react'; import React from 'react'; import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; -// see https://github.com/storybookjs/storybook/issues/8426#issuecomment-669021940 -const StoryFn = ({storyFn}) => storyFn(); - type StoryArgs = SpectrumInLineAlertProps & {title: string, content: string}; const meta: Meta = { @@ -39,8 +36,7 @@ const meta: Meta = { content: { control: 'text' } - }, - decorators: [storyFn => ] + } }; export default meta; diff --git a/packages/@react-types/inlinealert/src/index.d.ts b/packages/@react-types/inlinealert/src/index.d.ts index 68a756184f2..25fb4b84957 100644 --- a/packages/@react-types/inlinealert/src/index.d.ts +++ b/packages/@react-types/inlinealert/src/index.d.ts @@ -19,5 +19,8 @@ export interface SpectrumInLineAlertProps extends DOMProps, StyleProps { * @default 'neutral' */ variant?: 'neutral' | 'info' | 'positive' | 'notice' | 'negative', + /** + * The contents of the In-line Alert. + */ children: ReactNode } From 234441390921f11068eda64a4e50408049b6a777 Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Wed, 10 May 2023 09:24:57 -0400 Subject: [PATCH 14/19] Implement InlineAlert component #1343 - fixes based on PR comments --- .../@adobe/spectrum-css-temp/components/inlinealert/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css index ab07ac3801f..8bc8b24eff0 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css @@ -75,6 +75,7 @@ governing permissions and limitations under the License. } .spectrum-InLineAlert.spectrum-InLineAlert--neutral .spectrum-InLineAlert-grid { + column-gap: 0; grid-template-areas: "header" "content"; } From ae627d8463390741ba013389bfae9ce568f38602 Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Wed, 10 May 2023 09:25:19 -0400 Subject: [PATCH 15/19] Implement InlineAlert component #1343 - fixes based on PR comments --- .../@adobe/spectrum-css-temp/components/inlinealert/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css index 8bc8b24eff0..64c44622132 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css @@ -69,8 +69,8 @@ governing permissions and limitations under the License. grid-template-rows: auto auto auto; column-gap: var(--spectrum-inlinealert-spacing-header-to-icon); grid-template-areas: - "header icon " - "content content "; + "header icon " + "content content"; width: 100%; } From aeb85f56b9c2137a82ee2f434a6efa6c8bc7b86f Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 16 May 2023 10:54:33 -0400 Subject: [PATCH 16/19] Implement InlineAlert component #1343 - rename from `InLineAlert` to `InlineAlert` --- .../components/inlinealert/index.css | 10 +++++----- .../components/inlinealert/vars.css | 2 +- ...hromatic.tsx => InlineAlert.chromatic.tsx} | 10 +++++----- .../src/{InLineAlert.tsx => InlineAlert.tsx} | 8 ++++---- .../@react-spectrum/inlinealert/src/index.ts | 2 +- ...rt.stories.tsx => InlineAlert.stories.tsx} | 14 ++++++------- ...nLineAlert.test.js => InlineAlert.test.js} | 20 +++++++++---------- .../@react-types/inlinealert/src/index.d.ts | 4 ++-- 8 files changed, 35 insertions(+), 35 deletions(-) rename packages/@react-spectrum/inlinealert/chromatic/{InLineAlert.chromatic.tsx => InlineAlert.chromatic.tsx} (83%) rename packages/@react-spectrum/inlinealert/src/{InLineAlert.tsx => InlineAlert.tsx} (92%) rename packages/@react-spectrum/inlinealert/stories/{InLineAlert.stories.tsx => InlineAlert.stories.tsx} (85%) rename packages/@react-spectrum/inlinealert/test/{InLineAlert.test.js => InlineAlert.test.js} (87%) diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css index 64c44622132..b04dab89ae9 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/index.css @@ -1,4 +1,4 @@ -/*! +/* Copyright 2023 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 @@ -24,17 +24,17 @@ governing permissions and limitations under the License. --spectrum-inlinealert-content-font-size: var(--spectrum-global-dimension-font-size-100); --spectrum-inlinealert-content-line-height: var(--spectrum-alias-line-height-body); - /* Size*/ + /* Size */ --spectrum-inlinealert-border-width: var(--spectrum-alias-border-size-thick); --spectrum-inlinealert-border-radius: var(--spectrum-border-radius); --spectrum-inlinealert-icon-size: var(--spectrum-global-dimension-size-225); --spectrum-inlinealert-min-inline-size: 240px; --spectrum-inlinealert-header-min-block-size: var(--spectrum-global-dimension-size-250); - /* Spacing*/ + /* Spacing */ --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-global-dimension-static-size-300); --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-global-dimension-static-size-300); - --spectrum-inlinealert-spacing-header-content: var(--spectrum-global-dimension-static-size-200); + --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-global-dimension-static-size-200); /* Color */ --spectrum-inlinealert-background-color: var(--spectrum-alias-background-color-default); @@ -103,7 +103,7 @@ governing permissions and limitations under the License. display: block; grid-area: content; - margin-block-start: var(--spectrum-inlinealert-spacing-header-content); + margin-block-start: var(--spectrum-inlinealert-spacing-header-content-button); margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; diff --git a/packages/@adobe/spectrum-css-temp/components/inlinealert/vars.css b/packages/@adobe/spectrum-css-temp/components/inlinealert/vars.css index 7183b4259e6..346fa65a723 100644 --- a/packages/@adobe/spectrum-css-temp/components/inlinealert/vars.css +++ b/packages/@adobe/spectrum-css-temp/components/inlinealert/vars.css @@ -1,4 +1,4 @@ -/*! +/* Copyright 2023 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 diff --git a/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx similarity index 83% rename from packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx rename to packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx index a679ce8cdcc..924104bc86e 100644 --- a/packages/@react-spectrum/inlinealert/chromatic/InLineAlert.chromatic.tsx +++ b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx @@ -14,22 +14,22 @@ import {Content, Header} from '@react-spectrum/view'; import {InLineAlert} from '../'; import {Meta, Story} from '@storybook/react'; import React from 'react'; -import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; +import {SpectrumInlineAlertProps} from '@react-types/inlinealert'; // see https://github.com/storybookjs/storybook/issues/8426#issuecomment-669021940 const StoryFn = ({storyFn}) => storyFn(); -const meta: Meta = { - title: 'InLineAlert', +const meta: Meta = { + title: 'InlineAlert', component: InLineAlert, decorators: [storyFn => ] }; export default meta; -const Template = (): Story => (args) => ( +const Template = (): Story => (args) => ( -
In-Line Alert Header
+
In-line Alert Header
This is a React Spectrum InlineAlert ); diff --git a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx similarity index 92% rename from packages/@react-spectrum/inlinealert/src/InLineAlert.tsx rename to packages/@react-spectrum/inlinealert/src/InlineAlert.tsx index 441c4976dc2..ba5ec15a8de 100644 --- a/packages/@react-spectrum/inlinealert/src/InLineAlert.tsx +++ b/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx @@ -19,7 +19,7 @@ import InfoMedium from '@spectrum-icons/ui/InfoMedium'; // @ts-ignore import intlMessages from '../intl/*.json'; import React from 'react'; -import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; +import {SpectrumInlineAlertProps} from '@react-types/inlinealert'; import styles from '@adobe/spectrum-css-temp/components/inlinealert/vars.css'; import SuccessMedium from '@spectrum-icons/ui/SuccessMedium'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; @@ -32,7 +32,7 @@ let ICONS = { negative: AlertMedium }; -function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef) { +function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef) { props = useProviderProps(props); let { children, @@ -78,5 +78,5 @@ function InLineAlert(props: SpectrumInLineAlertProps, ref: DOMRef -export {InLineAlert} from './InLineAlert'; +export {InlineAlert} from './InlineAlert'; diff --git a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx similarity index 85% rename from packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx rename to packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx index f1d3a7da2fa..8fab9d9a7dc 100644 --- a/packages/@react-spectrum/inlinealert/stories/InLineAlert.stories.tsx +++ b/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx @@ -11,16 +11,16 @@ */ import {Content, Header} from '@react-spectrum/view'; -import {InLineAlert} from '../'; +import {InlineAlert} from '../'; import {Meta} from '@storybook/react'; import React from 'react'; -import {SpectrumInLineAlertProps} from '@react-types/inlinealert'; +import {SpectrumInlineAlertProps} from '@react-types/inlinealert'; -type StoryArgs = SpectrumInLineAlertProps & {title: string, content: string}; +type StoryArgs = SpectrumInlineAlertProps & {title: string, content: string}; const meta: Meta = { - title: 'InLineAlert', - component: InLineAlert, + title: 'InlineAlert', + component: InlineAlert, args: { title: 'Title', content: 'Content' @@ -43,10 +43,10 @@ export default meta; export const Default = { render: (args) => ( - +
{args.title}
{args.content} - + ) }; diff --git a/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js b/packages/@react-spectrum/inlinealert/test/InlineAlert.test.js similarity index 87% rename from packages/@react-spectrum/inlinealert/test/InLineAlert.test.js rename to packages/@react-spectrum/inlinealert/test/InlineAlert.test.js index 3a313ea93a5..7e3ec25c146 100644 --- a/packages/@react-spectrum/inlinealert/test/InLineAlert.test.js +++ b/packages/@react-spectrum/inlinealert/test/InlineAlert.test.js @@ -11,17 +11,17 @@ */ import {Content, Header} from '@react-spectrum/view'; -import {InLineAlert} from '../'; +import {InlineAlert} from '../'; import React from 'react'; import {render} from '@react-spectrum/test-utils'; -describe('InLineAlert', function () { +describe('InlineAlert', function () { it('has alert role', function () { let {getByRole} = render( - +
Title
Content - + ); let alert = getByRole('alert'); @@ -30,10 +30,10 @@ describe('InLineAlert', function () { it('has a header', function () { let {getByTestId} = render( - +
Test Title
Content - + ); let header = getByTestId('testid1'); @@ -43,10 +43,10 @@ describe('InLineAlert', function () { it('has body content', function () { let {getByTestId} = render( - +
Title
Test Content - + ); let content = getByTestId('testid1'); @@ -63,10 +63,10 @@ describe('InLineAlert', function () { ${'negative'} `('$variant variant renders correctly', function ({variant}) { let {getByTestId} = render( - +
Title
Content - + ); let alert = getByTestId('testid1'); expect(alert).toHaveClass(`spectrum-InLineAlert--${variant}`); diff --git a/packages/@react-types/inlinealert/src/index.d.ts b/packages/@react-types/inlinealert/src/index.d.ts index 25fb4b84957..856a21522fb 100644 --- a/packages/@react-types/inlinealert/src/index.d.ts +++ b/packages/@react-types/inlinealert/src/index.d.ts @@ -13,9 +13,9 @@ import {DOMProps, StyleProps} from '@react-types/shared'; import {ReactNode} from 'react'; -export interface SpectrumInLineAlertProps extends DOMProps, StyleProps { +export interface SpectrumInlineAlertProps extends DOMProps, StyleProps { /** - * The [visual style](https://spectrum.adobe.com/page/in-line-alert/#Options) of the In-Line Alert. + * The [visual style](https://spectrum.adobe.com/page/in-line-alert/#Options) of the In-line Alert. * @default 'neutral' */ variant?: 'neutral' | 'info' | 'positive' | 'notice' | 'negative', From f2cff4954697ab3d25b38438c6fc6930152be02a Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 16 May 2023 11:21:35 -0400 Subject: [PATCH 17/19] Implement InlineAlert component #1343 - add Chromatic tests --- .../chromatic/InlineAlert.chromatic.tsx | 83 ++++++++++++++++--- 1 file changed, 73 insertions(+), 10 deletions(-) diff --git a/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx index 924104bc86e..bca0eb5dabf 100644 --- a/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx +++ b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx @@ -11,7 +11,7 @@ */ import {Content, Header} from '@react-spectrum/view'; -import {InLineAlert} from '../'; +import {InlineAlert} from '../'; import {Meta, Story} from '@storybook/react'; import React from 'react'; import {SpectrumInlineAlertProps} from '@react-types/inlinealert'; @@ -21,18 +21,81 @@ const StoryFn = ({storyFn}) => storyFn(); const meta: Meta = { title: 'InlineAlert', - component: InLineAlert, + component: InlineAlert, decorators: [storyFn => ] }; export default meta; -const Template = (): Story => (args) => ( - -
In-line Alert Header
- This is a React Spectrum InlineAlert - -); +export const Default = { + args: { + children: ( + <> +
In-line Alert Header
+ This is a React Spectrum InlineAlert + + ) + } +}; + +export const Informative = { + args: { + variant: 'info', + children: ( + <> +
In-Line Alert Informative Header
+ This is a React Spectrum InlineAlert + + ) + } +}; + +export const Positive = { + args: { + variant: 'positive', + children: ( + <> +
In-Line Alert Positive Header
+ This is a React Spectrum InlineAlert + + ) + } +}; -export const Default = Template().bind({}); -Default.args = {}; +export const Notice = { + args: { + variant: 'notice', + children: ( + <> +
In-Line Alert Notice Header
+ This is a React Spectrum InlineAlert + + ) + } +}; + +export const Negative = { + args: { + variant: 'negative', + children: ( + <> +
In-Line Alert Negative Header
+ This is a React Spectrum InlineAlert + + ) + } +}; + +export const LongContent = { + args: { + variant: 'info', + render: (args) => ( +
+ +
In-line Alert Header that goes on and on my friend
+ This is a React Spectrum InlineAlert that started announcing without knowing what it was. This is the inline alert that doesn't end. Yes, it goes on and on, my friend. + +
+ ) + } +}; From 043863fb5bebe0ade4587fd4a6d1553fc16637ad Mon Sep 17 00:00:00 2001 From: Anthony Rumsey Date: Tue, 16 May 2023 11:33:53 -0400 Subject: [PATCH 18/19] Implement InlineAlert component #1343 - fix imports --- .../inlinealert/chromatic/InlineAlert.chromatic.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx index bca0eb5dabf..da47645f1c2 100644 --- a/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx +++ b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.chromatic.tsx @@ -12,7 +12,7 @@ import {Content, Header} from '@react-spectrum/view'; import {InlineAlert} from '../'; -import {Meta, Story} from '@storybook/react'; +import {Meta} from '@storybook/react'; import React from 'react'; import {SpectrumInlineAlertProps} from '@react-types/inlinealert'; From dc40919d0522e24085327e5c0550e9eb27b344fd Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Wed, 24 May 2023 14:08:20 -0500 Subject: [PATCH 19/19] add inline alert docs --- .../inlinealert/docs/InlineAlert.mdx | 113 ++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 packages/@react-spectrum/inlinealert/docs/InlineAlert.mdx diff --git a/packages/@react-spectrum/inlinealert/docs/InlineAlert.mdx b/packages/@react-spectrum/inlinealert/docs/InlineAlert.mdx new file mode 100644 index 00000000000..783a99ab360 --- /dev/null +++ b/packages/@react-spectrum/inlinealert/docs/InlineAlert.mdx @@ -0,0 +1,113 @@ +{/* Copyright 2023 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 {Layout} from '@react-spectrum/docs'; +export default Layout; + +import docs from 'docs:@react-spectrum/inlinealert'; +import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs'; +import packageData from '@react-spectrum/statuslight/package.json'; + +```jsx import +import {InlineAlert} from '@react-spectrum/inlinealert'; +import {Header, Content} from '@adobe/react-spectrum'; +``` + +--- +category: Status +keywords: [inline alert, alert] +--- + +# InlineAlert + +{docs.exports.InlineAlert.description} + + + +## Example + +```tsx example + +
Payment Information
+ Enter your billing address, shipping address, and payment method to complete your purchase. + +``` + +## Content + +Inline alerts contain a title and body. They also include an icon for non-neutral variants. + +```tsx example + +
Payment Information
+ Enter your billing address, shipping address, and payment method to complete your purchase. + +``` + +### Accessibility + +Inline alerts are given the [alert role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role), which means they should only be used for information that requires the user's immediate attention. + +### Internationalization + +To internationalize an InlineAlert, localized strings should be set as the title and body content of the InlineAlert. +For languages that are read right-to-left (e.g. Hebrew and Arabic), the InlineAlert is automatically flipped. + +## Props + + + +## Visual options + +### Variant +[View guidelines](https://spectrum.adobe.com/page/in-line-alert/#Options) + +When inline alerts have a semantic meaning, they should use the appropriate variant. +The default variant is neutral, and should be used when the message is neutral in tone or when its semantics do not fit any of the other variants. + +#### Informative + +```tsx example + +
Accepted Payment Methods
+ Only major credit cards are accepted for payment. Direct debit is currently unavailable. + +``` + +#### Positive + +```tsx example + +
Purchase completed
+ You'll get a confirmation email with your order details shortly. + +``` + +#### Notice + +```tsx example + +
Update payment information
+ The saved credit card for your account has expired. Update your payment information to complete the purchase. + +``` + +#### Negative + +```tsx example + +
Unable to process payment
+ There was an error processing your payment. Please check that your credit card information is correct, then try again. + +``` \ No newline at end of file