diff --git a/.changeset/quiet-days-know.md b/.changeset/quiet-days-know.md new file mode 100644 index 0000000000..2c9ffbac2e --- /dev/null +++ b/.changeset/quiet-days-know.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/timeline": patch +"@twilio-paste/core": patch +--- + +[Timeline]: Remove unnecessary `z-index` from `TimelineItemIcon` diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts index 1071c6590f..ca86529876 100644 --- a/cypress/integration/sitemap-vrt/constants.ts +++ b/cypress/integration/sitemap-vrt/constants.ts @@ -23,6 +23,7 @@ export const SITEMAP = [ "/blog/2024-02-06-paste-2023-year-in-review/", "/blog/2024-07-17-paste-newsletter/", "/blog/2024-08-23-paste-newsletter", + "/blog/2024-11-07-paste-newsletter/", "/components/account-switcher/", "/components/account-switcher/api", "/components/account-switcher/changelog", diff --git a/packages/paste-core/components/timeline/src/TimelineItemIcon.tsx b/packages/paste-core/components/timeline/src/TimelineItemIcon.tsx index e5e83f5fdc..816e436b69 100644 --- a/packages/paste-core/components/timeline/src/TimelineItemIcon.tsx +++ b/packages/paste-core/components/timeline/src/TimelineItemIcon.tsx @@ -20,7 +20,6 @@ const TimelineItemIcon = React.forwardRef( backgroundColor="colorBackgroundStronger" borderRadius="borderRadiusCircle" size="sizeBase20" - zIndex="zIndex20" marginY="space30" /> )} diff --git a/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/ai-error-state.png b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/ai-error-state.png new file mode 100644 index 0000000000..27959ad253 Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/ai-error-state.png differ diff --git a/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/callout.png b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/callout.png new file mode 100644 index 0000000000..9d617bb283 Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/callout.png differ diff --git a/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/paste-mate-2024-11.png b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/paste-mate-2024-11.png new file mode 100644 index 0000000000..66dc70b52c Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/paste-mate-2024-11.png differ diff --git a/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/pricing-pattern.png b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/pricing-pattern.png new file mode 100644 index 0000000000..0ae702dd68 Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/pricing-pattern.png differ diff --git a/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/progress-steps.png b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/progress-steps.png new file mode 100644 index 0000000000..01757b49e5 Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/progress-steps.png differ diff --git a/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/tabs.gif b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/tabs.gif new file mode 100644 index 0000000000..dacab95f50 Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/tabs.gif differ diff --git a/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/timeline.png b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/timeline.png new file mode 100644 index 0000000000..0447db0d25 Binary files /dev/null and b/packages/paste-website/src/assets/images/articles/2024-11-07-paste-newsletter/timeline.png differ 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 new file mode 100644 index 0000000000..37dea77903 --- /dev/null +++ b/packages/paste-website/src/pages/blog/2024-11-07-paste-newsletter.mdx @@ -0,0 +1,210 @@ +export const meta = { + title: "Paste Design System Newsletter - November 2024 Edition", + slug: "/blog/2024-11-07-paste-newsletter/", + date: "2024-11-07", + author: 'Paste', + avatar: 'https://avatars.githubusercontent.com/t/3335688?s=280&v=4', + excerpt: "What's new in Paste in November 2024? Pricing pattern, Timeline component, and more!", +}; + +import Image from "next/image"; +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"; +import ProgressSteps from "../../assets/images/articles/2024-11-07-paste-newsletter/progress-steps.png"; +import Tabs from "../../assets/images/articles/2024-11-07-paste-newsletter/tabs.gif"; +import AIErrorState from "../../assets/images/articles/2024-11-07-paste-newsletter/ai-error-state.png"; +import Callout from "../../assets/images/articles/2024-11-07-paste-newsletter/callout.png"; +import Pastemate from "../../assets/images/articles/2024-11-07-paste-newsletter/paste-mate-2024-11.png"; + +import DefaultLayout from "../../layouts/DefaultLayout"; +import { getNavigationData } from "../../utils/api"; + +export default DefaultLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + return { + props: { + navigationData, + }, + }; +}; + + + +--- + + + + + + + +## 📣 What was new in Paste? + +### Pricing pattern + + + + + + + +If you’re shipping updated billing flows, you’ll want to check out the +new [Pricing pattern](/patterns/pricing)! +This pattern shows a group of paid features or plan options for a user +to make a selection. Use it to show the differences between plans in +order for customers to make informed purchasing decisions. + +This pattern was a major contribution from **Kara Kenna**, +with support from **Bhooma Srirangarajan**. Thanks for your +detailed work and feedback-gathering on this pattern! + + +### Timeline component + + + + + +The [Timeline](/components/timeline) component displays events in chronological order and can be used for tracking milestones, monitoring system logs, or visualizing user activity that can be associated with a timestamp. + +We’ve also updated [Progress Steps so you can add additional content to individual steps](/components/progress-steps#additional-content). With this update, Progress Steps can continue to be used to outline progress multi-step task across multiple pages or apps: + + + + + +[Learn more about when to use Timeline vs. Progress Steps here.](/components/timeline#progress-steps-vs-ordered-display-list-vs-timeline) + +### Improved responsive behavior in Tabs + + + + + + + +[Tabs](/components/tabs) now have better responsive behavior by default, +allowing users to scroll additional tabs, rather than its previous behavior that truncated tab labels. + + +### Error states for AI Chat Log + + + + + +When designing for AI, you’ll always want to [assume errors will happen and plan for them](/experiences/artificial-intelligence#designing-ai-features) when they inevitably happen. In that vein, check out our new guidelines for [error states in AI Chat Log](/components/ai-chat-log#error-states). + +These guidelines cover errors when: + +- Generating a response +- A user takes an action that’s part of message content +- A user takes an action that affects a message, like giving feedback on a response +- A user’s message fails to be sent +- There’s a system failure + +### Callout update + + + + + +The design and functionality of [Callout](/components/callout) has been updated with a +dismissible variant and greater visual contrast from the [Alert](/components/alert) component to +better communicate differences in urgency. + +### Additional updates + +#### New + +- Added [borderless Status Badges](/components/status-badge#borderless-badges) for easier display of statuses within Tables and Data Grids, and updated the [Object status](/patterns/object-status) pattern (formerly known as Status pattern) +- Added instructions on how to [add the HighCharts accessibility module](/foundations/data-visualization#adding-highcharts-accessibility-module) to your charts for enhanced keyboard navigation and screen reader functionality + +#### Updates + +- [Truncate](/components/truncate) and [Inline Code](/components/inline-code) are now composable + +## ✨ Pastemates™ spotlight + +Pastemates are individuals and teams who have been critical contributors to Paste, through advocating for adoption within their products and channeling important feedback and contributions back into the system. + + + + + +In this edition of Pastemates, we’re spotlighting a mate from the Voice team, **Kara Kenna**! Kara contributed the design and guidelines for our new [Pricing pattern](/patterns/pricing), and frequently provides valuable product and customer insight on Paste components and features. + +She set an outstanding example for Paste contributions, keeping the Paste team updated through regular check-ins and keeping other designers aligned during design critiques. Despite varying feedback, she was able to keep the pattern tightly scoped and showed sensible, incremental progress at every step. This is truly the best way to move broad-reaching systems work forward, and Kara lived the Twilio values of being an Owner by ruthlessly prioritizing and being Curious by seeking progress, over perfection. + +Here’s Kara’s own experience with contributing the Pricing pattern: + +Working on a product upgrade feature for Voice, I realized the +opportunity to contribute additional guidance on pricing cards in +Paste. I worked across product teams, including Onboarding, Commerce, +Messaging, Support, and Segment to identify use cases and align on a +consistent pattern. The established Paste components and guidelines +helped us move efficiently with layouts, and the Design System team +provided support along the way to ensure we followed best practices. +Contributing may seem daunting at first, but the team makes it +painless and you have a chance to make an impact across products! + +Thank you so much, Kara! We can’t wait to see what you build (and contribute) next. + +## 👀 What we're working on next + +| Feature | Description | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Keyboard Key component** | A Keyboard Key distinguishes a keyboard command or shortcut from other text. | +| **Sample Text component** | Sample Text is a stylized text wrapper used to highlight standalone contextual information within a body text. | +| **Blockquote component** | A Blockquote highlights a quotation. | + + + +As always, we're better together. + +— The UX Infrastructure Team + + + +