From 538b2bdc0b2379ecfa1deef0c17f25644fcc6161 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Thu, 8 May 2025 12:30:28 -0500 Subject: [PATCH 01/22] chore(www): update clay packages --- www/package.json | 6 +- www/public/images/icons/icons.svg | 199 +++++------------------------- www/yarn.lock | 58 +++++---- 3 files changed, 70 insertions(+), 193 deletions(-) diff --git a/www/package.json b/www/package.json index 6288da221a..f2e97448e0 100644 --- a/www/package.json +++ b/www/package.json @@ -11,11 +11,11 @@ "lint": "next lint" }, "dependencies": { - "@clayui/css": "^3.134.0", - "@clayui/form": "^3.132.0", + "@clayui/css": "^3.136.0", + "@clayui/form": "^3.136.0", "@clayui/icon": "^3.128.0", "@clayui/link": "^3.128.0", - "@clayui/navigation-bar": "^3.132.0", + "@clayui/navigation-bar": "^3.136.0", "@codesandbox/sandpack-react": "^2.20.0", "@codesandbox/sandpack-themes": "^2.0.21", "@docsearch/react": "^3.5.2", diff --git a/www/public/images/icons/icons.svg b/www/public/images/icons/icons.svg index 6479e29a5b..3aa20800d7 100755 --- a/www/public/images/icons/icons.svg +++ b/www/public/images/icons/icons.svg @@ -42,15 +42,9 @@ - - - - - - - - - + + + @@ -72,18 +66,14 @@ - - + - - - - + @@ -117,9 +107,10 @@ - - - + + + + @@ -132,32 +123,10 @@ - - - - - - - - - - - - - - - - - + - - - - - - - + @@ -229,11 +198,7 @@ - - - - - + @@ -259,20 +224,7 @@ - - - - - - - - - - - - - + @@ -280,9 +232,7 @@ - - - + @@ -305,31 +255,11 @@ - - - - - - - - - - + - - - - - - - - - - - - + @@ -378,12 +308,7 @@ - - - - - - + @@ -912,16 +837,10 @@ - - + - - - - - - + @@ -1009,13 +928,7 @@ - - - - - - - + @@ -1026,9 +939,7 @@ - - - + @@ -1041,8 +952,7 @@ - - + @@ -1083,8 +993,7 @@ - - + @@ -1093,8 +1002,7 @@ - - + @@ -1114,18 +1022,8 @@ - - - - - - - - - - - - + + @@ -1144,9 +1042,7 @@ - + @@ -1182,9 +1078,7 @@ - - - + @@ -1209,8 +1103,7 @@ - - + @@ -1229,9 +1122,7 @@ - - - + @@ -1248,8 +1139,7 @@ - - @@ -1260,18 +1150,7 @@ - - - - - - - - - - - - + @@ -1280,20 +1159,10 @@ - - - - - - - - + - - - - + diff --git a/www/yarn.lock b/www/yarn.lock index 3bbd3b926b..4f60553f09 100644 --- a/www/yarn.lock +++ b/www/yarn.lock @@ -157,28 +157,29 @@ dependencies: regenerator-runtime "^0.14.0" -"@clayui/button@^3.128.0": - version "3.128.0" - resolved "https://registry.yarnpkg.com/@clayui/button/-/button-3.128.0.tgz#4f6471380bfe4ab4c53b4431e07bdf74c71d2975" - integrity sha512-kJ6N3hll8OPtW6kEGW3PFpGgyPrzKw8GxNlOeBgqT95XAGiM3mdTNYuLfqK/8bXS0Nds+s2WJhATFH5oQBqQXg== +"@clayui/button@^3.136.0": + version "3.136.0" + resolved "https://registry.yarnpkg.com/@clayui/button/-/button-3.136.0.tgz#aec7259d7b743606aae7d1f3213096a83c25efb4" + integrity sha512-3smB/Jmkd6vKYnJJrdPGJS4L9F2X4g4rKtgvZCyKm0SLOVFTs9z3Ygb8meYBgcVSUbiQHbdYXPdP0X6R+/cVDw== dependencies: "@clayui/icon" "^3.128.0" + "@clayui/loading-indicator" "^3.128.0" classnames "^2.2.6" warning "^4.0.3" -"@clayui/css@^3.134.0": - version "3.134.0" - resolved "https://registry.yarnpkg.com/@clayui/css/-/css-3.134.0.tgz#2f6cab692b1562526a28c889e2828f30cd635b2f" - integrity sha512-qhdpojoAut08L3iaPepRRBDjz5c5kD/xctsbf9nn8h+TX7QNOwIabJ6EVA0YSiqKYEJ82JvkNqDXYlwaIt3Skg== +"@clayui/css@^3.136.0": + version "3.136.0" + resolved "https://registry.yarnpkg.com/@clayui/css/-/css-3.136.0.tgz#2c45bc553a894731ba506147ad05942e1a2ceab1" + integrity sha512-YqO/GSPCjs9OooVtMeIain7E2q75BQheqM7+PPH112vAaHFdqcpcQHBgn37tTotjDNVbaJKQpYhLmZ/jG/fOMA== -"@clayui/form@^3.132.0": - version "3.132.0" - resolved "https://registry.yarnpkg.com/@clayui/form/-/form-3.132.0.tgz#4c124f668653d604203b59d47b72a380e4642f3d" - integrity sha512-bDwJE1hpg8UOrHgt03YPVo0cZbyhCPdq9YUm+8hZJNgrgQp+FPOAfVRwmsRUYQLriPP74hM4+MkLXN2oyf9DWg== +"@clayui/form@^3.136.0": + version "3.136.0" + resolved "https://registry.yarnpkg.com/@clayui/form/-/form-3.136.0.tgz#d65892e19ac84ab2537b7fb92174dfa1f793383c" + integrity sha512-AcZqza4F6TZwiu6IUlsUP7C0LqxfxQHzM0MxNOO5ZqnN2gfz/3QIHgcA+Xb8CGZpxFH30QlgcOs6VBkocW8bTg== dependencies: - "@clayui/button" "^3.128.0" + "@clayui/button" "^3.136.0" "@clayui/icon" "^3.128.0" - "@clayui/shared" "^3.132.0" + "@clayui/shared" "^3.136.0" classnames "^2.2.6" "@clayui/icon@^3.128.0": @@ -204,16 +205,23 @@ dependencies: classnames "^2.2.6" -"@clayui/navigation-bar@^3.132.0": - version "3.132.0" - resolved "https://registry.yarnpkg.com/@clayui/navigation-bar/-/navigation-bar-3.132.0.tgz#a07cc81da0d1d715af9d618bc4c2e6a4c278e710" - integrity sha512-VFrjTlPlMVOQvJfud+z6jLMErwixu5dL6ydP6Tqt3lhSkhHekNy61bn3th5fzyAODe7o7+R+3N3UhXvk/Xg89g== +"@clayui/loading-indicator@^3.128.0": + version "3.128.0" + resolved "https://registry.yarnpkg.com/@clayui/loading-indicator/-/loading-indicator-3.128.0.tgz#f4e8c0cf90aa3398c87a6c6388319ca29f82406b" + integrity sha512-FmDSPwB5gVcWgKLwaOM2dK1NNWu9BAiZm5OMjemZ4ohTHitWroQXtjiegY1/76bfX+Z2jRa+VW8jr3RQGH0eRQ== + dependencies: + classnames "^2.2.6" + +"@clayui/navigation-bar@^3.136.0": + version "3.136.0" + resolved "https://registry.yarnpkg.com/@clayui/navigation-bar/-/navigation-bar-3.136.0.tgz#f0cb46176b074d0892d479d2bec4f733f6b72cb2" + integrity sha512-qfm7mTuxwfPUNmdaxTyMPFABxgJPuEQpASc7n+/gplJrgoSnbtZSZ9jQkWcpf1gETwh5rzTq5ds1VIigxrHT2g== dependencies: - "@clayui/button" "^3.128.0" + "@clayui/button" "^3.136.0" "@clayui/icon" "^3.128.0" "@clayui/layout" "^3.128.0" "@clayui/provider" "^3.128.0" - "@clayui/shared" "^3.132.0" + "@clayui/shared" "^3.136.0" classnames "^2.2.6" react-transition-group "^4.4.1" warning "^4.0.3" @@ -225,12 +233,12 @@ dependencies: "@clayui/icon" "^3.128.0" -"@clayui/shared@^3.132.0": - version "3.132.0" - resolved "https://registry.yarnpkg.com/@clayui/shared/-/shared-3.132.0.tgz#63fb95e275127d332c1ed9cf316b49d681cce781" - integrity sha512-fBneA70/v43PwvRrc4+MJrlzzVwejO5O5zZsCNy+LsS+hqUJufQ1B4S8Z1H6bhXfD5wiIBfBmWpGc/q3wUt10w== +"@clayui/shared@^3.136.0": + version "3.136.0" + resolved "https://registry.yarnpkg.com/@clayui/shared/-/shared-3.136.0.tgz#56f4dcf156885b43a802ead2ffbd64a79d08fa10" + integrity sha512-fjM6sM7d51gzkEeet8f0ycP3PUWhcYy3hNAkUkuzsIQ3CS3UdpdXyXdRfkX6D9th5cjCUjC0pfu2memIAoxCPQ== dependencies: - "@clayui/button" "^3.128.0" + "@clayui/button" "^3.136.0" "@clayui/link" "^3.128.0" "@clayui/provider" "^3.128.0" aria-hidden "^1.2.2" From 264faefc89a6f76a7a0715f2887b226116889019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Thu, 8 May 2025 16:33:25 -0500 Subject: [PATCH 02/22] feat(www): update renoun to the latest version and migrate the usage of collection to directory for the blog --- www/app/_components/Sidebar.tsx | 25 +- www/app/blog/[...slug]/page.tsx | 34 +- ...ontrolled-and-uncontrolled-components.mdx} | 1 + ...lay-css-cadmin.mdx => clay-css-cadmin.mdx} | 5 +- ...updates.mdx => clay-css-mixin-updates.mdx} | 1 + ...ng-clay-v3.mdx => introducing-clay-v3.mdx} | 3 +- ...lay-css.mdx => slimming-down-clay-css.mdx} | 15 +- www/collections/site.ts | 33 + www/collections/static.ts | 18 + www/mdx-components.tsx | 10 +- www/netlify.toml | 27 +- www/next.config.mjs | 46 +- www/package.json | 8 +- www/tsconfig.json | 8 +- www/yarn.lock | 671 ++++++++---------- 15 files changed, 498 insertions(+), 407 deletions(-) rename www/blog/{2022-05-02-api-consistency-improvements-for-controlled-and-uncontrolled-components.mdx => api-consistency-improvements-for-controlled-and-uncontrolled-components.mdx} (99%) rename www/blog/{2021-09-13-clay-css-cadmin.mdx => clay-css-cadmin.mdx} (97%) rename www/blog/{2021-09-09-clay-css-mixin-updates.mdx => clay-css-mixin-updates.mdx} (99%) rename www/blog/{2019-10-25-introducing-clay-v3.mdx => introducing-clay-v3.mdx} (99%) rename www/blog/{2022-02-08-slimming-down-clay-css.mdx => slimming-down-clay-css.mdx} (96%) create mode 100644 www/collections/site.ts create mode 100644 www/collections/static.ts diff --git a/www/app/_components/Sidebar.tsx b/www/app/_components/Sidebar.tsx index ac526657f7..974c35f810 100644 --- a/www/app/_components/Sidebar.tsx +++ b/www/app/_components/Sidebar.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import type {FileSystemSource, Collection} from 'renoun/collections'; +import {type FileSystemEntry, type Directory, isMDXFile, isFile} from 'renoun/file-system'; import type {AllCollection, ComponentDocumentsSchema} from '@/data'; import ClayLink from '../_components/Link'; @@ -13,14 +13,14 @@ type Item = { type CollectionItem = { name: string; - collection: Collection; + collection: Directory; sort?: boolean; }; type Props = { items?: Array; path?: string; - collection?: AllCollection | Collection | Array; + collection?: AllCollection | Directory | Array; }; export function Sidebar({collection, path, items}: Props) { @@ -92,20 +92,20 @@ export function Sidebar({collection, path, items}: Props) { } type TreeCollectionProps = { - collection: AllCollection | Collection; + collection: AllCollection | Directory; path?: string; sort?: boolean; }; async function TreeCollection({collection, path, sort}: TreeCollectionProps) { - const items = await collection.getSources(); + const items = await collection.getEntries(); const entries = sort - ? items.sort((a, b) => a.getTitle().localeCompare(b.getTitle())) + ? items.sort((a: FileSystemEntry, b: FileSystemEntry) => a.getTitle().localeCompare(b.getTitle())) : items; return ( <> - {entries.map((entry) => ( + {entries.map((entry: FileSystemEntry) => ( ; + entry: FileSystemEntry; path?: string; }; async function ListNavigation({entry, path: pathUrl}: ListNavigationProps) { const path = entry.getPath(); - const title = entry.getTitle(); + const title = isFile(entry, 'mdx') ? (await entry.getExportValue('frontmatter')).title : entry.getTitle(); if (path.includes('/markup')) { return null; @@ -133,18 +133,17 @@ async function ListNavigation({entry, path: pathUrl}: ListNavigationProps) {
  • - {title.replaceAll(/\d{4}\s\d{2}\s\d{2}/g, '')} + {title}
    • ); - if (entry.isFile()) { + if (isFile(entry)) { return link; } - const entries = (await entry.getSources({depth: 1})).sort((a, b) => + const entries = (await entry.getEntries()).sort((a, b) => a.getTitle().localeCompare(b.getTitle()) ); diff --git a/www/app/blog/[...slug]/page.tsx b/www/app/blog/[...slug]/page.tsx index 782ea1c804..165addbbd0 100644 --- a/www/app/blog/[...slug]/page.tsx +++ b/www/app/blog/[...slug]/page.tsx @@ -1,7 +1,8 @@ import type {Metadata} from 'next'; import {notFound} from 'next/navigation'; -import {AUTHORS, BlogCollection} from '@/data'; import Heading from '@/app/_components/Heading'; +import {BlogCollection} from '@/collections/site'; +import {AUTHORS} from '@/collections/static'; import styles from '../../docs/(layout)/[...slug]/page.module.css'; import Link from 'next/link'; @@ -13,16 +14,16 @@ type Props = { }; export async function generateStaticParams() { - const collection = await BlogCollection.getSources(); + const entries = await BlogCollection.getEntries(); - return collection.map((entry) => ({ - slug: entry.getPath().split('/').slice(2), + return entries.map((entry) => ({ + slug: entry.getPathSegments({includeBasePath: false}), })); } export async function generateMetadata(props: Props): Promise { const params = await props.params; - const document = await BlogCollection.getSource(params.slug); + const document = await BlogCollection.getFile(params.slug, 'mdx'); if (!document) { return { @@ -30,7 +31,7 @@ export async function generateMetadata(props: Props): Promise { }; } - const frontmatter = await document.getExport('frontmatter').getValue(); + const frontmatter = await document.getExportValue('frontmatter'); const title = `${frontmatter.title} - Clay by Liferay`; @@ -44,17 +45,17 @@ export async function generateMetadata(props: Props): Promise { export default async function Page(props: Props) { const params = await props.params; - const file = await BlogCollection.getSource(params.slug); + const file = await BlogCollection.getFile(params.slug, 'mdx'); if (!file) { notFound(); } - const updatedAt = await file.getUpdatedAt(); + const updatedAt = await file.getLastCommitDate(); - const headings = await file.getExport('headings').getValue(); - const frontmatter = await file.getExport('frontmatter').getValue(); - const Content = (await file.getExport('default').getValue()) as any; + const headings = await file.getExportValue('headings'); + const frontmatter = await file.getExportValue('frontmatter'); + const Content = await file.getExportValue('default'); const tocContent = ( <> @@ -62,7 +63,7 @@ export default async function Page(props: Props) { +``` + +### Show Quick Actions on Hover + +The class `show-quick-actions-on-hover` on `treeview` will hide all `quick-action-item`'s except when `treeview-link` is hovered or focused. + +
      +
    • +
      +
      +
      +
      + +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      + + + + + Liferay Drive + + + + + + + +
      +
      +
      +
      +
      +
        +
      • + +
        +
          +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + + Details + + + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + + Categorization + + + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + + Documents and Media + + + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + Site Template + + +
          +
          +
          +
          +
          • +
        +
        +
        • +
      +
      +
      • +
    • + +
      +
        +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Sitemap + + +
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Robots + + +
        +
        +
        +
        +
        • +
      +
      +
      • +
    • + +
      +
        +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + + Default User Associations + + + +
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Staging + + +
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Analytics + + +
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Maps + + +
        +
        +
        +
        +
        • +
      +
      +
      • +
    ```html
    • - - - +
      +
      +
      - - - +
      +
      +
      + +
      +
      +
      +
      - - - +
      +
      +
      - Liferay Drive - - - - - - - - - - -
      -
      -
        -
      • -
        - Tree Item -
        -
        • -
      -
      -
      • -
    -``` - -### Treeview Dropping Top - -The modifier class `treeview-dropping-top` adds a visual indicator to the bottom of `treeview-link` to show where a dragged `treeview-link` will be inserted. - -
      -
    • -
      - - - - - - - - - - - - - - - - - Liferay Drive + Liferay Drive + + + - - - - - - - - - +
      + + -
      +
      • -
        • -
      -
      -
      • -
    - -```html -
      -
    • -
      - - - - - - - - - - - - - - - Liferay Drive - - - - - - - - - - -
      -
      -
        -
      • -
        - Tree Item -
        -
        • -
      -
      -
      • -
    -``` - -### Treeview Dropping Middle - -The modifier class `treeview-dropping-middle` adds a visual indicator around the `treeview-link` to show where a dragged `treeview-link` will be nested. - -
      -
    • -
      - - - - - - - - - - - - - - - - - Liferay Drive - - - - - - - - - - - - -
      -
      -
        -
      • -
        - - Tree Item - -
        -
        • -
      -
      -
      • -
    - -```html -
      -
    • -
      - - - - - - - - - - - - - - - Liferay Drive - - - - - - - - - - -
      -
      -
        -
      • -
        - Tree Item -
        -
        • -
      -
      -
      • -
    -``` - -## Variations - -### Show Component Expander on Hover - -The class `show-component-expander-on-hover` displays the `component-expander` when the mouse hovers over the `treeview` component. - -
      -
    • -
      - - - - - - - - - - - - - - - - - Liferay Drive - - - - - - -
      -
      -
        -
      • - -
        -
          -
        • -
          - - - - - - - Details - - - - - - -
          -
          • -
        • -
          - - - - - - - Categorization - - - - - - -
          -
          • -
        • -
          - - - - - - - Documents and Media - - - - - - -
          -
          • -
        • -
          - - - - - - - Site Template - - - - - - -
          -
          • -
        -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        - - - - - - - Sitemap - - - - - - -
        -
        • -
      • -
        - - - - - - - Robots - - - - - - -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        - - - - - - - Default User Associations - - - - - - -
        -
        • -
      • -
        - - - - - - - Staging - - - - - - -
        -
        • -
      • -
        - - - - - - - Analytics - - - - - - -
        -
        • -
      • -
        - - - - - - - Maps - - - - - - -
        -
        • -
      -
      -
      • -
    - -```html -
      -
    • -
      - - - - - - - - - - - - - - - Liferay Drive - - - - -
      -
      -
        -
      • - -
        -
          -
        • -
          - - - - Details - - - -
          -
          • -
        • -
          - - - - Categorization - - - -
          -
          • -
        • -
          - - - - Documents and - Media - - - -
          -
          • -
        • -
          - - - - Site Template - - - -
          -
          • -
        -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        - - - - Sitemap - - - -
        -
        • -
      • -
        - - - - Robots - - - -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        - - - - Default User Associations - - - -
        -
        • -
      • -
        - - - - Staging - - - -
        -
        • -
      • -
        - - - - Analytics - - - -
        -
        • -
      • -
        - - - - Maps - - - -
        -
        • -
      -
      -
      • -
    -``` - -### Show Quick Actions on Hover - -The class `show-quick-actions-on-hover` on `treeview` will hide all `quick-action-item`'s except when `treeview-link` is hovered or focused. - -
      -
    • -
      -
      -
      -
      - -
      -
      -
      - -
      -
      -
      -
      - - - -
      -
      -
      - - - - - - Liferay Drive - - - - - - - - -
      -
      -
      -
      -
      -
        -
      • - -
        -
          -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - - - - Details - - - -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - - - - Categorization - - - -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - - - - Documents and Media - - - -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - - - - Site Template - - - -
          -
          -
          -
          -
          • -
        -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Sitemap - - - -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Robots - - - -
        -
        -
        -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Default User Associations - - - -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Staging - - - -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Analytics - - - -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Maps - - - -
        -
        -
        -
        -
        • -
      -
      -
      • -
    - -```html -
      -
    • -
      -
      -
      -
      - -
      -
      -
      - -
      -
      -
      -
      - - - -
      -
      -
      - - - - Liferay Drive - - - - - - -
      -
      -
      -
      -
      -
        -
      • - -
        -
          -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - Details -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - Categorization -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - Documents and - Media -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - Site Template -
          -
          -
          -
          -
          • -
        -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - Sitemap -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - Robots -
        -
        -
        -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - Default User Associations -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - Staging -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - Analytics -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - Maps -
        -
        -
        -
        -
        • -
      -
      -
      • -
    -``` - -### Treeview Light - -A `treeview` variation for light colored backgrounds. - -
      -
    • -
      -
      -
      -
      - -
      -
      -
      - -
      -
      -
      -
      - - - -
      -
      -
      - - - - Liferay Drive - - - -
      -
      - -
      -
      - -
      -
      -
      -
      -
      -
        -
      • - -
        -
          -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - - - - Details - - - -
          -
          - -
          -
          - -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - - - - Categorization - - - -
          -
          - -
          -
          - -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - - - - Documents and Media - - - -
          -
          - -
          -
          - -
          -
          -
          -
          -
          • -
        • -
          -
          -
          -
          -
          - -
          -
          -
          - - - - Site Template - - - -
          -
          - -
          -
          - -
          -
          -
          -
          -
          • -
        -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Sitemap - - - -
        -
        - -
        -
        - -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Robots - - - -
        -
        - -
        -
        - -
        -
        -
        -
        -
        • -
      -
      -
      • -
    • - -
      -
        -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Default User Associations - - - -
        -
        - -
        -
        - -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Staging - - - -
        -
        - -
        -
        - -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Analytics - - - -
        -
        - -
        -
        - -
        -
        -
        -
        -
        • -
      • -
        -
        -
        -
        -
        - -
        -
        -
        - - - - Maps - - - -
        -
        - -
        -
        - -
        -
        -
        -
        -
        • -
      -
      -
      • -
    - -```html -
      -
    • -
      -
      -
      -
      - -
      -
      -
      - -
      -
      -
      -
      - - - -
      -
      -
      - - Liferay Drive - -
      -
      - -
      -
      - -
      -
      -
      -
      -
      -
        -
      • -
      • @@ -7368,50 +5024,6 @@ A `treeview` variation for light colored backgrounds. >
      -
      - -
      -
      - -
      @@ -7459,50 +5071,6 @@ A `treeview` variation for light colored backgrounds. > -
      - -
      -
      - -
      @@ -7551,50 +5119,6 @@ A `treeview` variation for light colored backgrounds. > -
      - -
      -
      - -
      @@ -7642,50 +5166,6 @@ A `treeview` variation for light colored backgrounds. > -
      - -
      -
      - -
      @@ -7698,10 +5178,10 @@ A `treeview` variation for light colored backgrounds.
    • -
      +
      • Sitemap
        -
        - -
        -
        - -
      @@ -7929,55 +5352,18 @@ A `treeview` variation for light colored backgrounds. > - -
      - Robots -
      -
      - -
      -
      -
      @@ -7988,10 +5374,10 @@ A `treeview` variation for light colored backgrounds.
    • -
      +
      • Default User Associations
        -
        - -
        -
        - -
      @@ -8224,6 +5553,7 @@ A `treeview` variation for light colored backgrounds. Staging -
      - -
      -
      - -
      @@ -8306,6 +5598,7 @@ A `treeview` variation for light colored backgrounds. Analytics -
      - -
      -
      - -
      @@ -8375,63 +5630,26 @@ A `treeview` variation for light colored backgrounds. - - -
      - Maps -
      -
      - + tabIndex="-1" + type="checkbox" + /> + + +
      -
      -
      @@ -8443,1313 +5661,3774 @@ A `treeview` variation for light colored backgrounds.
    ``` -### Treeview Dark +### Treeview Light -A `treeview` variation for dark colored backgrounds. +A `treeview` variation for light colored backgrounds. -
    -
      -
    • -
      -
      -
      -
      - -
      -
      -
      - -
      -
      -
      -
      +
        +
      • +
        +
        +
        +
        + +
        +
        +
        + +
        +
        +
        +
        + + + +
        +
        +
        + + + Liferay Drive + + +
        +
        + +
        +
        + +
        +
        +
        +
        +
        +
          +
        • + +
          +
            +
          • +
            +
            +
            +
            +
            + +
            +
            +
            + + + + Details + + + +
            +
            + +
            +
            + +
            +
            +
            +
            +
            • +
          • +
            +
            +
            +
            +
            + +
            +
            +
            + + + + Categorization + + + +
            +
            + +
            +
            + +
            +
            +
            +
            +
            • +
          • +
            +
            +
            +
            +
            + +
            +
            +
            + + + + Documents and Media + + + +
            +
            + +
            +
            + +
            +
            +
            +
            +
            • +
          • +
            +
            +
            +
            +
            + +
            +
            +
            + + + Site Template + + +
            +
            + +
            +
            + +
            +
            +
            +
            +
            • +
          +
          +
          • +
        +
        +
        • +
      • + +
        +
          +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + Sitemap + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + Robots + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        +
        +
        • +
      • + +
        +
          +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + + Default User Associations + + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + Staging + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + Analytics + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + Maps + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        +
        +
        • +
      + +```html +
        +
      • +
        +
        +
        +
        +
        -
        -
        - - - - Liferay Drive - - + + + +
        +
        +
        +
        -
        - + +
        -
        - -
        + +
        +
        + +
        +
        +
        -
        -
          -
        • +
        +
        +
          +
        • +
          • +
        • +
          -
          -
          -
          -
          - -
          -
          -
          - +
          +
          +
          +
          -
          - -
          -
          - +
          +
          + -
          + + + +
          -
          • -
        • +
        +
        • +
      • +
        -
        -
        -
        -
        - -
        -
        -
        - +
        +
        +
        +
        -
        - -
        -
        - +
        +
        + -
        + + + +
        -
        • -
      • +
      +
      • +
    • +
      -
      -
      -
      -
      - -
      -
      -
      - +
      +
      +
      +
      -
      - -
      -
      - +
      +
      + -
      + + + +
      -
      • -
    -
    - - - - -
  • -
    • + + + + + + +
  • + -
    -
      -
    • -
      + +
      +
      + +
      +
    + + +
    +
      +
    • +
      +
      +
      +
      +
      +
      -
      - -
      -
      - +
      +
      + -
      + + + +
      -
      • -
    • +
    +
    • +
  • +
    -
    -
    -
    -
    - -
    -
    -
    - - - - Robots - - - -
    -
    - -
    -
    - + className="custom-control-label" + > +
    -
    -
    -
    • - - - -
  • -
    • + + + +
  • + -
    -
      -
    • +
    +
    +
      +
    • +
      -
      -
      -
      -
      - -
      -
      -
      - - - - Default User Associations - - - -
      -
      - + className="custom-control-label" + > +
      -
      - -
      + + + + +
      +
      +
      -
      • -
    • +
    +
    • +
  • +
    -
    -
    -
    -
    - -
    -
    -
    - +
    +
    +
    +
    -
    - -
    -
    - +
    +
    + -
    + + + +
    -
    • -
  • + +
    • +
  • +
    -
    -
    -
    -
    - -
    -
    -
    - +
    +
    +
    +
    -
    - -
    -
    - +
    +
    + -
    + + + +
    -
    • -
  • + +
    • +
  • +
    -
    -
    -
    -
    - -
    -
    -
    - +
    +
    +
    +
    -
    - -
    -
    - +
    +
    + -
    + + + +
    -
    • - - - - + + + + + + +``` + +### Treeview Dark + +A `treeview` variation for dark colored backgrounds. + +
    +
      +
    • +
      +
      +
      +
      + +
      +
      +
      + +
      +
      +
      +
      + + + +
      +
      +
      + + + Liferay Drive + + +
      +
      + +
      +
      + +
      +
      +
      +
      +
      +
        +
      • + +
        +
          +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + + Details + + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + + Categorization + + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + + Documents and Media + + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        • +
          +
          +
          +
          +
          + +
          +
          +
          + + + + Site Template + + + +
          +
          + +
          +
          + +
          +
          +
          +
          +
          • +
        +
        +
        • +
      +
      +
      • +
    • + +
      +
        +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Sitemap + + +
        +
        + +
        +
        + +
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Robots + + +
        +
        + +
        +
        + +
        +
        +
        +
        +
        • +
      +
      +
      • +
    • + +
      +
        +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + + Default User Associations + + + +
        +
        + +
        +
        + +
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Staging + + +
        +
        + +
        +
        + +
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Analytics + + +
        +
        + +
        +
        + +
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        +
        + +
        +
        +
        + + + Maps + + +
        +
        + +
        +
        + +
        +
        +
        +
        +
        • +
      +
      +
      • +
    ```html diff --git a/packages/clay-core/docs/vertical-bar.mdx b/packages/clay-core/docs/vertical-bar.mdx index 659c1dfb90..6755c2e406 100644 --- a/packages/clay-core/docs/vertical-bar.mdx +++ b/packages/clay-core/docs/vertical-bar.mdx @@ -6,13 +6,13 @@ packageStatus: 'Beta' packageUse: "import {VerticalBar} from '@clayui/core';" storybookPath: 'design-system-components-verticalbar' packageTypes: - [ - 'clay-core/src/vertical-bar/VerticalBar.tsx', - 'clay-core/src/vertical-bar/Bar.tsx', - 'clay-core/src/vertical-bar/Item.tsx', - 'clay-core/src/vertical-bar/Panel.tsx', - 'clay-core/src/vertical-bar/Content.tsx', - ] + [ + 'clay-core/src/vertical-bar/VerticalBar.tsx', + 'clay-core/src/vertical-bar/Bar.tsx', + 'clay-core/src/vertical-bar/Item.tsx', + 'clay-core/src/vertical-bar/Panel.tsx', + 'clay-core/src/vertical-bar/Content.tsx', + ] --- ## Example @@ -25,57 +25,49 @@ import React from 'react'; const spritemap = '/public/icons.svg'; export default function App() { - const items = [ - { - icon: 'tag', - title: 'Tag', - }, - { - divider: true, - icon: 'message', - title: 'Message', - }, - { - icon: 'effects', - title: 'Effects', - }, - ]; - - return ( -
    - - - - {(item) => ( - -
    -
    - {item.title} -
    -
    -     - )} -     - - - {(item) => ( - - - - )} - -     -     -
    - ); + const items = [ + { + icon: 'tag', + title: 'Tag', + }, + { + divider: true, + icon: 'message', + title: 'Message', + }, + { + icon: 'effects', + title: 'Effects', + }, + ]; + + return ( +
    + + + + {(item) => ( + +
    +
    {item.title}
    +
    +     + )} +     + + + {(item) => ( + + + + )} + +     +     +
    + ); } ``` @@ -93,34 +85,34 @@ The component controls the OOTB state to toggle the visibility of the panels ie ```jsx - - Tag - Message - - - - - - - - - - - - + + Tag + Message + + + + + + + + + + + + ``` @@ -128,16 +120,16 @@ The declaration order is important for the component to know which Panel should ```jsx - - Tag - - - - - - + + Tag + + + + + + ``` @@ -147,28 +139,28 @@ Declaring components and the list of panels and hard coded items that are not co ```jsx - - Tag - Message - Effects - - - - - - - - - - - - + + Tag + Message + Effects + + + + + + + + + + + + ``` @@ -180,41 +172,39 @@ To make a component dynamic is only possible by using the properties of `items` ```jsx const items = [ - { - icon: 'tag', - title: 'Tag', - }, - { - divider: true, - icon: 'message', - title: 'Message', - }, - { - icon: 'effects', - title: 'Effects', - }, + { + icon: 'tag', + title: 'Tag', + }, + { + divider: true, + icon: 'message', + title: 'Message', + }, + { + icon: 'effects', + title: 'Effects', + }, ]; return ( - - - {(item) => ( - - {item.title} - - )} - - - - {(item) => ( - - - - )} - - + + + {(item) => ( + {item.title} + )} + + + + {(item) => ( + + + + )} + + ); ``` @@ -224,8 +214,8 @@ Positioning the VerticalBar on the right or left side is possible by setting the ```jsx - - + + ``` @@ -236,11 +226,11 @@ The property `resize` in `` enables the user to increase or d The property `onPanelWidthChange` accepts a callback function that executes when the `panelWidth` is updated. The callback function has the value of the panel width as the parameter. It can be used to make updates to other parts of your application, such as pushing body content over as the user resizes the Vertical Bar Panel.
    - When using the property `onPanelWidthChange`, you must also declare - `panelWidth`. Setting a fixed value for `panelWidth` will result in - `onPanelWidthChange` always returning that value, you must use - `React.useState` to get your callback function to return the correct value. - Please see the code example below. + When using the property `onPanelWidthChange`, you must also declare + `panelWidth`. Setting a fixed value for `panelWidth` will result in + `onPanelWidthChange` always returning that value, you must use + `React.useState` to get your callback function to return the correct value. + Please see the code example below.
    @@ -254,43 +244,43 @@ const TagPanel = React.lazy(() => import('./TagPanel')); const MessagePanel = React.lazy(() => import('./MessagePanel')); export const LoadLazyPanel = () => { - const items = [ - { - icon: 'tag', - panel: TagPanel, - title: 'Tag', - }, - { - divider: true, - icon: 'message', - panel: MessagePanel, - title: 'Message', - }, - ]; - - return ( - - - {({panel: PanelLazy, title}) => ( - - Loading...}> - - - - )} - - - - {(item) => ( - - - - )} - - - ); + const items = [ + { + icon: 'tag', + panel: TagPanel, + title: 'Tag', + }, + { + divider: true, + icon: 'message', + panel: MessagePanel, + title: 'Message', + }, + ]; + + return ( + + + {({panel: PanelLazy, title}) => ( + + Loading...}> + + + + )} + + + + {(item) => ( + + + + )} + + + ); }; ``` @@ -298,14 +288,14 @@ You can also use the `` above the `` to capture err ```jsx - {({panel: PanelLazy, title}) => ( - - - Loading...}> - - - - - )} + {({panel: PanelLazy, title}) => ( + + + Loading...}> + + + + + )} ``` diff --git a/packages/clay-data-provider/docs/data-provider.mdx b/packages/clay-data-provider/docs/data-provider.mdx index 3afac57350..e4f3641b69 100644 --- a/packages/clay-data-provider/docs/data-provider.mdx +++ b/packages/clay-data-provider/docs/data-provider.mdx @@ -5,21 +5,21 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/dropdowns/' packageNpm: '@clayui/data-provider' packageUse: "import DataProvider, {useResource} from '@clayui/data-provider';" packageTypes: - [ - 'clay-data-provider/src/DataProvider.tsx', - 'clay-data-provider/src/useResource.tsx', - ] + [ + 'clay-data-provider/src/DataProvider.tsx', + 'clay-data-provider/src/useResource.tsx', + ] --- ## Introduction ClayDataProvider gives functionality of data caching, attempts, polling, network status and avoiding [the thundering herd problem](https://en.wikipedia.org/wiki/Thundering_herd_problem). It is simple and powerful because: -- **Easy adoption**, you can incrementally use in your application and both `useResource` hook and `ClayDataProvider` component and have all the functionality available. -- **Simple to start**, use the basics you already know or take advantage of the full set of features to get the most out of it. -- **Built for data to reflect what users are doing in your application**, it works perfectly for cases where data changes according to user interaction. -- **Extensible**, enjoy the single cache in only one source of truth and save data between navigations to be used in future interactions. -- **Suspense and ErrorBoundary** do incremental adoption with `` and `` to the new React patterns. +- **Easy adoption**, you can incrementally use in your application and both `useResource` hook and `ClayDataProvider` component and have all the functionality available. +- **Simple to start**, use the basics you already know or take advantage of the full set of features to get the most out of it. +- **Built for data to reflect what users are doing in your application**, it works perfectly for cases where data changes according to user interaction. +- **Extensible**, enjoy the single cache in only one source of truth and save data between navigations to be used in future interactions. +- **Suspense and ErrorBoundary** do incremental adoption with `` and `` to the new React patterns. ## Getting started @@ -27,7 +27,7 @@ To consume data, you can work with two different ways in React, using the ` - {({data, error, loading, refetch}) => {}} + {({data, error, loading, refetch}) => {}} ``` @@ -37,11 +37,11 @@ The vast majority of APIs are the same between `useResource` and ` { - const {resource} = useResource({ - link: 'https://rickandmortyapi.com/api/character/', - }); + const {resource} = useResource({ + link: 'https://rickandmortyapi.com/api/character/', + }); - return null; + return null; }; ``` @@ -54,24 +54,24 @@ Make attempts on a request several times when a network or server error occurs. `fetchRetry` is easy to set up and is enabled by default with the `jitter` setting for delays between attempts by default.
    - Warning - The values ​​contained in the code below are the default value. + Warning + The values ​​contained in the code below are the default value.
    ```jsx const App = () => { - const {resource} = useResource({ - link: 'https://rickandmortyapi.com/api/character/', - fetchRetry: { - attempts: 5, - delay: { - initial: 300, - jitter: true, - }, - }, - }); - - return null; + const {resource} = useResource({ + link: 'https://rickandmortyapi.com/api/character/', + fetchRetry: { + attempts: 5, + delay: { + initial: 300, + jitter: true, + }, + }, + }); + + return null; }; ``` @@ -81,38 +81,38 @@ The DataProvider provides network status information for you if you want to crea ```jsx const App = () => ( - - {({data, error, loading, refetch, networkStatus}) => {}} - + + {({data, error, loading, refetch, networkStatus}) => {}} + ); ``` Using network status with hooks is another option, it does not provide an abstraction for `loading`, `error` and `networkStatus` and all information is collected through the `onNetworkStatusChange` callback. -- `loading` is equivalent to `networkStatus < 4` -- `error` is equivalent to `status === 5` +- `loading` is equivalent to `networkStatus < 4` +- `error` is equivalent to `status === 5` ```jsx const App = () => { - const [state, setState] = useState(() => ({ - error: false, - loading: false, - networkStatus: 4, - })); - const {resource} = useResource({ - link: 'https://rickandmortyapi.com/api/character/', - onNetworkStatusChange: (status) => - setState({ - error: status === 5, - loading: status < 4, - networkStatus: status, - }), - }); - - return null; + const [state, setState] = useState(() => ({ + error: false, + loading: false, + networkStatus: 4, + })); + const {resource} = useResource({ + link: 'https://rickandmortyapi.com/api/character/', + onNetworkStatusChange: (status) => + setState({ + error: status === 5, + loading: status < 4, + networkStatus: status, + }), + }); + + return null; }; ``` @@ -122,14 +122,14 @@ const App = () => { ```jsx const App = () => { - const [value, setValue] = useState('Rick'); - const {resource} = useResource({ - link: 'https://rickandmortyapi.com/api/character/', - fetchDelay: 300, - variables: {name: value}, - }); - - return null; + const [value, setValue] = useState('Rick'); + const {resource} = useResource({ + link: 'https://rickandmortyapi.com/api/character/', + fetchDelay: 300, + variables: {name: value}, + }); + + return null; }; ``` @@ -140,22 +140,22 @@ You can cache your requests so that in new user interactions a new request is no The cache is guided by a policy, use the `fetchPolicy` prop to enable and configure the cache according to your use case.
    - Warning - The cache is governed by the algorithm least recently used ( - LRU - ), you can set the amount of data that will be stored using the - storageMaxSize - API. Each new query is equivalent to 1 size. + Warning + The cache is governed by the algorithm least recently used ( + LRU + ), you can set the amount of data that will be stored using the + storageMaxSize + API. Each new query is equivalent to 1 size.
    - Warning - When suspense is enabled the hook automatically - changes the fetchPolicy to - FetchPolicy.CacheAndNetwork - if it is set to - FetchPolicy.NoCache - so it works properly. + Warning + When suspense is enabled the hook automatically + changes the fetchPolicy to + FetchPolicy.CacheAndNetwork + if it is set to + FetchPolicy.NoCache + so it works properly.
    ### Infinite loading @@ -165,24 +165,24 @@ Using the `useResource` hook also supports paginated data, which is common in AP Data is automatically aggregated as new requests are being made when the `loadMore` callback is called.
    - Info - Calling the refetch callback as an attempt - to refresh the data will not work since the data is already aggregated. + Info + Calling the refetch callback as an attempt + to refresh the data will not work since the data is already aggregated.
    ```javascript const {loadMore, resource} = useResource({ - fetch: async (link: string) => { - const result = await fetch(link); - const json = await result.json(); - - return { - cursor: json.info.next, - items: json.results, - }; - }, - link: 'https://rickandmortyapi.com/api/character', - variables: {limit: 10}, + fetch: async (link: string) => { + const result = await fetch(link); + const json = await result.json(); + + return { + cursor: json.info.next, + items: json.results, + }; + }, + link: 'https://rickandmortyapi.com/api/character', + variables: {limit: 10}, }); ``` @@ -216,11 +216,11 @@ If a network error happens you can also catch the error in render time using [`< ```javascript const Root = () => ( - - }> - - - + + }> + + + ); ``` @@ -238,8 +238,8 @@ This is an API that replaces the `link` behavior of receiving an async function, import fetch from 'unfetch'; const App = () => { - const {resource} = useResource({fetch, link: 'https://clay.dev'}); - // ... + const {resource} = useResource({fetch, link: 'https://clay.dev'}); + // ... }; ``` @@ -247,17 +247,17 @@ const App = () => { ```javascript const {resource, sort, sortChange} = useResource({ - fetch: (link, init, sort) => { - const url = new URL(link); + fetch: (link, init, sort) => { + const url = new URL(link); - if (sort) { - url.searchParams.append('column', sort.column); - url.searchParams.append('direction', sort.direction); - } + if (sort) { + url.searchParams.append('column', sort.column); + url.searchParams.append('direction', sort.direction); + } - return fetch(url, init); - }, - link: 'https://clay.dev', + return fetch(url, init); + }, + link: 'https://clay.dev', }); ``` @@ -272,10 +272,10 @@ With the `jitter` option enabled, delays are randomized anywhere between 0ms (in These two features combined help alleviate [the thundering herd problem](https://en.wikipedia.org/wiki/Thundering_herd_problem), by distributing load during major outages. Without these strategies, when your server comes back up it will be hit by all of your clients at once, possibly causing it to go down again.
    - Warning - The implementation of this was based on the - apollo-link-retry - plugin for React Apollo. + Warning + The implementation of this was based on the + apollo-link-retry + plugin for React Apollo.
    ### Caching data at root level @@ -283,26 +283,26 @@ These two features combined help alleviate [the thundering herd problem](https:/ The DataProvider can be used on small components that need some data and if it is very reused by the application in other pages, it does not make sense to consult this data every time the user interacts with it in other parts of your application, you can take advantage of the root level cache, ensuring that the next user interactions in the component are with data in the cache, even if it is on other pages.
    - Warning - The use of the storage property has been - deprecated since v3.67.0 in favor of declaring the - storageMaxSize={100} - component in the application root to control cache state and other internal - details. + Warning + The use of the storage property has been + deprecated since v3.67.0 in favor of declaring the + storageMaxSize={100} + component in the application root to control cache state and other internal + details.
    ```jsx const App = () => { - const storageContext = useContext(Store); - - return ( - - {({data, error, loading, refetch}) => {}} - - ); + const storageContext = useContext(Store); + + return ( + + {({data, error, loading, refetch}) => {}} + + ); }; ``` diff --git a/packages/clay-date-picker/docs/date-picker.mdx b/packages/clay-date-picker/docs/date-picker.mdx index 693c3f7015..836a02fc4c 100644 --- a/packages/clay-date-picker/docs/date-picker.mdx +++ b/packages/clay-date-picker/docs/date-picker.mdx @@ -14,19 +14,19 @@ By default Date Picker does not handle input masking, letting you take control s For mobile viewing mode, Lexicon encourages you to use the native Date Picker, they are many robust and more accessible in the mobile view, Clay offers the [`useNative`](#api-useNative) API to replace the Date Picker view mode with the native and continue to get the features of the component.
    - Warning - These components are meant to cover desktop browser needs. The OS native component - must be used on mobile devices. + Warning + These components are meant to cover desktop browser needs. The OS native component + must be used on mobile devices.
    The component is treated as controlled, use the [`onValueChange`](#api-onValueChange) and [`value`](#api-value) APIs to control the flow of information.
    - Warning - You can set a range of years using the API - years - , which can be displayed in the Date Picker, if the user enters a year - that is not within the range will be treated as an invalid date. + Warning + You can set a range of years using the API + years + , which can be displayed in the Date Picker, if the user enters a year that + is not within the range will be treated as an invalid date.
    ```jsx preview @@ -35,23 +35,23 @@ import DatePicker from '@clayui/date-picker'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(null); - - return ( - -
    - -
    -     - ); + const [value, setValue] = useState(null); + + return ( + +
    + +
    +     + ); } ``` @@ -65,25 +65,25 @@ import DatePicker from '@clayui/date-picker'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(null); - - return ( - -
    - -
    -     - ); + const [value, setValue] = useState(null); + + return ( + +
    + +
    +     + ); } ``` @@ -94,10 +94,10 @@ Range is used to allowing the user to select a date range using a single calenda When a range is selected using the `input` or the calendar, the [`onValueChange`](#api-onValueChange) callback is called with the value in `string` type, respecting the format of the [`dateFormat`](#api-dateFormat) for both dates together with the separator.
    - Warning - The time is not supported when the - range - is enabled. + Warning + The time is not supported when the + range + is enabled.
    ```jsx preview @@ -106,24 +106,24 @@ import DatePicker from '@clayui/date-picker'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(null); - - return ( - -
    - -
    -     - ); + const [value, setValue] = useState(null); + + return ( + +
    + +
    +     + ); } ``` @@ -137,57 +137,57 @@ import DatePicker from '@clayui/date-picker'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(null); - - return ( - -
    - -
    -     - ); + const [value, setValue] = useState(null); + + return ( + +
    + +
    +     + ); } ``` -- [`firstDayOfWeek`](#api-firstDayOfWeek) by default the value by default the value is 0 (Sunday) and its values are the days of the week, 1 (Monday), 2 (Tuesday), 3 (Wednesday), 4 (Thursday), 5 (Friday), 6 (Saturday). -- [`dateFormat`](#api-dateFormat) and `timeFormat` is defined according to the **formatting rules of [date-fns](https://date-fns.org/v2.14.0/docs/format)** which is an implementation of the [unicode technical standards](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). -- [`months`](#api-months) is an `Array` with available months **starting January to December**. -- [`weekdaysShort`](#api-weekdaysShort) is an `Array` with the **names of the days of the week in short form**, starting from **Sunday to Saturday**. +- [`firstDayOfWeek`](#api-firstDayOfWeek) by default the value by default the value is 0 (Sunday) and its values are the days of the week, 1 (Monday), 2 (Tuesday), 3 (Wednesday), 4 (Thursday), 5 (Friday), 6 (Saturday). +- [`dateFormat`](#api-dateFormat) and `timeFormat` is defined according to the **formatting rules of [date-fns](https://date-fns.org/v2.14.0/docs/format)** which is an implementation of the [unicode technical standards](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). +- [`months`](#api-months) is an `Array` with available months **starting January to December**. +- [`weekdaysShort`](#api-weekdaysShort) is an `Array` with the **names of the days of the week in short form**, starting from **Sunday to Saturday**.
    - Warning - It is not necessary to reverse or change the order of the values ​​of - weekdaysShort - the definition of the API - firstDayOfWeek - will take care of changing this, - keep the order from Sunday to Saturday - . + Warning + It is not necessary to reverse or change the order of the values ​​of + weekdaysShort + the definition of the API + firstDayOfWeek + will take care of changing this, + keep the order from Sunday to Saturday + .
    ## Custom Footer @@ -200,24 +200,24 @@ import DatePicker from '@clayui/date-picker'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(null); - - return ( - -
    - Footer Content} - onChange={setValue} - placeholder="YYYY-MM-DD" - value={value} - years={{ - end: new Date().getFullYear(), - start: 2008, - }} - /> -
    -     - ); + const [value, setValue] = useState(null); + + return ( + +
    + Footer Content} + onChange={setValue} + placeholder="YYYY-MM-DD" + value={value} + years={{ + end: new Date().getFullYear(), + start: 2008, + }} + /> +
    +     + ); } ``` diff --git a/packages/clay-date-picker/docs/date-picker/markup.mdx b/packages/clay-date-picker/docs/date-picker/markup.mdx index fe942b0315..0741bf0f6e 100644 --- a/packages/clay-date-picker/docs/date-picker/markup.mdx +++ b/packages/clay-date-picker/docs/date-picker/markup.mdx @@ -7,7 +7,7 @@ packageUse: "import DatePicker from '@clayui/date-picker';" ---
    - This requires custom javascript. + This requires custom javascript.
    ## Example @@ -15,30 +15,30 @@ packageUse: "import DatePicker from '@clayui/date-picker';" The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer`. `Footer`: You can add elements that complement the Date Picker like the Time Picker.
    -
    -
    -
    -
    - Date Picker Calendar Header -
    -
    - Date Picker Calendar Body -
    -
    - Date Picker Calendar Footer -
    -
    -
    -
    +
    +
    +
    +
    + Date Picker Calendar Header +
    +
    + Date Picker Calendar Body +
    +
    + Date Picker Calendar Footer +
    +
    +
    +
    ```html
    -
    -
    ...
    -
    ...
    -
    ...
    -
    +
    +
    ...
    +
    ...
    +
    ...
    +
    ``` @@ -303,1628 +303,1560 @@ The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer` ```html
    -
    -
    - - -
    - -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - - - -
    -
    -
    -
    -
    -
    -
    - S -
    -
    -
    -
    - M -
    -
    -
    -
    - T -
    -
    -
    -
    - W -
    -
    -
    -
    - T -
    -
    -
    -
    - F -
    -
    -
    -
    - S -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    -
    - - - - - -
    -
    - -
    -
    - (GMT+01:00) -
    -
    -
    -
    -
    -
    +
    +
    + + +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + S +
    +
    +
    +
    + M +
    +
    +
    +
    + T +
    +
    +
    +
    + W +
    +
    +
    +
    + T +
    +
    +
    +
    + F +
    +
    +
    +
    + S +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    + + + + + +
    +
    + +
    +
    + (GMT+01:00) +
    +
    +
    +
    +
    +
    ``` ## Date Picker
    -
    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - - - -
    -
    -
    -
    -
    -
    -
    - S -
    -
    -
    -
    - M -
    -
    -
    -
    - T -
    -
    -
    -
    - W -
    -
    -
    -
    - T -
    -
    -
    -
    - F -
    -
    -
    -
    - S -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + S +
    +
    +
    +
    + M +
    +
    +
    +
    + T +
    +
    +
    +
    + W +
    +
    +
    +
    + T +
    +
    +
    +
    + F +
    +
    +
    +
    + S +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    ```html
    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - - - -
    -
    -
    -
    -
    -
    -
    - S -
    -
    -
    -
    - M -
    -
    -
    -
    - T -
    -
    -
    -
    - W -
    -
    -
    -
    - T -
    -
    -
    -
    - F -
    -
    -
    -
    - S -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + S +
    +
    +
    +
    + M +
    +
    +
    +
    + T +
    +
    +
    +
    + W +
    +
    +
    +
    + T +
    +
    +
    +
    + F +
    +
    +
    +
    + S +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    ``` @@ -1933,62 +1865,62 @@ The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer` Add the class `focus` to the `input-group-item` to show the focus border.
    -
    -
    - - -
    - -
    -
    -
    +
    +
    + + +
    + +
    +
    +
    ```html
    -
    - - -
    - -
    -
    +
    + + +
    + +
    +
    ``` @@ -2001,1944 +1933,1900 @@ The modifier class `c-selected-start` must be added to `date-picker-col` for the The class `c-selected-end` must be added to `date-picker-col` for the last date in the range.
    -
    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - - - -
    -
    -
    -
    -
    -
    -
    - Mon -
    -
    -
    -
    - Tues -
    -
    -
    -
    - Wed -
    -
    -
    -
    - Thu -
    -
    -
    -
    - Fri -
    -
    -
    -
    - Sat -
    -
    -
    -
    - Sun -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + Mon +
    +
    +
    +
    + Tues +
    +
    +
    +
    + Wed +
    +
    +
    +
    + Thu +
    +
    +
    +
    + Fri +
    +
    +
    +
    + Sat +
    +
    +
    +
    + Sun +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    ```html
    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - - - -
    -
    -
    -
    -
    -
    -
    - Mon -
    -
    -
    -
    - Tues -
    -
    -
    -
    - Wed -
    -
    -
    -
    - Thu -
    -
    -
    -
    - Fri -
    -
    -
    -
    - Sat -
    -
    -
    -
    - Sun -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    + Mon +
    +
    +
    +
    + Tues +
    +
    +
    +
    + Wed +
    +
    +
    +
    + Thu +
    +
    +
    +
    + Fri +
    +
    +
    +
    + Sat +
    +
    +
    +
    + Sun +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    ``` ### Date Picker Old Markup
    - In Clay CSS versions 3.24.1 and below, Date Picker days and dates weren't - wrapped in an extra element date-picker-col. We added the - wrapping element for highlighting a range of dates. See{' '} - - #3986 - - . This old pattern is still supported, but we recommend updating your markup. + In Clay CSS versions 3.24.1 and below, Date Picker days and dates weren't + wrapped in an extra element date-picker-col. We added the + wrapping element for highlighting a range of dates. See{' '} + + #3986 + + . This old pattern is still supported, but we recommend updating your markup.
    -
    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - - - -
    -
    -
    -
    -
    -
    - Mon -
    -
    - Tues -
    -
    - Wed -
    -
    - Thu -
    -
    - Fri -
    -
    - Sat -
    -
    - Sun -
    -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    + Mon +
    +
    + Tues +
    +
    + Wed +
    +
    + Thu +
    +
    + Fri +
    +
    + Sat +
    +
    + Sun +
    +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    +
    +
    +
    ```html
    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - - - -
    -
    -
    -
    -
    -
    - Mon -
    -
    - Tues -
    -
    - Wed -
    -
    - Thu -
    -
    - Fri -
    -
    - Sat -
    -
    - Sun -
    -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    -
    -
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    + Mon +
    +
    + Tues +
    +
    + Wed +
    +
    + Thu +
    +
    + Fri +
    +
    + Sat +
    +
    + Sun +
    +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    +
    +
    ``` @@ -3947,954 +3835,916 @@ The class `c-selected-end` must be added to `date-picker-col` for the last date Check the browser support for `input[type="date"]` before deciding if it's a good fit for your application.
    -
    - - -
    +
    + + +
    ```html
    - - + +
    ``` ## Time Picker
    - This requires external javascript to change values of nested inputs and - increment/decrement buttons. We use input type="text" because - it gives us better cross browser support for formatting numbers and text. + This requires external javascript to change values of nested inputs and + increment/decrement buttons. We use input type="text" because it + gives us better cross browser support for formatting numbers and text.
    ### Time Picker 12H
    -
    - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    ```html
    - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    ``` ### Time Picker 12H With Time Zone
    -
    - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    - (GMT+01:00) -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    + (GMT+01:00) +
    +
    +
    +
    ### Time Picker 12H With Time Zone and Icon
    -
    - -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    - (GMT+01:00) -
    -
    -
    -
    +
    + +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    + (GMT+01:00) +
    +
    +
    +
    ```html
    - -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    - (GMT+01:00) -
    -
    -
    + +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    + (GMT+01:00) +
    +
    +
    ``` ### Time Picker 24H
    -
    - -
    -
    -
    -
    -
    - - : - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    + + : + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    ```html
    - -
    -
    -
    -
    -
    - - : - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    + +
    +
    +
    +
    +
    + + : + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    ``` ### Time Picker With Seconds and Clear
    -
    - -
    -
    -
    -
    -
    - - : - - : - - -
    -
    -
    - -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - - : - - : - -
    -
    -
    - -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    + + : + + : + + +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + + : + + : + +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    ```html
    - -
    -
    -
    -
    -
    - - : - - : - - -
    -
    -
    - -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    + +
    +
    +
    +
    +
    + + : + + : + + +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    - -
    -
    -
    -
    -
    - - : - - : - -
    -
    -
    - -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    + +
    +
    +
    +
    +
    + + : + + : + +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    ``` @@ -4903,150 +4753,146 @@ Check the -
    - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    ```html
    - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    ``` @@ -5055,160 +4901,156 @@ Add the class `focus` to `form-control`. Add the class `disabled` to `form-control` and the attribute `disabled` to all nested `input`s and `button`s. The `label` can also be styled in a disabled state with the class `disabled`.
    -
    - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    ```html
    - -
    -
    -
    -
    -
    - - : - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    + +
    +
    +
    +
    +
    + + : + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    ``` @@ -5217,64 +5059,59 @@ Add the class `disabled` to `form-control` and the attribute `disabled` to all n Check the     browser support for `input[type="time"]` before deciding if it's a good fit for your application.
    -
    -
    - - -
    -
    -
    -
    - -
    -
    - -
    -
    - (GMT+01:00) -
    -
    -
    -
    +
    +
    + + +
    +
    +
    +
    + +
    +
    + +
    +
    + (GMT+01:00) +
    +
    +
    +
    ```html
    - - + +
    -
    -
    - -
    -
    - (GMT+01:00) -
    -
    +
    +
    + +
    +
    + (GMT+01:00) +
    +
    ``` diff --git a/packages/clay-drop-down/docs/drop-down.mdx b/packages/clay-drop-down/docs/drop-down.mdx index 650a1a6a0c..1560ac45b3 100644 --- a/packages/clay-drop-down/docs/drop-down.mdx +++ b/packages/clay-drop-down/docs/drop-down.mdx @@ -5,18 +5,18 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/dropdowns/' packageNpm: '@clayui/drop-down' packageUse: "import DropDown from '@clayui/drop-down';" packageTypes: - [ - 'clay-drop-down/src/DropDown.tsx', - 'clay-drop-down/src/Action.tsx', - 'clay-drop-down/src/Item.tsx', - 'clay-drop-down/src/ItemList.tsx', - 'clay-drop-down/src/Section.tsx', - 'clay-drop-down/src/Group.tsx', - 'clay-drop-down/src/Help.tsx', - 'clay-drop-down/src/Caption.tsx', - 'clay-drop-down/src/DropDownWithDrilldown.tsx', - 'clay-drop-down/src/DropDownWithItems.tsx', - ] + [ + 'clay-drop-down/src/DropDown.tsx', + 'clay-drop-down/src/Action.tsx', + 'clay-drop-down/src/Item.tsx', + 'clay-drop-down/src/ItemList.tsx', + 'clay-drop-down/src/Section.tsx', + 'clay-drop-down/src/Group.tsx', + 'clay-drop-down/src/Help.tsx', + 'clay-drop-down/src/Caption.tsx', + 'clay-drop-down/src/DropDownWithDrilldown.tsx', + 'clay-drop-down/src/DropDownWithItems.tsx', + ] --- ## Example @@ -28,60 +28,60 @@ import Button from '@clayui/button'; import React from 'react'; const items = [ - { - children: [ - {id: 2, name: 'Apple'}, - {id: 3, name: 'Banana'}, - {id: 4, name: 'Mangos'}, - ], - id: 1, - name: 'Fruit', - }, - { - children: [ - {id: 6, name: 'Potatoes'}, - {id: 7, name: 'Tomatoes'}, - {id: 8, name: 'Onions'}, - ], - id: 5, - name: 'Vegetable', - }, + { + children: [ + {id: 2, name: 'Apple'}, + {id: 3, name: 'Banana'}, + {id: 4, name: 'Mangos'}, + ], + id: 1, + name: 'Fruit', + }, + { + children: [ + {id: 6, name: 'Potatoes'}, + {id: 7, name: 'Tomatoes'}, + {id: 8, name: 'Onions'}, + ], + id: 5, + name: 'Vegetable', + }, ]; export default function App() { - return ( - -
    - Select} - triggerIcon="caret-bottom" - > - - - {(item) => ( - - {(item) => ( - { - // logic stuff... - }} - > - {item.name} - - )} - - )} - - -
    -     - ); + return ( + +
    + Select} + triggerIcon="caret-bottom" + > + + + {(item) => ( + + {(item) => ( + { + // logic stuff... + }} + > + {item.name} + + )} + + )} + + +
    +     + ); } ``` @@ -101,11 +101,11 @@ The simplest example of a static menu is rendering a simple list of options. ```jsx Click Me}> - - one - two - three - + + one + two + three + ``` @@ -113,19 +113,19 @@ Other cases are also possible, for example rendering a group of options with a s ```jsx Click Me}> - - - - one - two - three - - - a - b - c - - + + + + one + two + three + + + a + b + c + + ``` @@ -135,7 +135,7 @@ The example above shows how Clay even with the explicit composition of the menu ```jsx Click Me}> - {(item) => {item}} + {(item) => {item}} ``` @@ -143,31 +143,25 @@ Compositing for dynamic content becomes simpler and also provides the same featu ```jsx Click Me}> - - - {(item) => ( - - {(item) => ( - {item.name} - )} - - )} - + + + {(item) => ( + + {(item) => {item.name}} + + )} + ``` @@ -177,34 +171,32 @@ The filter in a Menu works OOTB, just declaring the `` componen ```jsx function Example() { - const [value, setValue] = useState(''); - - const options = [{name: 'one'}, {name: 'two'}, {name: 'three'}]; - - const filteredOptions = useMemo(() => { - if (!value) { - return options; - } - - return options.filter( - (option) => option.match(new RegExp(value, 'i')) !== null - ); - }, [options, value]); - - return ( - Click Me}> - - - {(item) => ( - {item.name} - )} - - - ); + const [value, setValue] = useState(''); + + const options = [{name: 'one'}, {name: 'two'}, {name: 'three'}]; + + const filteredOptions = useMemo(() => { + if (!value) { + return options; + } + + return options.filter( + (option) => option.match(new RegExp(value, 'i')) !== null + ); + }, [options, value]); + + return ( + Click Me}> + + + {(item) => {item.name}} + + + ); } ``` @@ -212,10 +204,10 @@ If you just need to set an initial value, just use the `defaultValue` property. ```jsx Click Me}> - - - {(item) => {item.name}} - + + + {(item) => {item.name}} + ``` @@ -225,15 +217,15 @@ DropDown filters items according to the value rendered as `children` of `Click Me}> - - - {(item) => ( - - - {item.name} - - )} - + + + {(item) => ( + + + {item.name} + + )} + ``` @@ -244,8 +236,8 @@ You may want to create a trigger that is not necessarily in the same tree as Dro Using `` allows you to better control the state of DropDown but you will have to deal with visibility, focus management, and other details.
    - As a recommendation only use this component as a last resort, it doesn't - provide some OOTB features like focus control or accessibility at all. + As a recommendation only use this component as a last resort, it doesn't + provide some OOTB features like focus control or accessibility at all.
    ```jsx @@ -253,44 +245,44 @@ import ClayDropDown from '@clayui/drop-down'; import React, {useState, useRef} from 'react'; const Menu = ({children, hasLeftSymbols, hasRightSymbols}) => { - const triggerElementRef = useRef(null); - const [expand, setExpand] = useState(false); - const menuElementRef = useRef(null); - - const handleExpand = (event) => { - // This is not ideal for allowing you to have more than - // one trigger for the same content but it simulates the - // advantages of controlling `DropDown.Menu`. - triggerElementRef.current = event.target; - - setExpand(!expand); - }; - - return ( -
    -
    - -
    -
    - -
    - - setExpand(!expand)} - ref={menuElementRef} - > - {children} - -
    - ); + const triggerElementRef = useRef(null); + const [expand, setExpand] = useState(false); + const menuElementRef = useRef(null); + + const handleExpand = (event) => { + // This is not ideal for allowing you to have more than + // one trigger for the same content but it simulates the + // advantages of controlling `DropDown.Menu`. + triggerElementRef.current = event.target; + + setExpand(!expand); + }; + + return ( +
    +
    + +
    +
    + +
    + + setExpand(!expand)} + ref={menuElementRef} + > + {children} + +
    + ); }; ``` @@ -315,60 +307,60 @@ import Button from '@clayui/button'; import React from 'react'; const items = [ - { - children: [ - {id: 2, name: 'Apple'}, - {id: 3, name: 'Banana'}, - {id: 4, name: 'Mangos'}, - ], - id: 1, - name: 'Fruit', - }, - { - children: [ - {id: 6, name: 'Potatoes'}, - {id: 7, name: 'Tomatoes'}, - {id: 8, name: 'Onions'}, - ], - id: 5, - name: 'Vegetable', - }, + { + children: [ + {id: 2, name: 'Apple'}, + {id: 3, name: 'Banana'}, + {id: 4, name: 'Mangos'}, + ], + id: 1, + name: 'Fruit', + }, + { + children: [ + {id: 6, name: 'Potatoes'}, + {id: 7, name: 'Tomatoes'}, + {id: 8, name: 'Onions'}, + ], + id: 5, + name: 'Vegetable', + }, ]; export default function App() { - return ( - -
    - Select} - triggerIcon="caret-bottom" - > - - - {(item) => ( - - {(item) => ( - { - // logic stuff... - }} - > - {item.name} - - )} - - )} - - -
    -     - ); + return ( + +
    + Select} + triggerIcon="caret-bottom" + > + + + {(item) => ( + + {(item) => ( + { + // logic stuff... + }} + > + {item.name} + + )} + + )} + + +
    +     + ); } ``` @@ -384,21 +376,21 @@ To render a cascading menu it is necessary to set the `type` of the item to `con ```js const items = [ - {label: 'Folder'}, - {type: 'divider'}, - { - items: [ - {label: 'Basic Document'}, - {label: 'Contract'}, - {label: 'Marketing Banner'}, - {label: 'Spreadsheet'}, - {label: 'Presentation'}, - ], - label: 'Document', - type: 'contextual', - }, - {label: 'Shortcut'}, - {label: 'Repository'}, + {label: 'Folder'}, + {type: 'divider'}, + { + items: [ + {label: 'Basic Document'}, + {label: 'Contract'}, + {label: 'Marketing Banner'}, + {label: 'Spreadsheet'}, + {label: 'Presentation'}, + ], + label: 'Document', + type: 'contextual', + }, + {label: 'Shortcut'}, + {label: 'Repository'}, ]; ``` @@ -413,34 +405,30 @@ import Button from '@clayui/button'; import React from 'react'; export default function App() { - return ( - -
    - alert('test'), title: 'Alert!'}, - {type: 'divider'}, - {child: 'x0a4', title: 'Subnav'}, - ], - x0a4: [ - {href: '#', title: '2nd hash link'}, - {child: 'x0a5', title: 'Subnav'}, - ], - x0a5: [ - {title: 'The'}, - {type: 'divider'}, - {title: 'End'}, - ], - }} - trigger={} - /> -
    -     - ); + return ( + +
    + alert('test'), title: 'Alert!'}, + {type: 'divider'}, + {child: 'x0a4', title: 'Subnav'}, + ], + x0a4: [ + {href: '#', title: '2nd hash link'}, + {child: 'x0a5', title: 'Subnav'}, + ], + x0a5: [{title: 'The'}, {type: 'divider'}, {title: 'End'}], + }} + trigger={} + /> +
    +     + ); } ``` @@ -448,7 +436,7 @@ The way the Drilldown component links the menus is done via reference, the menu ```js const menus = { - of23: [{title: 'First'}], + of23: [{title: 'First'}], }; ``` @@ -456,8 +444,8 @@ From the `id` you are able to link to another menu using the `child` property. ```js const menus = { - of23: [{title: 'First', child: 'of09'}], - of09: [{title: 'Three'}], + of23: [{title: 'First', child: 'of09'}], + of09: [{title: 'Three'}], }; ``` @@ -466,20 +454,16 @@ using an item that has this shape `{type: 'divider'}`. ```js const menus = { - of23: [ - {title: 'First', child: 'of09'}, - {type: 'divider'}, - {title: 'Second'}, - ], - of09: [{title: 'Three'}], + of23: [{title: 'First', child: 'of09'}, {type: 'divider'}, {title: 'Second'}], + of09: [{title: 'Three'}], }; ```
    - An important thing to have in mind, is that the `DropDownWithDrilldown` - component, will render its menus in the order that they are specified. This - means that if you specify the menus in the wrong order, the menu animation - will not behave correctly. + An important thing to have in mind, is that the `DropDownWithDrilldown` + component, will render its menus in the order that they are specified. This + means that if you specify the menus in the wrong order, the menu animation + will not behave correctly.
    ## Caveats diff --git a/packages/clay-drop-down/docs/drop-down/markup.mdx b/packages/clay-drop-down/docs/drop-down/markup.mdx index d4997f36cf..fcef12ef2f 100644 --- a/packages/clay-drop-down/docs/drop-down/markup.mdx +++ b/packages/clay-drop-down/docs/drop-down/markup.mdx @@ -7,12 +7,11 @@ packageUse: "import DropDown from '@clayui/drop-down';" ---
    - This page uses Bootstrap's dropdown plugin which requires JQuery. Liferay - 7.4 no longer includes JQuery by default. We have included a standalone - dropdown plugin in 7.4, just replace the attribute{' '} - data-toggle="dropdown" with{' '} - data-toggle="liferay-dropdown" on the{' '} - dropdown-toggle. + This page uses Bootstrap's dropdown plugin which requires JQuery. Liferay 7.4 + no longer includes JQuery by default. We have included a standalone dropdown + plugin in 7.4, just replace the attribute data-toggle="dropdown"{' '} + with data-toggle="liferay-dropdown" on the{' '} + dropdown-toggle.
    ## Variations @@ -22,46 +21,42 @@ packageUse: "import DropDown from '@clayui/drop-down';" The default dropdown is a panel that does not support scrolling of the content inside it. Use this type when the number of options you want to offer is short or the panel is big enough to contain all the elements you want to use. ```html ``` @@ -70,270 +65,232 @@ The default dropdown is a panel that does not support scrolling of the content i Use `.dropdown-wide` with `.dropdown` to make the dropdown menu big. The default width is 500px.
    - +
    ```html
    -
    -
    -
    - - -
    - -
    - -
    -
    -
    +
    +
    +
    + + +
    + +
    + +
    +
    +
    ``` @@ -342,346 +299,306 @@ Use `.dropdown-wide` with `.dropdown` to make the dropdown menu big. The default Use `.dropdown-full` to create a dropdown menu as wide as its relative parent.
    - +
    ```html
    - +
    ``` ### Dropdown Menu Width Full
    - This is a separate component from `.dropdown-full`, use one or the other. + This is a separate component from `.dropdown-full`, use one or the other.
    The modifier class `dropdown-menu-width-full` on `dropdown-menu` makes the menu expand the full width of the page. This should be used with the Clay Drop Down plugin which renders the `dropdown-menu` as a direct child of the `body` element. ```html ``` ### Dropdown Menu Width Sm
    - This is a separate component from `.dropdown-wide`, use one or the other. + This is a separate component from `.dropdown-wide`, use one or the other.
    The modifier class `dropdown-menu-width-sm` on `dropdown-menu` makes the menu 500px wide. The `dropdown-menu` becomes 100% wide at screen sizes 767px and below. This should be used with the Clay Drop Down plugin which renders the `dropdown-menu` as a direct child of the `body` element.
    -
    - -
    +
    + +
    ```html ``` @@ -690,47 +607,45 @@ The modifier class `dropdown-menu-width-sm` on `dropdown-menu` makes the menu 50 The modifier class `dropdown-menu-width-shrink` on `dropdown-menu` makes the menu only be as wide as the text inside and maxes out at 240px wide. This forces `dropdown-item` text to be on one line.
    -
    - -
    +
    + +
    ```html ``` @@ -740,18 +655,16 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m ```html ``` @@ -760,52 +673,52 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m ### Dividers
    - +
    ```html ``` @@ -814,457 +727,426 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m #### Checkbox or Radio
    -
    -
    -
      -
    • Filter by
      • -
    • -
      -
      - -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      • -
    -
    -
    -
      -
    • Order by
      • -
    • -
      -
      - -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      • -
    -
    -
    +
    +
    +
      +
    • Filter by
      • +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
      • +
    +
    +
    +
      +
    • Order by
      • +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
      • +
    +
    +
    ```html
      -
    • Filter by
      • -
    • -
      -
      - -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      • +
    • Filter by
      • +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
      -
    • Order by
      • -
    • -
      -
      - -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      • -
    • -
      -
      - -
      -
      -
      • +
    • Order by
      • +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
    ``` #### Search
    -
    -
      -
    • -
      -
      - - - - -
      -
      -
      • -
    • Filter by
      • -
    • -
      -
      - -
      -
      -
      • -
    -
    +
    +
      +
    • +
      +
      + + + + +
      +
      +
      • +
    • Filter by
      • +
    • +
      +
      + +
      +
      +
      • +
    +
    ```html
      -
    • -
      -
      - - - - -
      -
      -
      • -
    • Filter by
      • -
    • -
      -
      - -
      -
      -
      • +
    • +
      +
      + + + + +
      +
      +
      • +
    • Filter by
      • +
    • +
      +
      + +
      +
      +
    ``` #### Form Groups
    -
    - -
    +
    + +
    ```html
      -
    • - - -
      • -
    • Form Section
      • -
    • -
      - - -
      -
      • -
    • -
      - - -
      -
      - - -
      -
      • -
    • Order by
      • -
    • Author
      • -
    • - Title Entry -
      • +
    • + + +
      • +
    • Form Section
      • +
    • +
      + + +
      +
      • +
    • +
      + + +
      +
      + + +
      +
      • +
    • Order by
      • +
    • Author
      • +
    • + Title Entry +
    ``` @@ -1273,392 +1155,390 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m #### Start ```html ``` #### End
    -
    - -
    +
    + +
    ```html ``` #### Start and End ```html ``` @@ -1667,430 +1547,362 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m Make content expand to fill remaining space in a `dropdown-item` or create equally spaced content with a nested `.autofit-row`, `.autofit-col`, `.autofit-col-shrink`, and `.autofit-col-expand`. ```html ``` ### Keyboard Shortcuts
    -
    - -
    +
    + +
    ```html ``` @@ -2099,138 +1911,136 @@ Make content expand to fill remaining space in a `dropdown-item` or create equal Nest `
    ` inside a `.dropdown-menu` list item to create a scrollable dropdown. The maximum height is 200px on screen sizes 768px and above, on screen sizes 767px and below the overflow is handled by `.dropdown-menu`. ```html ``` @@ -2241,172 +2051,172 @@ A monospaced `dropdown-toggle` for a dropdown containing several actions, add `d ### Anchors ```html ``` ### Buttons ```html ``` @@ -2417,154 +2227,154 @@ A monospaced `dropdown-toggle` for a dropdown containing several actions, add `d Align a dropdown menu on the top or bottom side with classes `dropdown-menu`, `dropdown-menu-right`, `dropdown-menu-top`, or `dropdown-menu-top-right`.
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    ```html @@ -2685,198 +2495,186 @@ Align a dropdown menu on the top or bottom side with classes `dropdown-menu`, `d Add the `dropdown-menu-right-side`, `dropdown-menu-left-side`, `dropdown-menu-right-side-bottom`, or `dropdown-menu-left-side-bottom` class to a dropdown menu to align it with the right side, left side, bottom-right side, or bottom-left side of the dropdown menu trigger, respectively:
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    ```html @@ -3011,152 +2809,146 @@ Add the `dropdown-menu-right-side`, `dropdown-menu-left-side`, `dropdown-menu-ri You can also center the dropdown menu to its trigger with these four helper classes: `dropdown-menu-center`, `dropdown-menu-top-center`, `dropdown-menu-left-side-middle`, or `dropdown-menu-right-side-middle`.
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    ```html
    - - + +
    - - + +
    ``` @@ -3165,131 +2957,127 @@ You can also center the dropdown menu to its trigger with these four helper clas To center the dropdown menu in browsers that don't support CSS transforms, set a negative `margin-left` equal to the width of the `dropdown-menu` divided by two. To vertically align left-side and right-side dropdown-menus, set a negative `margin-top` equal to the height of the dropdown-menu divided by two.
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    ```html
    - - + +
    - - + +
    ``` diff --git a/packages/clay-empty-state/docs/empty-state.mdx b/packages/clay-empty-state/docs/empty-state.mdx index a555a226e4..c499f83303 100644 --- a/packages/clay-empty-state/docs/empty-state.mdx +++ b/packages/clay-empty-state/docs/empty-state.mdx @@ -19,15 +19,15 @@ import Button from '@clayui/button'; import React from 'react'; export default function App() { - return ( - -
    - - - -
    -     - ); + return ( + +
    + + + +
    +     + ); } ``` @@ -41,19 +41,19 @@ import EmptyState from '@clayui/empty-state'; import React from 'react'; export default function App() { - return ( - -
    - -
    -     - ); + return ( + +
    + +
    +     + ); } ``` @@ -66,8 +66,8 @@ The property `imgSrcReducedMotion` is used to provide an alternate image if a us There is an accompanying property, `imgPropsReducedMotion`, where specific properties can be passed to the reduced motion `img` tag. If it is not defined, it uses the properties defined in `imgProps`.
    - To see the system's reduce motion setting in action, refer to the example in - the With Animation section. + To see the system's reduce motion setting in action, refer to the example in + the With Animation section.
    ```jsx preview @@ -76,18 +76,18 @@ import EmptyState from '@clayui/empty-state'; import React from 'react'; export default function App() { - return ( - -
    - -
    -     - ); + return ( + +
    + +
    +     + ); } ``` diff --git a/packages/clay-empty-state/docs/empty-state/markup.mdx b/packages/clay-empty-state/docs/empty-state/markup.mdx index d0d8be2af9..de5aa84fff 100644 --- a/packages/clay-empty-state/docs/empty-state/markup.mdx +++ b/packages/clay-empty-state/docs/empty-state/markup.mdx @@ -7,231 +7,227 @@ packageUse: "import EmptyState from '@clayui/empty-state';" ---
    - The usage of animated GIFs are deprecated. + The usage of animated GIFs are deprecated.
    ## Without Animation
    -
    -
    - - No results found - -
    -
    - Sorry, there are no results found -
    -
    - -
    -
    +
    +
    + + No results found + +
    +
    Sorry, there are no results found
    +
    + +
    +
    ```html
    -
    - - No results found - -
    -
    Sorry, there are no results found
    -
    - -
    +
    + + No results found + +
    +
    Sorry, there are no results found
    +
    + +
    ``` ## Empty State
    -
    -
    -
    - empty-state-image -
    -
    -
    - - No results found - -
    -
    - Sorry, there are no results found -
    -
    - -
    -
    +
    +
    +
    + empty-state-image +
    +
    +
    + + No results found + +
    +
    Sorry, there are no results found
    +
    + +
    +
    ```html
    -
    -
    - empty-state-image -
    -
    -
    - No results found -
    -
    Sorry, there are no results found
    -
    - -
    +
    +
    + empty-state-image +
    +
    +
    + No results found +
    +
    Sorry, there are no results found
    +
    + +
    ``` ## Search State
    -
    -
    -
    - empty-state-image -
    -
    -
    - - No content yet - -
    -
    - This is a description of what the button will allow you to do -
    -
    +
    +
    +
    + empty-state-image +
    +
    +
    + + No content yet + +
    +
    + This is a description of what the button will allow you to do +
    +
    ```html
    -
    -
    - empty-state-image -
    -
    -
    - - No content yet - -
    -
    - This is a description of what the button will allow you to do -
    +
    +
    + empty-state-image +
    +
    +
    + + No content yet + +
    +
    + This is a description of what the button will allow you to do +
    ``` ## Success State
    -
    -
    -
    - empty-state-image -
    -
    -
    - - Hurray - -
    -
    - You don't have more notifications to review -
    -
    +
    +
    +
    + empty-state-image +
    +
    +
    + + Hurray + +
    +
    + You don't have more notifications to review +
    +
    ```html
    -
    -
    - empty-state-image -
    -
    -
    - Hurray -
    -
    - You don't have more notifications to review -
    +
    +
    + empty-state-image +
    +
    +
    + Hurray +
    +
    + You don't have more notifications to review +
    ``` ## With imageProps
    -
    -
    -
    - Alternative Text -
    -
    -
    - - Hurray - -
    -
    - You don't have more notifications to review -
    -
    +
    +
    +
    + Alternative Text +
    +
    +
    + + Hurray + +
    +
    + You don't have more notifications to review +
    +
    ```html
    -
    -
    - Alternative Text -
    -
    -
    - Hurray -
    -
    - You don't have more notifications to review -
    +
    +
    + Alternative Text +
    +
    +
    + Hurray +
    +
    + You don't have more notifications to review +
    ``` diff --git a/packages/clay-form/docs/checkbox.mdx b/packages/clay-form/docs/checkbox.mdx index 2b8bbed0ad..646024a3ad 100644 --- a/packages/clay-form/docs/checkbox.mdx +++ b/packages/clay-form/docs/checkbox.mdx @@ -18,18 +18,18 @@ import {ClayCheckbox} from '@clayui/form'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(false); - - return ( - -
    - setValue((val) => !val)} - /> -
    -     - ); + const [value, setValue] = useState(false); + + return ( + +
    + setValue((val) => !val)} + /> +
    +     + ); } ``` @@ -45,24 +45,24 @@ import {ClayCheckbox} from '@clayui/form'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(false); - - const data = { - id: 'test', - }; - - return ( - -
    - setValue((val) => !val)} - /> -
    -     - ); + const [value, setValue] = useState(false); + + const data = { + id: 'test', + }; + + return ( + +
    + setValue((val) => !val)} + /> +
    +     + ); } ``` @@ -76,20 +76,20 @@ import {ClayCheckbox} from '@clayui/form'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(false); - - return ( - -
    - setValue((val) => !val)} - label="Option 1" - /> -
    -     - ); + const [value, setValue] = useState(false); + + return ( + +
    + setValue((val) => !val)} + label="Option 1" + /> +
    +     + ); } ``` @@ -103,37 +103,37 @@ import {ClayCheckbox} from '@clayui/form'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(false); - - return ( - -
    - <> - setValue((val) => !val)} - label="Option 1" - inline - /> - setValue((val) => !val)} - label="Option 2" - inline - /> - setValue((val) => !val)} - label="Option 3" - inline - /> - -
    -     - ); + const [value, setValue] = useState(false); + + return ( + +
    + <> + setValue((val) => !val)} + label="Option 1" + inline + /> + setValue((val) => !val)} + label="Option 2" + inline + /> + setValue((val) => !val)} + label="Option 3" + inline + /> + +
    +     + ); } ``` @@ -147,19 +147,19 @@ import {ClayCheckbox} from '@clayui/form'; import React, {useState} from 'react'; export default function App() { - const [value, setValue] = useState(false); - - return ( - -
    - setValue((val) => !val)} - indeterminate - /> -
    -     - ); + const [value, setValue] = useState(false); + + return ( + +
    + setValue((val) => !val)} + indeterminate + /> +
    +     + ); } ``` diff --git a/packages/clay-form/docs/checkbox/markup.mdx b/packages/clay-form/docs/checkbox/markup.mdx index 08a328a5d0..743b6c26b8 100644 --- a/packages/clay-form/docs/checkbox/markup.mdx +++ b/packages/clay-form/docs/checkbox/markup.mdx @@ -8,9 +8,9 @@ storybookPath: 'design-system-components-checkbox' ---
    - Don't forget to check - [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#checkbox) accessibility - pratices for checkboxes when writting your markup. + Don't forget to check + [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#checkbox) accessibility + pratices for checkboxes when writting your markup.
    Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. @@ -23,138 +23,138 @@ By default, any number of checkboxes and radios that are immediate sibling will ### Checkboxes
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    ```html
    - - + +
    - - + +
    ``` ### Radios
    -
    - - -
    -
    - - -
    -
    - - -
    +
    + + +
    +
    + + +
    +
    + + +
    ```html
    - - + +
    - - + +
    - - + +
    ``` @@ -165,112 +165,112 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl ### Checkbox
    -
    - -
    -
    - -
    +
    + +
    +
    + +
    ```html
    - +
    - +
    ``` ### Radio
    -
    - -
    -
    - -
    +
    + +
    +
    + +
    ```html
    - +
    - +
    ``` @@ -279,70 +279,70 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl Disable checkboxes or radios by adding a `disabled` prop.
    -
    - -
    -
    - -
    +
    + +
    +
    + +
    ```html
    - +
    - +
    ``` @@ -351,48 +351,48 @@ Disable checkboxes or radios by adding a `disabled` prop. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
    -
    - -
    -
    - -
    +
    + +
    +
    + +
    ```html
    - +
    - +
    ``` @@ -404,18 +404,14 @@ It is packaged in a classless `