fix(KeyComboTag): Better rendering on non-Mac operating systems #7025

jscheiny · 2024-10-24T15:02:37Z

Fixes #6211

Checklist

Includes tests
Update documentation

Changes proposed in this pull request:

In this PR we update the KeyComboTag component to render properly in non-Mac environments. Namely, all modifier keys no longer show their icons (which are mac specific). In addition the minimal state has been updated to show a more windows friendly UI. Finally, the arrow keys were broken and not showing their icons, they do now.

Reviewers should focus on:

I implemented a KeyComboTagInternal component for testing purposes. What do we think of this pattern?

Screenshot

Previously, this is how the mod+shift+x key combo looked like on all platforms. This is still how it looks on Mac. (Minimal state on bottom)

This is how it looks non-Mac platforms now:

changelog-app · 2024-10-24T15:02:42Z

Generate changelog in `packages/core/changelog/@unreleased`

What do the change types mean?

feature: A new feature of the service.
improvement: An incremental improvement in the functionality or operation of the service.
fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
and external consumers of the service's API (e.g. customer-written software or integrations).
deprecation: Advertises the intention to remove service functionality without any change to the
operation of the service itself.
manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
performing database surgery, ...) at the time of upgrade for it to succeed.
migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

❗The break and manual task changelog types will result in a major release!
🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
✨ All others will result in a minor version release.

Type

Description

The KeyComboTag component no longer renders modifier key icons on non-Mac operating systems

Generate changelog in `packages/docs-app/changelog/@unreleased`

What do the change types mean?

feature: A new feature of the service.
improvement: An incremental improvement in the functionality or operation of the service.
fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
and external consumers of the service's API (e.g. customer-written software or integrations).
deprecation: Advertises the intention to remove service functionality without any change to the
operation of the service itself.
manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
performing database surgery, ...) at the time of upgrade for it to succeed.
migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

❗The break and manual task changelog types will result in a major release!
🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
✨ All others will result in a minor version release.

Type

Description

The useHotkeys documentation now shows minimal and non-minimal states for the KeyComboTag component.

Check the box to generate changelog(s)

Generate changelog entry

svc-palantir-github · 2024-10-24T15:16:06Z

fix(KeyComboTag): Better rendering on non-Mac operating systems

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

jscheiny · 2024-10-24T16:37:52Z

packages/core/src/components/hotkeys/hotkeyParser.ts

    const keys = combo.replace(/\s/g, "").split("+");
    return keys.map(key => {
        const keyName = CONFIG_ALIASES[key] != null ? CONFIG_ALIASES[key] : key;
        return keyName === "meta" ? (isMac(platformOverride) ? "cmd" : "ctrl") : keyName;
    });
 };

