diff --git a/CHANGELOG.md b/CHANGELOG.md index d0601da17b..00dce873b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,22 @@ +# [9.4.0-alpha.2](https://github.com/dhis2/ui/compare/v9.4.0-alpha.1...v9.4.0-alpha.2) (2024-02-16) + + +### Bug Fixes + +* clean up from pr review ([#1456](https://github.com/dhis2/ui/issues/1456)) ([ced3e26](https://github.com/dhis2/ui/commit/ced3e26c90b586995706cfe14f5beda215e58f57)) + +# [9.4.0-alpha.1](https://github.com/dhis2/ui/compare/v9.3.0...v9.4.0-alpha.1) (2024-02-14) + + +### Bug Fixes + +* rtl cleanup ([#1450](https://github.com/dhis2/ui/issues/1450)) ([5f6761f](https://github.com/dhis2/ui/commit/5f6761f8b6154dc9d9b44b226d3562f4035cf536)) + + +### Features + +* rtl support for components [LIBS-525] ([#1448](https://github.com/dhis2/ui/issues/1448)) ([d8b5fec](https://github.com/dhis2/ui/commit/d8b5feccd4b20aa17c10f6fa9315e40daa03902a)) + # [9.3.0](https://github.com/dhis2/ui/compare/v9.2.0...v9.3.0) (2024-02-13) @@ -5,6 +24,20 @@ * update accessibility in button component ([0a015c7](https://github.com/dhis2/ui/commit/0a015c7fe9115edcaa5126daca0ef65f092c925e)) +# [9.3.0-alpha.2](https://github.com/dhis2/ui/compare/v9.3.0-alpha.1...v9.3.0-alpha.2) (2024-02-13) + + +### Bug Fixes + +* rtl cleanup ([#1450](https://github.com/dhis2/ui/issues/1450)) ([5f6761f](https://github.com/dhis2/ui/commit/5f6761f8b6154dc9d9b44b226d3562f4035cf536)) + +# [9.3.0-alpha.1](https://github.com/dhis2/ui/compare/v9.2.0...v9.3.0-alpha.1) (2024-02-08) + + +### Features + +* rtl support for components [LIBS-525] ([#1448](https://github.com/dhis2/ui/issues/1448)) ([d8b5fec](https://github.com/dhis2/ui/commit/d8b5feccd4b20aa17c10f6fa9315e40daa03902a)) + # [9.2.0](https://github.com/dhis2/ui/compare/v9.1.2...v9.2.0) (2024-01-11) diff --git a/collections/forms/package.json b/collections/forms/package.json index 0fc63179eb..8f783934c8 100644 --- a/collections/forms/package.json +++ b/collections/forms/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui-forms", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "main": "./build/cjs/index.js", "module": "./build/es/index.js", "sideEffects": [ @@ -35,15 +35,15 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/button": "9.3.0", - "@dhis2-ui/checkbox": "9.3.0", - "@dhis2-ui/field": "9.3.0", - "@dhis2-ui/file-input": "9.3.0", - "@dhis2-ui/input": "9.3.0", - "@dhis2-ui/radio": "9.3.0", - "@dhis2-ui/select": "9.3.0", - "@dhis2-ui/switch": "9.3.0", - "@dhis2-ui/text-area": "9.3.0", + "@dhis2-ui/button": "9.4.0-alpha.2", + "@dhis2-ui/checkbox": "9.4.0-alpha.2", + "@dhis2-ui/field": "9.4.0-alpha.2", + "@dhis2-ui/file-input": "9.4.0-alpha.2", + "@dhis2-ui/input": "9.4.0-alpha.2", + "@dhis2-ui/radio": "9.4.0-alpha.2", + "@dhis2-ui/select": "9.4.0-alpha.2", + "@dhis2-ui/switch": "9.4.0-alpha.2", + "@dhis2-ui/text-area": "9.4.0-alpha.2", "classnames": "^2.3.1", "final-form": "^4.20.2", "prop-types": "^15.7.2", diff --git a/collections/ui/API.md b/collections/ui/API.md index b256f1a6de..78d82dae94 100644 --- a/collections/ui/API.md +++ b/collections/ui/API.md @@ -368,8 +368,10 @@ import { Chip } from '@dhis2/ui' |dragging|boolean|||| |icon|element|||| |marginBottom|number|`4`||`margin-bottom` value, applied in `px`| -|marginLeft|number|`4`||`margin-left` value, applied in `px`| -|marginRight|number|`4`||`margin-right` value, applied in `px`| +|marginInlineEnd|number|||`margin-inline-end` value, applied in `px`| +|marginInlineStart|number|||`margin-inline-start` value, applied in `px`| +|marginLeft|number|||`margin-inline-start` value, applied in `px`| +|marginRight|number|||`margin-inline-end` value, applied in `px`| |marginTop|number|`4`||`margin-top` value, applied in `px`| |overflow|boolean|||| |selected|boolean|||| diff --git a/collections/ui/package.json b/collections/ui/package.json index d3918b4389..6b47cf1c7f 100644 --- a/collections/ui/package.json +++ b/collections/ui/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2/ui", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "main": "./build/cjs/index.js", "module": "./build/es/index.js", "exports": { @@ -21,54 +21,54 @@ "build": "d2-app-scripts build" }, "dependencies": { - "@dhis2-ui/alert": "9.3.0", - "@dhis2-ui/box": "9.3.0", - "@dhis2-ui/button": "9.3.0", - "@dhis2-ui/calendar": "9.3.0", - "@dhis2-ui/card": "9.3.0", - "@dhis2-ui/center": "9.3.0", - "@dhis2-ui/checkbox": "9.3.0", - "@dhis2-ui/chip": "9.3.0", - "@dhis2-ui/cover": "9.3.0", - "@dhis2-ui/css": "9.3.0", - "@dhis2-ui/divider": "9.3.0", - "@dhis2-ui/field": "9.3.0", - "@dhis2-ui/file-input": "9.3.0", - "@dhis2-ui/header-bar": "9.3.0", - "@dhis2-ui/help": "9.3.0", - "@dhis2-ui/input": "9.3.0", - "@dhis2-ui/intersection-detector": "9.3.0", - "@dhis2-ui/label": "9.3.0", - "@dhis2-ui/layer": "9.3.0", - "@dhis2-ui/legend": "9.3.0", - "@dhis2-ui/loader": "9.3.0", - "@dhis2-ui/logo": "9.3.0", - "@dhis2-ui/menu": "9.3.0", - "@dhis2-ui/modal": "9.3.0", - "@dhis2-ui/node": "9.3.0", - "@dhis2-ui/notice-box": "9.3.0", - "@dhis2-ui/organisation-unit-tree": "9.3.0", - "@dhis2-ui/pagination": "9.3.0", - "@dhis2-ui/popover": "9.3.0", - "@dhis2-ui/popper": "9.3.0", - "@dhis2-ui/portal": "9.3.0", - "@dhis2-ui/radio": "9.3.0", - "@dhis2-ui/required": "9.3.0", - "@dhis2-ui/segmented-control": "9.3.0", - "@dhis2-ui/select": "9.3.0", - "@dhis2-ui/selector-bar": "9.3.0", - "@dhis2-ui/sharing-dialog": "9.3.0", - "@dhis2-ui/switch": "9.3.0", - "@dhis2-ui/tab": "9.3.0", - "@dhis2-ui/table": "9.3.0", - "@dhis2-ui/tag": "9.3.0", - "@dhis2-ui/text-area": "9.3.0", - "@dhis2-ui/tooltip": "9.3.0", - "@dhis2-ui/transfer": "9.3.0", - "@dhis2-ui/user-avatar": "9.3.0", - "@dhis2/ui-constants": "9.3.0", - "@dhis2/ui-forms": "9.3.0", - "@dhis2/ui-icons": "9.3.0", + "@dhis2-ui/alert": "9.4.0-alpha.2", + "@dhis2-ui/box": "9.4.0-alpha.2", + "@dhis2-ui/button": "9.4.0-alpha.2", + "@dhis2-ui/calendar": "9.4.0-alpha.2", + "@dhis2-ui/card": "9.4.0-alpha.2", + "@dhis2-ui/center": "9.4.0-alpha.2", + "@dhis2-ui/checkbox": "9.4.0-alpha.2", + "@dhis2-ui/chip": "9.4.0-alpha.2", + "@dhis2-ui/cover": "9.4.0-alpha.2", + "@dhis2-ui/css": "9.4.0-alpha.2", + "@dhis2-ui/divider": "9.4.0-alpha.2", + "@dhis2-ui/field": "9.4.0-alpha.2", + "@dhis2-ui/file-input": "9.4.0-alpha.2", + "@dhis2-ui/header-bar": "9.4.0-alpha.2", + "@dhis2-ui/help": "9.4.0-alpha.2", + "@dhis2-ui/input": "9.4.0-alpha.2", + "@dhis2-ui/intersection-detector": "9.4.0-alpha.2", + "@dhis2-ui/label": "9.4.0-alpha.2", + "@dhis2-ui/layer": "9.4.0-alpha.2", + "@dhis2-ui/legend": "9.4.0-alpha.2", + "@dhis2-ui/loader": "9.4.0-alpha.2", + "@dhis2-ui/logo": "9.4.0-alpha.2", + "@dhis2-ui/menu": "9.4.0-alpha.2", + "@dhis2-ui/modal": "9.4.0-alpha.2", + "@dhis2-ui/node": "9.4.0-alpha.2", + "@dhis2-ui/notice-box": "9.4.0-alpha.2", + "@dhis2-ui/organisation-unit-tree": "9.4.0-alpha.2", + "@dhis2-ui/pagination": "9.4.0-alpha.2", + "@dhis2-ui/popover": "9.4.0-alpha.2", + "@dhis2-ui/popper": "9.4.0-alpha.2", + "@dhis2-ui/portal": "9.4.0-alpha.2", + "@dhis2-ui/radio": "9.4.0-alpha.2", + "@dhis2-ui/required": "9.4.0-alpha.2", + "@dhis2-ui/segmented-control": "9.4.0-alpha.2", + "@dhis2-ui/select": "9.4.0-alpha.2", + "@dhis2-ui/selector-bar": "9.4.0-alpha.2", + "@dhis2-ui/sharing-dialog": "9.4.0-alpha.2", + "@dhis2-ui/switch": "9.4.0-alpha.2", + "@dhis2-ui/tab": "9.4.0-alpha.2", + "@dhis2-ui/table": "9.4.0-alpha.2", + "@dhis2-ui/tag": "9.4.0-alpha.2", + "@dhis2-ui/text-area": "9.4.0-alpha.2", + "@dhis2-ui/tooltip": "9.4.0-alpha.2", + "@dhis2-ui/transfer": "9.4.0-alpha.2", + "@dhis2-ui/user-avatar": "9.4.0-alpha.2", + "@dhis2/ui-constants": "9.4.0-alpha.2", + "@dhis2/ui-forms": "9.4.0-alpha.2", + "@dhis2/ui-icons": "9.4.0-alpha.2", "prop-types": "^15.7.2" }, "peerDependencies": { diff --git a/components/alert/package.json b/components/alert/package.json index 4f06c3364d..687629a1b3 100644 --- a/components/alert/package.json +++ b/components/alert/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/alert", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Alert", "repository": { "type": "git", @@ -33,9 +33,9 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/portal": "9.3.0", - "@dhis2/ui-constants": "9.3.0", - "@dhis2/ui-icons": "9.3.0", + "@dhis2-ui/portal": "9.4.0-alpha.2", + "@dhis2/ui-constants": "9.4.0-alpha.2", + "@dhis2/ui-icons": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/alert/src/alert-bar/action.js b/components/alert/src/alert-bar/action.js index 273ecdc6eb..67e88051c2 100644 --- a/components/alert/src/alert-bar/action.js +++ b/components/alert/src/alert-bar/action.js @@ -14,7 +14,7 @@ class Action extends Component { {this.props.label} diff --git a/components/alert/src/alert-bar/alert-bar.stories.js b/components/alert/src/alert-bar/alert-bar.stories.js index 972c276645..5b14904ef6 100644 --- a/components/alert/src/alert-bar/alert-bar.stories.js +++ b/components/alert/src/alert-bar/alert-bar.stories.js @@ -108,6 +108,23 @@ export const States = () => ( ) +export const RTL = () => ( + +
+ Default (info) + + Success + + + Warning + + + Critical + +
+ +) + export const AutoHiding = () => ( Permanent never auto-hides diff --git a/components/alert/src/alert-bar/alert-bar.styles.js b/components/alert/src/alert-bar/alert-bar.styles.js index bbc13ed40b..34319c8a36 100644 --- a/components/alert/src/alert-bar/alert-bar.styles.js +++ b/components/alert/src/alert-bar/alert-bar.styles.js @@ -11,9 +11,9 @@ export default css` border-radius: 4px; box-shadow: ${elevations.e300}; padding-top: ${spacers.dp8}; - padding-right: ${spacers.dp8}; + padding-inline-end: ${spacers.dp8}; padding-bottom: ${spacers.dp8}; - padding-left: ${spacers.dp24}; + padding-inline-start: ${spacers.dp24}; margin-bottom: ${spacers.dp16}; max-width: 600px; min-width: 300px; diff --git a/components/alert/src/alert-bar/dismiss.js b/components/alert/src/alert-bar/dismiss.js index 64f5d1b6a2..cc2c0592aa 100644 --- a/components/alert/src/alert-bar/dismiss.js +++ b/components/alert/src/alert-bar/dismiss.js @@ -8,7 +8,7 @@ const Dismiss = ({ onClick, dataTest }) => ( diff --git a/components/alert/src/alert-stack/alert-stack.js b/components/alert/src/alert-stack/alert-stack.js index 974e1897d3..8b18766e2c 100644 --- a/components/alert/src/alert-stack/alert-stack.js +++ b/components/alert/src/alert-stack/alert-stack.js @@ -12,9 +12,9 @@ export const AlertStack = ({ className, children, dataTest }) => ( div { position: fixed; top: auto; - right: auto; + inset-inline-end: auto; bottom: 0; - left: 50%; + inset-inline-start: 50%; transform: translateX(-50%); z-index: ${layers.alert}; @@ -24,6 +24,10 @@ export const AlertStack = ({ className, children, dataTest }) => ( pointer-events: none; } + + div:dir(rtl) { + transform: translateX(50%); + } `} diff --git a/components/alert/src/alert-stack/alert-stack.stories.js b/components/alert/src/alert-stack/alert-stack.stories.js index b2068257d4..ec1a6189a5 100644 --- a/components/alert/src/alert-stack/alert-stack.stories.js +++ b/components/alert/src/alert-stack/alert-stack.stories.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import { AlertBar } from '../alert-bar/index.js' import { AlertStack } from './alert-stack.js' @@ -39,3 +39,30 @@ export const Default = (args) => ( ) + +export const RTL = (args) => { + useEffect(() => { + document.body.dir = 'rtl' + return () => { + document.body.dir = 'ltr' + } + }, []) + return ( +
+ + + First notification - I am at the bottom + + + Second notification + + + Third notification + + + Fourth notification - I am at the top + + +
+ ) +} diff --git a/components/box/package.json b/components/box/package.json index 3dcad9e5dd..f30b54089f 100644 --- a/components/box/package.json +++ b/components/box/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/box", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Box", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.3.0", + "@dhis2/ui-constants": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/button/package.json b/components/button/package.json index 3e17df0c96..844ca63138 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/button", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Button", "repository": { "type": "git", @@ -33,11 +33,11 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/layer": "9.3.0", - "@dhis2-ui/loader": "9.3.0", - "@dhis2-ui/popper": "9.3.0", - "@dhis2/ui-constants": "9.3.0", - "@dhis2/ui-icons": "9.3.0", + "@dhis2-ui/layer": "9.4.0-alpha.2", + "@dhis2-ui/loader": "9.4.0-alpha.2", + "@dhis2-ui/popper": "9.4.0-alpha.2", + "@dhis2/ui-constants": "9.4.0-alpha.2", + "@dhis2/ui-icons": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/button/src/button-strip/button-strip.js b/components/button/src/button-strip/button-strip.js index ddb605edd4..38ccc7a8d5 100644 --- a/components/button/src/button-strip/button-strip.js +++ b/components/button/src/button-strip/button-strip.js @@ -27,11 +27,11 @@ const ButtonStrip = ({ className, children, middle, end, dataTest }) => ( } .box { - margin-left: ${spacers.dp8}; + margin-inline-start: ${spacers.dp8}; } .box:first-child { - margin-left: 0; + margin-inline-start: 0; } `} diff --git a/components/button/src/button-strip/button-strip.stories.js b/components/button/src/button-strip/button-strip.stories.js index b03ce9a356..92f562f8b0 100644 --- a/components/button/src/button-strip/button-strip.stories.js +++ b/components/button/src/button-strip/button-strip.stories.js @@ -74,3 +74,15 @@ export const DefaultAlignedRight = (args) => ( ) DefaultAlignedRight.args = { end: true } DefaultAlignedRight.storyName = 'Default - aligned right' + +export const DefaultRTL = (args) => ( +
+ + + + + + +
+) +DefaultRTL.storyName = 'Default - RTL' diff --git a/components/button/src/button/button.stories.js b/components/button/src/button/button.stories.js index 602c0bc4e5..7691370e87 100644 --- a/components/button/src/button/button.stories.js +++ b/components/button/src/button/button.stories.js @@ -216,6 +216,17 @@ Icon.parameters = { }, } +export const IconRTL = (args) => ( +
+
+) +IconRTL.args = { + icon: DemoIcon24, + name: 'RTL icon button', + children: 'RTL text', +} + export const IconOnly = Template.bind({}) IconOnly.args = { icon: DemoIcon24, diff --git a/components/button/src/button/button.styles.js b/components/button/src/button/button.styles.js index e21b631a83..1f8d102181 100644 --- a/components/button/src/button/button.styles.js +++ b/components/button/src/button/button.styles.js @@ -221,7 +221,7 @@ export default css` } .button-icon { - margin-right: 6px; + margin-inline-end: 6px; color: inherit; fill: inherit; font-size: 26px; @@ -230,19 +230,21 @@ export default css` } .icon-only .button-icon { - margin-right: 5px; + margin-inline-end: 5px; } .small.icon-only { - padding: 0 4px 0 5px; + padding-block: 0; + padding-inline-start: 5px; + padding-inline-end: 4px; } .small .button-icon { - margin-right: 2px; + margin-inline-end: 2px; } .small.icon-only .button-icon { - margin-right: 1px; + margin-inline-end: 1px; } .toggled { @@ -277,7 +279,7 @@ export default css` .loader { width: 16px; height: 16px; - margin-right: 8px; + margin-inline-end: 8px; } .loader + .button-icon { @@ -286,6 +288,8 @@ export default css` .icon-only .loader { margin: 0 8px 0 4px; + margin-inline-start: 4px; + margin-inline-end: 8px; } .small.icon-only .loader { margin: 0 4px; diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js index 9d636e7b6e..f225206c9d 100644 --- a/components/button/src/dropdown-button/dropdown-button.js +++ b/components/button/src/dropdown-button/dropdown-button.js @@ -59,7 +59,7 @@ ArrowUp.propTypes = { } const arrow = resolve` - margin-left: ${spacers.dp12}; + margin-inline-start: ${spacers.dp12}; ` class DropdownButton extends Component { diff --git a/components/button/src/dropdown-button/dropdown-button.stories.js b/components/button/src/dropdown-button/dropdown-button.stories.js index e8d3380c55..8209e2bfa6 100644 --- a/components/button/src/dropdown-button/dropdown-button.stories.js +++ b/components/button/src/dropdown-button/dropdown-button.stories.js @@ -118,3 +118,12 @@ const ManualControlTemplate = (args) => { } export const ManualControl = ManualControlTemplate.bind({}) ManualControl.args = {} + +export const RTL = (args) => ( +
+ +
+) +RTL.args = { + children: 'RTL text', +} diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js index d6051ea4c0..95290477be 100644 --- a/components/button/src/split-button/split-button.js +++ b/components/button/src/split-button/split-button.js @@ -122,14 +122,14 @@ class SplitButton extends Component { } div > :global(button:first-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-inline-end: 0; } div > :global(button:last-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } `} diff --git a/components/button/src/split-button/split-button.stories.js b/components/button/src/split-button/split-button.stories.js index 85eb8de1d6..36851aeeff 100644 --- a/components/button/src/split-button/split-button.stories.js +++ b/components/button/src/split-button/split-button.stories.js @@ -79,3 +79,12 @@ WithIcon.args = { component:
Component
, icon:
Icon
, } + +export const RTL = (args) => ( +
+ +
+) +RTL.args = { + children: 'RTL text', +} diff --git a/components/calendar/package.json b/components/calendar/package.json index 0dd58a8148..baef273b00 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/calendar", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Calendar", "repository": { "type": "git", @@ -33,15 +33,15 @@ "styled-jsx": "^4" }, "dependencies": { - "@dhis2-ui/button": "9.3.0", - "@dhis2-ui/card": "9.3.0", - "@dhis2-ui/input": "9.3.0", - "@dhis2-ui/layer": "9.3.0", - "@dhis2-ui/popper": "9.3.0", + "@dhis2-ui/button": "9.4.0-alpha.2", + "@dhis2-ui/card": "9.4.0-alpha.2", + "@dhis2-ui/input": "9.4.0-alpha.2", + "@dhis2-ui/layer": "9.4.0-alpha.2", + "@dhis2-ui/popper": "9.4.0-alpha.2", "@dhis2/multi-calendar-dates": "1.0.2", "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.3.0", - "@dhis2/ui-icons": "9.3.0", + "@dhis2/ui-constants": "9.4.0-alpha.2", + "@dhis2/ui-icons": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/card/package.json b/components/card/package.json index 52bc0a6489..77a4dbbb71 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/card", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Card", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.3.0", + "@dhis2/ui-constants": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/center/package.json b/components/center/package.json index a6fb175d9d..204ce51da8 100644 --- a/components/center/package.json +++ b/components/center/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/center", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Center", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.3.0", + "@dhis2/ui-constants": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 094a3dc984..1a4da44eb2 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/checkbox", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Checkbox", "repository": { "type": "git", @@ -33,9 +33,9 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2-ui/field": "9.3.0", - "@dhis2-ui/required": "9.3.0", - "@dhis2/ui-constants": "9.3.0", + "@dhis2-ui/field": "9.4.0-alpha.2", + "@dhis2-ui/required": "9.4.0-alpha.2", + "@dhis2/ui-constants": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/checkbox/src/checkbox-field/checkbox-field.stories.js b/components/checkbox/src/checkbox-field/checkbox-field.stories.js index 000b7e3096..1d5ca7f738 100644 --- a/components/checkbox/src/checkbox-field/checkbox-field.stories.js +++ b/components/checkbox/src/checkbox-field/checkbox-field.stories.js @@ -139,3 +139,11 @@ ErrorDense.storyName = 'Error - Dense' export const ImageLabelDense = Template.bind({}) ImageLabelDense.args = { ...DefaultDense.args, ...ImageLabel.args } ImageLabelDense.storyName = 'Image label - Dense' + +export const RTL = (args) => ( +
+ <> + + +
+) diff --git a/components/checkbox/src/checkbox/checkbox.js b/components/checkbox/src/checkbox/checkbox.js index af681601df..c4e95492df 100644 --- a/components/checkbox/src/checkbox/checkbox.js +++ b/components/checkbox/src/checkbox/checkbox.js @@ -146,7 +146,7 @@ class Checkbox extends Component { height: 18px; width: 18px; /* The same offset as the icon, 2px border, 1px padding */ - left: 3px; + inset-inline-start: 3px; } label.dense input { @@ -157,14 +157,14 @@ class Checkbox extends Component { .icon { user-select: none; - margin-right: ${spacers.dp4}; + margin-inline-end: ${spacers.dp4}; border: 2px solid transparent; padding: 1px; border-radius: 5px; } label.dense .icon { - margin-right: 3px; + margin-inline-end: 3px; border-radius: 4px; } diff --git a/components/checkbox/src/checkbox/checkbox.stories.js b/components/checkbox/src/checkbox/checkbox.stories.js index a0bc298928..712d793beb 100644 --- a/components/checkbox/src/checkbox/checkbox.stories.js +++ b/components/checkbox/src/checkbox/checkbox.stories.js @@ -174,3 +174,9 @@ ErrorDense.storyName = 'Error - Dense' export const ImageLabelDense = Template.bind({}) ImageLabelDense.args = { ...ImageLabel.args, dense: true } ImageLabelDense.storyName = 'Image label - Dense' + +export const RTL = (args) => ( +
+ +
+) diff --git a/components/chip/API.md b/components/chip/API.md index 5a44398971..a0842b9609 100644 --- a/components/chip/API.md +++ b/components/chip/API.md @@ -22,8 +22,10 @@ import { Chip } from '@dhis2-ui/chip' |dragging|boolean|||| |icon|element|||| |marginBottom|number|`4`||`margin-bottom` value, applied in `px`| -|marginLeft|number|`4`||`margin-left` value, applied in `px`| -|marginRight|number|`4`||`margin-right` value, applied in `px`| +|marginInlineEnd|number|||`margin-inline-end` value, applied in `px`| +|marginInlineStart|number|||`margin-inline-start` value, applied in `px`| +|marginLeft|number|||`margin-inline-start` value, applied in `px`| +|marginRight|number|||`margin-inline-end` value, applied in `px`| |marginTop|number|`4`||`margin-top` value, applied in `px`| |overflow|boolean|||| |selected|boolean|||| diff --git a/components/chip/package.json b/components/chip/package.json index fe81a88089..3301cf5cdd 100644 --- a/components/chip/package.json +++ b/components/chip/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/chip", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Chip", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.3.0", + "@dhis2/ui-constants": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/chip/src/chip.js b/components/chip/src/chip.js index c10282e11e..221bf677cd 100644 --- a/components/chip/src/chip.js +++ b/components/chip/src/chip.js @@ -6,6 +6,8 @@ import { Content } from './content.js' import { Icon } from './icon.js' import { Remove } from './remove.js' +const DEFAULT_INLINE_MARGIN = '4' + const Chip = ({ selected, dense, @@ -22,6 +24,8 @@ const Chip = ({ marginLeft, marginRight, marginTop, + marginInlineStart, + marginInlineEnd, }) => ( { @@ -98,8 +102,12 @@ const Chip = ({ @@ -109,8 +117,6 @@ const Chip = ({ Chip.defaultProps = { dataTest: 'dhis2-uicore-chip', marginBottom: 4, - marginLeft: 4, - marginRight: 4, marginTop: 4, } @@ -124,9 +130,13 @@ Chip.propTypes = { icon: PropTypes.element, /** `margin-bottom` value, applied in `px` */ marginBottom: PropTypes.number, - /** `margin-left` value, applied in `px` */ + /** `margin-inline-end` value, applied in `px` */ + marginInlineEnd: PropTypes.number, + /** `margin-inline-start` value, applied in `px` */ + marginInlineStart: PropTypes.number, + /** `margin-inline-start` value, applied in `px` */ marginLeft: PropTypes.number, - /** `margin-right` value, applied in `px` */ + /** `margin-inline-end` value, applied in `px` */ marginRight: PropTypes.number, /** `margin-top` value, applied in `px` */ marginTop: PropTypes.number, diff --git a/components/chip/src/chip.stories.js b/components/chip/src/chip.stories.js index 253f07c951..015fbfbc5b 100644 --- a/components/chip/src/chip.stories.js +++ b/components/chip/src/chip.stories.js @@ -126,3 +126,10 @@ DenseRemoveable.args = { ...Removable.args, children: 'Removable and dense', } + +export const RTLRemovable = (args) => ( +
+ RTL removable +
+) +RTLRemovable.args = { ...Removable.args } diff --git a/components/chip/src/icon.js b/components/chip/src/icon.js index e4484e38ef..844cb2bc77 100644 --- a/components/chip/src/icon.js +++ b/components/chip/src/icon.js @@ -15,8 +15,8 @@ export const Icon = ({ icon, dataTest }) => { span { width: 24px; height: 24px; - margin-left: ${spacers.dp4}; - margin-right: -6px; + margin-inline-start: ${spacers.dp4}; + margin-inline-end: -6px; border-radius: 50%; overflow: hidden; } diff --git a/components/chip/src/remove.js b/components/chip/src/remove.js index 175f1177e2..87c2f3f7df 100644 --- a/components/chip/src/remove.js +++ b/components/chip/src/remove.js @@ -35,9 +35,9 @@ const containerStyle = css` align-items: center; height: 20px; width: 20px; - margin-right: 4px; + margin-inline-end: 4px; border-radius: 12px; - margin-left: -8px; + margin-inline-start: -8px; } span:hover { background: ${colors.grey400}; diff --git a/components/chip/types/index.d.ts b/components/chip/types/index.d.ts index 40401ee07c..da46e06664 100644 --- a/components/chip/types/index.d.ts +++ b/components/chip/types/index.d.ts @@ -13,13 +13,21 @@ export interface ChipProps { */ marginBottom?: number /** - * `margin-left` value, applied in `px` + * `margin-inline-start` value, applied in `px` (if marginInlineStart not provided) */ marginLeft?: number /** - * `margin-right` value, applied in `px` + * `margin-inline-end` value, applied in `px` (if marginInlineEnd not provided) */ marginRight?: number + /** + * `margin-inline-start` value, applied in `px` + */ + marginInlineStart?: number + /** + * `margin-inline-end` value, applied in `px` + */ + marginInlineEnd?: number /** * `margin-top` value, applied in `px` */ diff --git a/components/cover/package.json b/components/cover/package.json index 6b749434e6..e7b33ff47f 100644 --- a/components/cover/package.json +++ b/components/cover/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/cover", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Cover", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.3.0", + "@dhis2/ui-constants": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/css/package.json b/components/css/package.json index 1b7ad7ed81..7444688502 100644 --- a/components/css/package.json +++ b/components/css/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/css", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI CSS", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.3.0", + "@dhis2/ui-constants": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/divider/package.json b/components/divider/package.json index 0ce0182c63..e8483f942e 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -1,6 +1,6 @@ { "name": "@dhis2-ui/divider", - "version": "9.3.0", + "version": "9.4.0-alpha.2", "description": "UI Divider", "repository": { "type": "git", @@ -33,7 +33,7 @@ }, "dependencies": { "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui-constants": "9.3.0", + "@dhis2/ui-constants": "9.4.0-alpha.2", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/components/divider/src/divider.js b/components/divider/src/divider.js index 9ac8ef4039..6311fe77ff 100644 --- a/components/divider/src/divider.js +++ b/components/divider/src/divider.js @@ -2,23 +2,41 @@ import { colors, spacers } from '@dhis2/ui-constants' import PropTypes from 'prop-types' import React from 'react' -const Divider = ({ className, dataTest, dense, margin }) => ( -
- - -
-) +const flipMargin = (margin) => { + const splitMargin = margin.split(/\s+/) + if (splitMargin?.length === 4) { + return [ + splitMargin[0], + splitMargin[3], + splitMargin[2], + splitMargin[1], + ].join(' ') + } + return margin +} + +const Divider = ({ className, dataTest, dense, margin }) => { + return ( +
+ + +
+ ) +} Divider.defaultProps = { dataTest: 'dhis2-uicore-divider', diff --git a/components/divider/src/divider.stories.js b/components/divider/src/divider.stories.js index b074f308b8..797c41ed00 100644 --- a/components/divider/src/divider.stories.js +++ b/components/divider/src/divider.stories.js @@ -31,3 +31,10 @@ Dense.args = { dense: true } export const Margin = Template.bind({}) Margin.args = { margin: '20px 20px 20px 20px' } + +export const RTLUnevenMargin = (args) => ( +
+