Skip to content

Commit

Permalink
fix: rtl cleanup (#1450)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomzemp
tomzemp authored Feb 13, 2024
1 parent 2668bbf commit 5f6761f
Show file tree
Hide file tree
Showing 8 changed files with 265 additions and 96 deletions.
4 changes: 2 additions & 2 deletions collections/forms/i18n/en.pot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
"POT-Creation-Date: 2023-05-05T12:46:11.864Z\n"
"PO-Revision-Date: 2023-05-05T12:46:11.864Z\n"
"POT-Creation-Date: 2024-02-12T09:23:49.018Z\n"
"PO-Revision-Date: 2024-02-12T09:23:49.018Z\n"

msgid "Upload file"
msgstr "Upload file"
Expand Down
35 changes: 19 additions & 16 deletions components/node/src/toggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,20 @@ import PropTypes from 'prop-types'
import React from 'react'

const ArrowDown = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
<style jsx>{`
svg {
fill: inherit;
height: 24px;
width: 24px;
vertical-align: middle;
pointer-events: none;
}
`}</style>
</svg>
<div className="nodeArrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
<style jsx>{`
svg {
fill: inherit;
height: 24px;
width: 24px;
vertical-align: middle;
pointer-events: none;
}
`}</style>
</svg>
</div>
)

