profile
viewpoint

issue openedOfficeDev/office-ui-fabric-react

DropDown's responsiveMode prop enum type should exposed from 'office-ui-fabric-react'

<!--
Thanks for contacting us! We're here to help.

Before you report an issue, check if it's been reported before:

  • Search: https://github.com/OfficeDev/office-ui-fabric-react/search?type=Issues
  • Search by area or component: https://github.com/OfficeDev/office-ui-fabric-react/issues/labels

Please provide a reproduction of the bug in a codepen, if possible. Here’s how:

  • Goto https://aka.ms/fabricpen for a starting codepen
  • You can also use the "Export to Codepen" feature for the various components in our documentation site.
  • Alternatively, you can also use https://aka.ms/fabricdemo 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)

Note that if you do not provide enough information to reproduce the issue, we may not be able to take action on your report. -->

Environment Information

  • Package version(s): (fill this out)
  • Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

<Dropdown label={this.props.label} options={this.resolveOptions()} placeholder={this.props.placeholder} onRenderList={this.renderCalloutList} onRenderOption={this.props.customListElementRender} selectedKeys={this.props.selectedItems as string[]} multiSelect={this.props.multiSelect} onChange={this.props.onChange} disabled={this.props.isDisabled} styles={this.props.styles} errorMessage={this.props.errorMessage} onDismiss={this.onDropdownDismissed} calloutProps={calloutProps} responsiveMode={ResponsiveMode.large} />

Actual behavior:

ResponsiveMode is only available through directly linkinig into lib

https://github.com/OfficeDev/office-ui-fabric-react/blob/acefdefb12eec6c495d5ffe25625b7da9d17cf78/packages/example-app-base/src/components/App/App.tsx#L7

This specifically crash create-react-app https://github.com/facebook/create-react-app

Jest test enviroment which compiled by node (thus need commonjs module)

if we include reference for the enum type for the number from lib-commonjs folder, we end packing both office-ui-fabrid-react/lib and office-ui-fabric-react/lib-commonjs

Expected behavior:

Since a component is using by a component (in this case DropDown) The prop type should be available from the same level, ie 'office-ui-fabric-react'

import { ResponsiveMode } from 'office-ui-fabric-react'

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

created time in 12 days

issue closedOfficeDev/office-ui-fabric-react

ProgressIndicator: Indeterminate ProgressIndicator should have proper accessibility

