feat(min-max-width-height): added min/max height and width to sizing - #4009
Conversation
|
Preview: https://patternfly-pr-4009.surge.sh A11y report: https://patternfly-pr-4009-coverage.surge.sh
|
c4d8e2e to
432edc7
Compare
|
Will update to utility |
4c2ec49 to
5ffb85f
Compare
mcoker
left a comment
There was a problem hiding this comment.
@mattnolting wdyt about adding this to the existing sizing utility, basically updating it to support custom width/min-width/max-width using the responsive var stack. We could do the same with height.
5ffb85f to
8bb2c21
Compare
|
@mcoker updated |
|
I don't understand the page structure and why there are two documentation sections and some parts are "examples" while others are under documentation. |
a2f20f6 to
0639ce0
Compare
|
@srambach updated structure and examples |
|
|
||
| ### Usage | ||
| | Class | Applied to | Outcome | | ||
| | ----------------------------------------------------------- | --------------------- | ----------------------------- | |
There was a problem hiding this comment.
Should we relabel "Class" to something like "Custom property"? (same comment applies to line 212)
mcoker
left a comment
There was a problem hiding this comment.
Looks great! It's good as is, but left a few comments for review.
|
|
||
| ### Usage | ||
| These utilities are not recommended for general layout purposes. They should primarily be used to enable responsive behaviors of certain components through breakpoints. | ||
| | Class | Applied to | Outcome | |
There was a problem hiding this comment.
nit - we typically don't try and align the markdown tables, just use a single space, but it doesn't matter to me.
| @@ -0,0 +1,7 @@ | |||
| <div class="{{#if sizing-min-max--modifier}} {{sizing-min-max--modifier}}{{/if}}"{{#if sizing-min-max--attribute}} {{{sizing-min-max--attribute}}}{{/if}}> | |||
There was a problem hiding this comment.
nit - it's usually written like...
| <div class="{{#if sizing-min-max--modifier}} {{sizing-min-max--modifier}}{{/if}}"{{#if sizing-min-max--attribute}} {{{sizing-min-max--attribute}}}{{/if}}> | |
| <div class="{{#if sizing-min-max--modifier}} {{sizing-min-max--modifier}}{{/if}}" | |
| {{#if sizing-min-max--attribute}} | |
| {{{sizing-min-max--attribute}}} | |
| {{/if}}> |
| $important: true | ||
| ); | ||
|
|
||
| overflow: auto !important; |
There was a problem hiding this comment.
I'm not sure if I would expect overflow/triggering a scrollbar to be set by default or not. The other sizing classes don't set overflow, and from the utility name, I would expect it to just set that property. Were you thinking it would be best if it did? Scrollable/overflow could also potentially be a utility.
0639ce0 to
616ed57
Compare
616ed57 to
94fcc3b
Compare
786fd92 to
c6d2806
Compare
|
🎉 This PR is included in version 4.118.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
closes #3976