Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove experimental_ prefix from boxShadow (#46404)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46404

As title

Second attempt to rename the prop. BoxShadow caused no issues after renaming but it was batched with `filter` which we reverted.

Changelog: [General] [Changed] - Add official `boxShadow` CSSProperty.

Reviewed By: NickGerleman, cyan33

Differential Revision: D62400814

fbshipit-source-id: ad721f6d11d614e987048e55556b05ff74a4747d
This commit is contained in:
Jorge Cabiedes Acosta
2024-09-11 16:01:06 -07:00
committed by Riccardo Cipolleschi
parent b4aab7fb52
commit 6259ee91bd
15 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js
Vendored
+1 -1
View File
@@ -135,7 +135,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
/*
* BoxShadow
*/
experimental_boxShadow: {process: processBoxShadow},
boxShadow: {process: processBoxShadow},
/**
* Linear Gradient
packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js
+1 -1
View File
@@ -169,7 +169,7 @@ const validAttributesForNonEventProps = {
experimental_backgroundImage: {
process: require('../StyleSheet/processBackgroundImage').default,
},
experimental_boxShadow: {
boxShadow: {
process: require('../StyleSheet/processBoxShadow').default,
},
experimental_filter: {
packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js
+1 -1
View File
@@ -225,7 +225,7 @@ const validAttributesForNonEventProps = {
experimental_filter: {
process: require('../StyleSheet/processFilter').default,
},
experimental_boxShadow: {
boxShadow: {
process: require('../StyleSheet/processBoxShadow').default,
},
experimental_mixBlendMode: true,
packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
Vendored
+1
View File
@@ -336,6 +336,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
isolation?: 'auto' | 'isolate' | undefined;
cursor?: CursorValue | undefined;
boxShadow?: ReadonlyArray<BoxShadowPrimitive> | string | undefined;
}
export type FontVariant =
packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
Vendored
+1 -1
View File
@@ -788,7 +788,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
elevation?: number,
pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
cursor?: CursorValue,
experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
experimental_mixBlendMode?: ____BlendMode_Internal,
experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+1 -1
View File
@@ -8314,7 +8314,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
elevation?: number,
pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
cursor?: CursorValue,
experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
experimental_mixBlendMode?: ____BlendMode_Internal,
experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
packages/react-native/React/Views/RCTViewManager.m
+1 -1
View File
@@ -438,7 +438,7 @@ RCT_CUSTOM_VIEW_PROPERTY(experimental_filter, NSArray *, RCTView)
// filtered by view configs.
}
RCT_CUSTOM_VIEW_PROPERTY(experimental_boxShadow, NSArray *, RCTView)
RCT_CUSTOM_VIEW_PROPERTY(boxShadow, NSArray *, RCTView)
{
// Property is only to be used in the new renderer.
// It is necessary to add it here, otherwise it gets
packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt
+1 -1
View File
@@ -136,7 +136,7 @@ public object ViewProps {
public const val BORDER_START_COLOR: String = "borderStartColor"
public const val BORDER_END_COLOR: String = "borderEndColor"
public const val ON_LAYOUT: String = "onLayout"
public const val BOX_SHADOW: String = "experimental_boxShadow"
public const val BOX_SHADOW: String = "boxShadow"
public const val FILTER: String = "experimental_filter"
public const val MIX_BLEND_MODE: String = "experimental_mixBlendMode"
public const val TRANSFORM: String = "transform"
packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp
+2 -2
View File
@@ -155,7 +155,7 @@ BaseViewProps::BaseViewProps(
: convertRawProp(
context,
rawProps,
"experimental_boxShadow",
"boxShadow",
sourceProps.boxShadow,
{})),
filter(
@@ -347,7 +347,7 @@ void BaseViewProps::setProp(
RAW_SET_PROP_SWITCH_CASE_BASIC(experimental_layoutConformance);
RAW_SET_PROP_SWITCH_CASE_BASIC(cursor);
RAW_SET_PROP_SWITCH_CASE(filter, "experimental_filter");
RAW_SET_PROP_SWITCH_CASE(boxShadow, "experimental_boxShadow");
RAW_SET_PROP_SWITCH_CASE(boxShadow, "boxShadow");
// events field
VIEW_EVENT_CASE(PointerEnter);
VIEW_EVENT_CASE(PointerEnterCapture);
packages/react-native/types/experimental.d.ts
Vendored
-4
View File
@@ -150,10 +150,6 @@ declare module '.' {
}
export interface ViewStyle {
experimental_boxShadow?:
| ReadonlyArray<BoxShadowPrimitive>
| string
| undefined;
experimental_filter?: ReadonlyArray<FilterFunction> | string | undefined;
experimental_mixBlendMode?: BlendMode | undefined;
experimental_backgroundImage?:
packages/rn-tester/js/components/RNTPressableRow.js
+1 -1
View File
@@ -69,7 +69,7 @@ const styles = StyleSheet.create({
paddingVertical: 16,
marginVertical: 5,
marginHorizontal: 16,
experimental_boxShadow: '0 2px 4px -1px rgba(0, 0, 0, 0.25)',
boxShadow: '0 2px 4px -1px rgba(0, 0, 0, 0.25)',
borderRadius: 8,
},
descriptionText: {
packages/rn-tester/js/examples/Image/ImageExample.js
+3 -3
View File
@@ -830,10 +830,10 @@ const styles = StyleSheet.create({
},
boxShadowWithBackground: {
backgroundColor: 'lightblue',
experimental_boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.5)',
boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.5)',
},
boxShadowMultiOutsetInset: {
experimental_boxShadow:
boxShadow:
'-5px -5px 10px 2px rgba(0, 128, 0, 0.5), 5px 5px 10px 2px rgba(128, 0, 0, 0.5), inset orange 0px 0px 20px 0px, black 0px 0px 5px 1px',
borderColor: 'blue',
borderWidth: 1,
@@ -846,7 +846,7 @@ const styles = StyleSheet.create({
borderBottomLeftRadius: 20,
marginRight: 80,
marginTop: 40,
experimental_boxShadow: '80px 0px 10px 0px hotpink',
boxShadow: '80px 0px 10px 0px hotpink',
transform: 'rotate(-15deg)',
},
});
packages/rn-tester/js/examples/Text/TextExample.android.js
+1 -1
View File
@@ -1444,7 +1444,7 @@ const examples = [
testID="text-box-shadow"
style={{
borderRadius: 10,
experimental_boxShadow: '0 0 10px red',
boxShadow: '0 0 10px red',
}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
packages/rn-tester/js/examples/Text/TextExample.ios.js
+1 -1
View File
@@ -1438,7 +1438,7 @@ const examples = [
testID="text-box-shadow"
style={{
borderRadius: 10,
experimental_boxShadow: '0 0 10px red',
boxShadow: '0 0 10px red',
}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
packages/rn-tester/js/examples/View/ViewExample.js
+7 -7
View File
@@ -464,7 +464,7 @@ function BoxShadowExample(): React.Node {
borderRadius: 10,
borderWidth: 5,
borderColor: 'red',
experimental_boxShadow: '0 0 10px 0 black',
boxShadow: '0 0 10px 0 black',
}}
/>
<View
@@ -473,7 +473,7 @@ function BoxShadowExample(): React.Node {
borderRadius: 30,
borderWidth: 5,
borderColor: 'red',
experimental_boxShadow: 'inset 0 0 10px 0 black',
boxShadow: 'inset 0 0 10px 0 black',
}}
/>
<View
@@ -482,7 +482,7 @@ function BoxShadowExample(): React.Node {
borderRadius: 30,
borderWidth: 5,
borderColor: 'red',
experimental_boxShadow:
boxShadow:
'inset 15px -5px 5px 5px cyan, inset 15px -5px 20px 10px orange, -5px 5px 5px 0px green, 0px -10px 0px 5px black',
}}
/>
@@ -491,7 +491,7 @@ function BoxShadowExample(): React.Node {
<View
style={{
...defaultStyleSize,
experimental_boxShadow: '0px 0px 5px 5px black',
boxShadow: '0px 0px 5px 5px black',
}}>
<View
style={{
@@ -506,7 +506,7 @@ function BoxShadowExample(): React.Node {
style={{
...defaultStyleSize,
backgroundColor: 'red',
experimental_boxShadow: 'inset 0px 0px 5px 5px black',
boxShadow: 'inset 0px 0px 5px 5px black',
}}
/>
<View style={{...defaultStyleSize, flexDirection: 'row'}}>
@@ -514,7 +514,7 @@ function BoxShadowExample(): React.Node {
<View
style={{
...defaultStyleSize,
experimental_boxShadow: ' 0px 0px 20px 5px black',
boxShadow: ' 0px 0px 20px 5px black',
}}
/>
<View style={{width: 25, height: 25, backgroundColor: 'cyan'}} />
@@ -525,7 +525,7 @@ function BoxShadowExample(): React.Node {
style={{
...defaultStyleSize,
backgroundColor: 'green',
experimental_boxShadow: '0px 10px',
boxShadow: '0px 10px',
}}
/>
</View>