From 069e6cc3ad14d1b27deebf3bc4aba6a8640a8441 Mon Sep 17 00:00:00 2001 From: Greiner Date: Thu, 10 Dec 2020 08:47:26 -0500 Subject: [PATCH 01/16] add missing regularwidth import --- src/docs/design/anatomy.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/design/anatomy.mdx b/src/docs/design/anatomy.mdx index b54d7a76a..59c9a1309 100644 --- a/src/docs/design/anatomy.mdx +++ b/src/docs/design/anatomy.mdx @@ -1,4 +1,4 @@ -import { Divider, ImageGrid } from '../../app/components'; +import { Divider, ImageGrid, RegularWidth } from '../../app/components'; import CategoriesImg from '../../app/assets/resource-anatomy/resource-categories.png'; import PatternStatesImg from '../../app/assets/resource-anatomy/pattern-states.png'; From 6b28abf68f4c62998313a3b7d4269573c56870b7 Mon Sep 17 00:00:00 2001 From: joebochill Date: Fri, 11 Dec 2020 08:03:21 -0500 Subject: [PATCH 02/16] Update Kyle's role --- src/__configuration__/contributors/contributors.ts | 6 ++++++ .../contributors/currentMaintainers.ts | 11 ----------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/__configuration__/contributors/contributors.ts b/src/__configuration__/contributors/contributors.ts index 1701c5cf4..d82790948 100644 --- a/src/__configuration__/contributors/contributors.ts +++ b/src/__configuration__/contributors/contributors.ts @@ -1,4 +1,5 @@ import EricAtha from '../../app/assets/credits/eric-atha.jpg'; +import KyleHorchen from '../../app/assets/credits/kyle-horchen.jpg'; import IanTodhunter from '../../app/assets/credits/ian-todhunter.jpg'; import ShivaniPitta from '../../app/assets/credits/shivani-pitta.jpeg'; import BrianShyu from '../../app/assets/credits/brian-shyu.jpg'; @@ -16,6 +17,11 @@ export const contributors: Contributor[] = [ description: 'UX Designer', image: EricAtha, }, + { + name: 'Kyle Horchen', + description: 'UX Designer', + image: KyleHorchen, + }, { name: 'Kraig Keller', description: 'Front-End Developer', diff --git a/src/__configuration__/contributors/currentMaintainers.ts b/src/__configuration__/contributors/currentMaintainers.ts index 189573d18..5f4355828 100644 --- a/src/__configuration__/contributors/currentMaintainers.ts +++ b/src/__configuration__/contributors/currentMaintainers.ts @@ -3,7 +3,6 @@ import EvanMcLaughlin from '../../app/assets/credits/evan-mclaughlin.jpeg'; import JosephBoyle from '../../app/assets/credits/joseph-boyle.png'; import JeffeyGreiner from '../../app/assets/credits/jeffery-greiner.jpeg'; import ThomasDailey from '../../app/assets/credits/thomas-dailey.jpeg'; -import KyleHorchen from '../../app/assets/credits/kyle-horchen.jpg'; import { Contributor } from '../../__types__'; export const currentMaintainers: Contributor[] = [ @@ -57,14 +56,4 @@ export const currentMaintainers: Contributor[] = [ linkedIn: 'https://www.linkedin.com/in/thomas-dailey/', }, }, - { - name: 'Kyle Horchen', - description: 'UX Designer', - image: KyleHorchen, - info: `Formerly from the advertising industry, Kyle is a UI / UX designer who's worked with some of the largest brands in the world like the NBA and National Rugby League in Australia. A die-hard Star Wars fan, Kyle can recite every line of The Empire Strikes back and still watches it at least once a week.`, - contacts: { - github: 'https://github.com/Horchen154', - linkedIn: 'https://www.linkedin.com/in/kyle-horchen-3294b142/', - }, - }, ]; From d804ee8cde0546d85a009914eec0ef9910d0b06a Mon Sep 17 00:00:00 2001 From: Firm-Soft Date: Mon, 21 Dec 2020 09:37:47 -0500 Subject: [PATCH 03/16] Fix width changing per framework on resource page --- src/app/pages/Resources.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/Resources.tsx b/src/app/pages/Resources.tsx index e2d9cbcba..80b72b699 100644 --- a/src/app/pages/Resources.tsx +++ b/src/app/pages/Resources.tsx @@ -84,7 +84,7 @@ export const Resources: React.FC = (): JSX.Element => { {/* First expander */} - + {resources.map( (bucket, bIndex) => (!bucket.applies || From 649a716d31d32768c7157c0b626b1c0d87ccba4d Mon Sep 17 00:00:00 2001 From: huayunh Date: Tue, 22 Dec 2020 20:44:52 -0500 Subject: [PATCH 04/16] Add files to summarize efforts on the design side --- src/docs/release-notes/R18/R18.mdx | 10 ++++++++++ src/docs/release-notes/R18/Summary.mdx | 1 + 2 files changed, 11 insertions(+) create mode 100644 src/docs/release-notes/R18/R18.mdx create mode 100644 src/docs/release-notes/R18/Summary.mdx diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx new file mode 100644 index 000000000..ee588ea75 --- /dev/null +++ b/src/docs/release-notes/R18/R18.mdx @@ -0,0 +1,10 @@ +### Stickersheet Components + +- Rewired all the components using Figma's newly-released variants and auto-layout +- Added images, tiles and patterns +- Added more components (badges, dialogs, form controls, icon buttons, menus, side sheets, steppers and toggle buttons) +- Reorganized the stickersheet structure + +### Documentation Site + +- Updated [the iconography page](/style/iconography) to enable users to download icons and search by tag names diff --git a/src/docs/release-notes/R18/Summary.mdx b/src/docs/release-notes/R18/Summary.mdx new file mode 100644 index 000000000..a0990367e --- /dev/null +++ b/src/docs/release-notes/R18/Summary.mdx @@ -0,0 +1 @@ +TBD From 885249d504987cd2dcff6ae0e35621ebe72e9de4 Mon Sep 17 00:00:00 2001 From: huayunh Date: Tue, 22 Dec 2020 20:47:31 -0500 Subject: [PATCH 05/16] Add R18 notes to the queue --- src/docs/release-notes/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/docs/release-notes/index.tsx b/src/docs/release-notes/index.tsx index 6e2e8e443..4ef6a00aa 100644 --- a/src/docs/release-notes/index.tsx +++ b/src/docs/release-notes/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; // Full Release Notes +import R18 from './R18/R18.mdx'; import R17 from './R17/R17.mdx'; import R16 from './R16/R16.mdx'; import R15 from './R15/R15.mdx'; @@ -14,6 +15,7 @@ import R8 from './R8/R8.mdx'; import R7 from './R7/R7.mdx'; // Summaries (for Landing Page) +import R18Summary from './R18/Summary.mdx'; import R17Summary from './R17/Summary.mdx'; import R16Summary from './R16/Summary.mdx'; import R15Summary from './R15/Summary.mdx'; @@ -34,6 +36,13 @@ export type ReleaseInfo = { summary: JSX.Element; }; const Releases: ReleaseInfo[] = [ + { + title: 'R18', + date: 'December 2020', + version: '2.3.6', + details: , + summary: , + }, { title: 'R17', date: 'September 2020', From 1407a2e9f1fb4b9eeb74b5445d8f027e7b88cd8d Mon Sep 17 00:00:00 2001 From: huayunh Date: Mon, 28 Dec 2020 15:26:53 -0500 Subject: [PATCH 06/16] Add page redirects --- src/__configuration__/navigationMenu/navigation.tsx | 12 ++++++++++++ src/app/router/index.tsx | 11 ++++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/__configuration__/navigationMenu/navigation.tsx b/src/__configuration__/navigationMenu/navigation.tsx index d0f266e71..59dab88aa 100644 --- a/src/__configuration__/navigationMenu/navigation.tsx +++ b/src/__configuration__/navigationMenu/navigation.tsx @@ -11,6 +11,11 @@ export type SimpleNavItem = { hidden?: boolean; }; +export type RedirectItem = { + oldUrl: string; + newUrl: string; +}; + // Change scripts/crawl/sitemap.json after you make changes here. export const pageDefinitions: SimpleNavItem[] = [ { @@ -325,3 +330,10 @@ export const pageDefinitions: SimpleNavItem[] = [ component: , }, ]; + +export const pageRedirects: RedirectItem[] = [ + { + oldUrl: '/patterns/login', + newUrl: '/patterns/user-auth', + }, +]; diff --git a/src/app/router/index.tsx b/src/app/router/index.tsx index ad2c5c87a..fd7600f8f 100644 --- a/src/app/router/index.tsx +++ b/src/app/router/index.tsx @@ -8,7 +8,7 @@ import { AppState } from '../redux/reducers'; import { Menu } from '@material-ui/icons'; import { useSelector } from 'react-redux'; -import { pageDefinitions, SimpleNavItem } from '../../__configuration__/navigationMenu/navigation'; +import { pageDefinitions, SimpleNavItem, pageRedirects } from '../../__configuration__/navigationMenu/navigation'; import { getScheduledSiteConfig } from '../../__configuration__/themes'; import { AppBar, @@ -39,6 +39,14 @@ const buildRoutes = (routes: SimpleNavItem[], url: string): JSX.Element[] => { return ret; }; +const buildRedirects = (): JSX.Element[] => { + const ret: JSX.Element[] = []; + for (let i = 0; i < pageRedirects.length; i++) { + ret.push(); + } + return ret; +}; + const useStyles = makeStyles((theme: Theme) => createStyles({ footer: { @@ -86,6 +94,7 @@ export const MainRouter = (): JSX.Element => {
{buildRoutes(pageDefinitions, '')} + {buildRedirects()} {/* Catch-All Redirect to Landing Page */} From 5ea0e11297845827a4f0868f7de0b3a623a56e5e Mon Sep 17 00:00:00 2001 From: Joseph Boyle Date: Tue, 29 Dec 2020 07:47:01 -0500 Subject: [PATCH 07/16] Update stale.yml --- .github/stale.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/stale.yml b/.github/stale.yml index 448d01fa4..5974e42c2 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -1,5 +1,5 @@ # Number of days of inactivity before an issue becomes stale -daysUntilStale: 60 +daysUntilStale: 90 # Number of days of inactivity before a stale issue is closed daysUntilClose: 10 # Issues with these labels will never be considered stale From 1ef46995cf86f0d37e26b6f7fd6168efc361430c Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 29 Dec 2020 10:24:04 -0500 Subject: [PATCH 08/16] Update release notes for R18 --- src/database/sitemap-database.json | 2 +- src/docs/release-notes/R18/R18.mdx | 32 +++++++++++++++++++++++++++--- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/database/sitemap-database.json b/src/database/sitemap-database.json index f2e37f83b..d49a0f751 100644 --- a/src/database/sitemap-database.json +++ b/src/database/sitemap-database.json @@ -58,7 +58,7 @@ }, "/design/anatomy": { "title": "Design System Anatomy", - "text": "import { Divider, ImageGrid } from '../../app/components';\nimport CategoriesImg from '../../app/assets/resource-anatomy/resource-categories.png';\nimport PatternStatesImg from '../../app/assets/resource-anatomy/pattern-states.png';\n\n\n\n# Design System Anatomy\n\nThe building blocks of the PX Blue design system are broken down into four levels of increasing complexity: elements, components, pages, and workflows. When communicating with other members of the PX Blue community, you should strive to use this terminology to promote effective collaboration and understanding. This is applicable to designers, developers, product managers, etc.\n\n\n\n## Foundations\n\nThe foundations include the most basic visual elements on the page, such as [color](/style/color), [icons](/style/iconography), [typography](/style/typography), etc. These typically have no behavior or interaction on their own, but instead are used to communicate information to a user, establish a brand, or lay the foundations for the PX Blue components, pages, and workflows.\n\n## Components\n\nComponents are the basic functional units of the UI. They are usually interactive through clicking, expanding, etc. Components can be as simple (such as buttons, tabs, sliders) or complex (such as [navigation drawers](/patterns/navigation)). Simpler components are often combined to form complex ones.\n\nMost of the simple components in PX Blue are defined and built by Material Design and the component libraries that implement it. PX Blue focuses on defining and building advanced components that are shared across PX Blue applications.\n\n## Pages\n\nPages are the largest single unit in the PX Blue design system. These are typically full-screen designs that specify how certain pages can look in an application. Foundation of these pages should stay the same while there may be some room for customizations. Examples of pages include \"login (empty fields)\" and \"create password (invalid)\".\n\n## Workflows\n\nWorkflows are a sequence of pages combined with rules surrounding how a user goes from one page to another. These usually represent a common path that a user is expected to take to complete various tasks. Workflows that are defined in PX Blue are intended to be nearly identical between applications. Examples of very common workflows include the [login](/patterns/user-auth) experience and user registration / sign up.\n\n\n\n# Design Patterns\n\n\n \n\n\n[Design patterns](/patterns) are very common in PX Blue. A design pattern is a common interaction or behavior that can exist at any level in the design system hierarchy described above. For example, we may have a design pattern for showing actions available on a list item or how to interact with individual settings on a settings page.\n\nBecause a design pattern centers around interactions, they typically include different states. A button can be normal, hovered, or pressed. Similarly, a login workflow can involve login with 2FA, Captcha, or simply a username and password.\n\nFor each state, PX Blue tries to provide:\n\n- Guidelines: How it's used and in what context\n- Design Specifications: How it looks\n- Interactions: How it goes from one state to another\n- Code: How it can be implemented\n\n\n\n# PX Blue and the Atomic Design System\n\nIf you are familiar with other design systems, such as the [Atomic Design System](https://atomicdesign.bradfrost.com/), you may recognize some concepts used here. PX Blue's \"components\" parallel Atomic Design's atoms, molecules, and organisms. The idea of \"pages\" is the same in both systems, but PX Blue also goes one level further in each direction (i.e., Foundations and Workflows) to define a project's user experience more comprehensively.\n" + "text": "import { Divider, ImageGrid, RegularWidth } from '../../app/components';\nimport CategoriesImg from '../../app/assets/resource-anatomy/resource-categories.png';\nimport PatternStatesImg from '../../app/assets/resource-anatomy/pattern-states.png';\n\n\n\n# Design System Anatomy\n\nThe building blocks of the PX Blue design system are broken down into four levels of increasing complexity: elements, components, pages, and workflows. When communicating with other members of the PX Blue community, you should strive to use this terminology to promote effective collaboration and understanding. This is applicable to designers, developers, product managers, etc.\n\n\n\n## Foundations\n\nThe foundations include the most basic visual elements on the page, such as [color](/style/color), [icons](/style/iconography), [typography](/style/typography), etc. These typically have no behavior or interaction on their own, but instead are used to communicate information to a user, establish a brand, or lay the foundations for the PX Blue components, pages, and workflows.\n\n## Components\n\nComponents are the basic functional units of the UI. They are usually interactive through clicking, expanding, etc. Components can be as simple (such as buttons, tabs, sliders) or complex (such as [navigation drawers](/patterns/navigation)). Simpler components are often combined to form complex ones.\n\nMost of the simple components in PX Blue are defined and built by Material Design and the component libraries that implement it. PX Blue focuses on defining and building advanced components that are shared across PX Blue applications.\n\n## Pages\n\nPages are the largest single unit in the PX Blue design system. These are typically full-screen designs that specify how certain pages can look in an application. Foundation of these pages should stay the same while there may be some room for customizations. Examples of pages include \"login (empty fields)\" and \"create password (invalid)\".\n\n## Workflows\n\nWorkflows are a sequence of pages combined with rules surrounding how a user goes from one page to another. These usually represent a common path that a user is expected to take to complete various tasks. Workflows that are defined in PX Blue are intended to be nearly identical between applications. Examples of very common workflows include the [login](/patterns/user-auth) experience and user registration / sign up.\n\n\n\n# Design Patterns\n\n\n \n\n\n[Design patterns](/patterns) are very common in PX Blue. A design pattern is a common interaction or behavior that can exist at any level in the design system hierarchy described above. For example, we may have a design pattern for showing actions available on a list item or how to interact with individual settings on a settings page.\n\nBecause a design pattern centers around interactions, they typically include different states. A button can be normal, hovered, or pressed. Similarly, a login workflow can involve login with 2FA, Captcha, or simply a username and password.\n\nFor each state, PX Blue tries to provide:\n\n- Guidelines: How it's used and in what context\n- Design Specifications: How it looks\n- Interactions: How it goes from one state to another\n- Code: How it can be implemented\n\n\n\n# PX Blue and the Atomic Design System\n\nIf you are familiar with other design systems, such as the [Atomic Design System](https://atomicdesign.bradfrost.com/), you may recognize some concepts used here. PX Blue's \"components\" parallel Atomic Design's atoms, molecules, and organisms. The idea of \"pages\" is the same in both systems, but PX Blue also goes one level further in each direction (i.e., Foundations and Workflows) to define a project's user experience more comprehensively.\n" }, "/design/accessibility": { "title": "Accessibility", diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx index ee588ea75..90a1a8b71 100644 --- a/src/docs/release-notes/R18/R18.mdx +++ b/src/docs/release-notes/R18/R18.mdx @@ -1,10 +1,36 @@ +### Component Libraries + +- Added a [Mobile Stepper](https://pxblue-components.github.io/angular/?path=/info/components-mobile-stepper--readme) component for Angular +- Angular components are now compatible with Angular 10+ +- Updated React Native components to be compatible with react-native-paper version 4 + +### Design Patterns + +- Updated content for [Navigation](/patterns/navigation) and [Visualizations](https://pxblue.github.io/patterns/visualizations) +- New Figma examples file for various patterns (TODO LINK) + +### Documentation Site + +- Updated [Iconography](/style/iconography) page to enable users to download icons and search by keywords/tags +- Added a new page dedicated to helping you build a [Project Identity](/design/project-identity) +- Added new holiday themes + +### PX Blue CLI + +- You can now use [templates](https://github.com/pxblue/react-cli-templates) to kick-start your react projects with navigation and authentication + +### Reusable Workflows + +- Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular. + ### Stickersheet Components -- Rewired all the components using Figma's newly-released variants and auto-layout +- Re-built all the components using the new Figma variants and auto-layout - Added images, tiles and patterns - Added more components (badges, dialogs, form controls, icon buttons, menus, side sheets, steppers and toggle buttons) - Reorganized the stickersheet structure -### Documentation Site +### Miscellaneous -- Updated [the iconography page](/style/iconography) to enable users to download icons and search by tag names +- Bug fixes & performance updates +- Addressed security vulnerabilities From 0b7e45424490fd06486b533d321e776512aa76bb Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 29 Dec 2020 10:27:02 -0500 Subject: [PATCH 09/16] Add R18 summary --- src/docs/release-notes/R18/Summary.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/release-notes/R18/Summary.mdx b/src/docs/release-notes/R18/Summary.mdx index a0990367e..f0d0ca10d 100644 --- a/src/docs/release-notes/R18/Summary.mdx +++ b/src/docs/release-notes/R18/Summary.mdx @@ -1 +1 @@ -TBD +Major overhaul of the designer Sticker Sheet, new Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular, CLI templates for React projects, and documentation site improvements. \ No newline at end of file From d33fa02152084d1a7f54d52277c7ee1f9914af60 Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 29 Dec 2020 10:38:36 -0500 Subject: [PATCH 10/16] Update some todos and prettier --- src/app/pages/Roadmap.tsx | 38 ++++++++------------------ src/docs/release-notes/R18/R18.mdx | 2 +- src/docs/release-notes/R18/Summary.mdx | 2 +- 3 files changed, 14 insertions(+), 28 deletions(-) diff --git a/src/app/pages/Roadmap.tsx b/src/app/pages/Roadmap.tsx index 9ebdd2462..4705ea1a1 100644 --- a/src/app/pages/Roadmap.tsx +++ b/src/app/pages/Roadmap.tsx @@ -159,13 +159,6 @@ export const Roadmap: React.FC = (): JSX.Element => { const roadmapBuckets = // Filter buckets by item type roadmap - .map((bucket) => ({ - // TODO: Remove this map function in the next push (it's only here for backwards compatibility with the older Roadmap types) - ...bucket, - type: bucket.type ? bucket.type : 'development', - // @ts-ignore - framework: bucket.framework ? bucket.framework : bucket.applies, - })) .filter( (bucket) => !bucket.type || bucket.type === typeFilter || bucket.type === 'all' || typeFilter === 'all' ) @@ -181,25 +174,18 @@ export const Roadmap: React.FC = (): JSX.Element => { // Filter line items by remaining filters .map((bucket) => ({ ...bucket, - items: bucket.items - .map((item) => ({ - // TODO: Remove this map function in the next push (it's only here for backwards compatibility with the older Roadmap types) - ...item, - // @ts-ignore - framework: item.framework ? item.framework : item.applies, - })) - .filter((item) => { - const show = - (typeFilter === 'design' || // if filtering by design, ignore the framework filter - item.framework === undefined || - item.framework.includes(frameworkFilter) || - item.framework.includes('all') || - frameworkFilter === 'all') && - (filterByRelease(releaseFilter, item) || releaseFilter === 'all') && - (item.status === statusFilter || statusFilter === 'all'); - if (show) results++; - return show; - }), + items: bucket.items.filter((item) => { + const show = + (typeFilter === 'design' || // if filtering by design, ignore the framework filter + item.framework === undefined || + item.framework.includes(frameworkFilter) || + item.framework.includes('all') || + frameworkFilter === 'all') && + (filterByRelease(releaseFilter, item) || releaseFilter === 'all') && + (item.status === statusFilter || statusFilter === 'all'); + if (show) results++; + return show; + }), })); const getTags = useCallback( diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx index 90a1a8b71..9911ff6ea 100644 --- a/src/docs/release-notes/R18/R18.mdx +++ b/src/docs/release-notes/R18/R18.mdx @@ -6,7 +6,7 @@ ### Design Patterns -- Updated content for [Navigation](/patterns/navigation) and [Visualizations](https://pxblue.github.io/patterns/visualizations) +- Updated content for [Navigation](/patterns/navigation) and [Visualizations](/patterns/visualizations) - New Figma examples file for various patterns (TODO LINK) ### Documentation Site diff --git a/src/docs/release-notes/R18/Summary.mdx b/src/docs/release-notes/R18/Summary.mdx index f0d0ca10d..b991003de 100644 --- a/src/docs/release-notes/R18/Summary.mdx +++ b/src/docs/release-notes/R18/Summary.mdx @@ -1 +1 @@ -Major overhaul of the designer Sticker Sheet, new Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular, CLI templates for React projects, and documentation site improvements. \ No newline at end of file +Major overhaul of the designer Sticker Sheet, new Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular, CLI templates for React projects, and documentation site improvements. From fccad54f8ae71448cf73e099ce1872440a0920a2 Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 29 Dec 2020 14:33:57 -0500 Subject: [PATCH 11/16] Add link to angular workflow --- src/database/index-database.json | 10 +++++----- src/database/sitemap-database.json | 2 +- src/docs/patterns/user-auth.mdx | 8 ++++++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/database/index-database.json b/src/database/index-database.json index 35de02ba5..2383a26b3 100644 --- a/src/database/index-database.json +++ b/src/database/index-database.json @@ -518,7 +518,7 @@ { "/design/accessibility": 18 }, { "/patterns/internationalization": 18 }, { "/patterns/navigation": 17 }, - { "/patterns/user-auth": 15 }, + { "/patterns/user-auth": 14 }, { "/design/anatomy": 13 }, { "/patterns/lists": 13 }, { "/community/license": 13 }, @@ -4403,10 +4403,10 @@ { "/patterns/internationalization": 2 }, { "/patterns/overlay": 2 }, { "/patterns/steppers": 2 }, + { "/patterns/user-auth": 2 }, { "/community/features": 2 }, { "/get-started/web": 1 }, { "/development/cli": 1 }, - { "/patterns/user-auth": 1 }, { "/patterns/visualizations": 1 }, { "/community/innersourcing": 1 }, { "/community/our-team": 1 } @@ -6034,9 +6034,9 @@ { "/patterns/empty-states": 3 }, { "/patterns/lists": 3 }, { "/patterns/navigation": 3 }, + { "/patterns/user-auth": 3 }, { "/patterns/visualizations": 3 }, { "/development/cli": 2 }, - { "/patterns/user-auth": 2 }, { "/style/color": 2 }, { "/patterns/steppers": 1 }, { "/style/themes": 1 }, @@ -8668,7 +8668,7 @@ "centers": [{ "/design/anatomy": 1 }], "hovered": [{ "/design/anatomy": 1 }, { "/design/websites": 1 }], "similarly": [{ "/design/anatomy": 1 }], - "workflow": [{ "/patterns/user-auth": 14 }, { "/patterns/steppers": 2 }, { "/design/anatomy": 1 }], + "workflow": [{ "/patterns/user-auth": 15 }, { "/patterns/steppers": 2 }, { "/design/anatomy": 1 }], "involve": [{ "/design/anatomy": 1 }], "2fa": [{ "/design/anatomy": 1 }], "captcha": [{ "/design/anatomy": 1 }], @@ -10017,7 +10017,7 @@ "register": [{ "/patterns/user-auth": 5 }], "forget": [{ "/patterns/user-auth": 1 }], "forgot": [{ "/patterns/user-auth": 5 }], - "auth": [{ "/patterns/user-auth": 3 }], + "auth": [{ "/patterns/user-auth": 4 }], "join": [{ "/patterns/user-auth": 6 }], "unauthorized": [{ "/patterns/user-auth": 1 }], "authorized": [{ "/patterns/user-auth": 3 }], diff --git a/src/database/sitemap-database.json b/src/database/sitemap-database.json index d49a0f751..b20161d01 100644 --- a/src/database/sitemap-database.json +++ b/src/database/sitemap-database.json @@ -111,7 +111,7 @@ }, "/patterns/user-auth": { "title": "User Authentication", - "text": "import { DemoCard, ImageGrid, Divider, MaterialDesignDescription } from '../../app/components';\nimport PxblueSmallAltIcon from '@pxblue/icons-mui/PxblueSmallAlt';\n\n\n\nimport LoginBanner from '../../app/assets/design-patterns/user-authentication/login.svg';\n\n\n\nimport EnterEmailAdress from '../../app/assets/design-patterns/user-authentication/enter-email-address.png';\nimport AcceptEULA from '../../app/assets/design-patterns/user-authentication/accept-eula.png';\nimport VerifyEmail from '../../app/assets/design-patterns/user-authentication/verify-email.png';\nimport CreatePassword from '../../app/assets/design-patterns/user-authentication/create-password.png';\nimport AccountDetails from '../../app/assets/design-patterns/user-authentication/account-details.png';\nimport WelcomeOnboard from '../../app/assets/design-patterns/user-authentication/welcome-onboard.png';\nimport RegistrationDesktop from '../../app/assets/design-patterns/user-authentication/registration-desktop.png';\n\nimport EnterOrganizationCode from '../../app/assets/design-patterns/user-authentication/enter-organization-code.png';\nimport EnterOrganizationConfirm from '../../app/assets/design-patterns/user-authentication/enter-organization-confirm.png';\nimport EnterOrganizationWelcome from '../../app/assets/design-patterns/user-authentication/enter-organization-welcome.png';\nimport JoinAnOrganizationDesktop from '../../app/assets/design-patterns/user-authentication/join-an-organization-desktop.png';\n\nimport Login from '../../app/assets/design-patterns/user-authentication/login.png';\nimport LoginDesktop from '../../app/assets/design-patterns/user-authentication/login-desktop.png';\n\nimport ForgotPasswordEnterEmail from '../../app/assets/design-patterns/user-authentication/forgot-password-email.png';\nimport ForgotPasswordConfirmSent from '../../app/assets/design-patterns/user-authentication/forgot-password-confirm.png';\nimport ForgotPasswordNewPassword from '../../app/assets/design-patterns/user-authentication/forgot-password-password.png';\nimport ForgotPasswordWelcome from '../../app/assets/design-patterns/user-authentication/forgot-password-welcome.png';\nimport ChangePassword from '../../app/assets/design-patterns/user-authentication/change-password.png';\nimport ChangePasswordWelcome from '../../app/assets/design-patterns/user-authentication/change-password-confirm.png';\nimport ResetPasswordDesktop from '../../app/assets/design-patterns/user-authentication/reset-password-desktop.png';\nimport ChangePasswordDesktop from '../../app/assets/design-patterns/user-authentication/change-password-desktop.png';\n\n\n\nimport EmailCommunicationInvitation from '../../app/assets/design-patterns/user-authentication/email-communication-invitation.png';\nimport EmailCommunicationVerification from '../../app/assets/design-patterns/user-authentication/email-communication-verification.png';\nimport ExpiredCode from '../../app/assets/design-patterns/user-authentication/expired.png';\nimport ErrorStates from '../../app/assets/design-patterns/user-authentication/error-states.png';\n\n\n\n# User Authentication & Registration\n\n\n\nMost applications require some form of user authentication to keep unauthorized users out, and a way to add authorized users to the application.\n\n\n\n\n\n# Variations\n\nUser authentication contains four primary workflows:\n\n- Registration\n- Joining an organization\n- Login\n- Forgot / Reset password\n\nAll of these workflows should follow the rules specified by our [forms and validation](/patterns/forms) pattern, and multi-step workflows should be connected using our [steppers](/patterns/steppers) pattern.\n\n}\n/>\n}\n/>\n\nYour authentication and registration workflows should work equally well on different screen sizes. On mobile, these should be presented as full-screen layouts, whereas on desktop, they should be presented in a card centered on the screen as an [overlay](/patterns/overlay).\n\n## Registration\n\nRegistration is the process of user account creation. Typically, users can either register themselves (self-registration) or you can invite them to join your application (invitation-based).\n\n**Self-Registration**\n\nIf you do not need to restrict who can register for your application, you can allow users to self-register. The self-registration workflow includes the following steps:\n\n- Enter email address\n- Accept EULA\n- Receive an email for verification\n- Verify email\n- Create password\n- Add account details\n- Success: account created\n\n**Registration via Invitation**\n\nIf you need to restrict who is able to use your application, you may choose to go with a invitation-based registration. In this situation, a system admin sends an email to authorized users inviting them to register. The invitation-based registration workflow includes the following steps:\n\n- Receive an email for invitation\n- Accept EULA\n- Create password\n- Add account details\n- Success: account created\n\n### Screens\n\nThe majority of the registration screens are the same between invitation-based and self-registration. The primary difference is in how the registration workflow is initiated, and whether the email needs to be verified. Use the following screens for the registration workflow where appropriate.\n\n\n\n> The purpose of a success screen is to assure the user that something has been achieved. These screens can be an opportunity to perform more product branding — you are encouraged to use animations and [graphics](/style/illustrations) on these screens.\n\n\n\n## Joining an Organization\n\nSome applications may require users to join specific groups or organizations after creating an account. Generally, there are three ways for a user to join an organization:\n\n**Request Access**\n\nThis occurs when a user has an account but need to access an invitation-only organization. This workflow involves the following steps:\n\n- Enter organization identifier\n- Success: request sent\n- Receive an email invitation\n- Success: organization joined\n\n**Join with Invitation**\n\nJoining via invitation occurs when a system admin extends an invitation for a user to join a group. If the user does not yet have an account, they will first proceed through the invitation-based registration workflow followed by the screens for joining the organization. This workflow includes the following steps:\n\n- Receive an email invitation\n- Success: organization joined\n\n### Screens\n\nThe majority of the joining-an-organization screens are the same regardless of the underlying mechanism. Use the following screens for the joining-an-organization workflow where appropriate.\n\n\n\n\n## Login\n\n\n\nLogging in can usually be accomplished in one of two ways: basic login or login via a third-party.\n\n**Basic Login**\n\nA simple login presents fields for the users to enter their credentials and a button to submit them for verification.\n\nThe login screen should always present information on how to create an account and what to do if a user has forgotten their credentials — these buttons should trigger the Registration and Forgot Password (see below) workflows .\n\n\n\n\n**Login via Third Party**\n\nSome applications, especially consumer-facing ones, can be authorized via third-party accounts / credentials. Different platforms may have different requirements for this. Here are some commonly used platforms and their instructions:\n\n- [Login with Amazon](https://developer.amazon.com/docs/login-with-amazon/brand.html)\n- [Google Sign-in](https://developers.google.com/identity/sign-in/web/sign-in)\n- [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/)\n- [Facebook Login](http://developers.facebook.com/docs/facebook-login/)\n- [Sign in with Microsoft](https://developer.microsoft.com/en-us/identity/add-sign-in-with-microsoft)\n\n## Forgot / Change Password\n\n**Forgot password**\n\nThe login screen for an application should also present users with a way to reset their password if they have forgotten it. This is typically displayed as a hyperlink below the credential fields. Clicking the link will present users with a field to enter their e-mail address. They will then receive an email with a hyperlink to reset their password. This workflow involves the following steps:\n\n- Enter email address\n- Success: reset instructions sent\n- Receive an email for resetting the password\n- Create a new password\n- Success: password updated\n\n\n\n\n**Change Password**\n\nWhen the users are logged in, they have the option to change their password by going through the change password workflow, typically triggered from within the user settings. This workflow includes the following steps:\n\n- Change password\n- Success: password updated\n\n> After a successful password change, users should be logged out and forced to log in with the new credentials.\n\n\n \n \n \n\n\n# Behavior\n\n## Email Communications\n\n\n\nEmail communications are frequently used throughout the user authentication workflow to verify the user's identity. Users receive emails for invitations, address verification, confirmation codes, etc.\n\nEmails are also sent to confirm security-related changes to a user's account, such as changing a password, updating a profile, etc. You should never allow users to unsubscribe from security-related email notifications.\n\n\n\n## Terminated Workflows & Expired Sessions\n\nDuring the registration, if a user leaves the application before creating a password for their account, the whole session is treated as expired, and upon returning, they must start the registration process over again.\n\nIf an invitation link or verification code has expired, the users should be able to request for another invitation link or verification code.\n\n\n\n## Security Concerns\n\n### Error Messages\n\nWhen a user encounters an error — such as a password mismatch or the server is temporarily down — they should be notified with an appropriate error message. However, be very careful when presenting error messages to the users. You should only show what is necessary to recover from the problem, such as \"incorrect email or password\" or \"server unavailable\" — do not expose information that could compromise the security of your application.\n\n> Do **NOT** provide messages like \"User does not exist,\" \"Incorrect Password,\" etc.\n\n\n\n### Exposing Credentials\n\nUnlike a phone application, a shared HMI application is more vulnerable to outside threats via showing credentials. These projects should **NOT** implement password visibility toggles or \"remember me\" functionality.\n\n### Two-Factor Authentication\n\nThe examples on this page used email as the login credentials. However, if your project requires additional security, consider using two-factor authentication. Two-factor authentication involves sending an additional confirmation code (typically via email or SMS) to verify a user's identity after they enter their password.\n\n\n\n# Developers\n\nWe recommend using the following packages to construct these workflows. Additionally, you should familiarize yourself with the components used for the [Forms](/patterns/forms#developers) and [Overlays](/patterns/overlay#developers) patterns.\n\n**Angular** and **Ionic:**\n\n_Planned_\n\n**React:**\n\n- [@pxblue/react-auth-workflow](https://www.npmjs.com/package/@pxblue/react-auth-workflow)\n\n**React Native:**\n\n- [@pxblue/react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow)\n" + "text": "import { DemoCard, ImageGrid, Divider, MaterialDesignDescription } from '../../app/components';\nimport PxblueSmallAltIcon from '@pxblue/icons-mui/PxblueSmallAlt';\n\n\n\nimport LoginBanner from '../../app/assets/design-patterns/user-authentication/login.svg';\n\n\n\nimport EnterEmailAdress from '../../app/assets/design-patterns/user-authentication/enter-email-address.png';\nimport AcceptEULA from '../../app/assets/design-patterns/user-authentication/accept-eula.png';\nimport VerifyEmail from '../../app/assets/design-patterns/user-authentication/verify-email.png';\nimport CreatePassword from '../../app/assets/design-patterns/user-authentication/create-password.png';\nimport AccountDetails from '../../app/assets/design-patterns/user-authentication/account-details.png';\nimport WelcomeOnboard from '../../app/assets/design-patterns/user-authentication/welcome-onboard.png';\nimport RegistrationDesktop from '../../app/assets/design-patterns/user-authentication/registration-desktop.png';\n\nimport EnterOrganizationCode from '../../app/assets/design-patterns/user-authentication/enter-organization-code.png';\nimport EnterOrganizationConfirm from '../../app/assets/design-patterns/user-authentication/enter-organization-confirm.png';\nimport EnterOrganizationWelcome from '../../app/assets/design-patterns/user-authentication/enter-organization-welcome.png';\nimport JoinAnOrganizationDesktop from '../../app/assets/design-patterns/user-authentication/join-an-organization-desktop.png';\n\nimport Login from '../../app/assets/design-patterns/user-authentication/login.png';\nimport LoginDesktop from '../../app/assets/design-patterns/user-authentication/login-desktop.png';\n\nimport ForgotPasswordEnterEmail from '../../app/assets/design-patterns/user-authentication/forgot-password-email.png';\nimport ForgotPasswordConfirmSent from '../../app/assets/design-patterns/user-authentication/forgot-password-confirm.png';\nimport ForgotPasswordNewPassword from '../../app/assets/design-patterns/user-authentication/forgot-password-password.png';\nimport ForgotPasswordWelcome from '../../app/assets/design-patterns/user-authentication/forgot-password-welcome.png';\nimport ChangePassword from '../../app/assets/design-patterns/user-authentication/change-password.png';\nimport ChangePasswordWelcome from '../../app/assets/design-patterns/user-authentication/change-password-confirm.png';\nimport ResetPasswordDesktop from '../../app/assets/design-patterns/user-authentication/reset-password-desktop.png';\nimport ChangePasswordDesktop from '../../app/assets/design-patterns/user-authentication/change-password-desktop.png';\n\n\n\nimport EmailCommunicationInvitation from '../../app/assets/design-patterns/user-authentication/email-communication-invitation.png';\nimport EmailCommunicationVerification from '../../app/assets/design-patterns/user-authentication/email-communication-verification.png';\nimport ExpiredCode from '../../app/assets/design-patterns/user-authentication/expired.png';\nimport ErrorStates from '../../app/assets/design-patterns/user-authentication/error-states.png';\n\n\n\n# User Authentication & Registration\n\n\n\nMost applications require some form of user authentication to keep unauthorized users out, and a way to add authorized users to the application.\n\n\n\n\n\n# Variations\n\nUser authentication contains four primary workflows:\n\n- Registration\n- Joining an organization\n- Login\n- Forgot / Reset password\n\nAll of these workflows should follow the rules specified by our [forms and validation](/patterns/forms) pattern, and multi-step workflows should be connected using our [steppers](/patterns/steppers) pattern.\n\n}\n/>\n}\n/>\n\nYour authentication and registration workflows should work equally well on different screen sizes. On mobile, these should be presented as full-screen layouts, whereas on desktop, they should be presented in a card centered on the screen as an [overlay](/patterns/overlay).\n\n## Registration\n\nRegistration is the process of user account creation. Typically, users can either register themselves (self-registration) or you can invite them to join your application (invitation-based).\n\n**Self-Registration**\n\nIf you do not need to restrict who can register for your application, you can allow users to self-register. The self-registration workflow includes the following steps:\n\n- Enter email address\n- Accept EULA\n- Receive an email for verification\n- Verify email\n- Create password\n- Add account details\n- Success: account created\n\n**Registration via Invitation**\n\nIf you need to restrict who is able to use your application, you may choose to go with a invitation-based registration. In this situation, a system admin sends an email to authorized users inviting them to register. The invitation-based registration workflow includes the following steps:\n\n- Receive an email for invitation\n- Accept EULA\n- Create password\n- Add account details\n- Success: account created\n\n### Screens\n\nThe majority of the registration screens are the same between invitation-based and self-registration. The primary difference is in how the registration workflow is initiated, and whether the email needs to be verified. Use the following screens for the registration workflow where appropriate.\n\n\n\n> The purpose of a success screen is to assure the user that something has been achieved. These screens can be an opportunity to perform more product branding — you are encouraged to use animations and [graphics](/style/illustrations) on these screens.\n\n\n\n## Joining an Organization\n\nSome applications may require users to join specific groups or organizations after creating an account. Generally, there are three ways for a user to join an organization:\n\n**Request Access**\n\nThis occurs when a user has an account but need to access an invitation-only organization. This workflow involves the following steps:\n\n- Enter organization identifier\n- Success: request sent\n- Receive an email invitation\n- Success: organization joined\n\n**Join with Invitation**\n\nJoining via invitation occurs when a system admin extends an invitation for a user to join a group. If the user does not yet have an account, they will first proceed through the invitation-based registration workflow followed by the screens for joining the organization. This workflow includes the following steps:\n\n- Receive an email invitation\n- Success: organization joined\n\n### Screens\n\nThe majority of the joining-an-organization screens are the same regardless of the underlying mechanism. Use the following screens for the joining-an-organization workflow where appropriate.\n\n\n\n\n## Login\n\n\n\nLogging in can usually be accomplished in one of two ways: basic login or login via a third-party.\n\n**Basic Login**\n\nA simple login presents fields for the users to enter their credentials and a button to submit them for verification.\n\nThe login screen should always present information on how to create an account and what to do if a user has forgotten their credentials — these buttons should trigger the Registration and Forgot Password (see below) workflows .\n\n\n\n\n**Login via Third Party**\n\nSome applications, especially consumer-facing ones, can be authorized via third-party accounts / credentials. Different platforms may have different requirements for this. Here are some commonly used platforms and their instructions:\n\n- [Login with Amazon](https://developer.amazon.com/docs/login-with-amazon/brand.html)\n- [Google Sign-in](https://developers.google.com/identity/sign-in/web/sign-in)\n- [Sign in with Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/)\n- [Facebook Login](http://developers.facebook.com/docs/facebook-login/)\n- [Sign in with Microsoft](https://developer.microsoft.com/en-us/identity/add-sign-in-with-microsoft)\n\n## Forgot / Change Password\n\n**Forgot password**\n\nThe login screen for an application should also present users with a way to reset their password if they have forgotten it. This is typically displayed as a hyperlink below the credential fields. Clicking the link will present users with a field to enter their e-mail address. They will then receive an email with a hyperlink to reset their password. This workflow involves the following steps:\n\n- Enter email address\n- Success: reset instructions sent\n- Receive an email for resetting the password\n- Create a new password\n- Success: password updated\n\n\n\n\n**Change Password**\n\nWhen the users are logged in, they have the option to change their password by going through the change password workflow, typically triggered from within the user settings. This workflow includes the following steps:\n\n- Change password\n- Success: password updated\n\n> After a successful password change, users should be logged out and forced to log in with the new credentials.\n\n\n \n \n \n\n\n# Behavior\n\n## Email Communications\n\n\n\nEmail communications are frequently used throughout the user authentication workflow to verify the user's identity. Users receive emails for invitations, address verification, confirmation codes, etc.\n\nEmails are also sent to confirm security-related changes to a user's account, such as changing a password, updating a profile, etc. You should never allow users to unsubscribe from security-related email notifications.\n\n\n\n## Terminated Workflows & Expired Sessions\n\nDuring the registration, if a user leaves the application before creating a password for their account, the whole session is treated as expired, and upon returning, they must start the registration process over again.\n\nIf an invitation link or verification code has expired, the users should be able to request for another invitation link or verification code.\n\n\n\n## Security Concerns\n\n### Error Messages\n\nWhen a user encounters an error — such as a password mismatch or the server is temporarily down — they should be notified with an appropriate error message. However, be very careful when presenting error messages to the users. You should only show what is necessary to recover from the problem, such as \"incorrect email or password\" or \"server unavailable\" — do not expose information that could compromise the security of your application.\n\n> Do **NOT** provide messages like \"User does not exist,\" \"Incorrect Password,\" etc.\n\n\n\n### Exposing Credentials\n\nUnlike a phone application, a shared HMI application is more vulnerable to outside threats via showing credentials. These projects should **NOT** implement password visibility toggles or \"remember me\" functionality.\n\n### Two-Factor Authentication\n\nThe examples on this page used email as the login credentials. However, if your project requires additional security, consider using two-factor authentication. Two-factor authentication involves sending an additional confirmation code (typically via email or SMS) to verify a user's identity after they enter their password.\n\n\n\n# Developers\n\nWe recommend using the following packages to construct these workflows. Additionally, you should familiarize yourself with the components used for the [Forms](/patterns/forms#developers) and [Overlays](/patterns/overlay#developers) patterns.\n\n**Angular:**\n\n- [@pxblue/angular-auth-workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow)\n\n**React:**\n\n- [@pxblue/react-auth-workflow](https://www.npmjs.com/package/@pxblue/react-auth-workflow)\n\n**React Native:**\n\n- [@pxblue/react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow)\n\n**Ionic:**\n\n_Planned_\n" }, "/patterns/visualizations": { "title": "Visualizations", diff --git a/src/docs/patterns/user-auth.mdx b/src/docs/patterns/user-auth.mdx index f968d4a74..9cd322822 100644 --- a/src/docs/patterns/user-auth.mdx +++ b/src/docs/patterns/user-auth.mdx @@ -304,9 +304,9 @@ The examples on this page used email as the login credentials. However, if your We recommend using the following packages to construct these workflows. Additionally, you should familiarize yourself with the components used for the [Forms](/patterns/forms#developers) and [Overlays](/patterns/overlay#developers) patterns. -**Angular** and **Ionic:** +**Angular:** -_Planned_ +- [@pxblue/angular-auth-workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) **React:** @@ -315,3 +315,7 @@ _Planned_ **React Native:** - [@pxblue/react-native-auth-workflow](https://www.npmjs.com/package/@pxblue/react-native-auth-workflow) + +**Ionic:** + +_Planned_ From cd96a7b91c7d60bbe5c212052513c0175e5016cc Mon Sep 17 00:00:00 2001 From: Joseph Boyle Date: Thu, 31 Dec 2020 07:57:06 -0500 Subject: [PATCH 12/16] Update src/docs/release-notes/R18/R18.mdx Co-authored-by: huayunh <96_mouse@sina.com> --- src/docs/release-notes/R18/R18.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx index 9911ff6ea..f7b8aba47 100644 --- a/src/docs/release-notes/R18/R18.mdx +++ b/src/docs/release-notes/R18/R18.mdx @@ -30,6 +30,10 @@ - Added more components (badges, dialogs, form controls, icon buttons, menus, side sheets, steppers and toggle buttons) - Reorganized the stickersheet structure +### Figma Design Patterns + +- Released [a new stickersheet dedicated to our design patterns](https://www.figma.com/community/file/926189711301522231). Added design pattern examples for [forms](https://pxblue.github.io/patterns/forms), [side sheet](https://pxblue.github.io/patterns/overlay#sidebar) and [lists](https://pxblue.github.io/patterns/lists). + ### Miscellaneous - Bug fixes & performance updates From 67ce3355528391c6584d28fa92fbfdebf4d08d3b Mon Sep 17 00:00:00 2001 From: Joseph Boyle Date: Thu, 31 Dec 2020 08:00:33 -0500 Subject: [PATCH 13/16] Update R18.mdx --- src/docs/release-notes/R18/R18.mdx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx index f7b8aba47..639775630 100644 --- a/src/docs/release-notes/R18/R18.mdx +++ b/src/docs/release-notes/R18/R18.mdx @@ -7,7 +7,7 @@ ### Design Patterns - Updated content for [Navigation](/patterns/navigation) and [Visualizations](/patterns/visualizations) -- New Figma examples file for various patterns (TODO LINK) +- Released a new [Design Pattern Stickersheet](https://www.figma.com/community/file/926189711301522231) that will include many examples of all of our [Design Patterns](/patterns), starting with [forms](https://pxblue.github.io/patterns/forms), [side sheet](https://pxblue.github.io/patterns/overlay#sidebar) and [lists](https://pxblue.github.io/patterns/lists). ### Documentation Site @@ -30,10 +30,6 @@ - Added more components (badges, dialogs, form controls, icon buttons, menus, side sheets, steppers and toggle buttons) - Reorganized the stickersheet structure -### Figma Design Patterns - -- Released [a new stickersheet dedicated to our design patterns](https://www.figma.com/community/file/926189711301522231). Added design pattern examples for [forms](https://pxblue.github.io/patterns/forms), [side sheet](https://pxblue.github.io/patterns/overlay#sidebar) and [lists](https://pxblue.github.io/patterns/lists). - ### Miscellaneous - Bug fixes & performance updates From a8ca12dcbb7b7ad300f896b5d46e7cb2a4a39839 Mon Sep 17 00:00:00 2001 From: joebochill Date: Thu, 31 Dec 2020 08:28:24 -0500 Subject: [PATCH 14/16] Convert to relative links in release notes --- src/docs/release-notes/R18/R18.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx index 639775630..49c7ecf53 100644 --- a/src/docs/release-notes/R18/R18.mdx +++ b/src/docs/release-notes/R18/R18.mdx @@ -7,9 +7,9 @@ ### Design Patterns - Updated content for [Navigation](/patterns/navigation) and [Visualizations](/patterns/visualizations) -- Released a new [Design Pattern Stickersheet](https://www.figma.com/community/file/926189711301522231) that will include many examples of all of our [Design Patterns](/patterns), starting with [forms](https://pxblue.github.io/patterns/forms), [side sheet](https://pxblue.github.io/patterns/overlay#sidebar) and [lists](https://pxblue.github.io/patterns/lists). +- Released a new [Design Pattern Stickersheet](https://www.figma.com/community/file/926189711301522231) that will include many examples of all of our [Design Patterns](/patterns), starting with [forms](/patterns/forms), [side sheet](/patterns/overlay) and [lists](/patterns/lists). -### Documentation Site +### Documentation Site≈ - Updated [Iconography](/style/iconography) page to enable users to download icons and search by keywords/tags - Added a new page dedicated to helping you build a [Project Identity](/design/project-identity) From 1204dabe5b2a2122d12f407f2ab33d9de3dd4f85 Mon Sep 17 00:00:00 2001 From: Joseph Boyle Date: Thu, 31 Dec 2020 13:17:21 -0500 Subject: [PATCH 15/16] Apply suggestions from code review Co-authored-by: huayunh <96_mouse@sina.com> --- src/docs/release-notes/R18/R18.mdx | 6 +++--- src/docs/release-notes/R18/Summary.mdx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx index 49c7ecf53..e7b83d0b5 100644 --- a/src/docs/release-notes/R18/R18.mdx +++ b/src/docs/release-notes/R18/R18.mdx @@ -2,14 +2,14 @@ - Added a [Mobile Stepper](https://pxblue-components.github.io/angular/?path=/info/components-mobile-stepper--readme) component for Angular - Angular components are now compatible with Angular 10+ -- Updated React Native components to be compatible with react-native-paper version 4 +- Updated React Native components to be compatible with `react-native-paper` version 4 ### Design Patterns - Updated content for [Navigation](/patterns/navigation) and [Visualizations](/patterns/visualizations) - Released a new [Design Pattern Stickersheet](https://www.figma.com/community/file/926189711301522231) that will include many examples of all of our [Design Patterns](/patterns), starting with [forms](/patterns/forms), [side sheet](/patterns/overlay) and [lists](/patterns/lists). -### Documentation Site≈ +### Documentation Site - Updated [Iconography](/style/iconography) page to enable users to download icons and search by keywords/tags - Added a new page dedicated to helping you build a [Project Identity](/design/project-identity) @@ -17,7 +17,7 @@ ### PX Blue CLI -- You can now use [templates](https://github.com/pxblue/react-cli-templates) to kick-start your react projects with navigation and authentication +- You can now use [templates](https://github.com/pxblue/react-cli-templates) to kick-start your React projects with navigation and authentication ### Reusable Workflows diff --git a/src/docs/release-notes/R18/Summary.mdx b/src/docs/release-notes/R18/Summary.mdx index b991003de..df5c74d11 100644 --- a/src/docs/release-notes/R18/Summary.mdx +++ b/src/docs/release-notes/R18/Summary.mdx @@ -1 +1 @@ -Major overhaul of the designer Sticker Sheet, new Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular, CLI templates for React projects, and documentation site improvements. +Major overhaul of the Figma Sticker Sheet, new Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular, [CLI templates](https://github.com/pxblue/react-cli-templates/tree/master) for React projects, and documentation site improvements. From a03ce5c27c2b8decaaec16a3b3104287e51454b5 Mon Sep 17 00:00:00 2001 From: huayunh Date: Thu, 31 Dec 2020 14:20:25 -0500 Subject: [PATCH 16/16] Update figma links and wording --- src/docs/design/intro.mdx | 2 +- src/docs/release-notes/R17/R17.mdx | 2 +- src/docs/release-notes/R18/R18.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/docs/design/intro.mdx b/src/docs/design/intro.mdx index ab0ca8be0..c6c469071 100644 --- a/src/docs/design/intro.mdx +++ b/src/docs/design/intro.mdx @@ -19,7 +19,7 @@ PX Blue has design / style guidelines for: - [Color Usage](/style/color) - [Themes](/style/themes) -In addition to these guidelines, we also provide [an easy-to-use plugin](https://www.figma.com/community/file/852558784352181868) that you can include in your Figma projects to jump start your project with pre-defined UI styles and components. You are encouraged to duplicate this file to your own draft space and build your project on top of it. +In addition to these guidelines, we also provide easy-to-use Figma community files — [PX Blue Component Stickersheet](https://www.figma.com/community/file/852558784352181868) and [PX Blue Design Pattern Stickersheet](https://www.figma.com/community/file/926189711301522231) that you can include in your Figma projects to jump start your project with pre-defined UI styles and components. You are encouraged to duplicate those files to your own draft space and build your project on top of it. diff --git a/src/docs/release-notes/R17/R17.mdx b/src/docs/release-notes/R17/R17.mdx index 196f25a31..f3908df2c 100644 --- a/src/docs/release-notes/R17/R17.mdx +++ b/src/docs/release-notes/R17/R17.mdx @@ -1,4 +1,4 @@ -### Stickersheet Components +### Component Stickersheet - Added PX Blue components (Scorecard, Empty State, Channel Value, Heroes, List Item Tag, Info List Item, Nav Rail, Drawer, Dropdown Toolbar) to our [Stickersheet](https://www.figma.com/community/file/852558784352181868) - Added several PX Blue design patterns (Progress Indicators, Pagers, Panels) diff --git a/src/docs/release-notes/R18/R18.mdx b/src/docs/release-notes/R18/R18.mdx index e7b83d0b5..fa57460cc 100644 --- a/src/docs/release-notes/R18/R18.mdx +++ b/src/docs/release-notes/R18/R18.mdx @@ -23,7 +23,7 @@ - Reusable [Authentication Workflow](https://www.npmjs.com/package/@pxblue/angular-auth-workflow) for Angular. -### Stickersheet Components +### Component Stickersheet - Re-built all the components using the new Figma variants and auto-layout - Added images, tiles and patterns