export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
Expand Down Expand Up @@ -55,20 +57,21 @@ export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
z-index: 2;
fill: ${colors.grey900};
}
div :global(svg) {
div :global(.nodeArrow) {
vertical-align: top;
transform: rotate(-90deg);
transition: transform 0.1s ease-out;
}
div :global(svg:dir(rtl)) {
div :global(.nodeArrow:dir(rtl)) {
transform: rotate(90deg);
}
.open :global(svg) {
.open :global(.nodeArrow) {
transform: rotate(0);
}
.open :global(svg:dir(rtl)) {
.open :global(.nodeArrow:dir(rtl)) {
transform: rotate(0);
}
div:hover {
cursor: pointer;
border-radius: 3px;
Expand Down
9 changes: 9 additions & 0 deletions components/switch/src/switch/switch-icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ const styles = css`
transform: scale(-1, 1);
}
svg[dir='rtl'] {
transform: scale(-1, 1);
}
svg.dense {
height: 14px;
width: 27px;
Expand All @@ -35,6 +39,10 @@ const styles = css`
display: none;
}
svg[dir='rtl'] .checkmark {
display: none;
}
svg.checked .handle-unchecked,
svg:not(.checked) .handle-checked {
fill: none;
Expand Down Expand Up @@ -93,6 +101,7 @@ export function SwitchRegular({ className }) {
viewBox="0 0 42 22"
xmlns="http://www.w3.org/2000/svg"
className={className}
dir={document.documentElement?.dir ?? 'ltr'}
>
<path
d="M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z"
Expand Down
25 changes: 17 additions & 8 deletions components/switch/src/switch/switch.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { sharedPropTypes } from '@dhis2/ui-constants'
import React from 'react'
import React, { useEffect } from 'react'
import { Switch } from './index.js'

const subtitle = 'An input control that allows an on and an off state'
Expand Down Expand Up @@ -139,10 +139,19 @@ export const ImageLabelDense = Template.bind({})
ImageLabelDense.args = { ...ImageLabel.args, ...DefaultDense.args }
ImageLabelDense.storyName = 'Image label - Dense'

export const RTL = (args) => (
<div dir="rtl">
<Template {...args} />
<Template checked={true} value="checked" />
<Template error={true} checked={true} value="error" />
</div>
)
export const RTL = (args) => {
useEffect(() => {
document.documentElement.setAttribute('dir', 'rtl')
return () => {
document.documentElement.setAttribute('dir', 'ltr')
}
}, [])

return (
<div dir="rtl">
<Template {...args} />
<Template checked={true} value="checked" />
<Template error={true} checked={true} value="error" />
</div>
)
}
4 changes: 4 additions & 0 deletions components/table/src/table/table-cell-head.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ const tableCellHeadStyles = css`
height: 45px;
}
th:dir(rtl) {
text-align: right;
}
.dense {
padding: 9px 12px;
height: 36px;
Expand Down
4 changes: 4 additions & 0 deletions components/table/src/table/table-cell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ const tableCellStyles = css`
height: 45px;
}
td:dir(rtl) {
text-align: right;
}
.dense {
padding: 9px 12px;
height: 36px;
Expand Down
128 changes: 128 additions & 0 deletions components/table/src/table/table.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -594,3 +594,131 @@ export const CustomAlternatingBgColor = () => (
</TableFoot>
</Table>
)

export const RTL = (args) => (
<div dir="rtl">
<Table {...args}>
<TableHead>
<TableRowHead>
<TableCellHead>First name</TableCellHead>
<TableCellHead>Last name</TableCellHead>
<TableCellHead>Incident date</TableCellHead>
<TableCellHead>Last updated</TableCellHead>
<TableCellHead>Age</TableCellHead>
<TableCellHead>Registering unit</TableCellHead>
<TableCellHead>Assigned user</TableCellHead>
<TableCellHead>Status</TableCellHead>
</TableRowHead>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Onyekachukwu</TableCell>
<TableCell>Kariuki</TableCell>
<TableCell>02/06/2007</TableCell>
<TableCell>05/25/1972</TableCell>
<TableCell>66</TableCell>
<TableCell>Jawi</TableCell>
<TableCell>Sofie Hubert</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Kwasi</TableCell>
<TableCell>Okafor</TableCell>
<TableCell>08/11/2010</TableCell>
<TableCell>02/26/1991</TableCell>
<TableCell>38</TableCell>
<TableCell>Mokassie MCHP</TableCell>
<TableCell>Dashonte Clarke</TableCell>
<TableCell>Complete</TableCell>
</TableRow>
<TableRow>
<TableCell>Siyabonga</TableCell>
<TableCell>Abiodun</TableCell>
<TableCell>07/21/1981</TableCell>
<TableCell>02/06/2007</TableCell>
<TableCell>98</TableCell>
<TableCell>Bathurst MCHP</TableCell>
<TableCell>Unassigned</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Chiyembekezo</TableCell>
<TableCell>Okeke</TableCell>
<TableCell>01/23/1982</TableCell>
<TableCell>07/15/2003</TableCell>
<TableCell>2</TableCell>
<TableCell>Mayolla MCHP</TableCell>
<TableCell>Wan Gengxin</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Mtendere</TableCell>
<TableCell>Afolayan</TableCell>
<TableCell>08/12/1994</TableCell>
<TableCell>05/12/1972</TableCell>
<TableCell>37</TableCell>
<TableCell>Gbangadu MCHP</TableCell>
<TableCell>Gvozden Boskovsky</TableCell>
<TableCell>Complete</TableCell>
</TableRow>
<TableRow>
<TableCell>Inyene</TableCell>
<TableCell>Okonkwo</TableCell>
<TableCell>04/01/1971</TableCell>
<TableCell>03/16/2000</TableCell>
<TableCell>70</TableCell>
<TableCell>Kunike Barina</TableCell>
<TableCell>Oscar de la Cavallería</TableCell>
<TableCell>Complete</TableCell>
</TableRow>
<TableRow>
<TableCell>Amaka</TableCell>
<TableCell>Pretorius</TableCell>
<TableCell>01/25/1996</TableCell>
<TableCell>09/15/1986</TableCell>
<TableCell>32</TableCell>
<TableCell>Bargbo</TableCell>
<TableCell>Alberto Raya</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Meti</TableCell>
<TableCell>Abiodun</TableCell>
<TableCell>10/24/2010</TableCell>
<TableCell>07/26/1989</TableCell>
<TableCell>8</TableCell>
<TableCell>Majihun MCHP</TableCell>
<TableCell>Unassigned</TableCell>
<TableCell>Complete</TableCell>
</TableRow>
<TableRow>
<TableCell>Eshe</TableCell>
<TableCell>Okeke</TableCell>
<TableCell>01/31/1995</TableCell>
<TableCell>01/31/1995</TableCell>
<TableCell>63</TableCell>
<TableCell>Mambiama CHP</TableCell>
<TableCell>Shadrias Pearson</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
<TableRow>
<TableCell>Obi</TableCell>
<TableCell>Okafor</TableCell>
<TableCell>06/07/1990</TableCell>
<TableCell>01/03/2006</TableCell>
<TableCell>28</TableCell>
<TableCell>Dalakuru CHP</TableCell>
<TableCell>Anatoliy Shcherbatykh</TableCell>
<TableCell>Incomplete</TableCell>
</TableRow>
</TableBody>
<TableFoot>
<TableRow>
<TableCell colSpan="8">
<TableFooterButton />
</TableCell>
</TableRow>
</TableFoot>
</Table>
</div>
)
Loading

0 comments on commit 5f6761f

Please sign in to comment.