-function isMac(platformOverride?: string) {
+export function isMac(platformOverride: string | undefined) {


This function is duplicative with another in the codebase, will be looking into refactoring that in a future change.

svc-palantir-github · 2024-10-24T16:50:32Z

Add generated changelog entries

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

svc-palantir-github · 2024-10-24T17:21:02Z

Fixes

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

svc-palantir-github · 2024-10-24T19:06:00Z

describe -> it

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

svc-palantir-github · 2024-10-24T20:10:35Z

Fix tests for real

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

ggdouglas · 2024-10-25T20:24:06Z

packages/core/test/hotkeys/keyComboTagTests.tsx


 describe("KeyCombo", () => {
    it("renders key combo", () => {
-        render(<KeyComboTag combo="cmd+C" />);
+        render(<KeyComboTagInternal combo="cmd+C" platformOverride="Mac" />);


Are we using this platformOverride flag solely for testing purposes? If so, that feels a slight bit icky to me. Is there a way we could potentially mock the return of the isMac function instead? This would potentially save us from having to wire this override flag in multiple places.

Agreed its ugly. However, I took a look around and wasn't able to find a good way to mock isMac, but let me know if I missed something here. I did make the argument required on these functions so that we wouldn't forget to pass it and miss a spot.

ggdouglas · 2024-10-25T20:54:17Z

packages/core/src/components/hotkeys/keyComboTag.tsx

+    private renderMinimalKey = (key: string, index: number, isLastKey: boolean) => {
+        const icon = this.getKeyIcon(key);
+        if (icon == null) {
+            return isLastKey ? key : <React.Fragment key={`key-${index}`}>{key}&nbsp;+&nbsp;</React.Fragment>;


Should we add the "+" between tokens regardless of icon/platform? IMO, the minimal version looks a bit better with it on mac. I also notice there's a bit of extra space after the first token if the next token happens to be another icon.

Following that, I wonder if we could insert the plus signs an alternative way, perhaps either via a CSS ::before pseudo-element or by inserting them after construction of the array, e.g.

const normalizedKeys = normalizeKeyCombo(combo, platformOverride); const upperKeys = normalizedKeys.map(key => (key.length === 1 ? key.toUpperCase() : key)); const keys = upperKeys.map(this.renderKey); const minimalKeys = upperKeys .map(this.renderMinimalKey) .flatMap((value, index, array) => array.length - 1 !== index ? [value, <span key={index}>+</span>] : value, ); return <span className={classNames(Classes.KEY_COMBO, className)}>{minimal ? minimalKeys : keys}</span>;

I wanted to mirror the ways these different platforms display key combos. Namely on Windows/Linux, will show the plus signs and on Macs they will not. Agreed on the extra space, will fix that.

In terms of putting in the plus signs, I attempted to use the pseudo elements earlier but getting the styles to work on those turned out to be unwieldy. Its not clear to me that the code above is particularly better than what we have currently.

fix(KeyComboTag): Better rendering on non-Mac operating systems

0386e29

jscheiny and others added 5 commits October 24, 2024 12:26

Tests

f3d75a0

Add generated changelog entries

45fa21e

Add generated changelog entries

44eb2e7

Add generated changelog entries

ebd7728

Add generated changelog entries

d5adb40

jscheiny commented Oct 24, 2024

View reviewed changes

jscheiny requested a review from ggdouglas October 24, 2024 16:38

jscheiny marked this pull request as ready for review October 24, 2024 16:38

Fixes

701f224

describe -> it

672aa41

Fix tests for real

70ebd7f

ggdouglas reviewed Oct 25, 2024

View reviewed changes

Fix spacing

d8d658d

ggdouglas approved these changes Oct 29, 2024

View reviewed changes

jscheiny merged commit f46419e into develop Oct 30, 2024
6 of 7 checks passed

jscheiny deleted the js/fix-hotkeys-windows branch October 30, 2024 14:40

ggdouglas mentioned this pull request Oct 30, 2024

Fix style order lint error #7035

Merged

2 tasks

jscheiny mentioned this pull request Nov 13, 2024

fix(KeyComboTag): Style regression #7063

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(KeyComboTag): Better rendering on non-Mac operating systems #7025

fix(KeyComboTag): Better rendering on non-Mac operating systems #7025

jscheiny commented Oct 24, 2024 •

edited

Loading

changelog-app bot commented Oct 24, 2024 •

edited by jscheiny

Loading

svc-palantir-github commented Oct 24, 2024

jscheiny Oct 24, 2024

svc-palantir-github commented Oct 24, 2024

svc-palantir-github commented Oct 24, 2024

svc-palantir-github commented Oct 24, 2024

svc-palantir-github commented Oct 24, 2024

ggdouglas Oct 25, 2024

jscheiny Oct 28, 2024

ggdouglas Oct 25, 2024

ggdouglas Oct 25, 2024

jscheiny Oct 28, 2024

fix(KeyComboTag): Better rendering on non-Mac operating systems #7025

fix(KeyComboTag): Better rendering on non-Mac operating systems #7025

Conversation

jscheiny commented Oct 24, 2024 • edited Loading

Fixes #6211

Checklist

Changes proposed in this pull request:

Reviewers should focus on:

Screenshot

changelog-app bot commented Oct 24, 2024 • edited by jscheiny Loading

Generate changelog in packages/core/changelog/@unreleased

Generate changelog in packages/docs-app/changelog/@unreleased

svc-palantir-github commented Oct 24, 2024

fix(KeyComboTag): Better rendering on non-Mac operating systems

jscheiny Oct 24, 2024

Choose a reason for hiding this comment

svc-palantir-github commented Oct 24, 2024

Add generated changelog entries

svc-palantir-github commented Oct 24, 2024

Fixes

svc-palantir-github commented Oct 24, 2024

describe -> it

svc-palantir-github commented Oct 24, 2024

Fix tests for real

ggdouglas Oct 25, 2024

Choose a reason for hiding this comment

jscheiny Oct 28, 2024

Choose a reason for hiding this comment

ggdouglas Oct 25, 2024

Choose a reason for hiding this comment

ggdouglas Oct 25, 2024

Choose a reason for hiding this comment

jscheiny Oct 28, 2024

Choose a reason for hiding this comment

jscheiny commented Oct 24, 2024 •

edited

Loading

changelog-app bot commented Oct 24, 2024 •

edited by jscheiny

Loading

Generate changelog in `packages/core/changelog/@unreleased`

Generate changelog in `packages/docs-app/changelog/@unreleased`