Skip to content

Commit

Permalink
Merge branch 'users/procload/badgeDarkContrastFix' of https://github.…
Browse files Browse the repository at this point in the history
…com/procload/fluentui into users/procload/badgeDarkContrastFix
  • Loading branch information
procload committed Aug 7, 2023
2 parents 6f57956 + 0ba4e5b commit 62cc26c
Show file tree
Hide file tree
Showing 73 changed files with 2,869 additions and 475 deletions.
2 changes: 1 addition & 1 deletion .codesandbox/ci.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@
"buildCommand": "build:codesandbox",
"packages": ["packages/react", "packages/react-components/react-components"],
"sandboxes": ["x5u3t", "spnyu"],
"node": "14"
"node": "16"
}
2 changes: 1 addition & 1 deletion .devops/templates/tools.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
steps:
- task: NodeTool@0
inputs:
versionSpec: '14.18.1'
versionSpec: '16.18.1'
checkLatest: false
displayName: 'Install Node.js'

Expand Down
1 change: 1 addition & 0 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
apps/vr-tests @microsoft/fluentui-react
apps/vr-tests-react-components @microsoft/fluentui-react
apps/vr-tests-web-components @microsoft/fui-wc
apps/ssr-tests @microsoft/fluentui-react
apps/pr-deploy-site @microsoft/fluentui-react-build
apps/test-bundles @microsoft/fluentui-react
Expand Down
8 changes: 7 additions & 1 deletion .github/workflows/azure-static-web-apps-deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ on:
branches:
- web-components-v3
paths:
- packages/web-components/*
- packages/web-components/**
workflow_dispatch:

permissions:
contents: read
Expand All @@ -17,6 +18,11 @@ jobs:
steps:
- uses: actions/checkout@v2

- uses: actions/setup-node@v3
with:
node-version: 16.18.1
cache: 'yarn'

- name: Build and Deploy Job
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/check-packages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ jobs:

- uses: actions/setup-node@v3
with:
node-version: 14.18.1
node-version: 16.18.1
cache: 'yarn'

- uses: tj-actions/changed-files@v34
Expand Down Expand Up @@ -44,7 +44,7 @@ jobs:

- uses: actions/setup-node@v3
with:
node-version: 14.18.1
node-version: 16.18.1

- uses: actions/github-script@v6
with:
Expand All @@ -70,7 +70,7 @@ jobs:

- uses: actions/setup-node@v3
with:
node-version: 14.18.1
node-version: 16.18.1

- uses: actions/github-script@v6
with:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/docsite-publish-chromatic.yml
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ jobs:

- uses: actions/setup-node@v3
with:
node-version: 14.18.1
node-version: 16.18.1
cache: 'yarn'

- name: Install packages
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/docsite-publish-ghpages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ jobs:

- uses: actions/setup-node@v3
with:
node-version: 14.18.1
node-version: 16.18.1
cache: 'yarn'

- name: Install packages
Expand Down
43 changes: 23 additions & 20 deletions .storybook/docs-root.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
/*
* Heads Up!
* This file is used by both React v9 and Web Components Storybooks.
* All CSS must apply to both implementations.
*
* DO NOT use design tokens in this file.
* This file styles the content outside of story previews where a Fluent theme is not expected to be set or change.
*/

#docs-root .sbdocs-content {
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
sans-serif;
Expand All @@ -10,7 +19,6 @@
/* identical to box height, or 143% */
letter-spacing: -0.04em;
color: #000000;
margin-top: 49px;
}

#docs-root details {
Expand All @@ -28,11 +36,6 @@
margin-top: 24px;
}

#docs-root .sbdocs-wrapper {
background: white;
min-height: auto;
}

#docs-root .sbdocs-img.featured-image {
max-width: 100%;
margin: 48px 0;
Expand Down Expand Up @@ -125,18 +128,25 @@

#docs-root .sbdocs-preview {
border-radius: 16px;
background: var(--colorBrandBackgroundInverted, #fff);
background: #fff; /* --colorBrandBackgroundInverted */
padding: 0;
box-shadow: none;
border: 1px solid var(--colorNeutralStroke1, #e1dfdd);
border: 1px solid #d1d1d1; /* --colorNeutralStroke1 */
}

#docs-root .innerZoomElementWrapper {
/* Apply the currently selected Fluent UI theme to the relevant areas of the docs */
#docs-root .innerZoomElementWrapper > div {
padding: 30px;
box-sizing: border-box;
}

/* fix mouse interactions for toolbar on first story */
#docs-root .sbdocs-preview > .os-host {
display: none;
/* The toolbar sits within the story content area and is position: absolute by default. */
/* The story content overlays the toolbar making it non-interactive */
/* We don't use z-index because the toolbar can still sometimes overlay story content (flyout menu) */
/* The best solution is to use a static toolbar that is always outside the story content and interactive */
position: static;
}

/* Remove z-index from "show code" button container */
Expand Down Expand Up @@ -252,14 +262,6 @@
border-bottom: 1px solid #edebe9;
}

#docs-root .docblock-argstable-body > tr > td:nth-child(4) {
display: none;
}

#docs-root .docblock-argstable-head > tr > th:nth-child(4) {
display: none;
}

#docs-root .docblock-argstable tbody tr {
border: none;
}
Expand Down Expand Up @@ -332,6 +334,7 @@
display: inline-block;
background-color: rgba(17, 16, 15, 0.1);
border-radius: 2px;
width: fit-content; /* prevent wrapping kebab-case words when they'll fit on one line */
}

