CSSBaseline component

change/@fluentui-react-examples-91a5d516-51a0-4da4-950b-d44d1f0c57b8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adds examples of usage for CSSBaseline",
+  "packageName": "@fluentui/react-examples",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-make-styles-5cf7f8ab-70e1-4b79-9cf5-6917c9077c0a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removes circular dependencies on react-theme-provider and react-provider",
+  "packageName": "@fluentui/react-make-styles",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-provider-0e47b865-4fad-49f3-99da-d0dda271f028.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds CSSBaseline component to react-provider",
+  "packageName": "@fluentui/react-provider",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-theme-provider-33d48ed1-0145-4d4d-acd8-84e2e01acbc4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update dependencies",
+  "packageName": "@fluentui/react-theme-provider",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-examples/src/react-provider/CSSBaseline/CSSBaseline.stories.tsx

@@ -0,0 +1,4 @@
+import { CSSBaseline } from '@fluentui/react-provider';
+import * as React from 'react';
+
+export const Base = () => <CSSBaseline />;

packages/react-make-styles/package.json

@@ -29,10 +29,9 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
+    "@fluentui/react-shared-contexts": "^9.0.0-alpha.4",
     "@fluentui/make-styles": "^9.0.0-alpha.10",
-    "@fluentui/react-provider": "^9.0.0-alpha.19",
     "@fluentui/react-theme": "^9.0.0-alpha.8",
-    "@fluentui/react-theme-provider": "^9.0.0-alpha.19",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {

packages/react-make-styles/src/makeStaticStyles.ts

@@ -3,7 +3,7 @@ import {
   makeStaticStyles as vanillaMakeStaticStyles,
   MakeStaticStylesOptions,
 } from '@fluentui/make-styles';
-import { useFluent } from '@fluentui/react-provider';
+import { useFluent } from '@fluentui/react-shared-contexts';
 
 import { useRenderer } from './useRenderer';
 

packages/react-make-styles/src/makeStyles.ts

@@ -5,8 +5,7 @@ import {
   MakeStylesRenderer,
   MakeStylesStyleRule,
 } from '@fluentui/make-styles';
-import { useFluent } from '@fluentui/react-provider';
-import { useTheme } from '@fluentui/react-theme-provider';
+import { useTheme, useFluent } from '@fluentui/react-shared-contexts';
 import { Theme } from '@fluentui/react-theme';
 import * as React from 'react';
 

packages/react-provider/etc/react-provider.api.md

@@ -10,6 +10,13 @@ import * as React from 'react';
 import { Theme } from '@fluentui/react-theme';
 import { useFluent } from '@fluentui/react-shared-contexts';
 
+// @public (undocumented)
+export const CSSBaseline: React.MemoExoticComponent<(props: CSSBaselineProps) => null>;
+
+// @public (undocumented)
+export interface CSSBaselineProps {
+}
+
 // @public (undocumented)
 export const FluentProvider: React.ForwardRefExoticComponent<FluentProviderProps & React.RefAttributes<HTMLElement>>;
 

packages/react-provider/package.json

@@ -17,7 +17,8 @@
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
-    "lint": "just-scripts lint"
+    "lint": "just-scripts lint",
+    "start": "just-scripts dev:storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.1.0",
@@ -41,6 +42,7 @@
     "@fluentui/react-theme": "^9.0.0-alpha.8",
     "@fluentui/react-theme-provider": "^9.0.0-alpha.19",
     "@fluentui/react-utilities": "^9.0.0-alpha.15",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.20",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {

packages/react-provider/src/CSSBaseline.ts

@@ -0,0 +1 @@
+export * from './components/CSSBaseline/index';

packages/react-provider/src/components/CSSBaseline/CSSBaseline.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { makeStaticStyles } from '@fluentui/react-make-styles';
+
+// eslint-disable-next-line @fluentui/max-len
+const normalizeCSS = `/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}`;
+
+const useGlobalStyles = makeStaticStyles(normalizeCSS);
+
+export interface CSSBaselineProps {}
+
+export const CSSBaseline = React.memo((props: CSSBaselineProps) => {
+  useGlobalStyles();
+  return null;
+});

packages/react-provider/src/components/CSSBaseline/index.ts

@@ -0,0 +1 @@
+export * from './CSSBaseline';

packages/react-provider/src/index.ts

@@ -1,2 +1,3 @@
 export * from './FluentProvider';
 export { useFluent } from '@fluentui/react-shared-contexts';
+export * from './CSSBaseline';