Component Examples: Add Fluent options for Experiments and OUFR Dev S…

…ite (#6757) * Revert "Fluent experiment: Move Customizer inside each ExampleCard (#6715)" This reverts commit ed4aac1. * Consolidate theme definitions into theme-samples package. Add Fluent to theme dropdown for all OUFR and experiment component examples. Remove Fluent styles page since it is now redundant with ExampleCard functionality. Split Fluent styles definitions into mutliple component styles files. * Change files. * Use new fluent-theme package. Move utility function to variants package. * Change files. * Minor cleanup: Remove unused dependency, alias new packages. * JS doc cleanup. * Remove erroneous return value.
microsoft · Oct 19, 2018 · 6505775 · 6505775
1 parent 94dce5f
commit 6505775
Show file tree

Hide file tree

Showing 63 changed files with 295 additions and 2,638 deletions.
diff --git a/apps/fabric-website-resources/package.json b/apps/fabric-website-resources/package.json
@@ -57,10 +57,12 @@
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
     "@uifabric/example-app-base": ">=6.9.0 <7.0.0",
+    "@uifabric/fluent-theme": ">=0.1.2 <1.0.0",
     "@uifabric/icons": ">=6.1.2 <7.0.0",
     "@uifabric/merge-styles": ">=6.10.2 <7.0.0",
     "@uifabric/styling": ">=6.31.0 <7.0.0",
     "@uifabric/set-version": ">=1.1.3 <2.0.0",
+    "@uifabric/theme-samples": ">=0.1.1 <1.0.0",
     "@uifabric/utilities": ">=6.23.1 <7.0.0",
     "@uifabric/variants": ">=6.11.0 <7.0.0",
     "prop-types": "^15.5.10",
@@ -73,4 +75,4 @@
   "disabledTasks": [
     "build-codepen-examples"
   ]
-}
+}
diff --git a/apps/fabric-website-resources/src/customizations/customizations.ts b/apps/fabric-website-resources/src/customizations/customizations.ts
@@ -1,157 +1,14 @@
-import { createTheme, ICustomizations, ITheme } from 'office-ui-fabric-react';
 import { IExampleCardCustomizations, IAppCustomizations } from '@uifabric/example-app-base';
