Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RNMobile] Social Icons: Ensure inactive icons are visible with block-based themes #55398

Merged
merged 9 commits into from
Oct 25, 2023
Merged

[RNMobile] Social Icons: Ensure inactive icons are visible with block-based themes #55398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bd1c28b
Default colors for inactive icons with block theme
Oct 16, 2023
46500e4
Merge branch 'trunk' into rnmobile/social-icon-background-dark-mode
Oct 19, 2023
90f8216
Update CHANGELOG
Oct 19, 2023
ecf82a4
Merge branch 'trunk' into rnmobile/social-icon-background-dark-mode
Oct 19, 2023
dc5653a
Replace context with function for fetching styles
Oct 20, 2023
7dc5440
Merge branch 'trunk' into rnmobile/social-icon-background-dark-mode
Oct 20, 2023
4904259
Merge branch 'trunk' into rnmobile/social-icon-background-dark-mode
Oct 20, 2023
bcda233
Swap inactive icon colors with reduced opacity
Oct 23, 2023
a725f24
Merge branch 'trunk' into rnmobile/social-icon-background-dark-mode
Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 12 additions & 26 deletions packages/block-library/src/social-link/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
ToolbarButton,
LinkSettingsNavigation,
} from '@wordpress/components';
import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
import { compose } from '@wordpress/compose';
import { __, sprintf } from '@wordpress/i18n';
import { link, Icon } from '@wordpress/icons';
import { withSelect } from '@wordpress/data';
Expand All @@ -30,10 +30,6 @@ const DEFAULT_ACTIVE_ICON_STYLES = {
backgroundColor: '#f0f0f0',
color: '#444',
};
const DEFAULT_INACTIVE_ICON_STYLES = {
backgroundColor: '#0000003f',
color: '#fff',
};
const ANIMATION_DELAY = 300;
const ANIMATION_DURATION = 400;

Expand Down Expand Up @@ -66,12 +62,6 @@ const SocialLinkEdit = ( {
styles[ `wp-social-link-${ service }` ] ||
styles[ `wp-social-link` ] ||
DEFAULT_ACTIVE_ICON_STYLES;
const inactiveIcon =
usePreferredColorSchemeStyle(
styles.inactiveIcon,
styles.inactiveIconDark
) || DEFAULT_INACTIVE_ICON_STYLES;

const animatedValue = useRef( new Animated.Value( 0 ) ).current;

const IconComponent = getIconBySite( service )();
Expand All @@ -94,23 +84,13 @@ const SocialLinkEdit = ( {
}, [ url ] );

const interpolationColors = {
backgroundColor: animatedValue.interpolate( {
inputRange: [ 0, 1 ],
outputRange: [
inactiveIcon.backgroundColor,
activeIcon.backgroundColor,
],
} ),
color: animatedValue.interpolate( {
opacity: animatedValue.interpolate( {
inputRange: [ 0, 1 ],
outputRange: [ inactiveIcon.color, activeIcon.color ],
outputRange: [ 0.3, 1 ],
} ),
stroke: '',
};

const { backgroundColor, color, stroke } = hasUrl
? activeIcon
: interpolationColors;
const { opacity } = hasUrl ? activeIcon : interpolationColors;

function animateColors() {
Animated.sequence( [
Expand Down Expand Up @@ -200,12 +180,18 @@ const SocialLinkEdit = ( {
accessibilityHint={ accessibilityHint }
>
<Animated.View
style={ [ styles.iconContainer, { backgroundColor } ] }
style={ [
styles.iconContainer,
{
backgroundColor: activeIcon.backgroundColor,
opacity,
},
] }
>
<Icon
animated
icon={ IconComponent }
style={ { stroke, color } }
style={ { color: activeIcon.color } }
/>
</Animated.View>
</TouchableWithoutFeedback>
Expand Down
9 changes: 0 additions & 9 deletions packages/block-library/src/social-link/editor.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,6 @@
justify-content: center;
}

.inactiveIcon {
background-color: $light-quaternary;
color: $white;
}

.inactiveIconDark {
background-color: $dark-quaternary;
}

.container {
margin: $block-selected-margin;
}
1 change: 1 addition & 0 deletions packages/react-native-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label to i
-->

## Unreleased
- [*] Social Icons: Fix visibility of inactive icons when used with block based themes in dark mode [#55398]
- [*] Synced Patterns: Fix visibility of heading section when used with block based themes in dark mode [#55399]
- [*] Classic block: Add option to convert to blocks [#55461]

Expand Down
Loading