From c4a3b05e11e164beecc32a3960460a2feafbf7fc Mon Sep 17 00:00:00 2001 From: Riccardo Cipolleschi Date: Wed, 15 Jan 2025 10:37:17 +0100 Subject: [PATCH] apply Joe feedback on boxSizing and minWidth/minHeight --- website/blog/2025-01-15-version-0.77.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/blog/2025-01-15-version-0.77.md b/website/blog/2025-01-15-version-0.77.md index 07f68afb50d..236ca131ac7 100644 --- a/website/blog/2025-01-15-version-0.77.md +++ b/website/blog/2025-01-15-version-0.77.md @@ -7,7 +7,7 @@ date: 2025-01-15 Today we are excited to release React Native 0.77! -This release ships several features: new styling capabilities such as support for `display: contents`, `box-sizing`, `mixBlendMode`, and `outline`-related properties to provide a more powerful layout options; Android 16KB page support to be compatible with the newer Android devices. We are also modernizing the community template by migrating it to Swift, while continuing to support and maintain compatibility with Objective-C for developers who prefer it. +This release ships several features: new styling capabilities such as support for `display: contents`, `boxSizing`, `mixBlendMode`, and `outline`-related properties to provide a more powerful layout options; Android 16KB page support to be compatible with the newer Android devices. We are also modernizing the community template by migrating it to Swift, while continuing to support and maintain compatibility with Objective-C for developers who prefer it. @@ -100,10 +100,10 @@ function Alerting({children}) { #### Box sizing -The `box-sizing` prop defines how the element's various sizing props (`width`, `height`, `min-width`, `min-height`, etc.) are computed. If `box-sizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box` they apply to the content box of the element. The default value is `border-box`, this is different from the default value on the web. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) is a good source of information if you wish to learn more about how this prop works. +The `boxSizing` prop defines how the element's various sizing props (`width`, `height`, `minWidth`, `minHeight`, etc.) are computed. If `boxSizing` is `border-box`, these sizes apply to the border box of the element. If it is `content-box` they apply to the content box of the element. The default value is `border-box`, this is different from the default value on the web. The [web documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/boxSizing) is a good source of information if you wish to learn more about how this prop works. :::warning -`border-box` has been the default forever at this point, and has been the only `box-sizing` value up until we added `content-box`. Changing the default would have been a breaking change that would suddenly break several layouts. We decided to keep `border-box` as default value to ensure backward compatibility. +`border-box` has been the default forever at this point, and has been the only `boxSizing` value up until we added `content-box`. Changing the default would have been a breaking change that would suddenly break several layouts. We decided to keep `border-box` as default value to ensure backward compatibility. ::: To understand the difference between `border-box` and `content-box`, have a look at these example, where both `View`s have `padding: 20` and `borderWidth: 10`. When using `border-box`, we consider border and padding for the sizing; when using `content-box`, we consider only the content for the sizing.