feat: singleselect, noticebox rtl (#1320)

dhis2 · Aug 9, 2023 · ea066c1 · ea066c1
1 parent ff86a19
commit ea066c1
Show file tree

Hide file tree

Showing 16 changed files with 65 additions and 22 deletions.
diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot
@@ -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-02-28T09:45:49.286Z\n"
-"PO-Revision-Date: 2023-02-28T09:45:49.286Z\n"
+"POT-Creation-Date: 2023-05-05T12:46:11.864Z\n"
+"PO-Revision-Date: 2023-05-05T12:46:11.864Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

diff --git a/components/layer/src/layer.js b/components/layer/src/layer.js
@@ -41,8 +41,8 @@ const Layer = ({
 
  <style jsx>{`
  div {
- top: 0;
- left: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
  min-height: 100vh;
  min-width: 100vw;
  }

diff --git a/components/notice-box/src/notice-box-content.js b/components/notice-box/src/notice-box-content.js
@@ -16,7 +16,7 @@ export const NoticeBoxContent = ({ children, dataTest, title }) => {
  display: flex;
  flex-direction: column;
  gap: ${spacers.dp8};
- padding-top: 3px;
+ padding-block-start: 3px;
  }
  `}</style>
  </div>

diff --git a/components/notice-box/src/notice-box-icon.js b/components/notice-box/src/notice-box-icon.js
@@ -34,7 +34,7 @@ export const NoticeBoxIcon = ({ valid, warning, error, dataTest }) => {
  <Icon color={color} />
 
  <style jsx>{`
- margin-right: ${spacers.dp12};
+ margin-inline-end: ${spacers.dp12};
  height: ${spacers.dp24};
  `}</style>
  </div>

diff --git a/components/notice-box/src/notice-box.js b/components/notice-box/src/notice-box.js
@@ -40,7 +40,8 @@ export const NoticeBox = ({
  border: 1px solid ${colors.blue200};
  border-radius: 3px;
  display: flex;
- padding: ${spacers.dp12} ${spacers.dp16};
+ padding-block: ${spacers.dp12};
+ padding-inline: ${spacers.dp16};
  }
 
  .root.warning {

diff --git a/components/notice-box/src/notice-box.stories.js b/components/notice-box/src/notice-box.stories.js
@@ -97,3 +97,11 @@ export const WithoutTitle = () => (
 export const TitleOnly = () => (
  <NoticeBox title="This noticebox has only a title"></NoticeBox>
 )
+
+export const RTL = (args) => (
+ <div dir="rtl">
+ <NoticeBox {...args}>هذه رسالة باللغة العربية.</NoticeBox>
+ </div>
+)
+RTL.args = { title: 'مثال على العنوان' }
+RTL.storyName = 'RTL Text'
diff --git a/components/select/src/select/empty.js b/components/select/src/select/empty.js
@@ -11,7 +11,8 @@ const Empty = ({ message, className, dataTest }) => (
  font-family: ${theme.fonts};
  font-size: 13px;
  line-height: 16px;
- padding: ${spacers.dp8} ${spacers.dp24};
+ padding-block: ${spacers.dp8};
+ padding-inline: ${spacers.dp24};
  text-align: center;
  }
  `}</style>

diff --git a/components/select/src/select/filter-input.js b/components/select/src/select/filter-input.js
@@ -19,10 +19,12 @@ const FilterInput = ({ value, onChange, placeholder, className, dataTest }) => (
  <style jsx>{`
  div {
  position: sticky;
- top: 0;
+ inset-block-start: 0;
  background: ${colors.white};
- padding: ${spacers.dp8} ${spacers.dp8} ${spacers.dp4}
- ${spacers.dp8};
+ padding-block-start: ${spacers.dp8};
+ padding-inline-end: ${spacers.dp8};
+ padding-block-end: ${spacers.dp4};
+ padding-inline-start: ${spacers.dp8};
  z-index: 1;
  }
  `}</style>

diff --git a/components/select/src/select/input-prefix.js b/components/select/src/select/input-prefix.js
@@ -14,7 +14,7 @@ const InputPrefix = ({ prefix, className, dataTest }) => {
  <style jsx>{`
  div {
  color: ${colors.grey600};
- padding-right: ${spacers.dp12};
+ padding-inline-end: ${spacers.dp12};
  font-size: 14px;
  user-select: none;
  }

diff --git a/components/select/src/select/input-wrapper.js b/components/select/src/select/input-wrapper.js
@@ -47,7 +47,8 @@ const InputWrapper = ({
  box-sizing: border-box;
  display: flex;
  min-height: 40px;
- padding: 6px 12px;
+ padding-block: 6px;
+ padding-inline: 12px;
  box-shadow: inset 0 0 1px 0 rgba(48, 54, 60, 0.1);
  }
 
@@ -78,7 +79,8 @@ const InputWrapper = ({
  }
 
  .root.dense {
- padding: 2px 8px;
+ padding-block: 2px;
+ padding-inline: 8px;
  min-height: 32px;
  }
 
@@ -87,7 +89,8 @@ const InputWrapper = ({
  }
 
  .root-right {
- margin: 4px 0px 0px 8px;
+ margin-block-start: 4px;
+ margin-inline-start: 8px;
  }
  `}</style>
  </div>

diff --git a/components/select/src/select/loading.js b/components/select/src/select/loading.js
@@ -19,7 +19,8 @@ export const Loading = ({ message, className, dataTest }) => (
  color: ${colors.grey700};
  font-family: ${theme.fonts};
  font-size: 13px;
- padding: ${spacers.dp8} ${spacers.dp24};
+ padding-block: ${spacers.dp8};
+ padding-inline: ${spacers.dp24};
  }
  `}</style>
  </div>

diff --git a/components/select/src/select/no-match.js b/components/select/src/select/no-match.js
@@ -12,7 +12,8 @@ const NoMatch = ({ message, className }) => (
  font-family: ${theme.fonts};
  font-size: 13px;
  line-height: 16px;
- padding: ${spacers.dp8} ${spacers.dp24};
+ padding-block: ${spacers.dp8};
+ padding-inline: ${spacers.dp24};
  text-align: center;
  }
  `}</style>

diff --git a/components/select/src/single-select-option/single-select-option.js b/components/select/src/single-select-option/single-select-option.js
@@ -30,7 +30,8 @@ const SingleSelectOption = ({
  font-size: 14px;
  text-decoration: none;
  color: ${colors.grey900};
- padding: ${spacers.dp8} ${spacers.dp12};
+ padding-block: ${spacers.dp8};
+ padding-inline: ${spacers.dp12};
  }
 
  div:hover {

diff --git a/components/select/src/single-select/input.js b/components/select/src/single-select/input.js
@@ -71,8 +71,8 @@ const Input = ({
  }
 
  .root-right {
- margin-left: auto;
- margin-right: 10px;
+ margin-inline-start: auto;
+ margin-inline-end: 10px;
  }
  `}</style>
 

diff --git a/components/select/src/single-select/selection.js b/components/select/src/single-select/selection.js
@@ -40,7 +40,7 @@ const Selection = ({ options, selected, className }) => {
  }
 
  .root-icon {
- margin-right: ${spacers.dp8};
+ margin-inline-end: ${spacers.dp8};
  width: ${spacers.dp16};
  height: ${spacers.dp16};
  overflow: hidden;

diff --git a/components/select/src/single-select/single-select.stories.js b/components/select/src/single-select/single-select.stories.js
@@ -1,6 +1,6 @@
 import { sharedPropTypes } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { SingleSelectOption } from '../index.js'
 import { SingleSelect } from './index.js'
 
@@ -216,6 +216,31 @@ WithPrefixAndSelection.args = {
  ...WithOptionsAndASelection.args,
 }
 
+export const WithRTL = (args) => {
+ // as options are rendered in Portal, the body dir (of the iframe) needs to be set to 'rtl'
+ useEffect(() => {
+ document.body.dir = 'rtl'
+ return () => {
+ document.body.dir = 'ltr'
+ }
+ }, [])
+
+ return (
+ <div dir="rtl">
+ <SingleSelect {...args}>
+ <SingleSelectOption value="1" label="الخيار 1" />
+ <SingleSelectOption value="2" label="الخيار 2" />
+ <SingleSelectOption value="3" label="الخيار 3" />
+ </SingleSelect>
+ </div>
+ )
+}
+WithRTL.args = {
+ prefix: 'نص البادئة',
+ ...WithOptionsAndASelection.args,
+}
+WithRTL.storyName = 'RTL Text'
+
 export const WithPlaceholder = WithOptionsTemplate.bind({})
 WithPlaceholder.args = { placeholder: 'Placeholder text' }