.os-content-glue {
Expand Down Expand Up @@ -440,9 +443,9 @@ h1.fluent {

h1 .fluent-version {
display: block;
font-size: 24px; /* --font-size-base-600 */
font-size: 24px; /* --fontSizeBase600 */
line-height: 32px;
color: #707070; /* --color-neutral-foreground-3 */
color: #707070; /* --colorNeutralForeground3 */
}

h2.fluent {
Expand Down
27 changes: 11 additions & 16 deletions apps/public-docsite-v9/.storybook/docs-root-v9.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
/* remove the docs wrapper bg to let page bg show through */
/* remove unnecessary padding now that theme switcher is not taking up space */
#docs-root .sbdocs-wrapper {
background: transparent !important;
padding-top: 0;
}

/* sb-show-main is missing during page transitions causing a page shift */
/* todo: cleanup once we no longer inherit docs-root */
.sb-show-main.sb-main-fullscreen,
.sb-main-fullscreen {
margin: 0;
padding: 0;
display: block;
}

/* remove loading overlay */
.sb-preparing-story,
.sb-preparing-docs,
.sb-nopreview,
.sb-errordisplay {
display: none !important;
}

/* Hide props table controls, since they don't work in the React implementation */
#docs-root .docblock-argstable-head > tr > th:nth-child(4),
#docs-root .docblock-argstable-body > tr > td:nth-child(4) {
display: none;
}

/* Hide the toolbar on the first story: zoom in, zoom out, reset zoom, open in new tab */
#docs-root .sbdocs-preview > .os-host {
display: none;
}
6 changes: 5 additions & 1 deletion apps/public-docsite-v9/.storybook/manager-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,16 @@
> 💡 NOTE:
>
> This is brittle way for providing custom non thenable styles for manager UI
> This is a brittle way for providing custom non thenable styles for manager UI.
>
> Those selectors might change on any storybook version bump.
-->

<style>
/*
* Heads Up!
* Keep this in sync with the styles in packages/web-components/.storybook/manager-head.html
*/
@font-face {
font-family: 'Segoe UI';
src: local('Segoe UI Light'),
Expand Down
16 changes: 15 additions & 1 deletion apps/public-docsite-v9/public/shell.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
/* remove margin from sidebar logo */
/*
* HEADS UP!
* This file is used by both React v9 and Web Components Storybooks.
* All CSS must apply to both implementations.
*/

/* sidebar logo (React uses an SVG, Web Components uses text) */
.sidebar-header > div:first-of-type {
font-size: 20px; /* for Web Components */
white-space: break-spaces; /* allow line breaks "\n" in Storybook theme */
margin-right: 0;
}

Expand Down Expand Up @@ -47,6 +55,12 @@
background: transparent;
}

/* remove Storybook's 10px top on the main (right hand side) of the docs */
/* this affects only whitespace in React v9 docs, but the theme switcher in Web Components */
[role='main'] {
top: 0 !important;
}

/* remove box shadow style from storybooks wrapper div */
[role='main'] > div {
box-shadow: none;
Expand Down
6 changes: 3 additions & 3 deletions apps/ts-minbar-test-react/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ async function performTest() {
// Install dependencies, using the minimum TS version supported for consumers
const dependencies = [
'@types/node@14',
'@types/react@17',
`@types/react@17`,
'@types/react-dom@17',
'react@17',
'react-dom@17',
Expand All @@ -51,9 +51,9 @@ async function performTest() {
await shEcho(`yarn --version`);
await shEcho(`yarn tsc --version`);
await shEcho(`yarn tsc --version`, tempPaths.testApp);
} catch (e) {
} catch (err) {
console.error('Something went wrong setting up the test:');
console.error(e?.stack || e);
console.error(err instanceof Error ? err?.stack : err);
process.exit(1);
}

Expand Down
14 changes: 14 additions & 0 deletions apps/vr-tests-web-components/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "import"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"rules": {
"@typescript-eslint/explicit-module-boundary-types": "off"
}
}
85 changes: 85 additions & 0 deletions apps/vr-tests-web-components/.storybook/main.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
const path = require('path');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

const tsBin = require.resolve('typescript');
const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json');

const tsPaths = new TsconfigPathsPlugin({
configFile: tsConfigPath,
});

module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({
addons: [
{
name: '@storybook/addon-docs',
},
{
name: '@storybook/addon-essentials',
options: {
backgrounds: false,
viewport: false,
toolbars: false,
actions: false,
},
},
],

stories: ['../src/**/*.stories.tsx'],
core: {
builder: 'webpack5',
disableTelemetry: true,
},
babel: {},
typescript: {
// disable react-docgen-typescript (totally not needed here, slows things down a lot)
reactDocgen: false,
},
webpackFinal: async config => {
config.resolve = config.resolve ?? {};
config.resolve.extensions = config.resolve.extensions ?? [];
config.resolve.plugins = config.resolve.plugins ?? [];
config.module = config.module ?? {};
config.plugins = config.plugins ?? [];

config.resolve.extensionAlias = {
'.js': ['.ts', '.js'],
'.mjs': ['.mts', '.mjs'],
};
config.resolve.extensions.push(...['.ts', '.js']);
config.resolve.plugins.push(tsPaths);
config.module.rules = config.module.rules ?? [];
config.module.rules.push(
{
test: /\.([cm]?ts|tsx)$/,
loader: 'ts-loader',
sideEffects: true,
options: {
transpileOnly: true,
compiler: tsBin,
},
},
// Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM
// It also enables importing other packages without proper ESM extensions, but that should be avoided !
// @see https://webpack.js.org/configuration/module/#resolvefullyspecified
{
test: /\.m?js/,
resolve: { fullySpecified: false },
},
);

config.plugins.push(
new CircularDependencyPlugin({
exclude: /node_modules/,
failOnError: process.env.NODE_ENV === 'production',
}),
);

// Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
}

return config;
},
});
Loading

0 comments on commit 62cc26c

Please sign in to comment.