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.

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

Add RTL support for checkbox/radio controls #7070

Merged
merged 3 commits into from
Nov 25, 2024
Merged

Conversation

ggdouglas
Copy link
Contributor

@ggdouglas ggdouglas commented Nov 15, 2024

Fixes #7053

Checklist

  • Includes tests
  • Update documentation

Changes proposed in this pull request:

Reviewers should focus on:

Checkbox/Radio (and all other controls) as well as components that use them, like ControlCard.

Screenshot

With dir="rtl"

Before After
before after

With dir="rtl" and alignIndicator="right"

Before After
before-2 after-2

@changelog-app
Copy link

changelog-app bot commented Nov 15, 2024

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

  • Feature
  • Improvement
  • Fix
  • Break
  • Deprecation
  • Manual task
  • Migration

Description

Add RTL support for checkbox/radio controls

Check the box to generate changelog(s)

  • Generate changelog entry

@svc-palantir-github
Copy link

Use logical properties for controls margin/padding

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

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

@svc-palantir-github
Copy link

Revert changes to right-aligned variant

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

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

@jscheiny
Copy link
Contributor

What happens if you manually provide alignIndicator="left" while in RTL mode?

@ggdouglas
Copy link
Contributor Author

What happens if you manually provide alignIndicator="left" while in RTL mode?

Here's a comparison of a checkbox with all the different alignIndicator values before and after this change:

Before After
before after

As you can see, setting alignIndicator="left" in RTL mode is essentially a no-op. I think this is acceptable behavior for the following reasons:

  1. It keeps this change small and targeted at fixing the crux of the original issue.
  2. It doesn't worsen the existing experience (it arguably functions better).
  3. Adding logic to ensure the indicator is always on the left, regardless of text direction, would likely overcomplicate the already complex control styling logic.

There's more we could do to clean up these control styles and make them more RTL compatible. However, I’d argue that should be part of a breaking change to alignIndicator. I suggest we rename the prop language to "start/end" instead of "left/right". This terminology is more consistent with logical properties and better handles bidirectional text.

@svc-palantir-github
Copy link

Revert changes to right-aligned variant

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

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

@ggdouglas
Copy link
Contributor Author

ggdouglas commented Nov 21, 2024

@jscheiny added special handling for left aligned controls in RTL pages 88ded49

Here's an overview of the behavior between LTR/RTL

LTR RTL
ltr rtl

In this instance, the indicator will always align properly "left" or "right" if it is explicitly set by the consumer (regardless of text directionality). However, if alignment is not specified (undefined, likely the majority of cases) the indicator will align at the start based on text direction.

@svc-palantir-github
Copy link

Add special handling for left aligned controls in RTL

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

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

@ggdouglas ggdouglas merged commit 294d6d5 into develop Nov 25, 2024
12 of 14 checks passed
@ggdouglas ggdouglas deleted the gd/rtl-controls-support branch November 25, 2024 16:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkboxes and radio buttons work porly with RTL
3 participants