<!-- Before submitting an accessibility issue please ensure the following are true:

  1. This issue is caused by a Fabric control
  2. You can reproduce this bug in a CodePen
  3. There is documentation or best practice that supports your expected behavior (Review https://www.w3.org/TR/wai-aria-1.1/ for accessibility guidance)

Do not link to, screenshot or reference a Microsoft product in this description

Issues that do not meet these guidelines will be closed. -->

Codepen demonstrating the issue

Indeterminate ProgressIndicator

Actual behavior:

https://github.com/OfficeDev/office-ui-fabric-react/blob/bf912f0679f7c54bfd6864c6e8b7a9dfc2de128b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx#L89

https://developer.microsoft.com/en-us/fabric#/components/progressindicator

image

Expected behavior:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

Specifically

If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always readonly.

Documentation describing expected behavior

closed time in 25 days

LiangMingChen

issue commentOfficeDev/office-ui-fabric-react

ProgressIndicator: Indeterminate ProgressIndicator should have proper accessibility

Yes, let me open a work item on our team to work through it. Thanks for looking into this.

LiangMingChen

comment created time in 25 days

issue commentOfficeDev/office-ui-fabric-react

DetailsList.types.d.ts incorrect typed getKey() to return a string

Yes, on both, getKey(item: any, index?: number) => string | number| undefined | null (since some coding standard is null is intentional and undefined as missing.)

Yes, List is more correct, (or better yet, share the implementation from both. -- there doesn't seems to have reason for different version of it since it basically implemented the same thing.)

The test cases should be cover is 0, '' (empty string), as both are legit (currently DetailList will ignore 0 and '' empty string from the this.props.getKey's return. you can argue that '' empty string should not be valid ) -- in that case, then we need to fix up List's implementation. to ignore ''.
Thus Share the code so they can have same behavior?

LiangMingChen

comment created time in a month

issue openedOfficeDev/office-ui-fabric-react

DetailsList.types.d.ts incorrect typed getKey() to return a string

<!--
Thanks for contacting us! We're here to help.

Before you report an issue, check if it's been reported before:

  • Search: https://github.com/OfficeDev/office-ui-fabric-react/search?type=Issues
  • Search by area or component: https://github.com/OfficeDev/office-ui-fabric-react/issues/labels

Please provide a reproduction of the bug in a codepen, if possible. Here’s how:

  • Goto https://aka.ms/fabricpen for a starting codepen
  • You can also use the "Export to Codepen" feature for the various components in our documentation site.
  • Alternatively, you can also use https://aka.ms/fabricdemo 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)

Note that if you do not provide enough information to reproduce the issue, we may not be able to take action on your report. -->

Environment Information

  • Package version(s): (fill this out)
  • Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

<!-- Goto https://aka.ms/fabricpen for a starting codepen --> <!-- See http://codepen.io/dzearing/pens/public/?grid_type=list for a variety of examples --> <!-- Alternatively, you can also use https://aka.ms/fabricdemo to get permanent repro links. -->

Actual behavior:

https://github.com/OfficeDev/office-ui-fabric-react/blob/48ef2097fcaf941b71e9f2173751d1f6971f4f02/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts#L229

is typed the function need to be getKey(item: any, index?: number) => string.

But the implementation is

https://github.com/OfficeDev/office-ui-fabric-react/blob/4c90a78d365e575d5bcaa26f20d3b302352c9949/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx#L961

it expected the typed to be getKey(item: any, index?: number) => string | null | undefined.

But now this cause Typescript compiler error image

Expected behavior:

private getKey: IDetailsListProps['getKey'] = (item, index): string | null | undefined => { doesn't have compiler error .

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

created time in a month

issue commentOfficeDev/office-ui-fabric-react

Performance drag due to styled HOC is passing new function every time on render

The change looks great! Thanks for fixing it.

@LiangMingChen Hope this is what you were after! Let me know.

LiangMingChen

comment created time in a month

issue openedOfficeDev/office-ui-fabric-react

ProgressIndicator: Indeterminate ProgressIndicator should have proper accessibility

<!-- Before submitting an accessibility issue please ensure the following are true:

  1. This issue is caused by a Fabric control
  2. You can reproduce this bug in a CodePen
  3. There is documentation or best practice that supports your expected behavior (Review https://www.w3.org/TR/wai-aria-1.1/ for accessibility guidance)

Do not link to, screenshot or reference a Microsoft product in this description

Issues that do not meet these guidelines will be closed. -->

Codepen demonstrating the issue

Indeterminate ProgressIndicator

Actual behavior:

https://github.com/OfficeDev/office-ui-fabric-react/blob/bf912f0679f7c54bfd6864c6e8b7a9dfc2de128b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.base.tsx#L89

https://developer.microsoft.com/en-us/fabric#/components/progressindicator

image

Expected behavior:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

Specifically

If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always readonly.

Documentation describing expected behavior

created time in a month

issue commentOfficeDev/office-ui-fabric-react

Performance drag due to styled HOC is passing new function every time on render

For the test, I will create a Simple wrapped component with componentWillReceiveProps or a static getDrivedStateFromProps https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

to make sure that styled does not change. I found componetWillReceiveProps better to use because I can diff identity with prevProps. To make sure if any props (say items) other than styleProps, baseStyles, customizedStyles, this.props.styles that wrapped component should only get items, but not styled prop changed.

Alternative. DetailListView to find out (which base have a componentWillReceiveProps.) #8764 Grid/Chart like component (typically involved 250+ DOM Elements.) even generate and diff on the Virtual DOM is a big deal.

LiangMingChen

comment created time in a month

issue commentOfficeDev/office-ui-fabric-react

Performance drag due to styled HOC is passing new function every time on render

Thanks for fixing this.

I think is that -- yes, tslint rule or airbnb typescript guidline will not capture all the error. It point to that most react - developer's performance pitfall that''s easily fall into. (unfortunately.) To make react faster.

  1. the best is to make props identity check work (===). In this category, I have seen enough in my team to move "helper" function out of the render but create a new object (or new function) :(
  2. then the Virtual DOM diff (most of them fall into here.) -- it works, but we all need to ask, why HOC wrapped component's component render, componentDidUpdate etc get call.

Writing HOC is at its best as it composition nature of it. Then HOC is easily been most widely used. If we spend x amount time of on testing one components, if HOC is been use in 50 components, then every line should be if not double check, triple check every line on perf implication. It is hard to justify every component to be perf-watched, (if it only get use rarely.) HOC is one of those components that every line probably worth nit-pick on.

LiangMingChen

comment created time in a month

issue commentOfficeDev/office-ui-fabric-react

Performance: Avoid getComputedStyle (Known performance drag) on Sticky

To be fare I think all api mentions in Paul's blog should be under review for performance impact. https://gist.github.com/paulirish/5d52fb081b3570c81e3a#getcomputedstyle

At least have several set of eyes on it to see if there are alternative way. For example. just on this API. https://github.com/OfficeDev/office-ui-fabric-react/search?q=getComputedStyle&unscoped_q=getComputedStyle

This one: https://github.com/OfficeDev/office-ui-fabric-react/blob/bd191a3964734c6619fa49fcdb1d6127e2834522/packages/utilities/src/scroll.ts#L171

As it try to work around some corner case and ask majority of user to pay the price. https://github.com/jquery/jquery.com/issues/88#issuecomment-72400007

LiangMingChen

comment created time in a month

issue commentOfficeDev/office-ui-fabric-react

Why does Scrollable pane have zindex of 1

It create a new layer that rendering engine need to go through. And once you are there, every component start to do n+1, n+2. n + 10 etc. It is a slipper slop. it quickly become unmanageable. It is best to avoid to do zindex in the first place. chrome used to have layer paneling view (not sure they remove it or hide it somewhere., https://www.google.com/search?q=chrome+developer+tools+3d+view https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#layers

Yes, it is on a different core/thread than javascript engine. But it is still consuming the CPU and Memory If you need more information, it is worthwhile to contact new Edge team ...

it is best to use implicit DOM order. (that latter DOM Element will render on top of earlier DOM Element). Especially in the component level. Reuseable components are best not to use it and Application to composed it base on implicit DOM order. On rare situation then Application Author have a chance to managed it.

For the reference. https://github.com/OfficeDev/office-ui-fabric-react/blob/14c515ba0c134a9bed877751972bc0071bd849d5/packages/styling/src/styles/zIndexes.ts#L2

So if I want to over lay a Div, while Nav DOM is buidling up (so user can't click on it.), Application author have to use Zindex >=1 . If it is 2, then it create another layer It is not only slower to render, and Case and point. I can't image there is actually a z index of 1,000,000 https://github.com/OfficeDev/office-ui-fabric-react/blob/14c515ba0c134a9bed877751972bc0071bd849d5/packages/styling/src/styles/zIndexes.ts#L6

Then Oh, I need to beat it, so I have anohter , 1000,000 + 1 https://github.com/OfficeDev/office-ui-fabric-react/blob/14c515ba0c134a9bed877751972bc0071bd849d5/packages/styling/src/styles/zIndexes.ts#L7

LiangMingChen

comment created time in a month

issue commentOfficeDev/office-ui-fabric-react

Why does Scrollable pane have zindex of 1

Note that have zindex is a force layering from blink (chrome rendering engine.) https://en.wikipedia.org/wiki/Blink_(browser_engine)

It also force developer who use it to have to counter act on the layering. (that is everything on top it to avoid DOM removal, Say you want to show search result is no item. when you need to hid it without destroying the whole table. (thus couple hundreds of DOM need delete and recreate it back then Scrollable will have to reculated again.

LiangMingChen

comment created time in a month

issue openedOfficeDev/office-ui-fabric-react

Performance: Avoid getComputedStyle (Known performance drag) on Sticky

<!--
Thanks for contacting us! We're here to help.

Before you report an issue, check if it's been reported before:

  • Search: https://github.com/OfficeDev/office-ui-fabric-react/search?type=Issues
  • Search by area or component: https://github.com/OfficeDev/office-ui-fabric-react/issues/labels

Please provide a reproduction of the bug in a codepen, if possible. Here’s how:

  • Goto https://aka.ms/fabricpen for a starting codepen
  • You can also use the "Export to Codepen" feature for the various components in our documentation site.
  • Alternatively, you can also use https://aka.ms/fabricdemo 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)

Note that if you do not provide enough information to reproduce the issue, we may not be able to take action on your report. -->

Environment Information

  • Package version(s): (fill this out)
  • Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

<!-- Goto https://aka.ms/fabricpen for a starting codepen --> <!-- See http://codepen.io/dzearing/pens/public/?grid_type=list for a variety of examples --> <!-- Alternatively, you can also use https://aka.ms/fabricdemo to get permanent repro links. -->

Actual behavior:

I notice that a lot of officeUiFabric is using window.getComputedStyle which is known for the force Render (Top performance --javascript force render for the performance issue.)

Here is from Chrome Developerment Lead (Paul Irish.) blog post. on known force Javascript layout. https://gist.github.com/paulirish/5d52fb081b3570c81e3a#getcomputedstyle

Especially, It notify the Blink (chrome render engine.) on the other thread, https://en.wikipedia.org/wiki/Blink_(browser_engine) Get all pending CSS evaluate, and eval all from the node that you ask for all the way to find out all possible className might impacted. render and evaluated.

https://www.google.com/search?q=getcomputedstyle+performance Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15695897/

https://github.com/OfficeDev/office-ui-fabric-react/search?q=getComputedStyle&unscoped_q=getComputedStyle

Sticky.prototype._getBackground function findScrollableParent(startingElement) {

I only look into this because I am looking at Scroll (once, Sticky have a lot.) image

On page load https://int.pi.dynamics.com/teams/91be920fcec34852b5a6e7e4b8b33abd/projects/c97c22215b9549fc948815b57c92d83f/metrics

sticky call getComputedStyle get call 418 times !!!

I don't mind scrollable call 2 times image

Expected behavior:

  1. Don't call getComputedStyle as much as possible.
  2. Don't call it in a loop (multiple force render.)
  3. If you have to have do it. a. do it at the debounce & after request animation frame. (Thus blink is already eval most of the data that you ask for.) b. stamp the class that you are looking for rather than ask the style to get for it.

Note that call 418 time get computed style is very excessive.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

created time in a month

issue openedOfficeDev/office-ui-fabric-react

Performance drag due to styled HOC is passing new function every time on render

<!--
Thanks for contacting us! We're here to help.

Before you report an issue, check if it's been reported before:

  • Search: https://github.com/OfficeDev/office-ui-fabric-react/search?type=Issues
  • Search by area or component: https://github.com/OfficeDev/office-ui-fabric-react/issues/labels

Please provide a reproduction of the bug in a codepen, if possible. Here’s how:

  • Goto https://aka.ms/fabricpen for a starting codepen
  • You can also use the "Export to Codepen" feature for the various components in our documentation site.
  • Alternatively, you can also use https://aka.ms/fabricdemo 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)

Note that if you do not provide enough information to reproduce the issue, we may not be able to take action on your report. -->

Environment Information

  • Package version(s): (fill this out)
  • Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

<!-- Goto https://aka.ms/fabricpen for a starting codepen --> <!-- See http://codepen.io/dzearing/pens/public/?grid_type=list for a variety of examples --> <!-- Alternatively, you can also use https://aka.ms/fabricdemo to get permanent repro links. -->

Actual behavior:

This is reported on Performance drag due to styled HOC is passing new function every time on render #8769 https://github.com/OfficeDev/office-ui-fabric-react/issues/8769

Expected behavior:

The fix doesn't address the issue. Doesn't think the change fix the

The new change at https://github.com/dzearing/office-ui-fabric-react/blob/07833d5e3e463f8332b87a33b0bfaec43647f7c9/packages/utilities/src/styled.tsx#L87

At end of day, when you return the JSX, you are giveing the new styles function (at line 84 a new function every single time. Regardless where you move the function.

Please do a profile with DetailListView to find out (which base have a componentWillReceiveProps.) #8764

And please add test. The merge change doesn't have a test.

<!-- fill this out -->

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

created time in a month

issue commentOfficeDev/office-ui-fabric-react

Performance drag due to styled HOC is passing new function every time on render

Doesn't think the change fix the

The new change at https://github.com/dzearing/office-ui-fabric-react/blob/07833d5e3e463f8332b87a33b0bfaec43647f7c9/packages/utilities/src/styled.tsx#L87

At end of day, when you return the JSX, you are giveing the new styles function (at line 84 a new function every single time. Regardless where you move the function.

Please do a profile with DetailListView to find out (which base have a componentWillReceiveProps.) https://github.com/OfficeDev/office-ui-fabric-react/issues/8764

And please add test. The merge change doesn't have a test.

LiangMingChen

comment created time in a month

issue commentOfficeDev/office-ui-fabric-react

Performance: Why is DetailListBase not cached it styled ?

Thanks for the report @LiangMingChen.

This is definitely worth fixing for performance. Last time I briefly investigated this I couldn't dive far enough into the styles call to see what was churning.

I open a issue to styled tag https://github.com/OfficeDev/office-ui-fabric-react/issues/8769

LiangMingChen

comment created time in a month

issue openedOfficeDev/office-ui-fabric-react

Performance drag due to styled HOC is passing new function every time on render

<!--
Thanks for contacting us! We're here to help.

Before you report an issue, check if it's been reported before:

  • Search: https://github.com/OfficeDev/office-ui-fabric-react/search?type=Issues
  • Search by area or component: https://github.com/OfficeDev/office-ui-fabric-react/issues/labels

Please provide a reproduction of the bug in a codepen, if possible. Here’s how:

  • Goto https://aka.ms/fabricpen for a starting codepen
  • You can also use the "Export to Codepen" feature for the various components in our documentation site.
  • Alternatively, you can also use https://aka.ms/fabricdemo 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)

Note that if you do not provide enough information to reproduce the issue, we may not be able to take action on your report. -->

Environment Information

  • Package version(s): (fill this out)
  • Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

<!-- Goto https://aka.ms/fabricpen for a starting codepen --> <!-- See http://codepen.io/dzearing/pens/public/?grid_type=list for a variety of examples --> <!-- Alternatively, you can also use https://aka.ms/fabricdemo to get permanent repro links. -->

Actual behavior:

image

<!-- fill this out -->

Base on react document, you should not have new lambda expression. https://github.com/airbnb/javascript/tree/master/react#methods

Bind event handlers for the render method in the constructor. eslint: react/jsx-no-bind

Why? A bind call in the render path creates a brand new function on every single render. Do not use arrow functions in class fields, because it makes them challenging to test and debug, and can negatively impact performance, and because conceptually, class fields are for data, not logic.

There is actually a tslint rule for this jsx-no-lambda: Creating new anonymous functions (with either the function syntax or ES2015 arrow syntax) inside the render call stack works against pure component rendering. When doing an equality check between two lambdas, React will always consider them unequal values and force the component to re-render more often than necessary.

<!-- fill this out -->

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

created time in a month

issue openedOfficeDev/office-ui-fabric-react

Performance: Why is DetailListBase not cached it styled ?

<!--
Thanks for contacting us! We're here to help.

Before you report an issue, check if it's been reported before:

  • Search: https://github.com/OfficeDev/office-ui-fabric-react/search?type=Issues
  • Search by area or component: https://github.com/OfficeDev/office-ui-fabric-react/issues/labels

Please provide a reproduction of the bug in a codepen, if possible. Here’s how:

  • Goto https://aka.ms/fabricpen for a starting codepen
  • You can also use the "Export to Codepen" feature for the various components in our documentation site.
  • Alternatively, you can also use https://aka.ms/fabricdemo 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)

Note that if you do not provide enough information to reproduce the issue, we may not be able to take action on your report. -->

Environment Information

  • Package version(s): (fill this out)
  • Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

<!-- Goto https://aka.ms/fabricpen for a starting codepen --> <!-- See http://codepen.io/dzearing/pens/public/?grid_type=list for a variety of examples --> <!-- Alternatively, you can also use https://aka.ms/fabricdemo to get permanent repro links. -->

Actual behavior:

DetailListBase componentWill receiveProps always get call due to styled changed.

image

node_modules\office-ui-fabric-react\lib\components\DetailsList\DetailsList.styles.js

getStyles is not memoized.

D:\AS\1\Aria\honolulu-client\node_modules\office-ui-fabric-react\lib\components\DetailsList\DetailsList.js

import { styled } from '../../Utilities'; import { DetailsListBase } from './DetailsList.base'; import { getStyles } from './DetailsList.styles'; export var DetailsList = styled(DetailsListBase, getStyles, undefined, { scope: 'DetailsList' });

this styled always create a new proped for DetailListBase.

Expected behavior:

Nothing should change. it should memoized the get Styles

<!-- fill this out -->

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

created time in a month

issue openedOfficeDev/office-ui-fabric-react

Why does Scrollable pane have zindex of 1

<!--
Thanks for contacting us! We're here to help.

Before you report an issue, check if it's been reported before:

  • Search: https://github.com/OfficeDev/office-ui-fabric-react/search?type=Issues
  • Search by area or component: https://github.com/OfficeDev/office-ui-fabric-react/issues/labels

Please provide a reproduction of the bug in a codepen, if possible. Here’s how:

  • Goto https://aka.ms/fabricpen for a starting codepen
  • You can also use the "Export to Codepen" feature for the various components in our documentation site.
  • Alternatively, you can also use https://aka.ms/fabricdemo 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)

Note that if you do not provide enough information to reproduce the issue, we may not be able to take action on your report. -->

Environment Information

https://github.com/OfficeDev/office-ui-fabric-react/blob/e83f082e86ab8a599f298dc1dfe343981bbebee5/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts#L17

That make every thing very hard to try to other people to have loading indicator on top of it.

  • Package version(s): (fill this out)
  • Browser and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

<!-- Goto https://aka.ms/fabricpen for a starting codepen --> <!-- See http://codepen.io/dzearing/pens/public/?grid_type=list for a variety of examples --> <!-- Alternatively, you can also use https://aka.ms/fabricdemo to get permanent repro links. -->

Actual behavior:

<!-- fill this out -->

Expected behavior:

<!-- fill this out -->

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

created time in a month

issue openedMicrosoft/TypeScript

Why does TypeScript PM advice not to use const enum? If so, why not take out from language SPEC

Why does TypeScript PM advice not to use const enum? If so, why not take out from language SPEC

https://github.com/facebook/create-react-app/pull/4837#issuecomment-430107471

created time in 2 months

issue commentairbnb/enzyme

`.setProps()` doesn't trigger componentDidUpdate lifecycle method

The latest update seems to broke this again. node_modules/enzyme/build/ShallowWrapper.js line 552

if (lifecycles.componentDidUpdate && typeof instance.componentDidUpdate === 'function' && (!state || (0, _Utils.shallowEqual)(state, _this3.instance().state))) { instance.componentDidUpdate(prevProps, state, snapshot); }

The last condition make it that only state change will trigger instance.componentUpdate,

yzimet

comment created time in 2 months

more