diff --git a/packages/paste-website/src/components/Blockquote.tsx b/packages/paste-website/src/components/Blockquote.tsx deleted file mode 100644 index 50c3232ac9..0000000000 --- a/packages/paste-website/src/components/Blockquote.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Anchor, isExternalUrl } from "@twilio-paste/anchor"; -import { Box } from "@twilio-paste/box"; -import { Text } from "@twilio-paste/text"; -import * as React from "react"; - -interface Props { - name?: string; - source?: string; - sourceUrl?: string; -} - -const Citation: React.FC> = ({ name, source, sourceUrl }) => { - return ( - - — {name} - {source && ", "} - {source && ( - - {sourceUrl ? ( - - {source} - - ) : ( - {source} - )} - - )} - - ); -}; - -export const Blockquote: React.FC> = ({ children, name, source, sourceUrl }) => { - return ( - - - {children} - - {name && } - - ); -}; diff --git a/packages/paste-website/src/pages/blog/2022-09-23-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2022-09-23-paste-newsletter.mdx index 84397df276..6afd973e54 100644 --- a/packages/paste-website/src/pages/blog/2022-09-23-paste-newsletter.mdx +++ b/packages/paste-website/src/pages/blog/2022-09-23-paste-newsletter.mdx @@ -15,9 +15,9 @@ import Image from 'next/image'; import {Anchor} from '@twilio-paste/anchor'; import {Paragraph} from '@twilio-paste/paragraph'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table'; import {ResponsiveImage} from '../../components/ResponsiveImage'; -import {Blockquote} from '../../components/Blockquote'; import SwitchExample from '../../assets/images/articles/2022-09-23-paste-newsletter/switch-example.gif'; import InlineCodeExample from '../../assets/images/articles/2022-09-23-paste-newsletter/inline-code-example.png'; import CodeBlockExample from '../../assets/images/articles/2022-09-23-paste-newsletter/code-block-example.gif'; @@ -239,11 +239,17 @@ We are excited to the share the following insights: In addition, some participants specified:
- It's great to have a standardized component library that lines up with Twilio standards. It allows me to focus on - my business logic. + + It's great to have a standardized component library that lines up with Twilio standards. It allows me to focus + on my business logic. +
-
I really appreciate how approachable Paste is - it's really easy to get up and running.
+
+ + I really appreciate how approachable Paste is - it's really easy to get up and running. + +
These results are music to our ears 🎶 diff --git a/packages/paste-website/src/pages/blog/2022-10-31-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2022-10-31-paste-newsletter.mdx index ef4a8a98fe..75269903f2 100644 --- a/packages/paste-website/src/pages/blog/2022-10-31-paste-newsletter.mdx +++ b/packages/paste-website/src/pages/blog/2022-10-31-paste-newsletter.mdx @@ -15,7 +15,6 @@ import {Paragraph} from '@twilio-paste/paragraph'; import {Box} from '@twilio-paste/box'; import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table'; import {ResponsiveImage} from '../../components/ResponsiveImage'; -import {Blockquote} from '../../components/Blockquote'; import RadioButtonGroup from '../../assets/images/articles/2022-10-31-paste-newsletter/radio-button-group.png'; import ButtonGroup from '../../assets/images/articles/2022-10-31-paste-newsletter/button-group.png'; import SideModal from '../../assets/images/articles/2022-10-31-paste-newsletter/side-modal.png'; diff --git a/packages/paste-website/src/pages/blog/2022-12-09-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2022-12-09-paste-newsletter.mdx index ac0b2e1e3d..1aa4d1e74a 100644 --- a/packages/paste-website/src/pages/blog/2022-12-09-paste-newsletter.mdx +++ b/packages/paste-website/src/pages/blog/2022-12-09-paste-newsletter.mdx @@ -12,9 +12,9 @@ import Image from 'next/image'; import {Anchor} from '@twilio-paste/anchor'; import {Paragraph} from '@twilio-paste/paragraph'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table'; import {ResponsiveImage} from '../../components/ResponsiveImage'; -import {Blockquote} from '../../components/Blockquote'; import ChatLog from '../../assets/images/articles/2022-12-09-paste-newsletter/animated-chat-log.gif'; import PageNav from '../../assets/images/articles/2022-12-09-paste-newsletter/in-page-nav.gif'; import ChatComposer from '../../assets/images/articles/2022-12-09-paste-newsletter/chat-composer.gif'; @@ -163,11 +163,12 @@ Justin registered Paste React components to Builder.io which allows Justin and h -In Justin’s own words: -
- I am no designer, but this is already better than every flex demo we’ve ever built from a UX perspective because of - access to paste + + I am no designer, but this is already better than every flex demo we’ve ever built from a UX perspective because of + access to paste + +
We're stoked that Justin and team were able to create this builder experience all on their own, just by the Flex and Paste teams collaborating together! We can't wait to see what other people build next, with Paste on top of Flex. diff --git a/packages/paste-website/src/pages/blog/2023-01-27-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2023-01-27-paste-newsletter.mdx index 62f8d8d05e..0fdb0c9553 100644 --- a/packages/paste-website/src/pages/blog/2023-01-27-paste-newsletter.mdx +++ b/packages/paste-website/src/pages/blog/2023-01-27-paste-newsletter.mdx @@ -14,7 +14,6 @@ import {Paragraph} from '@twilio-paste/paragraph'; import {Box} from '@twilio-paste/box'; import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table'; import {ResponsiveImage} from '../../components/ResponsiveImage'; -import {Blockquote} from '../../components/Blockquote'; import DependencyIntake from '../../assets/images/articles/2023-01-27-paste-newsletter/dependency-intake.png'; import Spacing from '../../assets/images/articles/2023-01-27-paste-newsletter/spacing-guidelines.png'; import OneTwilio from '../../assets/images/articles/2023-01-27-paste-newsletter/one-twilio.png'; diff --git a/packages/paste-website/src/pages/blog/2023-11-08-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2023-11-08-paste-newsletter.mdx index 7d3f2637ef..9bd188543b 100644 --- a/packages/paste-website/src/pages/blog/2023-11-08-paste-newsletter.mdx +++ b/packages/paste-website/src/pages/blog/2023-11-08-paste-newsletter.mdx @@ -11,8 +11,8 @@ export const meta = { import Image from 'next/image'; import {Paragraph} from '@twilio-paste/paragraph'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {ResponsiveImage} from '../../components/ResponsiveImage'; -import {Blockquote} from '../../components/Blockquote'; import Pastebot from '../../assets/images/articles/2023-11-08-paste-newsletter/Pastebot.png'; import DocsSearch from '../../assets/images/articles/2023-11-08-paste-newsletter/DocsSearch.png'; @@ -181,7 +181,14 @@ We’ve just completed our annual round of roadmap reviews with product teams to In this edition of Pastemates, we're spotlighting a mate from the Web Platform team, Pablo Deeleman! Pablo lives the Twilio Builder spirit, building complex prototypes with just out-of-the-box Paste components. During his time on the Event Streams team, he pushed the boundaries of what could be built with Paste "as is": -
The whole node connectors UI, including the animations, is done with plain vanilla Paste components and primitives with no further tampering. No custom React/UI…was necessary to deliver this experience, and although it might seem quite a complex development, the whole UI was built in a couple of hours.
+
+ + The whole node connectors UI, including the animations, is done with plain vanilla Paste components and primitives + with no further tampering. No custom React/UI…was necessary to deliver this experience, and although it might seem + quite a complex development, the whole UI was built in a couple of hours. + + +
diff --git a/packages/paste-website/src/pages/blog/2024-08-23-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2024-08-23-paste-newsletter.mdx index 39b09259ba..6417bc0cf0 100644 --- a/packages/paste-website/src/pages/blog/2024-08-23-paste-newsletter.mdx +++ b/packages/paste-website/src/pages/blog/2024-08-23-paste-newsletter.mdx @@ -12,7 +12,6 @@ import { Box } from "@twilio-paste/box"; import { ResponsiveImage } from "../../components/ResponsiveImage"; import { ResponsiveBorderedImage } from "../../components/ResponsiveBorderedImage"; -import { Blockquote } from "../../components/Blockquote"; import FiltersPattern from "../../assets/images/articles/2024-08-23-paste-newsletter/filters-pattern.gif"; import CornerOrnament from "../../assets/images/articles/2024-08-23-paste-newsletter/corner-ornament.png"; diff --git a/packages/paste-website/src/pages/blog/2024-11-07-paste-newsletter.mdx b/packages/paste-website/src/pages/blog/2024-11-07-paste-newsletter.mdx index 37dea77903..893c78bf36 100644 --- a/packages/paste-website/src/pages/blog/2024-11-07-paste-newsletter.mdx +++ b/packages/paste-website/src/pages/blog/2024-11-07-paste-newsletter.mdx @@ -12,7 +12,6 @@ import { Box } from "@twilio-paste/box"; import { ResponsiveImage } from "../../components/ResponsiveImage"; import { ResponsiveBorderedImage } from "../../components/ResponsiveBorderedImage"; -import { Blockquote } from "../../components/Blockquote"; import PricingPattern from "../../assets/images/articles/2024-11-07-paste-newsletter/pricing-pattern.png"; import Timeline from "../../assets/images/articles/2024-11-07-paste-newsletter/timeline.png"; diff --git a/packages/paste-website/src/pages/components/alert/index.mdx b/packages/paste-website/src/pages/components/alert/index.mdx index c924e8e6a5..b90ddb34db 100644 --- a/packages/paste-website/src/pages/components/alert/index.mdx +++ b/packages/paste-website/src/pages/components/alert/index.mdx @@ -8,13 +8,13 @@ export const meta = { import {Alert} from '@twilio-paste/alert'; import {Text} from '@twilio-paste/text'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {Button} from '@twilio-paste/button'; import {Anchor} from '@twilio-paste/anchor'; import {Card} from '@twilio-paste/card'; import {Heading} from '@twilio-paste/heading'; import {Paragraph} from '@twilio-paste/paragraph'; import {DoDont, Do, Dont} from '../../../components/DoDont'; -import {Blockquote} from '../../../components/Blockquote'; import {Codeblock} from '../../../components/codeblock'; import {SidebarCategoryRoutes} from '../../../constants'; import Changelog from '@twilio-paste/alert/CHANGELOG.md'; @@ -62,13 +62,12 @@ Use an Alert for one of these types of information: - **Warning.** Critical information that will help a user avoid an issue. - **Error.** Critical information that's preventing a user from continuing a flow and if there's action required on their end to resolve the issue. -
- A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it - will disrupt their current task and be irrelevant to their current needs. +
+ + A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because + it will disrupt their current task and be irrelevant to their current needs. + +
### Accessibility diff --git a/packages/paste-website/src/pages/components/editable-code-block/index.mdx b/packages/paste-website/src/pages/components/editable-code-block/index.mdx index 0a4324e3ec..a5d67c6285 100644 --- a/packages/paste-website/src/pages/components/editable-code-block/index.mdx +++ b/packages/paste-website/src/pages/components/editable-code-block/index.mdx @@ -9,7 +9,6 @@ import Changelog from '@twilio-paste/editable-code-block/CHANGELOG.md'; import packageJson from '@twilio-paste/editable-code-block/package.json'; import {DoDont, Do, Dont} from '../../../components/DoDont'; -import {Blockquote} from '../../../components/Blockquote'; import {Codeblock} from '../../../components/codeblock'; import {SidebarCategoryRoutes} from '../../../constants'; import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; diff --git a/packages/paste-website/src/pages/components/input/index.mdx b/packages/paste-website/src/pages/components/input/index.mdx index 584b1c6188..c97e95ad86 100644 --- a/packages/paste-website/src/pages/components/input/index.mdx +++ b/packages/paste-website/src/pages/components/input/index.mdx @@ -10,6 +10,7 @@ import {Input} from '@twilio-paste/input'; import {HelpText} from '@twilio-paste/help-text'; import {Anchor} from '@twilio-paste/anchor'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {Text} from '@twilio-paste/text'; import {Button} from '@twilio-paste/button'; import {Table, THead, TBody, Td, Th, Tr} from '@twilio-paste/table'; @@ -18,7 +19,6 @@ import {UnorderedList, ListItem} from '@twilio-paste/list'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import {Codeblock} from '../../../components/codeblock'; -import {Blockquote} from '../../../components/Blockquote'; import {SidebarCategoryRoutes} from '../../../constants'; import Changelog from '@twilio-paste/input/CHANGELOG.md'; import packageJson from '@twilio-paste/input/package.json'; @@ -184,14 +184,13 @@ using keyboard arrow keys and increment buttons. It displays a numeric keypad in some devices with dynamic keypads. -
- The number input type should only be used for incremental numbers...The number input type is not appropriate for - values that happen to only consist of numbers but aren't strictly speaking a number, such as postal codes in many - countries or credit card numbers. +
+ + The number input type should only be used for incremental numbers...The number input type is not appropriate for + values that happen to only consist of numbers but aren't strictly speaking a number, such as postal codes in many + countries or credit card numbers. + +
In most cases, include a default value that the user can change and would not cause harm if accidentally used. Use [Help diff --git a/packages/paste-website/src/pages/components/keyboard-key/index.mdx b/packages/paste-website/src/pages/components/keyboard-key/index.mdx index a225938902..0ce577656c 100644 --- a/packages/paste-website/src/pages/components/keyboard-key/index.mdx +++ b/packages/paste-website/src/pages/components/keyboard-key/index.mdx @@ -2,6 +2,7 @@ import { KeyboardKey, KeyboardKeyGroup, useKeyCombination, useKeyCombinations } import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout"; import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import { Button } from "@twilio-paste/button"; import { useMenuState, Menu, MenuButton, MenuItem } from "@twilio-paste/menu"; import { Paragraph } from "@twilio-paste/paragraph"; @@ -13,7 +14,6 @@ import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon"; import packageJson from "@twilio-paste/keyboard-key/package.json"; import { SidebarCategoryRoutes } from "../../../constants"; -import { Blockquote } from "../../../components/Blockquote"; import ComponentPageLayout from "../../../layouts/ComponentPageLayout"; import { getFeature, getNavigationData } from "../../../utils/api"; import { Do, DoDont, Dont } from "../../../components/DoDont"; @@ -69,13 +69,15 @@ A Keyboard Key distinguishes a keyboard command or shortcut from other text. Keyboard shortcuts are used for extremely frequent platform-level actions (like activating search), or in canvas or productivity tools like Studio or Flex. In general, **avoid implementing keyboard shortcuts**, especially with single keys, because they can override shortcuts that are already set by operating systems, browsers, assistive technologies, or user preferences. -
- Not every task on your application needs a shortcut, so observe your users interacting with your application to - determine the most common tasks and prioritize keyboard shortcuts for these. +
+ + Not every task on your application needs a shortcut, so observe your users interacting with your application to + determine the most common tasks and prioritize keyboard shortcuts for these. + +
Keyboards can also vary across operating systems and global regions, so make sure your key commands work for all users. diff --git a/packages/paste-website/src/pages/components/media-object/index.mdx b/packages/paste-website/src/pages/components/media-object/index.mdx index a58469999f..66d6e367d6 100644 --- a/packages/paste-website/src/pages/components/media-object/index.mdx +++ b/packages/paste-website/src/pages/components/media-object/index.mdx @@ -7,6 +7,7 @@ export const meta = { }; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {Text} from '@twilio-paste/text'; import {Avatar} from '@twilio-paste/avatar'; import {Paragraph} from '@twilio-paste/paragraph'; @@ -15,7 +16,6 @@ import {Menu, MenuButton, SubMenuButton, MenuItem, MenuGroup, MenuSeparator, use import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; import {subMenuExample} from '../../../component-examples/MenuExamples.ts'; -import {Blockquote} from '../../../components/Blockquote'; import {SidebarCategoryRoutes, TWILIO_RED} from '../../../constants'; import {PasteIcon} from '../../../components/icons/PasteIcon'; import packageJson from '@twilio-paste/media-object/package.json'; @@ -66,12 +66,11 @@ export const getStaticProps = async () => { First created by [Nicole Sullivan](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) back in 2010, the Media Object in Paste aims to serve many of the same purposes as the original concept. It's a layout pattern that you will see all across the web, on almost all the websites you will come across. We're pretty sure you'll **never unsee this going forward**. -
- What is the internet made of? At least the UI layer is mainly composed of media blocks. +
+ + What is the internet made of? At least the UI layer is mainly composed of media blocks. + +
**So what's a media object?** An image or figure positioned horizontally next to some form of content. The figure can sit on either or both sides of the content. That's it. It sounds really simple, but it's literally everywhere on the Internet. For example, the top left of this website uses a Media Object. diff --git a/packages/paste-website/src/pages/components/page-header/index.mdx b/packages/paste-website/src/pages/components/page-header/index.mdx index e3cd04c6f2..5ce20b1004 100644 --- a/packages/paste-website/src/pages/components/page-header/index.mdx +++ b/packages/paste-website/src/pages/components/page-header/index.mdx @@ -19,7 +19,7 @@ import { StatusBadge } from "@twilio-paste/status"; import { Badge } from "@twilio-paste/badge"; import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import { - PageHeader, + PageHeader, PageHeaderActions, PageHeaderDetails, PageHeaderHeading, @@ -46,7 +46,6 @@ import Changelog from '@twilio-paste/page-header/CHANGELOG.md'; import {Codeblock} from '../../../components/codeblock'; import {ResponsiveImage} from '../../../components/ResponsiveImage'; import {SidebarCategoryRoutes} from '../../../constants'; -import {Blockquote} from '../../../components/Blockquote'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import PageHeaderPNG from '../../../assets/images/PageHeaderPNG.png'; import packageJson from '@twilio-paste/page-header/package.json'; @@ -84,7 +83,7 @@ export const getStaticProps = async () => { Page Header controls the spacing and layout for any potential components used above the main content of the page. Components that may be a part of the Page Header include [Breadcrumb](/components/breadcrumb), [Progress Steps](/components/progress-steps), [Heading](/components/heading), and [Button Group](/components/button-group), among others. -There are 3 sections that make up the Page Header component, though you won’t always use all 3 at the same time. +There are 3 sections that make up the Page Header component, though you won’t always use all 3 at the same time. 1. **PageHeaderSetting** contains any components that relate to the positioning of the current page in relation to parent or sibling pages, including navigating between those pages. Context components may include: - [Breadcrumb](/components/breadcrumb) @@ -112,11 +111,11 @@ Here’s what the component layout looks like with all its bits and pieces: Much of the Paste Page Header component was inspired by the wonderful work of Github’s Primer Design system and [their own Page Header](https://primer.style/components/page-header) API and documentation. -### Accessibility +### Accessibility Page Header has no inherent accessibility concerns. However, there will likely be accessibility concerns related to the components used within Page Header. Recommended considerations include: - The accessibility considerations of the components used. Refer to each component’s documentation. -- The order and visual or content hierarchy of the children passed to Page Header, and how they affect readability. +- The order and visual or content hierarchy of the children passed to Page Header, and how they affect readability. - What you pass to the `as` property when using [Headings](/components/heading). Headings that live at the top of the page and are the title of the page (most Page Headers fall under this category) should be `h1`s. Only use a heading level lower than `h1` if the Page Header exists within a page that already has an `h1` title (very few Page Headers fall under this category). @@ -201,7 +200,7 @@ When using PageHeaderKeyword above the Heading: - Badges should only be used to describe the release stage of the feature on the page, like “Beta” or “Experimental”. [Status Badges](/components/status-badge) or other badges that have dynamic content should be placed in the PageHeaderMeta. When using PageHeaderPrefix (visual that appears before the Heading): -- If you’re using the default size of Page Header, set the height of the Prefix element to `size-icon-90` or `size-square-110` to match the line height of the Heading. +- If you’re using the default size of Page Header, set the height of the Prefix element to `size-icon-90` or `size-square-110` to match the line height of the Heading. - If you’re using the compact size, set the height of the Prefix element to `size-icon-100` or `size-square-140` as the closest match to the line heights of the Heading and Meta combined. If you have no Meta content, use `size-icon-60` or `size-square-80`. #### The heading diff --git a/packages/paste-website/src/pages/components/pagination/index.mdx b/packages/paste-website/src/pages/components/pagination/index.mdx index 4f4a75dc10..af449ddcbe 100644 --- a/packages/paste-website/src/pages/components/pagination/index.mdx +++ b/packages/paste-website/src/pages/components/pagination/index.mdx @@ -8,6 +8,7 @@ export const meta = { import {useUID} from '@twilio-paste/uid-library'; import {Anchor} from '@twilio-paste/anchor'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {Text} from '@twilio-paste/text'; import {Heading} from '@twilio-paste/heading'; import {Paragraph} from '@twilio-paste/paragraph'; @@ -30,7 +31,6 @@ import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import {Codeblock} from '../../../components/codeblock'; import {SidebarCategoryRoutes} from '../../../constants'; -import {Blockquote} from '../../../components/Blockquote'; import {defaultExample, numberExample, positioningExample} from '../../../component-examples/PaginationExamples'; import packageJson from '@twilio-paste/pagination/package.json'; import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; @@ -343,16 +343,15 @@ Most Twilio datasets show 10 or 50 rows per page by default. However, a generic If a single default can’t satisfy customers’ needs, you can give customers a way to change the number of items in view. Try to keep these options limited to reduce cognitive overhead, especially if the choice isn’t critical to the customer’s main goal. -
- Many sites let users choose how many items they’ll see on each page. This is often overkill...It’s usually better to - offer a single default number — such as 10 or 20 — [or] give users the choice between two numbers, say 10 and 50, - where the second number is substantially bigger than the default. If the choice is between two relatively similar - numbers (such as 10 and 20), users might as well click the Next Page button rather than suffer the cognitive overhead - of trying to decide their display preference. +
+ + Many sites let users choose how many items they’ll see on each page. This is often overkill...It’s usually better to + offer a single default number — such as 10 or 20 — [or] give users the choice between two numbers, say 10 and 50, + where the second number is substantially bigger than the default. If the choice is between two relatively similar + numbers (such as 10 and 20), users might as well click the Next Page button rather than suffer the cognitive + overhead of trying to decide their display preference. + +
Consider [contributing a Table Actions pattern](/introduction/contributing/patterns) to help standardize this across Twilio! diff --git a/packages/paste-website/src/pages/components/switch/index.mdx b/packages/paste-website/src/pages/components/switch/index.mdx index 83440aba57..a8285652d2 100644 --- a/packages/paste-website/src/pages/components/switch/index.mdx +++ b/packages/paste-website/src/pages/components/switch/index.mdx @@ -9,11 +9,11 @@ import {Anchor} from '@twilio-paste/anchor'; import {Avatar} from '@twilio-paste/avatar'; import {Text} from '@twilio-paste/text'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {Switch, SwitchGroup} from '@twilio-paste/switch'; import {HelpText} from '@twilio-paste/help-text'; import {useUID} from '@twilio-paste/uid-library'; import {SidebarCategoryRoutes} from '../../../constants'; -import {Blockquote} from '../../../components/Blockquote'; import { basicSwitch, helpTextSwitch, @@ -66,14 +66,13 @@ Use Switch when the interaction result is **immediate**. Users shouldn't need to Use a [Checkbox](/components/checkbox) to present a user with a single binary choice that is part of a form or otherwise requires a user to take an additional action to confirm input. -
- Users expect the same immediate results from a digital toggle as they do from their real-world counterparts (e.g., - light switches). Immediate results are a facet of toggle switches that grants users the freedom and control to update - their preferences as needed. +
+ + Users expect the same immediate results from a digital toggle as they do from their real-world counterparts (e.g., + light switches). Immediate results are a facet of toggle switches that grants users the freedom and control to + update their preferences as needed. + +
### Accessibility diff --git a/packages/paste-website/src/pages/experiences/artificial-intelligence/index.mdx b/packages/paste-website/src/pages/experiences/artificial-intelligence/index.mdx index 158ce4a9aa..abe00c7df2 100644 --- a/packages/paste-website/src/pages/experiences/artificial-intelligence/index.mdx +++ b/packages/paste-website/src/pages/experiences/artificial-intelligence/index.mdx @@ -7,13 +7,13 @@ export const meta = { import { SidebarCategoryRoutes } from "../../../constants"; import {ResponsiveImage} from '../../../components/ResponsiveImage'; -import {Blockquote} from '../../../components/Blockquote'; import {Anchor} from '@twilio-paste/anchor'; import {ArtificialIntelligenceIcon} from '@twilio-paste/icons/esm/ArtificialIntelligenceIcon'; import {Button} from '@twilio-paste/button'; import {ButtonGroup} from '@twilio-paste/button-group'; import {Badge} from '@twilio-paste/badge'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {ChatComposerContainer, ChatComposer, ChatComposerActionGroup} from '@twilio-paste/chat-composer'; import {SendIcon} from '@twilio-paste/icons/esm/SendIcon'; import {Label} from '@twilio-paste/label'; @@ -159,13 +159,14 @@ While AI features are still in rapid development, work with your Product Marketi Just because AI features are new, doesn’t mean we need to invent entirely new visual and interaction patterns for them. Start by asking yourself first: **“How would I design this feature if it did the same thing but didn’t use AI?”** Remember that customers have specific goals and tasks to achieve, and the task is rarely just “To use AI”. Avoid being too heavy-handed with communicating how a feature has been built or changed with AI since introducing new interaction patterns and unnecessary messaging can distract from the customer’s goals. -
-With AI-driven products, there can be a temptation to communicate the “newness” or “magic” of the system’s predictions through its UI metaphors. -However, unfamiliar UI touchpoints can make it harder for users to learn to use your system, potentially leading to degraded understanding of, or trust in, your product…Instead, anchor new users with familiar UI patterns and features. +
+ + With AI-driven products, there can be a temptation to communicate the “newness” or “magic” of the system’s + predictions through its UI metaphors. However, unfamiliar UI touchpoints can make it harder for users to learn to + use your system, potentially leading to degraded understanding of, or trust in, your product…Instead, anchor new + users with familiar UI patterns and features. + +
With AI features, there’s also a higher chance for things to go wrong. Be proactive about risks, error handling, and confidence: diff --git a/packages/paste-website/src/pages/patterns/filter/index.mdx b/packages/paste-website/src/pages/patterns/filter/index.mdx index 2468ba3197..35553deb1e 100644 --- a/packages/paste-website/src/pages/patterns/filter/index.mdx +++ b/packages/paste-website/src/pages/patterns/filter/index.mdx @@ -6,6 +6,7 @@ export const meta = { import {Anchor} from '@twilio-paste/anchor'; import {Box} from '@twilio-paste/box'; +import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote"; import {Card} from '@twilio-paste/card'; import {Grid, Column} from '@twilio-paste/grid'; import {Heading} from '@twilio-paste/heading'; @@ -15,7 +16,6 @@ import {DoDont, Do, Dont} from '../../../components/DoDont'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; -import {Blockquote} from '../../../components/Blockquote'; import {ResponsiveImage} from '../../../components/ResponsiveImage'; import MainImage from '../../../assets/images/patterns/filter-main.png'; import UsageImage from '../../../assets/images/patterns/filter-usage.png'; @@ -81,12 +81,11 @@ This pattern provides recommendations for selection methods, layout, and behavio List all filtering criteria available. Map out the relationships between different filters and choose the ones that will be part of your feature. Remember filters should give users a sense of control and not overwhelm them. -
- A truly usable faceted search provides filter categories and filter values that are appropriate, predictable, free of jargon, and prioritized +
+ + A truly usable faceted search provides filter categories and filter values that are appropriate, predictable, free of jargon, and prioritized. + +
Check our Form documentation to choose the best selection method for your filter use case.