From e4ab0152844cda3c0f183147908e0575a58af4d7 Mon Sep 17 00:00:00 2001 From: David Chen Date: Thu, 14 Jan 2021 16:51:39 +0800 Subject: [PATCH] fix(checkbox): fixed the checkbox component bidi layout issue. (#7524) Fixed the tick orientation for checkbox component in bidi(RTL) layout by adding the RTLCSS value directives. (#7524) --- .all-contributorsrc | 9 ++ README.md | 127 +++++++++--------- packages/components/docs/sass.md | 8 +- .../src/components/checkbox/_checkbox.scss | 8 +- 4 files changed, 81 insertions(+), 71 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 12ccbf983ae6..131d1b8c1d2c 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -628,6 +628,15 @@ "contributions": [ "code" ] + }, + { + "login": "DavidSCChen", + "name": "DavidSCChen", + "avatar_url": "https://avatars1.githubusercontent.com/u/54974983?v=4", + "profile": "https://github.com/DavidSCChen", + "contributions": [ + "code" + ] } ], "commitConvention": "none" diff --git a/README.md b/README.md index 938617ffcf13..6ae106b3628d 100644 --- a/README.md +++ b/README.md @@ -83,88 +83,89 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - + + + + + + +

TJ Egan

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

Josh Black

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

Alessandra Davila

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

DAK

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Andrea N. Cardona

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

emyarod

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Josefina Mancilla

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

TJ Egan

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

Josh Black

πŸ’» πŸ“– πŸš‡ πŸ‘€ ️️️️♿️

Alessandra Davila

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

DAK

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Andrea N. Cardona

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

emyarod

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Josefina Mancilla

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Vince Picone

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Ricardo Henriquez

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Scott Strubberg

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Alison Joseph

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Anna Gonzales

🎨 πŸ‘€

jillianhowarth

πŸ–‹ 🎨 πŸ‘€

Lauren Rice

🎨 πŸ‘€

Vince Picone

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Ricardo Henriquez

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Scott Strubberg

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Alison Joseph

πŸ’» πŸ“– πŸ‘€ ️️️️♿️

Anna Gonzales

🎨 πŸ‘€

jillianhowarth

πŸ–‹ 🎨 πŸ‘€

Lauren Rice

🎨 πŸ‘€

johnbister

🎨 πŸ‘€

Dominik Brugger

πŸ’» 🚧

Jan Hassel

πŸ’»

Alexander Lyon

πŸ’»

Rosie Z

πŸ’»

Abdul Rehman

πŸ’»

Nick Gong

πŸ’»

johnbister

🎨 πŸ‘€

Dominik Brugger

πŸ’» 🚧

Jan Hassel

πŸ’»

Alexander Lyon

πŸ’»

Rosie Z

πŸ’»

Abdul Rehman

πŸ’»

Nick Gong

πŸ’»

Nishith P

πŸ“–

Eric Charpentier

πŸ’»

Luiza Mendes

πŸ’» 🚧

Akmal Hakimi Mohd Zamri

πŸ’»

sanjitbauli

πŸ“–

Laszlo Moczo

πŸ’»

LMapes

πŸ–‹ πŸ“–

Nishith P

πŸ“–

Eric Charpentier

πŸ’»

Luiza Mendes

πŸ’» 🚧

Akmal Hakimi Mohd Zamri

πŸ’»

sanjitbauli

πŸ“–

Laszlo Moczo

πŸ’»

LMapes

πŸ–‹ πŸ“–

conradennis

🎨

Eric Liu

πŸ’» πŸ“–

Richard VΕ‘ianskΓ½

πŸ’»

Lee Chase

πŸ’» πŸ“–

Anton

πŸ’»

Panpan Lin

πŸ“–

Ashley Harrison

πŸ’»

conradennis

🎨

Eric Liu

πŸ’» πŸ“–

Richard VΕ‘ianskΓ½

πŸ’»

Lee Chase

πŸ’» πŸ“–

Anton

πŸ’»

Panpan Lin

πŸ“–

Ashley Harrison

πŸ’»

Jen Downs

πŸ’» πŸ“– ️️️️♿️

Taylor Jones

πŸ’» πŸ“– ️️️️♿️

MIchael Dudley

🎨

David Bradshaw

πŸ’»

Simon Finney

πŸ’» ️️️️♿️

Attila Bartha

πŸ’»

λ°°ν•˜λžŒ

πŸ’»

Jen Downs

πŸ’» πŸ“– ️️️️♿️

Taylor Jones

πŸ’» πŸ“– ️️️️♿️

MIchael Dudley

🎨

David Bradshaw

πŸ’»

Simon Finney

πŸ’» ️️️️♿️

Attila Bartha

πŸ’»

λ°°ν•˜λžŒ

πŸ’»

Yohanna Gadelrab

πŸ“–

Akira Sudoh

πŸ’» πŸ“– ️️️️♿️ πŸš‡

Oyinkan Oyetunmibi

πŸ“–

pbenson322

πŸ“–

Abbey Hart

πŸ’» πŸ“– ️️️️♿️

Lucas

πŸ’»

Dylan Klohr

πŸ“–

Yohanna Gadelrab

πŸ“–

Akira Sudoh

πŸ’» πŸ“– ️️️️♿️ πŸš‡

Oyinkan Oyetunmibi

πŸ“–

pbenson322

πŸ“–

Abbey Hart

πŸ’» πŸ“– ️️️️♿️

Lucas

πŸ’»

Dylan Klohr

πŸ“–

Gilli Sigurdsson

🎨

kennylam

πŸ’» ️️️️♿️

SΓ©bastien

πŸ’»

Dusan Milko

πŸ’»

Taras Polovyi

πŸ’»

Chris Connors

🎨 πŸ“–

David Conner

πŸ’» ️️️️♿️

Gilli Sigurdsson

🎨

kennylam

πŸ’» ️️️️♿️

SΓ©bastien

πŸ’»

Dusan Milko

πŸ’»

Taras Polovyi

πŸ’»

Chris Connors

🎨 πŸ“–

David Conner

πŸ’» ️️️️♿️

Harish Mohanani

πŸ’»

Frivalszky-Mayer PΓ©ter

πŸ’» ️️️️♿️

s100

πŸ’»

Taranveer Virk

πŸ’»

Niall Cargill

πŸ“–

Matt Chapman

πŸ’»

Harish Mohanani

πŸ’»

Frivalszky-Mayer PΓ©ter

πŸ’» ️️️️♿️

s100

πŸ’»

Taranveer Virk

πŸ’»

Niall Cargill

πŸ“–

Matt Chapman

πŸ’»

DavidSCChen

πŸ’»
- + diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 263c2454e4c7..6a8148d40807 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -14756,12 +14756,12 @@ Checkbox styles left: rem(6px); width: rem(9px); height: rem(5px); - margin-top: rem(-3px); + margin-top: rem(-3px) /* rtl: 0rem */; background: none; border-bottom: 2px solid $inverse-01; border-left: 2px solid $inverse-01; - transform: scale(0) rotate(-45deg); - transform-origin: bottom right; + transform: scale(0) rotate(-45deg) /* rtl: scale(0) rotate(45deg) */; + transform-origin: bottom right /* rtl: center */; content: ''; } @@ -14782,7 +14782,7 @@ Checkbox styles // Display the check .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after, .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after { - transform: scale(1) rotate(-45deg); + transform: scale(1) rotate(-45deg) /* rtl: scale(-1,1) rotate(45deg) */; } // Indeterminate symbol diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss index f00a6c2e870f..18f149d73836 100644 --- a/packages/components/src/components/checkbox/_checkbox.scss +++ b/packages/components/src/components/checkbox/_checkbox.scss @@ -101,12 +101,12 @@ left: rem(6px); width: rem(9px); height: rem(5px); - margin-top: rem(-3px); + margin-top: rem(-3px) /* rtl: 0rem */; background: none; border-bottom: 2px solid $inverse-01; border-left: 2px solid $inverse-01; - transform: scale(0) rotate(-45deg); - transform-origin: bottom right; + transform: scale(0) rotate(-45deg) /* rtl: scale(0) rotate(45deg) */; + transform-origin: bottom right /* rtl: center */; content: ''; } @@ -127,7 +127,7 @@ // Display the check .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::after, .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::after { - transform: scale(1) rotate(-45deg); + transform: scale(1) rotate(-45deg) /* rtl: scale(-1,1) rotate(45deg) */; } // Indeterminate symbol