miroslavstastny ( Miroslav Stastny )

Debug panel does not show any styles if cache is used

Environment Information

Package version(s): 0.51.0

Please provide a reproduction of the bug in a codepen:

https://codesandbox.io/s/debug-styles-cache-r5fbs

<!-- Providing an isolated reproduction of the bug in a codepen makes it much easier for us to help you. Here are some ways to get started:

Go to https://aka.ms/fluentpen for a starter codepen
You can also use the "Export to Codepen" feature for the various components in our documentation site.
See http://codepen.io/dzearing/pens/public/?grid_type=list for a variety of examples

Alternatively, you can also use https://aka.ms/fluentdemo to get permanent repro links if the repro occurs with an example. (A permanent link is preferable to "use the website" as the website can change.) -->

Actual behavior:

Have two identical Buttons rendered side by side. Use FUI's CSSInJS debug tool to inspect styles of the two components. One of them does not show any styles:

Expected behavior:

Both components show used styles

created time in 9 hours

Pull request review commentmicrosoft/fluentui

feat(Skeleton): add base skeleton components

 export * from './MenuButton/menuButtonBehavior';  export * from './SplitButton/splitButtonBehavior'; +export * from './Skeleton/skeletonBehavior';+export { skeletonBehavior } from './Skeleton/skeletonBehavior';

assuncaocharles

comment created time in 11 hours

Pull request review commentmicrosoft/fluentui

Added undo and redo features to UI builder

 export const Designer: React.FunctionComponent = () => {     dispatch({ type: 'SELECT_PARENT' });   }, [dispatch]); +  const handleUndo = () => {+    const action = history.pop();+    if (!action) {+      return;+    }++    dispatch({+      type: 'UNDO',+      jsonTree: action,

With history in state, this will have just type.

vyhnalekl

comment created time in 11 hours

Pull request review commentmicrosoft/fluentui

Added undo and redo features to UI builder

 type DesignerState = {   codeError: string | null; }; +const history = [];

What is the motivation for having history and redo as global variables? I would rather have them as part of the state. Whenever those are changed, the component is rerendered anyway.

vyhnalekl

comment created time in 11 hours

Pull request review commentmicrosoft/fluentui

Replace compose with a simpler set of helpers (not export impacted, included under /next folder)

+import * as React from 'react';+import { GenericDictionary } from './types';++/**+ * Ensures that the given slots are represented using object syntax. This ensures that+ * the object can be merged along with other objects.+ * @param props - The incoming props+ * @param shorthandPropNames - An array of prop names to apply simplification to+ */+export const simplifyShorthand = (props: GenericDictionary, shorthandPropNames?: string[]) => {+  let newProps = props;++  if (shorthandPropNames && shorthandPropNames.length) {+    newProps = {+      ...props,+    };+    for (const propName of shorthandPropNames) {+      const propValue = props[propName];++      if (propValue !== undefined && (typeof propValue !== 'object' || React.isValidElement(propValue))) {+        newProps[propName] = { children: propValue };

v0 shorthands can map to a different prop based on config: https://github.com/microsoft/fluentui/blob/10a4c280bd1feb94a149e35555d0539d55ff24a8/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx#L579-L581 and also supports an array collections: https://github.com/microsoft/fluentui/blob/10a4c280bd1feb94a149e35555d0539d55ff24a8/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx#L389-L391

Do you plan to support these as well?

dzearing

comment created time in 2 days

Pull request review commentmicrosoft/fluentui

Replace compose with a simpler set of helpers (not export impacted, included under /next folder)

+# @fluentui/react-compose++`@fluentui/react-compose` is a library of utilities for composing Fluent UI components.++## A basic component walkthrough++Building a recomposable component requires that we build legos; we put them together, but we let others put them together how they may need. Here's what's needed:++- **State hooks** - all processing of the component should be done within one or more reusable hooks. The hooks should be allowed to manipulate the state in some reusable way, so that recomposing the component can be easily done.+- **Render function** - a function which takes in final state and returns JSX. (e.g. `renderButton`)+- **Component factory function** - a create function which returns `{ state, render }` parts for creating the component. This is used to scaffold a new version of the component as needed.+- **Style hooks** - hooks which can take in styles and provide appropriate classnames to the anatomy of the component.++With these building blocks, you can compose or recompose the component in numerous ways.++### Simple example++A render function:++```jsx+const renderButton = state => {+  return <button {...state} />;+};+```++A hook which can manipulate the state (defining accessibility and behaviors):++```jsx+const useButton = state => {+  // If the button is rendered as something besides a button or anchor, make it focusable.+  if (state.as !== 'button' && state.as !== 'a') {+    state.tabIndex = 0;+  }+};+```++A factory function sets up the state and render function:++```jsx+const createButton = (userProps, ref, defaultProps) => {+  const state = _.merge({}, defaultProps, userProps);++  // Apply button behaviors.+  useButton(state);++  return { state, render };

  return { state, render: renderButton };

dzearing

comment created time in 3 days

push eventkolaps33/office-ui-fabric-react

Miroslav Stastny

commit sha fc08437bd78c7c591223979fd2528ff59814ef26

merge aa and axe errors

Environment Information

Please provide a reproduction of the bug in a codepen:

Actual behavior:

Expected behavior:

Pull request checklist

Description of changes

Focus areas to test

Description of changes

Focus areas to test

Description of changes

Focus areas to test

Pull request checklist

Description of changes

Focus areas to test

Pull request checklist

Description of changes

Focus areas to test

Pull request checklist

Description of changes

Focus areas to test

Description of changes

Focus areas to test

Description of changes

Description of changes

Description of changes

Focus areas to test

Description of changes

Focus areas to test

Pull request checklist

Description of changes

Focus areas to test

Environment Information

Please provide a reproduction of the bug in a codepen:

Repro steps

Actual behavior:

Expected behavior:

Priorities and help requested:

Pull request checklist

Description of changes

Pull request checklist

Description of changes

Pull request checklist

Description of changes

Focus areas to test

Environment Information

Please provide a reproduction of the bug in a codepen:

Repro steps

Actual behavior:

Expected behavior:

Priorities and help requested:

Description of changes

Description of changes

Description of changes

Description of changes