Skip to content

Commit

Permalink
fix(checkbox): fixed the checkbox component bidi layout issue. (#7524) (
Browse files Browse the repository at this point in the history
#7564)

Fixed the tick orientation for checkbox component in bidi(RTL) layout by adding the RTLCSS value directives. (#7524)
  • Loading branch information
DavidSCChen authored Jan 15, 2021
1 parent cc1932a commit bc30e1c
Showing 4 changed files with 20 additions and 8 deletions.
9 changes: 9 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
@@ -637,6 +637,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"
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -164,6 +164,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
<td align="center"><a href="https://github.com/asfordmatt"><img src="https://avatars2.githubusercontent.com/u/14233261?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Matt Chapman</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=asfordmatt" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/munkurious"><img src="https://avatars0.githubusercontent.com/u/2187109?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Boston Cartwright</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=munkurious" title="Code">💻</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/DavidSCChen"><img src="https://avatars1.githubusercontent.com/u/54974983?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DavidSCChen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=DavidSCChen" title="Code">💻</a></td>
</tr>
</table>

<!-- markdownlint-restore -->
8 changes: 4 additions & 4 deletions packages/components/docs/sass.md
Original file line number Diff line number Diff line change
@@ -17031,12 +17031,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: '';
}

@@ -17057,7 +17057,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
8 changes: 4 additions & 4 deletions packages/components/src/components/checkbox/_checkbox.scss
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit bc30e1c

Please sign in to comment.