[Bug]: flexGrow and targetWidthProportion not working

[sagivf]

trafficstars

Library

React / v8 (@fluentui/react)

System Info

N/A

Tried it on my code. Tried on simple code pen examples (no example for flewGrow or targetWidthProportion by the way). And nothing. It just maximizes the first column no matter what I do.

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/sagivf/pen/XWEJzWa

Bug Description

Actual Behavior

Nothing works https://codepen.io/sagivf/pen/XWEJzWa Tried it on my code. Tried on simple code pen examples (no example for flewGrow or targetWidthProportion by the way). And nothing. It just maximizes the first column no matter what I do.

Expected Behavior

Work - some visual change to proportions. Can a working example be added? Seems like a pretty basic scenario.

Logs

No response

Requested priority

Blocking

Products/sites affected

Grids don't so grod

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[gouttierre]

@sagivf - Thanks for filing this issue with us. To set expectations the developers will review this issue once capacity allows.

@layershifter - Would you be able to confirm investigate this reported issues to confirm it is a regression?

[layershifter]

@sagivf I converted a Codepen that you have provided to a CodeSandbox: https://codesandbox.io/s/delicate-worker-00vmzj (it shows TS errors).

The usage that you have:

    this._columns = [
      { key: "column1", name: "Name", fieldName: "name", flexGrow: 1 },
      { key: "column2", name: "Value", fieldName: "value", flexGrow: 1 }
      // ❌ Property 'minWidth' is missing in type '{ key: string; name: string; fieldName: string; }' but required in type 'IColumn'.ts(2741)
      // DetailsList.types.d.ts(307, 5): 'minWidth' is declared here.
    ];

Was not fully correct as minWidth is a required prop in the interface:

https://github.com/microsoft/fluentui/blob/2c28d5a3dac4dce044de7a623d2cd4d814713750/packages/react/src/components/DetailsList/DetailsList.types.ts#L391-L392

We also have an example for proportional columns: https://github.com/microsoft/fluentui/blob/98aeeed439b9cff1161a01157ca97befe533f12f/packages/react-examples/src/react/DetailsList/DetailsList.ProportionalColumns.Example.tsx

CodeSandbox with it: https://codesandbox.io/s/floral-voice-8mz2rv

---

I have no idea why it was not present in documentation site, so I created a PR to make it visible (#24298).

---

@gouttierre I don't a bug there currently. @sagivf does it solve your problem?

[layershifter]

I am going to close this issue and we can't repro the problem. I also merged a PR with the example that I referenced, #24298.

@sagivf please let us know if your problem is not solved.