-import { getNeutralVariant, getSoftVariant, getStrongVariant } from '@uifabric/variants';
-
-const defaultCustomizations: ICustomizations = {
-  settings: {
-    theme: createTheme({})
-  },
-  scopedSettings: {}
-};
-
-const wordCustomizations: ICustomizations = {
-  settings: {
-    theme: createTheme({
-      palette: {
-        themePrimary: '#2b579a',
-        themeSecondary: '#366ec2'
-      },
-      semanticColors: {
-        buttonBackground: 'white',
-        buttonBackgroundHovered: 'rgb(240, 240, 240)',
-        buttonBackgroundPressed: 'rgb(240, 240, 240)',
-        buttonText: 'rgb(43, 87, 154)',
-        buttonBorder: 'rgb(237, 235, 233)'
-      }
-    })
-  },
-
-  scopedSettings: {
-    Button: {
-      styleVariables: {
-        baseVariant: {
-          baseState: {
-            borderWidth: 1,
-            minHeight: 26,
-            textSize: 13.5,
-            lineHeight: 13.5,
-            textWeight: 600,
-            iconSize: 12,
-            contentPadding: '0px 6px'
-          }
-        }
-      }
-    }
-  }
-};
-
-const teamsCustomizations: ICustomizations = {
-  settings: {
-    theme: createTheme({
-      palette: {
-        themePrimary: '#6061aa',
-        themeLighterAlt: '#f7f7fc',
-        themeLighter: '#e1e1f2',
-        themeLight: '#c7c8e6',
-        themeTertiary: '#9797cd',
-        themeSecondary: '#6f70b5',
-        themeDarkAlt: '#56579a',
-        themeDark: '#494a82',
-        themeDarker: '#363660',
-        neutralLighterAlt: '#f8f8f8',
-        neutralLighter: '#f4f4f4',
-        neutralLight: '#eaeaea',
-        neutralQuaternaryAlt: '#dadada',
-        neutralQuaternary: '#d0d0d0',
-        neutralTertiaryAlt: '#c8c8c8',
-        neutralTertiary: '#b6b0b0',
-        neutralSecondary: '#9f9797',
-        neutralPrimaryAlt: '#877f7f',
-        neutralPrimary: '#282424',
-        neutralDark: '#585151',
-        black: '#403b3b',
-        white: '#fff'
-      },
-      semanticColors: {
-        buttonBackground: 'transparent',
-        buttonBackgroundHovered: '#bdbdbd',
-        buttonBackgroundPressed: '#a7a7a7',
-
-        buttonText: '#252424',
-        buttonTextPressed: '#252424',
-        buttonTextHovered: '#252424',
-
-        buttonBorder: '#bdbdbd',
-
-        primaryBorder: 'transparent'
-      }
-    })
-  },
-
-  scopedSettings: {
-    Button: {
-      styleVariables: {
-        baseVariant: {
-          baseState: {
-            borderRadius: 3,
-            borderWidth: 2,
-            iconSize: 16,
-            iconWeight: 700,
-            textWeight: 400,
-            contentPadding: '4px 32px'
-          },
-          enabled: {
-            iconColor: '#252424',
-            borderColorHovered: 'transparent',
-            borderColorPressed: 'transparent'
-          },
-          expanded: {
-            borderColor: 'transparent'
-          }
-        },
-        circular: {
-          baseState: {
-            borderWidth: 1
-          },
-          enabled: {
-            backgroundColorHovered: '#464775',
-            backgroundColorPressed: '#464775',
-
-            textColorHovered: '#fff',
-            textColorPressed: '#fff',
-
-            iconColorHovered: '#fff',
-            iconColorPressed: '#fff'
-          }
-        },
-        primary: {
-          enabled: {
-            iconColor: 'white'
-          }
-        }
-      }
-    }
-  }
-};
+import { FluentCustomizations } from '@uifabric/fluent-theme';
+import { DefaultCustomizations, TeamsCustomizations, WordCustomizations } from '@uifabric/theme-samples';
 
 const exampleCardCustomizations: IExampleCardCustomizations[] = [
-  { title: 'Default', customizations: defaultCustomizations },
-  { title: 'Word', customizations: wordCustomizations },
-  { title: 'Teams', customizations: teamsCustomizations }
+  { title: 'Default', customizations: DefaultCustomizations },
+  { title: 'Fluent', customizations: FluentCustomizations },
+  { title: 'Word', customizations: WordCustomizations },
+  { title: 'Teams', customizations: TeamsCustomizations }
 ];
 
-exampleCardCustomizations.forEach(theme => {
-  _updateSchemes(theme.customizations.settings.theme);
-});
-
 export const AppCustomizations: IAppCustomizations = {
   exampleCardCustomizations
 };
