@fluentui/react-button 9.0.0-alpha.10 → 9.0.0-alpha.100

package/README.md

@@ -2,124 +2,35 @@
 
 **Button components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
-**WARNING!** These components are still in active development, and the APIs may change before final release.
+The Button component enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
 
-To use the Button components:
+## STATUS: WIP 🚧
 
-```js
-import { Button } from '@fluentui/react-button';
-
-const App = () => {
-  return <Button content="hello, world!" />;
-};
-```
-
-## Migration guide
-
-The Button has been completely rewritten to be faster, smaller, and easier to customize compared to the version from `office-ui-fabric-react@7`. By default, Buttons now have no opinion about icons, menuing, or split button behavior, which has led to large bundle and performance hits for the most common cases in the past.
-
-### Component renames
-
-Common buttons now all map to `Button`:
-
-| Old                                              | New                                                           |
-| ------------------------------------------------ | ------------------------------------------------------------- |
-| `<DefaultButton text="Hello, world" />`          | `<Button>Hello, world</Button>`                               |
-| `<PrimaryButton text="Hello, world" />`          | `<Button primary>Hello, world</Button>`                       |
-| `<IconButton iconProps={{ iconName: 'Add' }} />` | `<Button iconOnly subtle icon={ <Icon iconName="Add" /> } />` |
-
-### Toggle buttons
-
-The `ToggleButton` component is an extension of the `Button` and has been separated out to reduce bundle size and performance overhead. The `ToggleButton` respects a `checked` or `defaultChecked` flag.
-
-```jsx
-const App = () => {
-  const [isChecked, setChecked] = React.useState(false);
-
-  return (
-    <ToggleButton checked={checked} onClick={() => setChecked(!isChecked)}>
-      {checked ? 'Pause' : 'Play'}
-    </ToggleButton>
-  );
-};
-```
-
-### Menu buttons
-
-The `MenuButton` component is an extension of the `Button` and has been separated out to reduce bundle size and performance overhead. The `MenuButton` takes in a `menu` prop to provide the menu:
-
-```jsx
-const App = () => {
-  const [ isChecked, setChecked ] = React.useState(false);
-
-  return (
-    <MenuButton
-      iconOnly
-      circular
-      subtle
-      icon={ <EllipsisIcon /> }
-      menu={
-        items: [
-          { key: 'a', ... }
-        ]
-      }
-   />
-  );
-}
-```
-
-### Split menu buttons
-
-The `SplitButton` is now its own component, instead of being baked into the `Button` component itself. This helps to overall reduce the default `Button` complexity, runtime overhead, and bundle size:
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
 
-Before:
-
-```jsx
-<PrimaryButton split onClick={ () => alert('action')} menuProps={{ items: [ ... ] }} text="Hello, world" />
-```
+## Usage
 
-After:
+To import Button:
 
-```jsx
-<SplitButton primary onClick={ () => alert('action')} menu={{ items: [ ... ] }} />
+```js
+import { Button } from '@fluentui/react-button';
 ```
 
-Additional changes:
-
-- Now 2 tab targets rather than 1: The action part of the button and the menu part are now separate focus targets. This helps with predictability for users who want to either execute the action or expand the menu. It also helps with accessibility, as we can keep the action with a normal `button` role, and the menu with an `aria-haspopup` attribute, making it more clear for screen readers to differentiate from a typical menu button.
+Once the Button component graduates to a production release, the component will be available at:
 
-### Slots support
-
-Buttons now support slots. Slot support replaces `onRender*` and `*Props` props. The `iconProps` is an example of this. Before, you would provide the props directly. Now you can provide JSX, which lets the implementation own prop typing:
-
-Before:
-
-```jsx
-<DefaultButton iconProps={{ iconName: 'Add' }}> />
+```js
+import { Button } from '@fluentui/react-components';
 ```
 
-After:
+### Examples
 
 ```jsx
-<Button icon={<Icon iconName="Add" />} />
+<Button>Text</Button>
+<Button icon={<SVGIcon />} />
+<Button icon={<SVGIcon />}>Text</Button>
+<Button icon={<SVGIcon />} iconPosition="after">Text</Button>
+<Button primary>Text</Button>
+<Button disabled>Text</Button>
+<Button size="small">Text</Button>
+<Button size="large">Text</Button>
 ```
-
-This ensures that `Button` components work not just with Fluent UI icons, but with any other icon set.
-
-### Additional button modifiers and enums
-
-These all apply to `Button`, `ToggleButton`, `MenuButton`, and `SplitButton`:
-| Modifier | Description |
-| ---------- | --------------------------------------------------------------------------------------- |
-| `block` | Stretches the button to the container width. |
-| `circular` | Make the button rounded on the edges (pill button.) |
-| `iconOnly` | Makes the width match the height. Can be combined with circular to make circle buttons. |
-| `subtle` | Makes the button inherit the background color. |
-| `primary` | Uses the brand color to indicate the button is a primary action. |
-| `size` | Controls the size of the button, based on an enum value: `smallest`, `smaller`, `small`, `regular`, `large`, `larger`, `largest`. Defaults to `regular`. |
-
-### Styling changes
-
-- `vertical-align` is now set to `middle` to ensure they align correctly. See https://codesandbox.io/s/align-buttons-middle-6u5nu for an example of why this is important.
-- Focus rectangles have been adjusted to be more visible and consistent with our new focus styling approach (note that not everything has been updated to the 2px black border 1px inverted inner.)
-- Gaps between elements within the button were changed to margins rather than combo of padding/margin.

package/dist/demo/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en-us">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" user-scalable="no" />
+    <title>Fluent UI React Examples</title>
+  </head>
+
+  <body>
+    <div id="content"></div>
+    <script type="text/javascript">
+      // @ts-check
+      window.FabricConfig = {
+        // Uncommenting this prevents the fontfaces from being registered.
+        // Alternatively you can specify a base url which contains the font/icon assets.
+        // fontBaseUrl: '',
+        // mergeStyles: {
+        //   injectionMode: 2
+        // }
+      };
+
+      var isLocal = ['localhost', '[::]', '127.0.0.1'].indexOf(location.hostname) !== -1;
+
+      var isDev = getParameterByName('dev') === '1' || !!getParameterByName('strict');
+      var minParam = getParameterByName('min');
+      var useMinified =
+        !isDev && minParam !== '0' && (minParam === '1' || location.pathname === '/fabric-react/master/');
+
+      function loadScript(n) {
+        for (var i = 0; i < n.length; i++) {
+          var s = document.createElement('script');
+          s.src = n[i];
+          s.async = false;
+          document.body.appendChild(s);
+        }
+      }
+
+      const scripts = [];
+
+      if (isLocal) {
+        scripts.push('./react.development.js');
+        scripts.push('./react-dom.development.js');
+      } else {
+        const reactVersion = isDev ? 'development.js' : 'production.min.js';
+        scripts.push('//cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.' + reactVersion);
+        scripts.push('//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.' + reactVersion);
+      }
+
+      if (useMinified) {
+        scripts.push('demo-app.min.js');
+      } else {
+        scripts.push('demo-app.js');
+      }
+
+      loadScript(scripts);
+
+      function getParameterByName(name, url) {
+        if (!url) {
+          url = location.href;
+        }
+        name = name.replace(/[\[\]]/g, '\\$&');
+        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+          results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, ' '));
+      }
+    </script>
+  </body>
+</html>