diff --git a/packages/fluentui/CONTRIBUTING.md b/packages/fluentui/CONTRIBUTING.md index afded0603b56d..5409f465fbdf1 100644 --- a/packages/fluentui/CONTRIBUTING.md +++ b/packages/fluentui/CONTRIBUTING.md @@ -76,8 +76,6 @@ These guides will walk your through various activities for contributing: Behaviors apply properties, focus handling and keyboard handlers to the component slots. When developing a component, the properties and keyboard handlers need to be spread to the corresponding slots. -For complete accessibility contributing guide, requirements and testing, see [Accessibility][2] - - [Role and aria props](#role-and-aria-props) - [Focus](#focus) - [Keyboard handling](#keyboard-handling) @@ -181,7 +179,6 @@ I (@rymeskar) have been part of the FluentUI framework team for the past two mon - For sustainable keyboard keys handling, one needs to map actions to [key presses](https://github.com/microsoft/fluentui/blob/5f9a800af3b0c94fa12d68f40d5d6a83a76e68c8/packages/fluentui/accessibility/src/behaviors/Accordion/accordionBehavior.ts#L18). Then within component code, one needs to [define handling](https://github.com/microsoft/fluentui/blob/5f9a800af3b0c94fa12d68f40d5d6a83a76e68c8/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx#L140) of these actions. [1]: https://nodejs.org/ -[2]: https://github.com/stardust-ui/accessibility/blob/master/CONTRIBUTING.md [3]: https://www.w3.org/TR/wai-aria-1.1/#usage_intro [4]: https://www.w3.org/TR/wai-aria-1.1/#introstates [5]: https://www.w3.org/TR/wai-aria-1.1/#landmark_roles diff --git a/packages/fluentui/docs/src/components/DocPage/DocPage.tsx b/packages/fluentui/docs/src/components/DocPage/DocPage.tsx index d70d7e20dc0a9..efd77a7deaddc 100644 --- a/packages/fluentui/docs/src/components/DocPage/DocPage.tsx +++ b/packages/fluentui/docs/src/components/DocPage/DocPage.tsx @@ -6,11 +6,12 @@ interface DocPageProps { title: string; description?: string; children: React.ReactNode; + fluid?: boolean; themeSwitcher?: React.ReactNode; } const PAGE_PADDING = '20px'; -const DocPage = ({ title, themeSwitcher, children }: DocPageProps) => ( +const DocPage = ({ title, themeSwitcher, children, fluid }: DocPageProps) => ( <>
(
-
{children}
+
+ {children} +
); diff --git a/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx b/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx index 099c2b299aaa2..8ba693e0fd730 100644 --- a/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx +++ b/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx @@ -238,15 +238,6 @@ const baseTreeItems: TreeProps['items'] = [ to: '/icon-viewer', }, }, - { - id: 'component-architecture', - title: { - as: NavLink, - content: 'Component Architecture', - activeClassName: 'active', - to: '/component-architecture', - }, - }, ...(process.env.NODE_ENV !== 'production' ? [ { diff --git a/packages/fluentui/docs/src/pages/ComponentArchitecture.mdx b/packages/fluentui/docs/src/pages/ComponentArchitecture.mdx deleted file mode 100644 index 9c175f85b3872..0000000000000 --- a/packages/fluentui/docs/src/pages/ComponentArchitecture.mdx +++ /dev/null @@ -1,49 +0,0 @@ -export const meta = { - title: 'Component Architecture', - previous: { url: "/icon-viewer", name: "Icons" }, - next: { url: '/theming-specification', name: 'Theming specification' }, -} - -The design and architecture of components should follow from a set of first principles. - -- There is 1 right way to do things, and it's easy to do the right thing. -- Consumers should not be penalized for code they don't use (through bundle size, perf, etc). -- Don't overgeneralize until we have a clear need (abstracting should solve a bundle size goal, or DRY goal, or partner use case) - -#### The consumer should be able to override, extend, or replace any opinions of the library. - -TODO: expand on what this means for the following aspects of the library: - -- State -- Styling -- Acessibility -- Slots -- Styling approach (css, css-in-js, etc) - -#### Components should be composable - -#### There should be one JSX element in the tree per rendered component - -#### Applications which load their own CSS in other means should not pay the penalty of loading a runtime CSS-in-JS package, especially if the class names are known at time of authoring. - -#### Applications which want to override specific aspects of a component should not incur a penalty of loading a concretely referenced component that will not be rendered in the final output. - -#### Any external dependencies mean negative parsing time, bundle size and runtime impact for consumers that don't intend to use them. - -#### There is a limited set of accessibility options that work well together, and each combination should be tested cohesively. - -#### Consumers should be able to import one component and have an appropriately minimal bundle size. - -#### We want to offer a delightful first-run experience, and bundle size will not be negatively impacted by including the default theme. - -#### As a component library cannot anticipate all needs to applications' design systems, allowances should be made to extend the design system while maintaining rich levels of type safety. - -#### Components should leverage a platform library's function to pass all relevant native props to appropriate controls whenever available. - -#### A component should be able to render any theme (including tokens, styles, icons and animations). - -#### Themes should cascade and merge allowing subtree themes to be updated at runtime and have the ability to adjust the incoming theme. - -#### RTL/LTR mode should be configurable for the entire application or a subtree of the application. - -#### Animations should be configurable for the entire application or a subtree of the application. diff --git a/packages/fluentui/docs/src/routes.tsx b/packages/fluentui/docs/src/routes.tsx index 5c5342081b690..11bbbd3135d67 100644 --- a/packages/fluentui/docs/src/routes.tsx +++ b/packages/fluentui/docs/src/routes.tsx @@ -11,7 +11,6 @@ import { PerfDataProvider } from './components/ComponentDoc/PerfChart'; import * as Composition from './pages/Composition.mdx'; import * as Debugging from './pages/Debugging.mdx'; import * as Layout from './pages/Layout.mdx'; -import * as ComponentArchitecture from './pages/ComponentArchitecture.mdx'; import * as StylesOverrides from './pages/StylesOverrides.mdx'; import Accessibility from './views/Accessibility'; import Colors from './views/Colors'; @@ -147,9 +146,6 @@ const Routes = () => ( - - - diff --git a/packages/fluentui/docs/src/views/Accessibility.tsx b/packages/fluentui/docs/src/views/Accessibility.tsx index af38c7aa3f617..a83e1587856a6 100644 --- a/packages/fluentui/docs/src/views/Accessibility.tsx +++ b/packages/fluentui/docs/src/views/Accessibility.tsx @@ -221,7 +221,7 @@ export default () => ( behaviors. For example

- +

How does the user expect to navigate this? It looks a bit similar to a breadcrumb-like control, but the final @@ -435,7 +435,7 @@ export default () => (

{link( 'Accessibility contributing guide', - 'https://github.com/stardust-ui/accessibility/blob/master/CONTRIBUTING.md', + 'https://github.com/microsoft/fluentui/blob/master/packages/fluentui/CONTRIBUTING.md#accessibility', )}

Read more about:

diff --git a/packages/fluentui/docs/src/views/IconViewer.tsx b/packages/fluentui/docs/src/views/IconViewer.tsx index 7b3f318ca596a..6155f09235c39 100644 --- a/packages/fluentui/docs/src/views/IconViewer.tsx +++ b/packages/fluentui/docs/src/views/IconViewer.tsx @@ -18,6 +18,7 @@ import * as exports from '@fluentui/react-icons-northstar'; import { CodeSnippet, CopyToClipboard } from '@fluentui/docs-components'; import GuidesNavigationFooter from '../components/GuidesNavigationFooter'; import ComponentPlaygroundSnippet from '../../src/components/ComponentPlayground/ComponentPlaygroundSnippet'; +import DocPage from '../components/DocPage'; const iconFlexStyles = { '> *:nth-child(5n)': { @@ -223,77 +224,76 @@ const IconViewer = () => { const filteredIcons = icons.filter(IconComponent => regexQuery.test(IconComponent.displayName)); return ( - - - - - - - - - - -
- } - placeholder={`Search across ${icons.length} icons`} - iconPosition="end" - role="search" - onChange={handleQueryChange} - value={query} - /> - - {filteredIcons.map(Icon => ( - - - - - -
- `} timeout={3000}> - {(active, onClick) => ( - - {active ? 'Copied! Happy coding :)' : `<${Icon.displayName} />`} - - )} - - - - - - ))} + + + + + + + + + + + +
+ } + placeholder={`Search across ${icons.length} icons`} + iconPosition="end" + role="search" + onChange={handleQueryChange} + value={query} + /> + + {filteredIcons.map(Icon => ( + + + + + +
+ `} timeout={3000}> + {(active, onClick) => ( + + {active ? 'Copied! Happy coding :)' : `<${Icon.displayName} />`} + + )} + + + + + + ))} + + + + - - - - + ); }; diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/hexagonalAvatar/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/hexagonalAvatar/index.tsx index 841d348d07cb3..28062eb44c750 100644 --- a/packages/fluentui/react-northstar-prototypes/src/prototypes/hexagonalAvatar/index.tsx +++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/hexagonalAvatar/index.tsx @@ -29,12 +29,19 @@ const HexagonalAvatarPrototype = () => {
  - +
  - +
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/dataMocks.ts b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/dataMocks.ts index dd5bc5990da9f..00630e27f05bf 100644 --- a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/dataMocks.ts +++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/dataMocks.ts @@ -1,5 +1,5 @@ import * as _ from 'lodash'; -import { name, internet } from 'faker'; +import * as faker from 'faker'; export interface AtMentionItem { header: string; @@ -8,7 +8,15 @@ export interface AtMentionItem { } export const atMentionItems: AtMentionItem[] = _.times(10, () => ({ - header: `${name.firstName()} ${name.lastName()}`, - image: internet.avatar(), - content: name.title(), + header: `${faker.name.firstName()} ${faker.name.lastName()}`, + image: faker.random.arrayElement([ + 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/small/ade.jpg', + 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/small/chris.jpg', + 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/small/christian.jpg', + 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/small/daniel.jpg', + 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/small/elliot.jpg', + 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/small/helen.jpg', + 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/small/jenny.jpg', + ]), + content: faker.name.title(), })); diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/index.tsx index 2566e7c964d6c..efb9a37db8a55 100644 --- a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/index.tsx +++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/index.tsx @@ -9,7 +9,6 @@ export default () => ( } />