-
-function _updateSchemes(theme: ITheme): void {
-  theme.schemes = {
-    strong: getStrongVariant(theme),
-    soft: getSoftVariant(theme),
-    neutral: getNeutralVariant(theme)
-  };
-}
diff --git a/apps/fabric-website-resources/webpack.serve.config.js b/apps/fabric-website-resources/webpack.serve.config.js
@@ -19,6 +19,8 @@ module.exports = resources.createServeConfig({
       'office-ui-fabric-react/src': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/lib/codepen': path.resolve(__dirname, '../../packages/office-ui-fabric-react/lib/codepen'),
       'office-ui-fabric-react/lib': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
+      '@uifabric/fluent-theme$': path.join(__dirname, '../../packages/fluent-theme/src'),
+      '@uifabric/theme-samples$': path.join(__dirname, '../../packages/theme-samples/src'),
       'Props.ts.js': 'Props',
       'Example.tsx.js': 'Example'
     }

diff --git a/...on/changes/@uifabric/experiments/jg-6716-examplecard-fluent-support_2018-10-18-21-35.json b/...on/changes/@uifabric/experiments/jg-6716-examplecard-fluent-support_2018-10-18-21-35.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Move theme definitions to theme-samples package. Remove Fluent styles page.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "jagore@microsoft.com"
+}
diff --git a/...on/changes/@uifabric/experiments/jg-6716-examplecard-fluent-support_2018-10-19-16-58.json b/...on/changes/@uifabric/experiments/jg-6716-examplecard-fluent-support_2018-10-19-16-58.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Use fluent-theme package customizations.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "jagore@microsoft.com"
+}
diff --git a/...ifabric/fabric-website-resources/jg-6716-examplecard-fluent-support_2018-10-18-21-35.json b/...ifabric/fabric-website-resources/jg-6716-examplecard-fluent-support_2018-10-18-21-35.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website-resources",
+      "comment": "Move theme definitions to theme-samples package.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website-resources",
+  "email": "jagore@microsoft.com"
+}
diff --git a/...ifabric/fabric-website-resources/jg-6716-examplecard-fluent-support_2018-10-19-16-58.json b/...ifabric/fabric-website-resources/jg-6716-examplecard-fluent-support_2018-10-19-16-58.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website-resources",
+      "comment": "Use fluent-theme package customizations.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website-resources",
+  "email": "jagore@microsoft.com"
+}
diff --git a/...n/changes/@uifabric/fluent-theme/jg-6716-examplecard-fluent-support_2018-10-19-16-58.json b/...n/changes/@uifabric/fluent-theme/jg-6716-examplecard-fluent-support_2018-10-19-16-58.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fluent-theme",
+      "comment": "Use variants addVariants utility function.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fluent-theme",
+  "email": "jagore@microsoft.com"
+}
diff --git a/.../changes/@uifabric/theme-samples/jg-6716-examplecard-fluent-support_2018-10-18-21-35.json b/.../changes/@uifabric/theme-samples/jg-6716-examplecard-fluent-support_2018-10-18-21-35.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/theme-samples",
+      "comment": "Add sample theme defintions for Word and Teams.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/theme-samples",
+  "email": "jagore@microsoft.com"
+}
diff --git a/common/changes/@uifabric/variants/jg-6716-examplecard-fluent-support_2018-10-19-16-58.json b/common/changes/@uifabric/variants/jg-6716-examplecard-fluent-support_2018-10-19-16-58.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/variants",
+      "comment": "Add addVariants utility function.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/variants",
+  "email": "jagore@microsoft.com"
+}
diff --git a/packages/experiments/package.json b/packages/experiments/package.json
@@ -51,8 +51,10 @@
     "@microsoft/load-themed-styles": "^1.7.13",
     "@uifabric/charting": "^0.25.1",
     "@uifabric/file-type-icons": ">=6.2.0 <7.0.0",
+    "@uifabric/fluent-theme": ">=0.1.2 <1.0.0",
     "@uifabric/foundation": ">=0.5.6 <1.0.0",
     "@uifabric/icons": ">=6.1.2 <7.0.0",
+    "@uifabric/theme-samples": ">=0.1.1 <1.0.0",
     "@uifabric/variants": ">=6.11.1 <7.0.0",
     "@uifabric/set-version": ">=1.1.3 <2.0.0",
     "@uifabric/merge-styles": ">=6.10.2 <7.0.0",
@@ -67,4 +69,4 @@
   "disabledTasks": [
     "build-codepen-examples"
   ]
-}
+}
diff --git a/packages/experiments/src/components/fluent/FluentColors.ts b/packages/experiments/src/components/fluent/FluentColors.ts
diff --git a/packages/experiments/src/components/fluent/FluentCustomizations.ts b/packages/experiments/src/components/fluent/FluentCustomizations.ts