Skip to content

Fix ocassional text interactivity issues. #5803

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

Merged
latekvo merged 7 commits into from
Mar 19, 2024
Merged

Fix ocassional text interactivity issues. #5803

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9931dd7
Fix ocassional text interactivity issues.
latekvo Mar 18, 2024
992bbe1
Merge branch 'main' into @latekvo/fix_movable_title
latekvo Mar 18, 2024
10e22d6
Remove unnecessary useState, adjust styles accordingly.
latekvo Mar 18, 2024
154944d
Merge branch '@latekvo/fix_movable_title' of https://github.com/softw…
latekvo Mar 18, 2024
48d7af3
Update consistency.
latekvo Mar 18, 2024
0d2fb5e
Remove unnecessary code.
latekvo Mar 18, 2024
8df2d63
Separated constants into file-scope values.
latekvo Mar 18, 2024
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
17 changes: 6 additions & 11 deletions docs/src/components/Hero/SelectedLabel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ const SelectedLabel: React.FC<{
isInteractive: boolean;
}> = ({ children, isInteractive = false }) => {
// DOM refs
const selectionRef = useRef(null);
const selectionContainerRef = useRef(null);
const textLabelRef = useRef(null);
const selectionRef = useRef<HTMLSpanElement | null>(null);
const selectionContainerRef = useRef<HTMLDivElement | null>(null);
const textLabelRef = useRef<HTMLSpanElement | null>(null);

// Render-persistent label positioning styles
const dynamicStyles = useRef<DynamicStyles>({
Expand All @@ -30,7 +30,6 @@ const SelectedLabel: React.FC<{
const staticStyles = useRef<StaticStyles>({
initialWidth: null,
initialHeight: null,
enabledTextInteractivity: false,
});

const applyDynamicStyles = (newDynamicStyles: DynamicStyles) => {
Expand Down Expand Up @@ -59,7 +58,6 @@ const SelectedLabel: React.FC<{
staticStyles.current = {
initialWidth: rect.width,
initialHeight: rect.height,
enabledTextInteractivity: true,
};

applyDynamicStyles({
Expand All @@ -68,6 +66,8 @@ const SelectedLabel: React.FC<{
width: rect.width,
height: rect.height,
});

textLabelRef.current.className = clsx(styles.interactiveHeaderText);
}, [isInteractive]);

const movementPropagator = (
Expand All @@ -88,12 +88,7 @@ const SelectedLabel: React.FC<{
);
};

const classList = clsx(
isInteractive ? styles.preEnabledTextInteractivity : null,
staticStyles.current.enabledTextInteractivity
? styles.interactiveHeaderText
: styles.headerText
);
const classList = styles.headerText;
Comment thread
latekvo marked this conversation as resolved.
Outdated

return (
<span ref={selectionRef} className={styles.selection}>
Expand Down
5 changes: 1 addition & 4 deletions docs/src/components/Hero/SelectedLabel/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@

.headerText {
position: relative;
margin-right: 4px;
}

.interactiveHeaderText {
Expand All @@ -41,10 +42,6 @@
user-select: none;
}

.preEnabledTextInteractivity {
margin-right: 24px;
}

@media (max-width: 768px) {
:root {
--swm-dash-spacing: 20px;
Expand Down
5 changes: 2 additions & 3 deletions docs/src/components/Hero/SelectedLabel/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export type DynamicStyles = {
export type StaticStyles = {
initialWidth: number;
initialHeight: number;
enabledTextInteractivity: boolean;
};

export type TextScaleStyles = {
Expand Down Expand Up @@ -78,8 +77,8 @@ export const computeTextStyles = (
staticStyles: StaticStyles
): TextScaleStyles => {
// these magic numbers are a result of disparity between font's apparent and actual size
const sizeOffsetX = 0.99;
const sizeOffsetY = 1.21;
const sizeOffsetX = 1.0;
const sizeOffsetY = 1.22;
Comment thread
latekvo marked this conversation as resolved.
Outdated

// scale starts at 1 and as it gets larger approaches sizeOffset
const textScale = {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/Hero/StartScreen/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.rnLabel {
margin-right: 10px;
margin-right: 12px;
}

.subheadingLabel {
Expand Down