[Stack] Add useFlexGap prop
#36404
Merged
[Stack] Add useFlexGap prop
#36404
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
siriwatknp
added
new feature
Netlify deploy preview
Bundle size report |
|
|
||
| ## Flexbox gap | ||
|
|
||
| To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set flag `useFlexGap` to true. |
There was a problem hiding this comment.
Suggested change
| To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set flag `useFlexGap` to true. | |
| To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set the prop `useFlexGap` to true. |
x all the other instances, I doubt we should ever use "flag" in this context.
Comment on lines
+43
to
+45
| <Stack> | ||
| <Avatar>W</Avatar> | ||
| </Stack> |
There was a problem hiding this comment.
Is this a typo?
Suggested change
| <Stack> | |
| <Avatar>W</Avatar> | |
| </Stack> | |
| <Avatar>W</Avatar> |
it looks wrong here too https://mui.com/joy-ui/react-stack/#white-space-nowrap in prod.
There was a problem hiding this comment.
I think so but let's fix it in another PR. It is not related to the useFlexGap prop.
|
|
||
| To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set flag `useFlexGap` to true. | ||
|
|
||
| It removes the [known limitation](#limitations) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers. We recommend to check the [support percentage](https://caniuse.com/?search=flex%20gap) before using it. |
There was a problem hiding this comment.
Suggested change
| It removes the [known limitation](#limitations) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers. We recommend to check the [support percentage](https://caniuse.com/?search=flex%20gap) before using it. | |
| It removes the [known limitation](#limitations) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers. | |
| We recommend checking the [support percentage](https://caniuse.com/?search=flex%20gap) before using it. |
x other instances
| })); | ||
|
|
||
| const message = `Truncation should be conditionally applicable on this long line of text | ||
| as this is a much longer line than what the container can support. `; |
There was a problem hiding this comment.
Suggested change
| as this is a much longer line than what the container can support. `; | |
| as this is a much longer line than what the container can support.`; |
| @@ -24,6 +24,14 @@ export interface StackBaseProps { | |||
| * Add an element between each child. | |||
| */ | |||
| divider?: React.ReactNode; | |||
| /** | |||
| * If `true`, the CSS flex `gap` is used instead of the pseudo selector approach. | |||
| * To enable this flag globally, follow the theme's default props configuration. | |||
There was a problem hiding this comment.
Suggested change
| * To enable this flag globally, follow the theme's default props configuration. | |
| * To enable this prop globally, follow the theme's default props configuration. |
| * If `true`, the CSS flex `gap` is used instead of the pseudo selector approach. | ||
| * To enable this flag globally, follow the theme's default props configuration. | ||
| * | ||
| * ⚠️ Warning: CSS flex `gap` is not fully supported in some browsers, we recommend to check https://caniuse.com/?search=flex%20gap before using this flag. |
There was a problem hiding this comment.
Suggested change
| * ⚠️ Warning: CSS flex `gap` is not fully supported in some browsers, we recommend to check https://caniuse.com/?search=flex%20gap before using this flag. | |
| * ⚠️ Warning: CSS flex `gap` is not fully supported in some browsers, we recommend checking https://caniuse.com/?search=flex%20gap before using this flag. |
hbjORbj
reviewed
Mar 17, 2023
|
@hbjORbj Can you take a look at the description again? |
hbjORbj
suggested changes
Mar 20, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
gapin Stack #33754