fix(EntityTitle): Fill should apply 100% width #7114
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #0000
Checklist
Changes proposed in this pull request:
Fixes a case where EntityTitle does not take up full width when the
fill={true}
when it is contained within a flexbox.By default, EntityTitle will fill the space of a non-flexbox container since it is itself a flexbox:
https://codesandbox.io/p/sandbox/entitytitle-fill-example-noflex-5f9l5x
However, when contained within a flexbox container, EntityTitle does not expand to fill the width. This is because it lacks a
flex-grow
or setwidth
.https://codesandbox.io/p/sandbox/entitytitle-fill-example-flex-7jdvmk
While this can be fixed by applying a custom class/styles, we would rather have this behavior be native to the component such that consumers don't need to apply their own styles to achieve the desired behavior. Setting
width: 100%
whenfill
is applied is also more in line with the behavior of other Blueprint components like Button, ButtonGroup, and Popover.The
fill
property was originally added to EntityTitle in #6973