From cb662af648d5d3a3d98464654dbb1059f0d09c75 Mon Sep 17 00:00:00 2001 From: Will Shown Date: Thu, 2 Jun 2022 16:23:03 -0700 Subject: [PATCH 01/44] Add cornerActions to Sidebar. Create stories for all 3 variants. --- .eslintrc.js | 2 +- packages/react/src/inlines/Icon/Icon.tsx | 3 +- packages/react/src/inputs/Button/Button.tsx | 29 ++- .../surfaceDimensions.ts} | 1 + packages/react/src/props/inputs.ts | 1 + .../src/surfaces/Sidebar/Sidebar.stories.mdx | 171 +++++++++++++++++ .../react/src/surfaces/Sidebar/Sidebar.tsx | 173 +++++++++++++----- packages/react/src/surfaces/Sidebar/index.ts | 2 - .../src/surfaces/Topbar/Topbar.stories.mdx | 2 +- packages/react/src/surfaces/Topbar/Topbar.tsx | 4 +- packages/react/src/surfaces/Topbar/index.ts | 2 - .../react/src/surfaces/Topbar/topbarHeight.ts | 1 - packages/react/src/surfaces/index.ts | 4 +- packages/react/src/views/View/View.tsx | 3 +- packages/schemas/types/surfaces/Sidebar.d.ts | 3 +- 15 files changed, 335 insertions(+), 66 deletions(-) rename packages/react/src/{surfaces/Sidebar/sidebarWidth.ts => lib/surfaceDimensions.ts} (50%) delete mode 100644 packages/react/src/surfaces/Sidebar/index.ts delete mode 100644 packages/react/src/surfaces/Topbar/index.ts delete mode 100644 packages/react/src/surfaces/Topbar/topbarHeight.ts diff --git a/.eslintrc.js b/.eslintrc.js index c9f06c5a..1f1b90f5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -122,7 +122,7 @@ const eslintrc = { 'lodash/import-scope': ['warn', 'method'], 'arrow-body-style': 'warn', // "arrow-parens": ["warn", "as-needed"], // this conflicts with Prettier formatting - complexity: ['warn', 24], + complexity: ['warn', 25], curly: 'warn', 'constructor-super': 'warn', eqeqeq: ['warn', 'smart'], diff --git a/packages/react/src/inlines/Icon/Icon.tsx b/packages/react/src/inlines/Icon/Icon.tsx index 7af9508f..3c20819c 100644 --- a/packages/react/src/inlines/Icon/Icon.tsx +++ b/packages/react/src/inlines/Icon/Icon.tsx @@ -39,7 +39,7 @@ function spriteHref( } } -const iconToTextRatio = 1.25 +const iconToTextRatio = 1 const useIconStyles = makeStyles({ root: { @@ -47,6 +47,7 @@ const useIconStyles = makeStyles({ width: `${iconToTextRatio}em`, verticalAlign: 'text-bottom', fill: 'currentcolor', + flexShrink: 0, }, }) diff --git a/packages/react/src/inputs/Button/Button.tsx b/packages/react/src/inputs/Button/Button.tsx index 38f181fc..ec5c8afd 100644 --- a/packages/react/src/inputs/Button/Button.tsx +++ b/packages/react/src/inputs/Button/Button.tsx @@ -54,6 +54,17 @@ const useButtonStyles = makeStyles({ paddingBlockEnd: rem(4), paddingBottom: rem(4), }, + shrink: { + flexShrink: 1, + }, + 'label--shrink': { + display: 'block', + flexShrink: 1, + minWidth: 0, + overflowX: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, }) export const Button = ({ @@ -98,6 +109,9 @@ export const Button = ({ const derivedIconSize = iconSize || derivedSize === 'small' ? 16 : derivedSize === 'large' ? 32 : 24 + const shrink = contextualVariant === 'nav' + const wrap = contextualVariant === 'sidebar' + const buttonElement = ( - {iconOnly ? null : label} + {iconOnly ? null : shrink ? ( + {label} + ) : ( + label + )} ) diff --git a/packages/react/src/surfaces/Sidebar/sidebarWidth.ts b/packages/react/src/lib/surfaceDimensions.ts similarity index 50% rename from packages/react/src/surfaces/Sidebar/sidebarWidth.ts rename to packages/react/src/lib/surfaceDimensions.ts index f1f58843..d5ccf29b 100644 --- a/packages/react/src/surfaces/Sidebar/sidebarWidth.ts +++ b/packages/react/src/lib/surfaceDimensions.ts @@ -1 +1,2 @@ export const sidebarWidth = 228 +export const topbarHeight = 48 diff --git a/packages/react/src/props/inputs.ts b/packages/react/src/props/inputs.ts index 171e3c8f..51f9216b 100644 --- a/packages/react/src/props/inputs.ts +++ b/packages/react/src/props/inputs.ts @@ -47,6 +47,7 @@ export type ShortInputContextualVariant = | 'toolbar-item--needs-update' | 'toolbar-item--hidden' | 'sidebar' + | 'nav' export interface ShortInputContextualProps { contextualVariant?: ShortInputContextualVariant diff --git a/packages/react/src/surfaces/Sidebar/Sidebar.stories.mdx b/packages/react/src/surfaces/Sidebar/Sidebar.stories.mdx index 5013709d..42db5efa 100644 --- a/packages/react/src/surfaces/Sidebar/Sidebar.stories.mdx +++ b/packages/react/src/surfaces/Sidebar/Sidebar.stories.mdx @@ -42,6 +42,46 @@ export const mainArgs = seed(1234) || { })), } +export const topbarArgs = { + near: { + menu: [ + { + action: { + actionId: 'add', + label: 'Add', + icon: 'add', + }, + }, + { + action: { + actionId: 'delete', + label: 'Delete', + icon: 'delete', + }, + }, + ], + }, + far: { + menu: [ + { + action: { + actionId: 'publish', + label: 'Publish', + variant: 'primary', + icon: 'send', + }, + }, + { + action: { + actionId: 'preview', + label: 'Preview', + icon: 'eye', + }, + }, + ], + }, +} + # Sidebar The Sidebar is unique to a view (so `sidebar` is one of `View`’s props). It @@ -80,3 +120,134 @@ narrow to display the Sidebar next to the Main content. + +The Sidebar is also able to host a few variations on affordances for navigating +back/up. + +- If one action is given in `cornerActions`, Sidebar renders button for the action with a back-facing arrow: + + + ({ + actionId: `sidebar-item__${i}`, + label: fakeTitle(fake), + menu: range(6).map((s) => ({ + action: { + actionId: `sidebar-action__${i}-${s}`, + label: fakeTitle(fake), + }, + })), + })), + }, + main: mainArgs, + }} + > + {seed(1234) || SidebarTemplate.bind({})} + + + +- If two actions are given, Sidebar renders an icon-only button for the first action and a no-icon button for the second action with a chevron between them and at the end: + + + ({ + actionId: `sidebar-item__${i}`, + label: fakeTitle(fake), + menu: range(6).map((s) => ({ + action: { + actionId: `sidebar-action__${i}-${s}`, + label: fakeTitle(fake), + }, + })), + })), + }, + main: mainArgs, + }} + > + {seed(1234) || SidebarTemplate.bind({})} + + + +- If more than two actions are given, Sidebar renders an overflow button that invokes a menu with all but the last action, and a no-icon button for the last action with a chevron between that and the overflow button and at the end: + + + ({ + actionId: `sidebar-item__${i}`, + label: fakeTitle(fake), + menu: range(6).map((s) => ({ + action: { + actionId: `sidebar-action__${i}-${s}`, + label: fakeTitle(fake), + }, + })), + })), + }, + main: mainArgs, + }} + > + {seed(1234) || SidebarTemplate.bind({})} + + diff --git a/packages/react/src/surfaces/Sidebar/Sidebar.tsx b/packages/react/src/surfaces/Sidebar/Sidebar.tsx index ed9d5c55..c5f2b820 100644 --- a/packages/react/src/surfaces/Sidebar/Sidebar.tsx +++ b/packages/react/src/surfaces/Sidebar/Sidebar.tsx @@ -15,8 +15,8 @@ import { } from '@fluentui/react-components' import { Heading } from '../../blocks' -import { InlineContent, InlineSequenceOrString } from '../../inlines' -import { Button, ButtonProps } from '../../inputs' +import { Icon, InlineContent, InlineSequenceOrString } from '../../inlines' +import { Button, ButtonProps, Overflow } from '../../inputs' import { key, rem, @@ -24,12 +24,13 @@ import { useCommonStyles, useFluentBlocksContext, } from '../../lib' +import { sidebarWidth, topbarHeight } from '../../lib/surfaceDimensions' import { ContextualViewStateProps, + MenuActionSequence, MenuItemSequence, SidebarState, } from '../../props' -import { sidebarWidth } from './sidebarWidth' export interface SidebarItemProps extends Omit { @@ -38,8 +39,9 @@ export interface SidebarItemProps } export interface SidebarProps - extends Omit, + extends Omit, ContextualViewStateProps { + cornerActions?: MenuActionSequence title: InlineSequenceOrString items: SidebarItemProps[] } @@ -69,10 +71,6 @@ const useSidebarStyles = makeStyles({ overflowY: 'auto', overflowX: 'hidden', height: '100%', - paddingBlockStart: rem(16), - paddingBlockEnd: rem(16), - paddingInlineStart: rem(16), - paddingInlineEnd: rem(15), borderInlineEndWidth: '1px', borderInlineEndStyle: 'solid', borderInlineEndColor: 'transparent', @@ -81,12 +79,31 @@ const useSidebarStyles = makeStyles({ borderInlineEndColor: 'var(--colorNeutralForeground1)', }, paddedContent: { + paddingBlockStart: rem(16), + paddingBlockEnd: rem(16), + paddingInlineStart: rem(16), + paddingInlineEnd: rem(15), + }, + paddedContentInner: { marginInlineEnd: rem(-16), marginInlineStart: rem(-16), }, + cornerActions: { + height: rem(topbarHeight - 15), + paddingBlockStart: rem(8), + paddingBlockEnd: rem(7), + paddingInlineStart: rem(4), + paddingInlineEnd: rem(8), + borderBlockEndWidth: '1px', + borderBlockEndStyle: 'solid', + borderBlockEndColor: 'var(--colorNeutralStroke1)', + display: 'flex', + alignItems: 'center', + }, }) export const Sidebar = ({ + cornerActions, title, items, defaultOpenItems, @@ -94,7 +111,7 @@ export const Sidebar = ({ }: SidebarProps) => { const sidebarStyles = useSidebarStyles() const commonStyles = useCommonStyles() - const { themeName } = useFluentBlocksContext() + const { themeName, translations } = useFluentBlocksContext() const labelId = key(title) return ( ) diff --git a/packages/react/src/surfaces/Sidebar/index.ts b/packages/react/src/surfaces/Sidebar/index.ts deleted file mode 100644 index 03b37198..00000000 --- a/packages/react/src/surfaces/Sidebar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Sidebar' -export * from './sidebarWidth' diff --git a/packages/react/src/surfaces/Topbar/Topbar.stories.mdx b/packages/react/src/surfaces/Topbar/Topbar.stories.mdx index b5446cd6..79447d70 100644 --- a/packages/react/src/surfaces/Topbar/Topbar.stories.mdx +++ b/packages/react/src/surfaces/Topbar/Topbar.stories.mdx @@ -111,7 +111,7 @@ will also add notifications to the far side of the Topbar. Date: Thu, 2 Jun 2022 17:00:39 -0700 Subject: [PATCH 02/44] Simplify stories. --- .../src/surfaces/Sidebar/Sidebar.stories.mdx | 49 ++----------------- .../react/src/surfaces/Sidebar/Sidebar.tsx | 2 +- .../src/surfaces/Topbar/Topbar.stories.mdx | 14 +++++- 3 files changed, 17 insertions(+), 48 deletions(-) diff --git a/packages/react/src/surfaces/Sidebar/Sidebar.stories.mdx b/packages/react/src/surfaces/Sidebar/Sidebar.stories.mdx index 42db5efa..bcf1ac15 100644 --- a/packages/react/src/surfaces/Sidebar/Sidebar.stories.mdx +++ b/packages/react/src/surfaces/Sidebar/Sidebar.stories.mdx @@ -42,46 +42,6 @@ export const mainArgs = seed(1234) || { })), } -export const topbarArgs = { - near: { - menu: [ - { - action: { - actionId: 'add', - label: 'Add', - icon: 'add', - }, - }, - { - action: { - actionId: 'delete', - label: 'Delete', - icon: 'delete', - }, - }, - ], - }, - far: { - menu: [ - { - action: { - actionId: 'publish', - label: 'Publish', - variant: 'primary', - icon: 'send', - }, - }, - { - action: { - actionId: 'preview', - label: 'Preview', - icon: 'eye', - }, - }, - ], - }, -} - # Sidebar The Sidebar is unique to a view (so `sidebar` is one of `View`’s props). It @@ -128,11 +88,10 @@ back/up. ({ actionId: `sidebar-item__${i}`, label: fakeTitle(fake), From e019f3cf37063775bb017aa54382807ad965c259 Mon Sep 17 00:00:00 2001 From: Will Shown Date: Thu, 2 Jun 2022 17:19:42 -0700 Subject: [PATCH 03/44] Adjust nav menu invoker label. --- packages/react/src/lib/translations/en-US.ts | 1 + packages/react/src/surfaces/Sidebar/Sidebar.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react/src/lib/translations/en-US.ts b/packages/react/src/lib/translations/en-US.ts index 13bb5df3..de520b80 100644 --- a/packages/react/src/lib/translations/en-US.ts +++ b/packages/react/src/lib/translations/en-US.ts @@ -2,6 +2,7 @@ export default { dir: 'ltr' as 'ltr', locale: 'en-US', more: 'More options', + 'more--nav': 'More navigation options', thead: 'Column titles', overflow: 'Options', selection: 'Selected', diff --git a/packages/react/src/surfaces/Sidebar/Sidebar.tsx b/packages/react/src/surfaces/Sidebar/Sidebar.tsx index 9cd47cc8..37a3eecb 100644 --- a/packages/react/src/surfaces/Sidebar/Sidebar.tsx +++ b/packages/react/src/surfaces/Sidebar/Sidebar.tsx @@ -175,6 +175,7 @@ export const Sidebar = ({ <> ({ action }))} From 56c21b0e037da4875382e89aa125437b3b9099b6 Mon Sep 17 00:00:00 2001 From: Will Shown Date: Thu, 2 Jun 2022 17:29:45 -0700 Subject: [PATCH 04/44] Add change --- .changeset/shy-bags-share.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/shy-bags-share.md diff --git a/.changeset/shy-bags-share.md b/.changeset/shy-bags-share.md new file mode 100644 index 00000000..c91c4a38 --- /dev/null +++ b/.changeset/shy-bags-share.md @@ -0,0 +1,6 @@ +--- +'@fluent-blocks/react': minor +'@fluent-blocks/schemas': minor +--- + +Add cornerActions to Sidebar, which can be used to add upward/backward navigation to the sidebar. From 6b4e24cae1a4d73e52762d7f9a16e36b402756f2 Mon Sep 17 00:00:00 2001 From: Will Shown Date: Thu, 2 Jun 2022 17:31:37 -0700 Subject: [PATCH 05/44] Fix Sidebar menu item Button padding. --- packages/react/src/inputs/Button/Button.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react/src/inputs/Button/Button.tsx b/packages/react/src/inputs/Button/Button.tsx index ec5c8afd..c9c7142c 100644 --- a/packages/react/src/inputs/Button/Button.tsx +++ b/packages/react/src/inputs/Button/Button.tsx @@ -52,7 +52,9 @@ const useButtonStyles = makeStyles({ whiteSpace: 'normal', paddingBlockStart: rem(4), paddingBlockEnd: rem(4), + // These are added to override rules applied by @fluentui paddingBottom: rem(4), + paddingTop: rem(4), }, shrink: { flexShrink: 1, From e788164d65eed9236cce01de2dcf954079db63ee Mon Sep 17 00:00:00 2001 From: Will Shown Date: Tue, 7 Jun 2022 16:24:34 -0700 Subject: [PATCH 06/44] Include build script from old prototype. --- packages/icons/basic-icons.json | 1 + packages/icons/package.json | 7 +- packages/icons/scripts/build.js | 99 ++++++++ pnpm-lock.yaml | 396 ++++---------------------------- 4 files changed, 145 insertions(+), 358 deletions(-) create mode 100755 packages/icons/scripts/build.js diff --git a/packages/icons/basic-icons.json b/packages/icons/basic-icons.json index fd2d1b38..4125c535 100644 --- a/packages/icons/basic-icons.json +++ b/packages/icons/basic-icons.json @@ -66,6 +66,7 @@ "grid": {}, "heart": {}, "home": {}, + "home_more": {}, "image": {}, "info": {}, "key_command": {}, diff --git a/packages/icons/package.json b/packages/icons/package.json index 9b37184b..a0fa4327 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -14,10 +14,13 @@ ], "scripts": { "prepublishOnly": "pnpm bundle", - "bundle": "touch ./basic-icons.svg && fluentui-svg-icon-sprites bundle -i ./basic-icons.json -s ./node_modules/fluentui-svg-icon-sprites/icons -o ./basic-icons.svg", + "bundle": "touch ./basic-icons.svg && node ./scripts/build.js bundle -i ./basic-icons.json -s ./node_modules/@fluentui/svg-icons/icons -o ./basic-icons.svg", "postinstall": "node ./scripts/postinstall.js" }, "devDependencies": { - "fluentui-svg-icon-sprites": "1.1.167" + "@fluentui/svg-icons": "^1.1.172", + "glob": "^8.0.3", + "svgstore": "^3.0.1", + "yargs": "^17.5.1" } } diff --git a/packages/icons/scripts/build.js b/packages/icons/scripts/build.js new file mode 100755 index 00000000..f7c2668a --- /dev/null +++ b/packages/icons/scripts/build.js @@ -0,0 +1,99 @@ +#!/usr/bin/env node + +const { readFile, writeFile, access, unlink } = require('fs/promises') +const { resolve, basename } = require('path') +const { promisify } = require('util') +const svgstore = require('svgstore') +const glob = promisify(require('glob')) + +const cwd = process.cwd() + +const argv = + // .option('c', { + // alias: 'concurrency', + // describe: 'The number of SVG assets to process concurrently when transforming all icons into individual sprites.', + // nargs: 1, + // default: '4' + // }) + require('yargs') + .usage('Usage: $0 [options]') + .help('h') + .alias('h', 'help') + .command('bundle', 'Bundle selected icons into a single sprite.') + // .command('all', 'Build all icons into one sprite each to use as a fallback.', all) + .option('i', { + alias: 'iconsfile', + describe: 'The icons manifest file to use when bundling a sprite.', + nargs: 1, + default: './icons.json', + }) + .option('s', { + alias: 'svgs', + describe: 'The directory containing the individual non-sprite SVG files.', + nargs: 1, + default: './icons/', + }) + .option('o', { + alias: 'out', + describe: 'The path and filename to save the sprite as.', + nargs: 1, + default: './icons.svg', + }).argv + +function globSection(values) { + return values.length > 1 ? `{${values.join(',')}}` : values[0] +} + +async function bundle() { + const manifest = await readFile(resolve(cwd, argv.iconsfile)).then(JSON.parse) + const out = resolve(cwd, argv.out) + + await access(out).then(function unlinkOut() { + return unlink(out) + }) + + const fallbackSizes = manifest.sizes ? globSection(manifest.sizes) : '*' + const fallbackStyles = manifest.styles ? globSection(manifest.styles) : '*' + + const sprites = svgstore() + + await Promise.all( + Object.keys(manifest.include).map(async function addIncludedAsset(id) { + const sizes = manifest.include[id].sizes + ? globSection(manifest.include[id].sizes) + : fallbackSizes + const styles = manifest.include[id].styles + ? globSection(manifest.include[id].styles) + : fallbackStyles + + const svgs = await glob( + resolve(cwd, argv.svgs, `${id}_${sizes}_${styles}.svg`) + ) + + return Promise.all( + svgs.map(async function addResolvedSvgs(svg) { + const id = basename(svg, '.svg') + const svgFile = await readFile(svg, 'utf8') + console.log('📥', id) + return sprites.add(id, svgFile) + }) + ) + }) + ) + + console.log('📦', argv.out) + + await writeFile(out, sprites.toString()) + + console.log('Done ✨') +} + +// async function all() { +// const concurrency = parseInt(argv.concurrency) +// } + +switch (argv._[0]) { + case 'bundle': + bundle() + break +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 945e67bb..69d1619f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -58,9 +58,15 @@ importers: packages/icons: specifiers: - fluentui-svg-icon-sprites: 1.1.167 + '@fluentui/svg-icons': ^1.1.172 + glob: ^8.0.3 + svgstore: ^3.0.1 + yargs: ^17.5.1 devDependencies: - fluentui-svg-icon-sprites: 1.1.167 + '@fluentui/svg-icons': 1.1.172 + glob: 8.0.3 + svgstore: 3.0.1 + yargs: 17.5.1 packages/react: specifiers: @@ -2587,6 +2593,10 @@ packages: react: 18.1.0 tslib: 2.4.0 + /@fluentui/svg-icons/1.1.172: + resolution: {integrity: sha512-j0qp8V2cLpyhM1UAQi8+TZIhW52DoU9nH4sqtTwTYBCzNKkghyyQb4djIQ5u+kAaMM6Ku3ZJ+wytU3nbc/Iu/g==} + dev: true + /@gar/promisify/1.1.3: resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==} dev: true @@ -4203,11 +4213,6 @@ packages: - supports-color dev: true - /@trysound/sax/0.2.0: - resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} - engines: {node: '>=10.13.0'} - dev: true - /@tsconfig/node10/1.0.8: resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==} dev: true @@ -5002,11 +5007,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /ansi-regex/4.1.1: - resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==} - engines: {node: '>=6'} - dev: true - /ansi-regex/5.0.1: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} @@ -5128,16 +5128,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /array-back/3.1.0: - resolution: {integrity: sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==} - engines: {node: '>=6'} - dev: true - - /array-back/4.0.2: - resolution: {integrity: sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg==} - engines: {node: '>=8'} - dev: true - /array-each/1.0.1: resolution: {integrity: sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==} engines: {node: '>=0.10.0'} @@ -6173,14 +6163,6 @@ packages: string-width: 5.1.2 dev: true - /cliui/5.0.0: - resolution: {integrity: sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==} - dependencies: - string-width: 3.1.0 - strip-ansi: 5.2.0 - wrap-ansi: 5.1.0 - dev: true - /cliui/6.0.0: resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==} dependencies: @@ -6278,26 +6260,6 @@ packages: resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==} dev: true - /command-line-args/5.2.1: - resolution: {integrity: sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==} - engines: {node: '>=4.0.0'} - dependencies: - array-back: 3.1.0 - find-replace: 3.0.0 - lodash.camelcase: 4.3.0 - typical: 4.0.0 - dev: true - - /command-line-usage/6.1.3: - resolution: {integrity: sha512-sH5ZSPr+7UStsloltmDh7Ce5fb8XPlHyoPzTpyyMuYCtervL65+ubVZ6Q61cFtFl62UyJlc8/JwERRbAFPUqgw==} - engines: {node: '>=8.0.0'} - dependencies: - array-back: 4.0.2 - chalk: 2.4.2 - table-layout: 1.0.2 - typical: 5.2.0 - dev: true - /commander/2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} requiresBuild: true @@ -6313,11 +6275,6 @@ packages: engines: {node: '>= 6'} dev: true - /commander/7.2.0: - resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} - engines: {node: '>= 10'} - dev: true - /commander/9.3.0: resolution: {integrity: sha512-hv95iU5uXPbK83mjrJKuZyFM/LBAoCV/XhVGkS5Je6tl7sxr6A0ITMw5WoRV46/UaJ46Nllm3Xt7IaJhXTIkzw==} engines: {node: ^12.20.0 || >=14} @@ -6604,14 +6561,6 @@ packages: nth-check: 2.1.1 dev: true - /css-tree/1.1.3: - resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} - engines: {node: '>=8.0.0'} - dependencies: - mdn-data: 2.0.14 - source-map: 0.6.1 - dev: true - /css-what/6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} @@ -6623,13 +6572,6 @@ packages: hasBin: true dev: true - /csso/4.2.0: - resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==} - engines: {node: '>=8.0.0'} - dependencies: - css-tree: 1.1.3 - dev: true - /csstype/2.6.20: resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==} dev: true @@ -6781,11 +6723,6 @@ packages: resolution: {integrity: sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=} dev: true - /deep-extend/0.6.0: - resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==} - engines: {node: '>=4.0.0'} - dev: true - /deep-is/0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} dev: true @@ -7058,10 +6995,6 @@ packages: minimalistic-crypto-utils: 1.0.1 dev: true - /emoji-regex/7.0.3: - resolution: {integrity: sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==} - dev: true - /emoji-regex/8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} dev: true @@ -7764,10 +7697,6 @@ packages: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} dev: true - /fast-diff/1.2.0: - resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==} - dev: true - /fast-glob/2.2.7: resolution: {integrity: sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==} engines: {node: '>=4.0.0'} @@ -7915,13 +7844,6 @@ packages: pkg-dir: 4.2.0 dev: true - /find-replace/3.0.0: - resolution: {integrity: sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==} - engines: {node: '>=4.0.0'} - dependencies: - array-back: 3.1.0 - dev: true - /find-up/1.1.2: resolution: {integrity: sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==} engines: {node: '>=0.10.0'} @@ -7985,22 +7907,6 @@ packages: resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==} dev: true - /fluentui-svg-icon-sprites/1.1.167: - resolution: {integrity: sha512-ipajKozh5bPguiRYaN6kh0VKNBvcqaEWwCXDGLwVP9E/WIga7ejOwCn4Cuo+z03HNbXf5PXJssJk8oF4YG+wDQ==} - engines: {node: '>=16.0.0 <17'} - hasBin: true - dependencies: - glob: 7.2.3 - renamer: 2.0.1 - replace: 1.2.1 - shx: 0.3.4 - svgo: 2.8.0 - svgstore: 3.0.1 - svgstore-cli: 2.0.1 - tiny-async-pool: 1.3.0 - yargs: 14.2.3 - dev: true - /flush-write-stream/1.1.1: resolution: {integrity: sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==} dependencies: @@ -8377,20 +8283,15 @@ packages: path-is-absolute: 1.0.1 dev: true - /global-modules/2.0.0: - resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==} - engines: {node: '>=6'} - dependencies: - global-prefix: 3.0.0 - dev: true - - /global-prefix/3.0.0: - resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==} - engines: {node: '>=6'} + /glob/8.0.3: + resolution: {integrity: sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==} + engines: {node: '>=12'} dependencies: - ini: 1.3.8 - kind-of: 6.0.3 - which: 1.3.1 + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 5.0.1 + once: 1.4.0 dev: true /global/4.4.0: @@ -8856,10 +8757,6 @@ packages: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} dev: true - /ini/1.3.8: - resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==} - dev: true - /inline-style-parser/0.1.1: resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==} dev: true @@ -8873,11 +8770,6 @@ packages: side-channel: 1.0.4 dev: true - /interpret/1.4.0: - resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==} - engines: {node: '>= 0.10'} - dev: true - /interpret/2.2.0: resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==} engines: {node: '>= 0.10'} @@ -9076,11 +8968,6 @@ packages: dev: true optional: true - /is-fullwidth-code-point/2.0.0: - resolution: {integrity: sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==} - engines: {node: '>=4'} - dev: true - /is-fullwidth-code-point/3.0.0: resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} engines: {node: '>=8'} @@ -9729,13 +9616,6 @@ packages: dev: true optional: true - /load-module/3.0.0: - resolution: {integrity: sha512-ZqprfrTx4vfH5+1mgpspPh5JYsNyA193NkMUdb3GwpmVqMczOh8cUDJgZBmEZVlSR42JBGYTUxlBAX9LHIBtIA==} - engines: {node: '>=10'} - dependencies: - array-back: 4.0.2 - dev: true - /load-yaml-file/0.2.0: resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==} engines: {node: '>=6'} @@ -9804,10 +9684,6 @@ packages: p-locate: 5.0.0 dev: true - /lodash.camelcase/4.3.0: - resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} - dev: true - /lodash.debounce/4.0.8: resolution: {integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168=} dev: true @@ -10029,10 +9905,6 @@ packages: resolution: {integrity: sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==} dev: true - /mdn-data/2.0.14: - resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==} - dev: true - /mdurl/1.0.1: resolution: {integrity: sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=} dev: true @@ -10211,12 +10083,6 @@ packages: resolution: {integrity: sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=} dev: true - /minimatch/3.0.4: - resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==} - dependencies: - brace-expansion: 1.1.11 - dev: true - /minimatch/3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: @@ -10509,13 +10375,6 @@ packages: resolution: {integrity: sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==} dev: true - /node-version-matches/2.0.1: - resolution: {integrity: sha512-oqk6+05FC0dNVY5NuXuhPEMq+m1b9ZjS9SIhVE9EjwCHZspnmjSO8npbKAEieinR8GeEgbecoQcYIvI/Kwcf6Q==} - engines: {node: '>=8'} - dependencies: - semver: 6.3.0 - dev: true - /normalize-package-data/2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: @@ -10712,7 +10571,7 @@ packages: dev: true /once/1.4.0: - resolution: {integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=} + resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: wrappy: 1.0.2 dev: true @@ -11310,12 +11169,6 @@ packages: engines: {node: '>= 0.8'} dev: true - /printj/1.3.1: - resolution: {integrity: sha512-GA3TdL8szPK4AQ2YnOe/b+Y1jUFwmmGMMK/qbY7VcE3Z7FU8JstbKiKRzO6CIiAKPhTO8m01NoQ0V5f3jc4OGg==} - engines: {node: '>=0.8'} - hasBin: true - dev: true - /prismjs/1.27.0: resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==} engines: {node: '>=6'} @@ -11755,13 +11608,6 @@ packages: picomatch: 2.3.1 dev: true - /rechoir/0.6.2: - resolution: {integrity: sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=} - engines: {node: '>= 0.10'} - dependencies: - resolve: 1.22.0 - dev: true - /redent/1.0.0: resolution: {integrity: sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=} engines: {node: '>=0.10.0'} @@ -11785,21 +11631,6 @@ packages: esprima: 4.0.1 dev: true - /reduce-flatten/2.0.0: - resolution: {integrity: sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==} - engines: {node: '>=6'} - dev: true - - /reduce-flatten/3.0.1: - resolution: {integrity: sha512-bYo+97BmUUOzg09XwfkwALt4PQH1M5L0wzKerBt6WLm3Fhdd43mMS89HiT1B9pJIqko/6lWx3OnV4J9f2Kqp5Q==} - engines: {node: '>=8'} - dev: true - - /reduce-unique/2.0.1: - resolution: {integrity: sha512-x4jH/8L1eyZGR785WY+ePtyMNhycl1N2XOLxhCbzZFaqF4AXjLzqSxa2UHgJ2ZVR/HHyPOvl1L7xRnW8ye5MdA==} - engines: {node: '>=6'} - dev: true - /refractor/3.6.0: resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==} dependencies: @@ -11951,27 +11782,6 @@ packages: resolution: {integrity: sha1-wkvOKig62tW8P1jg1IJJuSN52O8=} dev: true - /renamer/2.0.1: - resolution: {integrity: sha512-Cx4rMQx2sjuH8CNDbv50YMpkLaROVHros4owSzuLeiCbmZZTGeh6pZO7tkvJE7NT2ls8byBfBldNFLsoX7XUkg==} - engines: {node: '>=10'} - hasBin: true - dependencies: - array-back: 4.0.2 - chalk: 4.1.2 - command-line-args: 5.2.1 - command-line-usage: 6.1.3 - fast-diff: 1.2.0 - glob: 7.2.3 - global-modules: 2.0.0 - load-module: 3.0.0 - node-version-matches: 2.0.1 - printj: 1.3.1 - reduce-flatten: 3.0.1 - reduce-unique: 2.0.1 - stream-read-all: 3.0.1 - typical: 6.0.1 - dev: true - /renderkid/2.0.7: resolution: {integrity: sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==} dependencies: @@ -12000,18 +11810,8 @@ packages: dev: true optional: true - /replace/1.2.1: - resolution: {integrity: sha512-KZCBe/tPanwBlbjSMQby4l+zjSiFi3CLEP/6VLClnRYgJ46DZ5u9tmA6ceWeFS8coaUnU4ZdGNb/puUGMHNSRg==} - engines: {node: '>= 6'} - hasBin: true - dependencies: - chalk: 2.4.2 - minimatch: 3.0.4 - yargs: 15.4.1 - dev: true - /require-directory/2.1.1: - resolution: {integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I=} + resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} dev: true @@ -12372,25 +12172,6 @@ packages: engines: {node: '>=8'} dev: true - /shelljs/0.8.5: - resolution: {integrity: sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==} - engines: {node: '>=4'} - hasBin: true - dependencies: - glob: 7.2.3 - interpret: 1.4.0 - rechoir: 0.6.2 - dev: true - - /shx/0.3.4: - resolution: {integrity: sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==} - engines: {node: '>=6'} - hasBin: true - dependencies: - minimist: 1.2.6 - shelljs: 0.8.5 - dev: true - /side-channel/1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: @@ -12678,11 +12459,6 @@ packages: xtend: 4.0.2 dev: true - /stream-read-all/3.0.1: - resolution: {integrity: sha512-EWZT9XOceBPlVJRrYcykW8jyRSZYbkb/0ZK36uLEmoWVO5gxBOnntNTseNzfREsqxqdfEGQrD8SXQ3QWbBmq8A==} - engines: {node: '>=10'} - dev: true - /stream-shift/1.0.1: resolution: {integrity: sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==} dev: true @@ -12698,15 +12474,6 @@ packages: engines: {node: '>=0.6.19'} dev: true - /string-width/3.1.0: - resolution: {integrity: sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==} - engines: {node: '>=6'} - dependencies: - emoji-regex: 7.0.3 - is-fullwidth-code-point: 2.0.0 - strip-ansi: 5.2.0 - dev: true - /string-width/4.2.3: resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} engines: {node: '>=8'} @@ -12791,13 +12558,6 @@ packages: ansi-regex: 2.1.1 dev: true - /strip-ansi/5.2.0: - resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==} - engines: {node: '>=6'} - dependencies: - ansi-regex: 4.1.1 - dev: true - /strip-ansi/6.0.1: resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} engines: {node: '>=8'} @@ -12915,29 +12675,6 @@ packages: engines: {node: '>= 0.4'} dev: true - /svgo/2.8.0: - resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==} - engines: {node: '>=10.13.0'} - hasBin: true - dependencies: - '@trysound/sax': 0.2.0 - commander: 7.2.0 - css-select: 4.3.0 - css-tree: 1.1.3 - csso: 4.2.0 - picocolors: 1.0.0 - stable: 0.1.8 - dev: true - - /svgstore-cli/2.0.1: - resolution: {integrity: sha512-CnqgjG/eRoeNc4B064mDw8a2QN81SKgIifB+A5OGwVYi62hC4pZauuyIKk+9yYgk4+vA5Oxu6EzXrXmzhlxQhw==} - hasBin: true - dependencies: - glob: 7.2.3 - svgstore: 3.0.1 - yargs-parser: 20.2.9 - dev: true - /svgstore/3.0.1: resolution: {integrity: sha512-nL6WTxYnsVl3e0G/mwGEFSnPAWUrzIwHAPOwInD4QUuLDKxaKMnXduf0Ipw3m/g9AldPhp1Y8E/nkReFBukJrA==} engines: {node: '>= 12'} @@ -12959,16 +12696,6 @@ packages: resolution: {integrity: sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==} dev: true - /table-layout/1.0.2: - resolution: {integrity: sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==} - engines: {node: '>=8.0.0'} - dependencies: - array-back: 4.0.2 - deep-extend: 0.6.0 - typical: 5.2.0 - wordwrapjs: 4.0.1 - dev: true - /tabster/1.4.0: resolution: {integrity: sha512-Al7lJSJ4xT3hw4NfYE5/jhCvNeN2wonRyc87Y+J22XMVDvlS4Rc6ivsPxK0dYYGWmpucAg8tNAgctaAochAuWA==} dependencies: @@ -13134,12 +12861,6 @@ packages: resolution: {integrity: sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=} dev: true - /tiny-async-pool/1.3.0: - resolution: {integrity: sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA==} - dependencies: - semver: 5.7.1 - dev: true - /tmp/0.0.33: resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} engines: {node: '>=0.6.0'} @@ -13421,21 +13142,6 @@ packages: hasBin: true dev: true - /typical/4.0.0: - resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==} - engines: {node: '>=8'} - dev: true - - /typical/5.2.0: - resolution: {integrity: sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==} - engines: {node: '>=8'} - dev: true - - /typical/6.0.1: - resolution: {integrity: sha512-+g3NEp7fJLe9DPa1TArHm9QAA7YciZmWnfAqEaFrBihQ7epOv9i99rjtgb6Iz0wh3WuQDjsCTDfgRoGnmHN81A==} - engines: {node: '>=10'} - dev: true - /uglify-js/3.15.5: resolution: {integrity: sha512-hNM5q5GbBRB5xB+PMqVRcgYe4c8jbyZ1pzZhS6jbq54/4F2gFK869ZheiE5A8/t+W5jtTNpWef/5Q9zk639FNQ==} engines: {node: '>=0.8.0'} @@ -14061,14 +13767,6 @@ packages: resolution: {integrity: sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=} dev: true - /wordwrapjs/4.0.1: - resolution: {integrity: sha512-kKlNACbvHrkpIw6oPeYDSmdCTu2hdMHoyXLTcUKala++lx5Y+wjJ/e474Jqv5abnVmwxw08DiTuHmw69lJGksA==} - engines: {node: '>=8.0.0'} - dependencies: - reduce-flatten: 2.0.0 - typical: 5.2.0 - dev: true - /worker-farm/1.7.0: resolution: {integrity: sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==} dependencies: @@ -14085,15 +13783,6 @@ packages: resolution: {integrity: sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==} dev: true - /wrap-ansi/5.1.0: - resolution: {integrity: sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==} - engines: {node: '>=6'} - dependencies: - ansi-styles: 3.2.1 - string-width: 3.1.0 - strip-ansi: 5.2.0 - dev: true - /wrap-ansi/6.2.0: resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==} engines: {node: '>=8'} @@ -14176,13 +13865,6 @@ packages: engines: {node: '>= 6'} dev: true - /yargs-parser/15.0.3: - resolution: {integrity: sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==} - dependencies: - camelcase: 5.3.1 - decamelize: 1.2.0 - dev: true - /yargs-parser/18.1.3: resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==} engines: {node: '>=6'} @@ -14201,6 +13883,11 @@ packages: engines: {node: '>=10'} dev: true + /yargs-parser/21.0.1: + resolution: {integrity: sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==} + engines: {node: '>=12'} + dev: true + /yargs-unparser/2.0.0: resolution: {integrity: sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==} engines: {node: '>=10'} @@ -14211,22 +13898,6 @@ packages: is-plain-obj: 2.1.0 dev: true - /yargs/14.2.3: - resolution: {integrity: sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==} - dependencies: - cliui: 5.0.0 - decamelize: 1.2.0 - find-up: 3.0.0 - get-caller-file: 2.0.5 - require-directory: 2.1.1 - require-main-filename: 2.0.0 - set-blocking: 2.0.0 - string-width: 3.1.0 - which-module: 2.0.0 - y18n: 4.0.3 - yargs-parser: 15.0.3 - dev: true - /yargs/15.4.1: resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==} engines: {node: '>=8'} @@ -14257,6 +13928,19 @@ packages: yargs-parser: 20.2.9 dev: true + /yargs/17.5.1: + resolution: {integrity: sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==} + engines: {node: '>=12'} + dependencies: + cliui: 7.0.4 + escalade: 3.1.1 + get-caller-file: 2.0.5 + require-directory: 2.1.1 + string-width: 4.2.3 + y18n: 5.0.8 + yargs-parser: 21.0.1 + dev: true + /yn/2.0.0: resolution: {integrity: sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=} engines: {node: '>=4'} From b682b78c1ee5d38cd299f48a657b49277d2c305b Mon Sep 17 00:00:00 2001 From: Will Shown Date: Tue, 7 Jun 2022 17:06:07 -0700 Subject: [PATCH 07/44] Fix icon sizes. Set title to button text that may become truncated. --- packages/icons/basic-icons.json | 2 +- packages/react/src/blocks/Toolbar/Toolbar.tsx | 2 +- packages/react/src/inlines/Icon/Icon.tsx | 2 +- packages/react/src/inputs/Button/Button.tsx | 4 ++-- packages/react/src/inputs/Overflow/Overflow.tsx | 2 +- packages/react/src/surfaces/Sidebar/Sidebar.tsx | 12 +++++++++--- 6 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/icons/basic-icons.json b/packages/icons/basic-icons.json index 4125c535..bc9af764 100644 --- a/packages/icons/basic-icons.json +++ b/packages/icons/basic-icons.json @@ -1,5 +1,5 @@ { - "sizes": [16, 24], + "sizes": [20], "styles": ["regular", "filled"], "include": { "accessibility": {}, diff --git a/packages/react/src/blocks/Toolbar/Toolbar.tsx b/packages/react/src/blocks/Toolbar/Toolbar.tsx index e5c1a3c5..c7b17170 100644 --- a/packages/react/src/blocks/Toolbar/Toolbar.tsx +++ b/packages/react/src/blocks/Toolbar/Toolbar.tsx @@ -50,7 +50,7 @@ type ToolbarItemContextualOptions = Pick< } > -const defaultIconSize = 16 +const defaultIconSize = 20 const defaultButtonSize = 'medium' const useToolbarStyles = makeStyles({ diff --git a/packages/react/src/inlines/Icon/Icon.tsx b/packages/react/src/inlines/Icon/Icon.tsx index 3c20819c..bd0103cf 100644 --- a/packages/react/src/inlines/Icon/Icon.tsx +++ b/packages/react/src/inlines/Icon/Icon.tsx @@ -52,7 +52,7 @@ const useIconStyles = makeStyles({ }) export const Icon = (props: IconProps) => { - const { icon, variant = 'outline', size = 16 } = props + const { icon, variant = 'outline', size = 20 } = props const iconStyles = useIconStyles() const { iconSpriteUrl } = useFluentBlocksContext() return ( diff --git a/packages/react/src/inputs/Button/Button.tsx b/packages/react/src/inputs/Button/Button.tsx index c9c7142c..c27ef4ad 100644 --- a/packages/react/src/inputs/Button/Button.tsx +++ b/packages/react/src/inputs/Button/Button.tsx @@ -108,8 +108,7 @@ export const Button = ({ contextualVariant === 'card-inputs' || contextualVariant === 'sidebar' ? 'small' : size || 'medium' - const derivedIconSize = - iconSize || derivedSize === 'small' ? 16 : derivedSize === 'large' ? 32 : 24 + const derivedIconSize = iconSize || 20 const shrink = contextualVariant === 'nav' const wrap = contextualVariant === 'sidebar' @@ -151,6 +150,7 @@ export const Button = ({ disambiguatingLabel && { 'aria-label': disambiguatingLabel }), ...(selected && { 'aria-selected': selected }), ...(controls && { 'aria-controls': controls }), + ...(shrink && { title: disambiguatingLabel || label }), }} > {iconOnly ? null : shrink ? ( diff --git a/packages/react/src/inputs/Overflow/Overflow.tsx b/packages/react/src/inputs/Overflow/Overflow.tsx index 87fd75e2..317525e6 100644 --- a/packages/react/src/inputs/Overflow/Overflow.tsx +++ b/packages/react/src/inputs/Overflow/Overflow.tsx @@ -33,7 +33,7 @@ function isAction(o: any): o is MenuAction { return 'actionId' in o } -const defaultIconSize = 16 +const defaultIconSize = 20 const useOverflowStyles = makeStyles({ trigger: { diff --git a/packages/react/src/surfaces/Sidebar/Sidebar.tsx b/packages/react/src/surfaces/Sidebar/Sidebar.tsx index 37a3eecb..0489006f 100644 --- a/packages/react/src/surfaces/Sidebar/Sidebar.tsx +++ b/packages/react/src/surfaces/Sidebar/Sidebar.tsx @@ -15,7 +15,12 @@ import { } from '@fluentui/react-components' import { Heading } from '../../blocks' -import { Icon, InlineContent, InlineSequenceOrString } from '../../inlines' +import { + Icon, + InlineContent, + InlineSequenceOrString, + getInlineText, +} from '../../inlines' import { Button, ButtonProps, Overflow } from '../../inputs' import { key, @@ -174,7 +179,8 @@ export const Sidebar = ({ ) : ( <>