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.

Sign up for GitHub

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

fix: rtl cleanup #1450

Merged
merged 3 commits into from
Feb 13, 2024
Merged

fix: rtl cleanup #1450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e28f2be
fix: firefox icon transformations
tomzemp Feb 12, 2024
65a0c5d
fix: right align table elements in rtl
tomzemp Feb 12, 2024
41cdf5b
fix: auto generated files
tomzemp Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions collections/forms/i18n/en.pot
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading