From ec6f1d6ae41b94afa25c554ae16db4b9c9a1224c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 31 Mar 2021 12:47:34 +0200 Subject: [PATCH] remove Alert component There are a lot of unknowns and context dependendant questions to implement Alerts in a good way. The current Alert component just had a role set, and it had no JS attached. We will revisit this, once we start working on Alert Dialogs, Notification center notifications (dismissable, hide after x time, ...) --- CHANGELOG.md | 2 - packages/@headlessui-react/README.md | 1 - .../pages/dialog/dialog-with-alert.tsx | 126 ------------------ .../src/components/alert/README.md | 52 -------- .../src/components/alert/alert.test.tsx | 31 ----- .../src/components/alert/alert.tsx | 48 ------- packages/@headlessui-react/src/index.test.ts | 1 - packages/@headlessui-react/src/index.ts | 1 - .../src/components/alert/README.md | 51 ------- .../src/components/alert/alert.test.ts | 59 -------- .../src/components/alert/alert.ts | 41 ------ packages/@headlessui-vue/src/index.test.ts | 3 - packages/@headlessui-vue/src/index.ts | 1 - 13 files changed, 417 deletions(-) delete mode 100644 packages/@headlessui-react/pages/dialog/dialog-with-alert.tsx delete mode 100644 packages/@headlessui-react/src/components/alert/README.md delete mode 100644 packages/@headlessui-react/src/components/alert/alert.test.tsx delete mode 100644 packages/@headlessui-react/src/components/alert/alert.tsx delete mode 100644 packages/@headlessui-vue/src/components/alert/README.md delete mode 100644 packages/@headlessui-vue/src/components/alert/alert.test.ts delete mode 100644 packages/@headlessui-vue/src/components/alert/alert.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a4fede05b..9138ca7337 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `Popover` component ([#220](https://github.com/tailwindlabs/headlessui/pull/220)) - All components that accept a `className`, can now also receive a function with the renderProp argument ([#257](https://github.com/tailwindlabs/headlessui/pull/257)) - Add `RadioGroup` component ([#274](https://github.com/tailwindlabs/headlessui/pull/274)) -- Add `Alert` component ([#274](https://github.com/tailwindlabs/headlessui/pull/274)) ## [Unreleased - Vue] @@ -40,7 +39,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Add `SwitchDescription` component, which adds the `aria-describedby` to the actual Switch ([#220](https://github.com/tailwindlabs/headlessui/pull/220)) -- Add `Alert` component ([#279](https://github.com/tailwindlabs/headlessui/pull/279)) ## [@headlessui/react@v0.3.1] - 2021-02-11 diff --git a/packages/@headlessui-react/README.md b/packages/@headlessui-react/README.md index a72221da80..032c01e28a 100644 --- a/packages/@headlessui-react/README.md +++ b/packages/@headlessui-react/README.md @@ -37,7 +37,6 @@ _This project is still in early development. New components will be added regula - [Dialog](./src/components/dialog/README.md) - [Popover](./src/components/popover/README.md) - [Radio Group](./src/components/radio-group/README.md) -- [Alert](./src/components/alert/README.md) ### Roadmap diff --git a/packages/@headlessui-react/pages/dialog/dialog-with-alert.tsx b/packages/@headlessui-react/pages/dialog/dialog-with-alert.tsx deleted file mode 100644 index f76678a7f6..0000000000 --- a/packages/@headlessui-react/pages/dialog/dialog-with-alert.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import React, { useState, Fragment } from 'react' -import { Dialog, Portal, Transition, Alert } from '@headlessui/react' - -export default function Home() { - let [isOpen, setIsOpen] = useState(false) - let [deleted, setDeleted] = useState(false) - - function notifyUser() { - setDeleted(true) - setTimeout(() => { - setDeleted(false) - }, 10 * 1000) - } - - return ( - <> - - - - -
-
- - -
- - - - - {/* This element is to trick the browser into centering the modal contents. */} - -
-
-
-
- {/* Heroicon name: exclamation */} - -
-
- - Deactivate account - -
-

- Are you sure you want to deactivate your account? All of your data will - be permanently removed. This action cannot be undone. -

- {deleted && ( - -
- I am now deleted! -
- - )} -
-
-
-
-
-
- - -
-
- -
-
- - - - ) -} diff --git a/packages/@headlessui-react/src/components/alert/README.md b/packages/@headlessui-react/src/components/alert/README.md deleted file mode 100644 index c03b4cb81b..0000000000 --- a/packages/@headlessui-react/src/components/alert/README.md +++ /dev/null @@ -1,52 +0,0 @@ -## Alert - -A component for announcing information to screenreader/assistive technology users. - -- [Installation](#installation) -- [Basic example](#basic-example) -- [Component API](#component-api) - -### Installation - -```sh -# npm -npm install @headlessui/react - -# Yarn -yarn add @headlessui/react -``` - -### Basic example - -```jsx -Notifications have been enabled -``` - -### Component API - -#### Alert - -```jsx -Notifications have been enabled -``` - -##### Props - -| Prop | Type | Default | Description | -| :----------- | :---------------------- | :------- | :------------------------------------------------------------------------------ | -| `as` | String \| Component | `div` | The element or component the `Alert` should render as. | -| `importance` | `polite` \| `assertive` | `polite` | The importance of the alert message when it is announced to screenreader users. | - -| Importance | Description | -| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `polite` | Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing. | -| `assertive` | Indicates that updates to the region have the highest priority and should be presented the user immediately. | - -Source: https://www.w3.org/TR/wai-aria-1.2/#aria-live - -##### Render prop object - -| Prop | Type | Description | -| :----------- | :---------------------- | :------------------------------------------------------------------------------ | -| `importance` | `polite` \| `assertive` | The importance of the alert message when it is announced to screenreader users. | - diff --git a/packages/@headlessui-react/src/components/alert/alert.test.tsx b/packages/@headlessui-react/src/components/alert/alert.test.tsx deleted file mode 100644 index 7ed4033d8e..0000000000 --- a/packages/@headlessui-react/src/components/alert/alert.test.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import { render } from '@testing-library/react' -import { getByText } from '../../test-utils/accessibility-assertions' - -import { Alert } from './alert' - -describe('Rendering', () => { - it('should be possible to render an Alert', () => { - render(This is an alert) - - expect(getByText('This is an alert')).toHaveAttribute('role', 'status') - }) - - it('should be possible to render an Alert using a render prop', () => { - render({() => 'This is an alert'}) - - expect(getByText('This is an alert')).toHaveAttribute('role', 'status') - }) - - it('should be possible to render an Alert with an explicit level of importance (polite)', () => { - render(This is a polite message) - - expect(getByText('This is a polite message')).toHaveAttribute('role', 'status') - }) - - it('should be possible to render an Alert with an explicit level of importance (assertive)', () => { - render(This is a assertive message) - - expect(getByText('This is a assertive message')).toHaveAttribute('role', 'alert') - }) -}) diff --git a/packages/@headlessui-react/src/components/alert/alert.tsx b/packages/@headlessui-react/src/components/alert/alert.tsx deleted file mode 100644 index 4f21576619..0000000000 --- a/packages/@headlessui-react/src/components/alert/alert.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { - useMemo, - - // Types - ElementType, -} from 'react' - -import { Props } from '../../types' -import { render } from '../../utils/render' -import { match } from '../../utils/match' - -type Importance = - /** - * Indicates that updates to the region should be presented at the next - * graceful opportunity, such as at the end of speaking the current sentence - * or when the user pauses typing. - */ - | 'polite' - - /** - * Indicates that updates to the region have the highest priority and should - * be presented the user immediately. - */ - | 'assertive' - -// --- - -let DEFAULT_ALERT_TAG = 'div' as const -interface AlertRenderPropArg { - importance: Importance -} -type AlertPropsWeControl = 'role' - -export function Alert( - props: Props & { - importance?: Importance - } -) { - let { importance = 'polite', ...passThroughProps } = props - let propsWeControl = match(importance, { - polite: () => ({ role: 'status' }), - assertive: () => ({ role: 'alert' }), - }) - - let bag = useMemo(() => ({ importance }), [importance]) - - return render({ ...passThroughProps, ...propsWeControl }, bag, DEFAULT_ALERT_TAG) -} diff --git a/packages/@headlessui-react/src/index.test.ts b/packages/@headlessui-react/src/index.test.ts index 689321ee95..1fc2d33682 100644 --- a/packages/@headlessui-react/src/index.test.ts +++ b/packages/@headlessui-react/src/index.test.ts @@ -6,7 +6,6 @@ import * as HeadlessUI from './index' */ it('should expose the correct components', () => { expect(Object.keys(HeadlessUI)).toEqual([ - 'Alert', 'Dialog', 'Disclosure', 'FocusTrap', diff --git a/packages/@headlessui-react/src/index.ts b/packages/@headlessui-react/src/index.ts index 10f0a73103..cce0dd2a89 100644 --- a/packages/@headlessui-react/src/index.ts +++ b/packages/@headlessui-react/src/index.ts @@ -1,4 +1,3 @@ -export * from './components/alert/alert' export * from './components/dialog/dialog' export * from './components/disclosure/disclosure' export * from './components/focus-trap/focus-trap' diff --git a/packages/@headlessui-vue/src/components/alert/README.md b/packages/@headlessui-vue/src/components/alert/README.md deleted file mode 100644 index 6e2bcf8abc..0000000000 --- a/packages/@headlessui-vue/src/components/alert/README.md +++ /dev/null @@ -1,51 +0,0 @@ -## Alert - -A component for announcing information to screenreader/assistive technology users. - -- [Installation](#installation) -- [Basic example](#basic-example) -- [Component API](#component-api) - -### Installation - -```sh -# npm -npm install @headlessui/vue - -# Yarn -yarn add @headlessui/vue -``` - -### Basic example - -```jsx -Notifications have been enabled -``` - -### Component API - -#### Alert - -```jsx -Notifications have been enabled -``` - -##### Props - -| Prop | Type | Default | Description | -| :----------- | :---------------------- | :------- | :------------------------------------------------------------------------------ | -| `as` | String \| Component | `div` | The element or component the `Alert` should render as. | -| `importance` | `polite` \| `assertive` | `polite` | The importance of the alert message when it is announced to screenreader users. | - -| Importance | Description | -| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `polite` | Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing. | -| `assertive` | Indicates that updates to the region have the highest priority and should be presented the user immediately. | - -Source: https://www.w3.org/TR/wai-aria-1.2/#aria-live - -##### Slot props - -| Prop | Type | Description | -| :----------- | :---------------------- | :------------------------------------------------------------------------------ | -| `importance` | `polite` \| `assertive` | The importance of the alert message when it is announced to screenreader users. | diff --git a/packages/@headlessui-vue/src/components/alert/alert.test.ts b/packages/@headlessui-vue/src/components/alert/alert.test.ts deleted file mode 100644 index 92f9307b91..0000000000 --- a/packages/@headlessui-vue/src/components/alert/alert.test.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { defineComponent } from 'vue' -import { render } from '../../test-utils/vue-testing-library' -import { getByText } from '../../test-utils/accessibility-assertions' - -import { Alert } from './alert' -import { html } from '../../test-utils/html' - -beforeAll(() => { - jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any) - jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any) -}) - -function renderTemplate(input: string | Partial[0]>) { - let defaultComponents = { Alert } - - if (typeof input === 'string') { - return render(defineComponent({ template: input, components: defaultComponents })) - } - - return render( - defineComponent( - Object.assign({}, input, { - components: { ...defaultComponents, ...input.components }, - }) as Parameters[0] - ) - ) -} - -describe('Rendering', () => { - it('should be possible to render an Alert', () => { - renderTemplate( - html` - This is an alert - ` - ) - - expect(getByText('This is an alert')).toHaveAttribute('role', 'status') - }) - - it('should be possible to render an Alert with an explicit level of importance (polite)', () => { - renderTemplate( - html` - This is a polite message - ` - ) - - expect(getByText('This is a polite message')).toHaveAttribute('role', 'status') - }) - - it('should be possible to render an Alert with an explicit level of importance (assertive)', () => { - renderTemplate( - html` - This is a assertive message - ` - ) - - expect(getByText('This is a assertive message')).toHaveAttribute('role', 'alert') - }) -}) diff --git a/packages/@headlessui-vue/src/components/alert/alert.ts b/packages/@headlessui-vue/src/components/alert/alert.ts deleted file mode 100644 index 0c31b711b8..0000000000 --- a/packages/@headlessui-vue/src/components/alert/alert.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { defineComponent, PropType } from 'vue' - -import { render } from '../../utils/render' -import { match } from '../../utils/match' - -type Importance = - /** - * Indicates that updates to the region should be presented at the next - * graceful opportunity, such as at the end of speaking the current sentence - * or when the user pauses typing. - */ - | 'polite' - - /** - * Indicates that updates to the region have the highest priority and should - * be presented the user immediately. - */ - | 'assertive' - -// --- - -export let Alert = defineComponent({ - name: 'Alert', - props: { - as: { type: [Object, String], default: 'div' }, - importance: { type: String as PropType, default: 'polite' }, - }, - setup(props, { slots, attrs }) { - let { importance = 'polite', ...passThroughProps } = props - - let slot = { importance } - let propsWeControl = match(importance, { - polite: () => ({ role: 'status' }), - assertive: () => ({ role: 'alert' }), - }) - - return () => { - return render({ props: { ...passThroughProps, ...propsWeControl }, slot, slots, attrs }) - } - }, -}) diff --git a/packages/@headlessui-vue/src/index.test.ts b/packages/@headlessui-vue/src/index.test.ts index fad76e7bc7..4b5032e8e0 100644 --- a/packages/@headlessui-vue/src/index.test.ts +++ b/packages/@headlessui-vue/src/index.test.ts @@ -6,9 +6,6 @@ import * as HeadlessUI from './index' */ it('should expose the correct components', () => { expect(Object.keys(HeadlessUI)).toEqual([ - // Alert - 'Alert', - // Dialog 'Dialog', 'DialogOverlay', diff --git a/packages/@headlessui-vue/src/index.ts b/packages/@headlessui-vue/src/index.ts index a413df7e05..43b7d60cc9 100644 --- a/packages/@headlessui-vue/src/index.ts +++ b/packages/@headlessui-vue/src/index.ts @@ -1,4 +1,3 @@ -export * from './components/alert/alert' export * from './components/dialog/dialog' export * from './components/disclosure/disclosure' export * from './components/focus-trap/focus-trap'