Fabric UX docs are inaccurate

[q-nicolechoi]

There are some discrepancies between the docs and the actual code, and I cannot use property binding in some cases. Here are some examples.

1. Button

To disable an icon button, the example code in docs shows

<fluent-button
  appearance="primary"
  disabledFocusable
  iconOnly
  shape="round"
  size="medium"
>
  Button
</fluent-button>

But after many trial and errors, it should be disabled and icon-Only instead of disabledFocusable and iconOnly.

<fluent-button appearance="primary" shape="round" size="medium" iconOnly>
    iconOnly
</fluent-button>
<fluent-button appearance="primary" shape="round" size="medium" icon-Only>
    icon-Only
</fluent-button>
<fluent-button appearance="primary" shape="round" size="medium" disabledFocusable>
    disabledFocusable
</fluent-button>
<fluent-button appearance="primary" shape="round" size="medium" disabled>
    Disabled
</fluent-button>

It will also be useful if we can use property binding, or is there an alternative way to dynamically to enable/disable a button?

2. MenuItem

The docs suggests it is possible to dynamically disable a menu item. But I cannot disable it at all:

<fluent-menu-list>
    <fluent-menu-item role="menuitem" [disabled]="true">
        Item 1
    </fluent-menu-item>
    <fluent-menu-item role="menuitem">
        Item 2
    </fluent-menu-item>
    <fluent-menu-item role="menuitem">
        Item 3
    </fluent-menu-item>
</fluent-menu-list>

These also don't work:

[anitamayorov]

Hi @q-nicolechoi, Those inconsistencies were discussed with Fabric UX team, and they will fix it, no ETA yet.