From 827d648cea2d2200a64b0bf2dabfd5851466bf73 Mon Sep 17 00:00:00 2001 From: Dylan Kilgore Date: Thu, 22 Sep 2022 18:24:14 -0700 Subject: [PATCH 1/2] fix: rtl: rtl ui polish --- src/components/Button/BaseButton.tsx | 4 + .../Button/SplitButton/SplitButton.tsx | 19 +- .../Button/TwoStateButton/TwoStateButton.tsx | 4 + src/components/Button/button.module.scss | 126 +++ src/components/CheckBox/CheckBox.tsx | 4 + src/components/CheckBox/checkbox.module.scss | 56 ++ .../Generate/generateRangePicker.tsx | 2 + .../Generate/generateSinglePicker.tsx | 1 + .../DatePicker/Styles/mixins.scss | 17 + .../DateTimePicker/DatePicker/Styles/rtl.scss | 247 ++--- .../DateTimePicker/Internal/OcPicker.tsx | 1 - .../DateTimePicker/Internal/OcRangePicker.tsx | 2 +- .../Internal/Partials/DatePartial/Date.tsx | 2 +- .../Internal/Partials/Header.tsx | 9 +- .../Internal/ocpicker.module.scss | 389 +++++++- .../Dialog/BaseDialog/BaseDialog.tsx | 10 + .../Dialog/BaseDialog/base-dialog.module.scss | 24 + src/components/Empty/Empty.stories.tsx | 2 +- src/components/Grid/Styles/mixins.scss | 35 + src/components/Grid/Styles/rtl.scss | 61 -- src/components/Inputs/Styles/rtl.scss | 921 ++++++++++++++++++ src/components/Inputs/TextArea/TextArea.tsx | 5 + src/components/Inputs/TextInput/TextInput.tsx | 4 + src/components/Inputs/input.module.scss | 332 ++++--- src/components/Label/Label.tsx | 1 + src/components/Label/label.module.scss | 37 + src/components/Loader/Loader.tsx | 3 + src/components/Loader/loader.module.scss | 5 + src/components/MatchScore/MatchScore.tsx | 11 +- .../MatchScore/matchScore.module.scss | 21 + src/components/Pagination/Pagination.tsx | 19 +- .../Pagination/pagination.module.scss | 32 + src/components/Panel/Panel.tsx | 32 +- src/components/Panel/panel.module.scss | 46 + .../PersistentBar/PersistentBar.tsx | 8 +- .../PersistentBar/persistentBar.module.scss | 9 + src/components/Pills/Pill.tsx | 4 + src/components/Pills/pills.module.scss | 19 + src/components/RadioButton/RadioButton.tsx | 4 + src/components/RadioButton/radio.module.scss | 56 ++ src/components/Select/Select.tsx | 10 +- src/components/Slider/Slider.tsx | 61 +- src/components/Stack/Stack.tsx | 5 + src/components/Stack/stack.module.scss | 65 ++ .../Table/Hooks/useFilter/FilterDropdown.tsx | 12 +- .../Table/Internal/octable.module.scss | 143 ++- src/components/Table/Styles/rtl.scss | 360 +++++-- src/components/Table/Styles/table.module.scss | 122 +-- src/components/Tabs/Tab/Tab.tsx | 4 + src/components/Tabs/tabs.module.scss | 22 + src/components/Tree/Internal/TreeNode.tsx | 8 +- .../Tree/Internal/octree.module.scss | 5 +- src/styles/themes/_definitions.scss | 6 + 53 files changed, 2790 insertions(+), 617 deletions(-) create mode 100644 src/components/Inputs/Styles/rtl.scss diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx index e56d7b8be..adea076fe 100644 --- a/src/components/Button/BaseButton.tsx +++ b/src/components/Button/BaseButton.tsx @@ -15,6 +15,7 @@ import { Badge } from '../Badge'; import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia'; import { mergeClasses } from '../../shared/utilities'; import { Loader, LoaderSize } from '../Loader'; +import { useCanvasDirection } from '../../hooks/useCanvasDirection'; import styles from './button.module.scss'; @@ -61,6 +62,8 @@ export const BaseButton: FC = React.forwardRef( const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small); const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall); + const htmlDir: string = useCanvasDirection(); + const contextuallyDisabled: Disabled = useContext(DisabledContext); const mergedDisabled: boolean = configContextProps.noDisabledContext ? disabled @@ -103,6 +106,7 @@ export const BaseButton: FC = React.forwardRef( }, { [styles.dropShadow]: dropShadow }, { [styles.floating]: floatingButtonProps?.enabled }, + { [styles.buttonRtl]: htmlDir === 'rtl' }, ]); const buttonBaseClassNames: string = mergeClasses([ diff --git a/src/components/Button/SplitButton/SplitButton.tsx b/src/components/Button/SplitButton/SplitButton.tsx index 8c16ab1f2..317cbedf0 100644 --- a/src/components/Button/SplitButton/SplitButton.tsx +++ b/src/components/Button/SplitButton/SplitButton.tsx @@ -13,6 +13,7 @@ import { import { Icon, IconName, IconSize } from '../../Icon'; import { Breakpoints, useMatchMedia } from '../../../hooks/useMatchMedia'; import { mergeClasses } from '../../../shared/utilities'; +import { useCanvasDirection } from '../../../hooks/useCanvasDirection'; import styles from '../button.module.scss'; @@ -48,6 +49,8 @@ export const SplitButton: FC = React.forwardRef( const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small); const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall); + const htmlDir: string = useCanvasDirection(); + const contextuallyDisabled: Disabled = useContext(DisabledContext); const mergedDisabled: boolean = configContextProps.noDisabledContext ? disabled @@ -181,11 +184,19 @@ export const SplitButton: FC = React.forwardRef( style={style} type="button" > + {htmlDir === 'rtl' && ( + + )} {getButtonIcon()} - + {htmlDir !== 'rtl' && ( + + )} ); } diff --git a/src/components/Button/TwoStateButton/TwoStateButton.tsx b/src/components/Button/TwoStateButton/TwoStateButton.tsx index 6e58e87f5..d5ad1799a 100644 --- a/src/components/Button/TwoStateButton/TwoStateButton.tsx +++ b/src/components/Button/TwoStateButton/TwoStateButton.tsx @@ -14,6 +14,7 @@ import { Badge } from '../../Badge'; import { Icon, IconSize } from '../../Icon'; import { Breakpoints, useMatchMedia } from '../../../hooks/useMatchMedia'; import { mergeClasses } from '../../../shared/utilities'; +import { useCanvasDirection } from '../../../hooks/useCanvasDirection'; import styles from '../button.module.scss'; @@ -53,6 +54,8 @@ export const TwoStateButton: FC = React.forwardRef( const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small); const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall); + const htmlDir: string = useCanvasDirection(); + const contextuallyDisabled: Disabled = useContext(DisabledContext); const mergedDisabled: boolean = configContextProps.noDisabledContext ? disabled @@ -98,6 +101,7 @@ export const TwoStateButton: FC = React.forwardRef( { [styles.left]: alignText === ButtonTextAlign.Left }, { [styles.right]: alignText === ButtonTextAlign.Right }, { [styles.disabled]: allowDisabledFocus || mergedDisabled }, + { [styles.buttonRtl]: htmlDir === 'rtl' }, ]); const buttonTextClassNames: string = mergeClasses([ diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss index 11903bdce..788b27097 100644 --- a/src/components/Button/button.module.scss +++ b/src/components/Button/button.module.scss @@ -536,6 +536,132 @@ } } +.button-rtl { + .icon + .button-text-large:not(:empty) { + margin-left: 0; + margin-right: $button-spacer-large; + } + + .icon + .button-text-medium:not(:empty) { + margin-left: 0; + margin-right: $button-spacer-medium; + } + + .icon + .button-text-small:not(:empty) { + margin-left: 0; + margin-right: $button-spacer-small; + } + + &.split-left { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $corner-radius-s; + border-top-right-radius: $corner-radius-s; + + &.pill-shape { + border-bottom-right-radius: $corner-radius-xl; + border-top-right-radius: $corner-radius-xl; + } + + .button-text-large { + &.counter { + margin-left: 0; + margin-right: $space-xs; + } + } + + .button-text-medium { + &.counter { + margin-left: 0; + margin-right: $space-xs; + } + } + + .button-text-small { + &.counter { + margin-left: 0; + margin-right: $space-xxs; + } + } + } + + &.split-right { + border-bottom-left-radius: $corner-radius-s; + border-top-left-radius: $corner-radius-s; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + + &.pill-shape { + border-bottom-left-radius: $corner-radius-xl; + border-top-left-radius: $corner-radius-xl; + } + + .button-text-large { + &.counter { + margin-left: $space-xs; + margin-right: 0; + } + } + + .button-text-medium { + &.counter { + margin-left: $space-xs; + margin-right: 0; + } + } + + .button-text-small { + &.counter { + margin-left: $space-xxs; + margin-right: 0; + } + } + } + + &.split-button { + .split-divider-large { + left: 50px; + right: unset; + } + + .split-divider-medium { + left: 42px; + right: unset; + } + + .split-divider-small { + left: 34px; + right: unset; + } + } + + &.floating { + left: 40px; + right: unset; + } + + .button-text-large { + &.counter { + margin-left: 0; + margin-right: $space-xs; + } + } + + .button-text-medium { + &.counter { + margin-left: 0; + margin-right: $space-xs; + } + } + + .button-text-small { + &.counter { + margin-left: 0; + margin-right: $space-xxs; + } + } +} + :global(.focus-visible) { .button { &.focus-visible, diff --git a/src/components/CheckBox/CheckBox.tsx b/src/components/CheckBox/CheckBox.tsx index 52fb6f4bb..dc23c91ea 100644 --- a/src/components/CheckBox/CheckBox.tsx +++ b/src/components/CheckBox/CheckBox.tsx @@ -5,6 +5,7 @@ import { generateId, mergeClasses } from '../../shared/utilities'; import { CheckboxProps, LabelAlign, LabelPosition, SelectorSize } from './'; import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia'; import { FormItemInputContext } from '../Form/Context'; +import { useCanvasDirection } from '../../hooks/useCanvasDirection'; import styles from './checkbox.module.scss'; @@ -41,6 +42,8 @@ export const CheckBox: FC = React.forwardRef( const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small); const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall); + const htmlDir: string = useCanvasDirection(); + const checkBoxId = useRef(id || generateId()); const [isChecked, setIsChecked] = useState( defaultChecked || checked @@ -86,6 +89,7 @@ export const CheckBox: FC = React.forwardRef( { [styles.selectorSmall]: mergedSize === SelectorSize.Small }, classNames, { [styles.disabled]: allowDisabledFocus || mergedDisabled }, + { [styles.selectorRtl]: htmlDir === 'rtl' }, { ['in-form-item']: mergedFormItemInput }, ]); diff --git a/src/components/CheckBox/checkbox.module.scss b/src/components/CheckBox/checkbox.module.scss index b49c5c082..9763e7ecd 100644 --- a/src/components/CheckBox/checkbox.module.scss +++ b/src/components/CheckBox/checkbox.module.scss @@ -441,6 +441,62 @@ cursor: not-allowed; } } + + &-rtl { + .selector-label { + &-end { + margin-left: 0; + margin-right: $space-xs; + } + + &-start { + margin-left: $space-xs; + margin-right: 0; + } + } + + &-large { + .selector-label { + &-end { + margin-left: 0; + margin-right: $space-m; + } + + &-start { + margin-left: $space-m; + margin-right: 0; + } + } + } + + &-medium { + .selector-label { + &-end { + margin-left: 0; + margin-right: $space-xs; + } + + &-start { + margin-left: $space-xs; + margin-right: 0; + } + } + } + + &-small { + .selector-label { + &-end { + margin-left: 0; + margin-right: $space-xxs; + } + + &-start { + margin-left: $space-xxs; + margin-right: 0; + } + } + } + } } :global(.focus-visible) { diff --git a/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx b/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx index e75e1dcc9..8afc18b9f 100644 --- a/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx +++ b/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx @@ -167,6 +167,7 @@ export default function generateRangePicker( > @@ -252,6 +253,7 @@ export default function generateRangePicker( [styles.pickerStatusSuccess]: mergedStatus === 'success', }, + { [styles.pickerRtl]: htmlDir === 'rtl' }, { ['in-form-item']: mergedFormItemInput }, classNames, ])} diff --git a/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx b/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx index 24bf4bfe7..77528d1c8 100644 --- a/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx +++ b/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx @@ -296,6 +296,7 @@ export default function generatePicker( [styles.pickerStatusSuccess]: mergedStatus === 'success', }, + { [styles.pickerRtl]: htmlDir === 'rtl' }, { ['in-form-item']: mergedFormItemInput }, classNames, ])} diff --git a/src/components/DateTimePicker/DatePicker/Styles/mixins.scss b/src/components/DateTimePicker/DatePicker/Styles/mixins.scss index 51956849b..ea93c2a54 100644 --- a/src/components/DateTimePicker/DatePicker/Styles/mixins.scss +++ b/src/components/DateTimePicker/DatePicker/Styles/mixins.scss @@ -38,6 +38,23 @@ $picker-input-padding-vertical: max( padding: $padding-top $padding-horizontal $padding-bottom 0; } +@mixin picker-padding-rtl($input-height, $font-size, $padding-horizontal) { + // font height is probably 22.0001, So using floor is better + $font-height: floor( + strip-units($font-size) * strip-units($padding-horizontal) + ) + 2; + $padding-top: max( + calc((strip-units($input-height) - strip-units($font-height)) / 2), + 0 + ); + $padding-bottom: max( + strip-units($input-height) - strip-units($font-height) - + strip-units($padding-top), + 0 + ); + padding: $padding-top 0 $padding-bottom $padding-horizontal; +} + // Picker css reset @mixin reset-component() { box-sizing: border-box; diff --git a/src/components/DateTimePicker/DatePicker/Styles/rtl.scss b/src/components/DateTimePicker/DatePicker/Styles/rtl.scss index 65f5ac51f..4b9d35031 100644 --- a/src/components/DateTimePicker/DatePicker/Styles/rtl.scss +++ b/src/components/DateTimePicker/DatePicker/Styles/rtl.scss @@ -4,168 +4,138 @@ .picker { &-rtl { direction: rtl; - } - &-suffix { - .picker-rtl { - margin-right: ($space-xs / 2); - margin-left: 0; + &.picker-large { + @include picker-padding-rtl( + $picker-line-height-l, + $picker-font-size-l, + $picker-input-padding-horizontal-l + ); } - } - &-clear { - .picker-rtl { - right: auto; - left: 0; + &.picker-medium { + @include picker-padding-rtl( + $picker-line-height-m, + $picker-font-size-m, + $picker-input-padding-horizontal-m + ); } - } - &-separator { - .picker-rtl { - transform: rotate(180deg); + &.picker-small { + @include picker-padding-rtl( + $picker-line-height-s, + $picker-font-size-s, + $picker-input-padding-horizontal-s + ); } - } - &-header { - &-view { - button { - &:not(:first-child) { - .picker-partial-rtl { - margin-right: $space-xs; - margin-left: 0; - } - } + .picker-input { + .picker-suffix { + margin-right: ($space-xs / 2); + margin-left: 0; } - } - } - &-range { - .picker-clear { - .picker-rtl { - right: auto; - left: $picker-input-padding-horizontal-l; + .picker-clear { + right: unset; + left: 0; } } - .picker-active-bar { - .picker-rtl { - margin-right: $picker-input-padding-horizontal-l; - margin-left: 0; + &.picker-ranges { + .picker-dropdown { + text-align: right; } - } - &.picker-small { - .picker-active-bar { - .picker-rtl { - margin-right: $picker-input-padding-horizontal-s; + .picker-ok { + .picker-dropdown { + float: left; + margin-right: $space-xs; + margin-left: 0; } } } } +} - &-ranges { - .picker-dropdown-rtl { - text-align: right; - } +.picker-partial { + &-rtl { + direction: rtl; - .picker-ok { - .picker-dropdown-rtl { - float: left; - margin-right: $space-xs; - margin-left: 0; + .picker-header { + &-view { + button { + &:not(:first-child) { + margin-right: $space-xs; + margin-left: 0; + } + } } } - } - &-partial { - &-rtl { - direction: rtl; - } - } + @mixin picker-cell-inner() { + position: relative; + z-index: 2; + display: inline-block; + min-width: $picker-partial-cell-height; + height: $picker-partial-cell-height; + line-height: $picker-partial-cell-height; + border-radius: $picker-border-radius; + transition: background $motion-duration-fast, + border $motion-duration-fast; - @mixin picker-cell-inner() { - position: relative; - z-index: 2; - display: inline-block; - min-width: $picker-partial-cell-height; - height: $picker-partial-cell-height; - line-height: $picker-partial-cell-height; - border-radius: $picker-border-radius; - transition: background $motion-duration-fast, - border $motion-duration-fast; - - &-in-view.picker-cell-range-start:before { - .picker-partial-rtl { - right: 50%; + &-in-view.picker-cell-range-start:before { left: 0; + right: 50%; } - } - &-in-view.picker-cell-range-end:before { - .picker-partial-rtl { - right: 0; + &-in-view.picker-cell-range-end:before { left: 50%; + right: 0; } - } - &-in-view.picker-cell-range-start.picker-cell-range-end:before { - .picker-partial-rtl { - right: 50%; + &-in-view.picker-cell-range-start.picker-cell-range-end:before { left: 50%; + right: 50%; } - } - .picker-date-partial.picker-cell-in-view.picker-cell-in-range.picker-cell-range-hover-start - &:after { - .picker-partial-rtl { - right: 0; + .picker-date-partial.picker-cell-in-view.picker-cell-in-range.picker-cell-range-hover-start + &:after { left: -5px - $picker-border-width; + right: 0; } - } - .picker-date-partial.picker-cell-in-view.picker-cell-in-range.picker-cell-range-hover-end - &:after { - .picker-partial-rtl { - right: -5px - $picker-border-width; + .picker-date-partial.picker-cell-in-view.picker-cell-in-range.picker-cell-range-hover-end + &:after { left: 0; + right: -5px - $picker-border-width; } - } - &-range-hover.picker-cell-range-start:after { - .picker-partial-rtl { - right: 0; + &-range-hover.picker-cell-range-start:after { left: 50%; + right: 0; } - } - &-range-hover.picker-cell-range-end:after { - .picker-partial-rtl { - right: 50%; + &-range-hover.picker-cell-range-end:after { left: 0; + right: 50%; } - } - // range start border-radius - &-in-view.picker-cell-range-start:not(&-range-start-single):not(&-range-end) { - .picker-partial-rtl { + // range start border-radius + &-in-view.picker-cell-range-start:not(&-range-start-single):not(&-range-end) { border-radius: 0 $picker-border-radius $picker-border-radius 0; } - } - // range end border-radius - &-in-view.picker-cell-range-end:not(&-range-end-single):not(&-range-start) { - .picker-partial-rtl { + // range end border-radius + &-in-view.picker-cell-range-end:not(&-range-end-single):not(&-range-start) { border-radius: $picker-border-radius 0 0 $picker-border-radius; } - } - // Edge start - tr - > &-in-view.picker-cell-range-hover:not(&-selected):first-child:after, - &-in-view.picker-cell-start.picker-cell-range-hover-edge-start.picker-cell-range-hover-edge-start-near-range:after, - &-in-view.picker-cell-range-hover-edge-start:not(&-range-hover-edge-start-near-range):after, - &-in-view.picker-cell-range-hover-start:after { - .picker-partial-rtl { + // Edge start + tr + > &-in-view.picker-cell-range-hover:not(&-selected):first-child:after, + &-in-view.picker-cell-start.picker-cell-range-hover-edge-start.picker-cell-range-hover-edge-start-near-range:after, + &-in-view.picker-cell-range-hover-edge-start:not(&-range-hover-edge-start-near-range):after, + &-in-view.picker-cell-range-hover-start:after { right: 6px; left: 0; border-right: $picker-border-width dashed @@ -173,14 +143,13 @@ border-left: none; border-radius: 0 $picker-border-radius $picker-border-radius 0; } - } - // Edge end - tr > &-in-view.picker-cell-range-hover:not(&-selected):last-child:after, - &-in-view.picker-cell-end.picker-cell-range-hover-edge-end.picker-cell-range-hover-edge-end-near-range:after, - &-in-view.picker-cell-range-hover-edge-end:not(&-range-hover-edge-end-near-range):after, - &-in-view.picker-cell-range-hover-end:after { - .picker-partial-rtl { + // Edge end + tr + > &-in-view.picker-cell-range-hover:not(&-selected):last-child:after, + &-in-view.picker-cell-end.picker-cell-range-hover-edge-end.picker-cell-range-hover-edge-end-near-range:after, + &-in-view.picker-cell-range-hover-edge-end:not(&-range-hover-edge-end-near-range):after, + &-in-view.picker-cell-range-hover-end:after { right: 0; left: 6px; border-right: none; @@ -188,18 +157,16 @@ $picker-date-hover-range-border-color; border-radius: $picker-border-radius 0 0 $picker-border-radius; } - } - tr > &-in-view.picker-cell-range-hover-start:last-child:after, - tr > &-in-view.picker-cell-range-hover-end:first-child:after, - &-in-view.picker-cell-start.picker-cell-range-hover-edge-start:not(&-range-hover):after, - &-in-view.picker-cell-start.picker-cell-range-hover-end.picker-cell-range-hover-edge-start:not(&-range-hover):after, - &-in-view.picker-cell-end.picker-cell-range-hover-start.picker-cell-range-hover-edge-end:not(&-range-hover):after, - tr - > &-in-view.picker-cell-start.picker-cell-range-hover.picker-cell-range-hover-edge-start:last-child:after, - tr - > &-in-view.picker-cell-end.picker-cell-range-hover.picker-cell-range-hover-edge-end:first-child:after { - .picker-partial-rtl { + tr > &-in-view.picker-cell-range-hover-start:last-child:after, + tr > &-in-view.picker-cell-range-hover-end:first-child:after, + &-in-view.picker-cell-start.picker-cell-range-hover-edge-start:not(&-range-hover):after, + &-in-view.picker-cell-start.picker-cell-range-hover-end.picker-cell-range-hover-edge-start:not(&-range-hover):after, + &-in-view.picker-cell-end.picker-cell-range-hover-start.picker-cell-range-hover-edge-end:not(&-range-hover):after, + tr + > &-in-view.picker-cell-start.picker-cell-range-hover.picker-cell-range-hover-edge-start:last-child:after, + tr + > &-in-view.picker-cell-end.picker-cell-range-hover.picker-cell-range-hover-edge-end:first-child:after { right: 6px; left: 6px; border-right: $picker-border-width dashed @@ -209,23 +176,21 @@ border-radius: $picker-border-radius; } } - } - &-cell { - @include picker-cell-inner(); - } + .picker-cell { + @include picker-cell-inner(); + } - &-footer { - &-extra { - .picker-dropdown-rtl { - direction: rtl; - text-align: right; + .picker-footer { + &-extra { + .picker-dropdown-rtl { + direction: rtl; + text-align: right; + } } } - } - &-time-partial { - .picker-partial-rtl { + .picker-time-partial { direction: ltr; } } diff --git a/src/components/DateTimePicker/Internal/OcPicker.tsx b/src/components/DateTimePicker/Internal/OcPicker.tsx index b9e07e3ac..0eda7c374 100644 --- a/src/components/DateTimePicker/Internal/OcPicker.tsx +++ b/src/components/DateTimePicker/Internal/OcPicker.tsx @@ -28,7 +28,6 @@ import usePickerInput from './Hooks/usePickerInput'; import useTextValueMapping from './Hooks/useTextValueMapping'; import useValueTexts from './Hooks/useValueTexts'; import useHoverValue from './Hooks/useHoverValue'; -import { Shape } from '../../ConfigProvider'; import styles from './ocpicker.module.scss'; diff --git a/src/components/DateTimePicker/Internal/OcRangePicker.tsx b/src/components/DateTimePicker/Internal/OcRangePicker.tsx index 1639e56c3..369d7b0e9 100644 --- a/src/components/DateTimePicker/Internal/OcRangePicker.tsx +++ b/src/components/DateTimePicker/Internal/OcRangePicker.tsx @@ -1002,7 +1002,7 @@ function InnerRangePicker(props: OcRangePickerProps) { let mergedNodes: React.ReactNode = ( <> -
{partials}
+
{partials}
{extraNode && (
{extraNode}
)} diff --git a/src/components/DateTimePicker/Internal/Partials/DatePartial/Date.tsx b/src/components/DateTimePicker/Internal/Partials/DatePartial/Date.tsx index af5e88b6f..60bf2ac06 100644 --- a/src/components/DateTimePicker/Internal/Partials/DatePartial/Date.tsx +++ b/src/components/DateTimePicker/Internal/Partials/DatePartial/Date.tsx @@ -74,7 +74,7 @@ function DatePartial(props: DatePartialProps) { return (
diff --git a/src/components/DateTimePicker/Internal/Partials/Header.tsx b/src/components/DateTimePicker/Internal/Partials/Header.tsx index b00c904a2..ad4b6783b 100644 --- a/src/components/DateTimePicker/Internal/Partials/Header.tsx +++ b/src/components/DateTimePicker/Internal/Partials/Header.tsx @@ -1,10 +1,11 @@ -import React, { useContext } from 'react'; +import React from 'react'; import { HeaderProps } from './Partial.types'; import PartialContext from '../PartialContext'; import { ButtonSize, NeutralButton } from '../../../Button'; import { IconName } from '../../../Icon'; import { Size } from '../../../ConfigProvider'; import { DatePickerSize } from '../OcPicker.types'; +import { useCanvasDirection } from '../../../../hooks/useCanvasDirection'; import styles from '../ocpicker.module.scss'; @@ -24,6 +25,8 @@ export const Header = ({ children, size = DatePickerSize.Medium, }: HeaderProps): JSX.Element => { + const htmlDir: string = useCanvasDirection(); + const { hideNextBtn, hidePrevBtn } = React.useContext(PartialContext); const datePickerSizeToButtonSizeMap = new Map< @@ -43,6 +46,7 @@ export const Header = ({ classNames={'picker-header-super-prev-btn'} iconProps={{ path: superPrevIcon, + rotate: htmlDir === 'rtl' ? 180 : 0, }} onClick={onSuperPrev} size={datePickerSizeToButtonSizeMap.get(size)} @@ -54,6 +58,7 @@ export const Header = ({ classNames={'picker-header-prev-btn'} iconProps={{ path: prevIcon, + rotate: htmlDir === 'rtl' ? 180 : 0, }} onClick={onPrev} size={datePickerSizeToButtonSizeMap.get(size)} @@ -66,6 +71,7 @@ export const Header = ({ classNames={'picker-header-next-btn'} iconProps={{ path: nextIcon, + rotate: htmlDir === 'rtl' ? 180 : 0, }} onClick={onNext} size={datePickerSizeToButtonSizeMap.get(size)} @@ -77,6 +83,7 @@ export const Header = ({ classNames={'picker-header-super-next-btn'} iconProps={{ path: superNextIcon, + rotate: htmlDir === 'rtl' ? 180 : 0, }} onClick={onSuperNext} size={datePickerSizeToButtonSizeMap.get(size)} diff --git a/src/components/DateTimePicker/Internal/ocpicker.module.scss b/src/components/DateTimePicker/Internal/ocpicker.module.scss index 83e8b6c45..aefba7d19 100644 --- a/src/components/DateTimePicker/Internal/ocpicker.module.scss +++ b/src/components/DateTimePicker/Internal/ocpicker.module.scss @@ -6,10 +6,6 @@ display: inline-flex; font-family: $octuple-font-family; - &-rtl { - direction: rtl; - } - // Picker default styles are of size medium. &-body { padding: 8px 16px 8px 16px; @@ -100,10 +96,6 @@ &-focused { border-color: $focus-visible-shadow-color; } - - &-rtl { - direction: rtl; - } } &-decade-partial, @@ -565,11 +557,6 @@ } } - .picker-cell, - .picker-cell-inner { - width: 20px; - } - .picker-cell-week { color: $picker-foreground-color; font-weight: $text-font-weight-bold; @@ -738,12 +725,6 @@ } } - &-date-partial { - .picker-cell-inner { - width: 20px; - } - } - &-time-partial { margin: 16px 0 0; padding: 0 16px; @@ -920,10 +901,6 @@ align-items: center; width: 100%; - .picker-rtl { - text-align: right; - } - input { @include placeholder(); @@ -1081,11 +1058,6 @@ vertical-align: top; } - .picker-rtl { - right: auto; - left: 4px; - } - &-btn:after { content: '×'; } @@ -1130,13 +1102,6 @@ margin-left: 10px; transition: all 0.3s; - .picker-dropdown-rtl { - right: $picker-arrow-size; - left: auto; - margin-right: 10px; - margin-left: 0; - } - &:before, &:after { position: absolute; @@ -1145,12 +1110,6 @@ box-sizing: border-box; transform: translate(-50%, -50%); content: ''; - - .picker-dropdown-rtl { - right: 50%; - left: auto; - transform: translate(50%, -50%); - } } &:before { @@ -1261,6 +1220,354 @@ } } } + + &-rtl { + direction: rtl; + + .picker-clear { + left: 0; + right: unset; + } + + &.picker-range { + .picker-clear { + left: $picker-input-padding-horizontal-l; + right: unset; + } + } + + .picker-dropdown { + .picker-range-arrow { + right: $picker-arrow-size; + left: unset; + margin-right: 10px; + margin-left: 0; + + &:before, + &:after { + right: 50%; + left: auto; + transform: translate(50%, -50%); + } + } + } + } + + &-partial-rtl { + direction: rtl; + + .picker-datetime-partial { + .picker-time-partial { + border-left: none; + border-right: $picker-border; + } + } + + .picker-ok { + float: left; + } + + .picker-cell { + height: $picker-cell-height-m; + width: $picker-cell-width-m; + + &-inner { + height: $picker-cell-height-m; + width: $picker-cell-width-m; + } + + &-range-start:not(&-range-hover), + &-range-hover-start { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-m; + border-top-right-radius: $picker-cell-border-radius-m; + } + + &-range-end:not(&-range-hover), + &-range-hover-end { + border-bottom-left-radius: $picker-cell-border-radius-m; + border-top-left-radius: $picker-cell-border-radius-m; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &.picker-large .picker-cell { + height: $picker-cell-height-l; + width: $picker-cell-width-l; + + &-inner { + height: $picker-cell-height-l; + width: $picker-cell-width-l; + } + + &-range-start:not(&-range-hover), + &-range-hover-start { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-l; + border-top-right-radius: $picker-cell-border-radius-l; + } + &-range-end:not(&-range-hover), + &-range-hover-end { + border-bottom-left-radius: $picker-cell-border-radius-l; + border-top-left-radius: $picker-cell-border-radius-l; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &.picker-medium .picker-cell { + height: $picker-cell-height-m; + width: $picker-cell-width-m; + + &-inner { + height: $picker-cell-height-m; + width: $picker-cell-width-m; + } + + &-range-start:not(&-range-hover), + &-range-hover-start { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-m; + border-top-right-radius: $picker-cell-border-radius-m; + } + &-range-end:not(&-range-hover), + &-range-hover-end { + border-bottom-left-radius: $picker-cell-border-radius-m; + border-top-left-radius: $picker-cell-border-radius-m; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &.picker-small .picker-cell { + height: $picker-cell-height-s; + width: $picker-cell-width-s; + + &-inner { + height: $picker-cell-height-s; + width: $picker-cell-width-s; + } + + &-range-start:not(&-range-hover), + &-range-hover-start { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-s; + border-top-right-radius: $picker-cell-border-radius-s; + } + &-range-end:not(&-range-hover), + &-range-hover-end { + border-bottom-left-radius: $picker-cell-border-radius-s; + border-top-left-radius: $picker-cell-border-radius-s; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + .picker-week-partial { + &-row { + &:hover { + .picker-cell:not(:first-of-type):not(:last-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .picker-cell:first-of-type { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-m; + border-top-right-radius: $picker-cell-border-radius-m; + } + + .picker-cell:last-of-type { + border-bottom-left-radius: $picker-cell-border-radius-m; + border-top-left-radius: $picker-cell-border-radius-m; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &-selected { + .picker-cell:not(:first-of-type):not(:last-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .picker-cell:first-of-type { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-m; + border-top-right-radius: $picker-cell-border-radius-m; + } + + .picker-cell:last-of-type { + border-bottom-left-radius: $picker-cell-border-radius-m; + border-top-left-radius: $picker-cell-border-radius-m; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + } + } + + &.picker-large .picker-week-partial { + &-row { + &:hover { + .picker-cell:not(:first-of-type):not(:last-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .picker-cell:first-of-type { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-l; + border-top-right-radius: $picker-cell-border-radius-l; + } + + .picker-cell:last-of-type { + border-bottom-left-radius: $picker-cell-border-radius-l; + border-top-left-radius: $picker-cell-border-radius-l; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &-selected { + .picker-cell:not(:first-of-type):not(:last-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .picker-cell:first-of-type { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-l; + border-top-right-radius: $picker-cell-border-radius-l; + } + + .picker-cell:last-of-type { + border-bottom-left-radius: $picker-cell-border-radius-l; + border-top-left-radius: $picker-cell-border-radius-l; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + } + } + + &.picker-medium .picker-week-partial { + &-row { + &:hover { + .picker-cell:not(:first-of-type):not(:last-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .picker-cell:first-of-type { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-m; + border-top-right-radius: $picker-cell-border-radius-m; + } + + .picker-cell:last-of-type { + border-bottom-left-radius: $picker-cell-border-radius-m; + border-top-left-radius: $picker-cell-border-radius-m; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &-selected { + .picker-cell:not(:first-of-type):not(:last-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .picker-cell:first-of-type { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-m; + border-top-right-radius: $picker-cell-border-radius-m; + } + + .picker-cell:last-of-type { + border-bottom-left-radius: $picker-cell-border-radius-m; + border-top-left-radius: $picker-cell-border-radius-m; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + } + } + + &.picker-small .picker-week-partial { + &-row { + &:hover { + .picker-cell:not(:first-of-type):not(:last-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .picker-cell:first-of-type { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-s; + border-top-right-radius: $picker-cell-border-radius-s; + } + + .picker-cell:last-of-type { + border-bottom-left-radius: $picker-cell-border-radius-s; + border-top-left-radius: $picker-cell-border-radius-s; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &-selected { + .picker-cell:not(:first-of-type):not(:last-of-type) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .picker-cell:first-of-type { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: $picker-cell-border-radius-s; + border-top-right-radius: $picker-cell-border-radius-s; + } + + .picker-cell:last-of-type { + border-bottom-left-radius: $picker-cell-border-radius-s; + border-top-left-radius: $picker-cell-border-radius-s; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + } + } + } } .trigger-popup { diff --git a/src/components/Dialog/BaseDialog/BaseDialog.tsx b/src/components/Dialog/BaseDialog/BaseDialog.tsx index 2d4b4afc8..310eadff5 100644 --- a/src/components/Dialog/BaseDialog/BaseDialog.tsx +++ b/src/components/Dialog/BaseDialog/BaseDialog.tsx @@ -10,6 +10,7 @@ import { IconName } from '../../Icon'; import { ButtonShape, NeutralButton } from '../../Button'; import { useScrollLock } from '../../../hooks/useScrollLock'; import { NoFormStyle } from '../../Form/Context'; +import { useCanvasDirection } from '../../../hooks/useCanvasDirection'; import styles from './base-dialog.module.scss'; import { useScrollShadow } from '../../../hooks/useScrollShadows'; @@ -49,6 +50,8 @@ export const BaseDialog: FC = React.forwardRef( }, ref: Ref ) => { + const htmlDir: string = useCanvasDirection(); + const labelId = uniqueId('dialog-label-'); const bodyRef = useRef(null); @@ -69,6 +72,7 @@ export const BaseDialog: FC = React.forwardRef( const dialogClasses: string = mergeClasses([ styles.dialog, { [styles.noBodyPadding]: bodyPadding === false }, + { [styles.dialogRtl]: htmlDir === 'rtl' }, dialogClassNames, ]); @@ -133,6 +137,12 @@ export const BaseDialog: FC = React.forwardRef( classNames={styles.headerButton} shape={ButtonShape.Round} iconProps={{ path: headerIcon }} + style={{ + transform: + htmlDir === 'rtl' + ? 'rotate(180deg)' + : 'none', + }} {...headerButtonProps} /> )} diff --git a/src/components/Dialog/BaseDialog/base-dialog.module.scss b/src/components/Dialog/BaseDialog/base-dialog.module.scss index 5cc3892ce..2c0501424 100644 --- a/src/components/Dialog/BaseDialog/base-dialog.module.scss +++ b/src/components/Dialog/BaseDialog/base-dialog.module.scss @@ -39,6 +39,10 @@ $dialog-body-bottom-shadow: inset 0 -11px 8px -10px var(--grey-color-20); height: fit-content; justify-content: right; white-space: nowrap; + + button { + margin-left: $space-xs; + } } } @@ -57,6 +61,26 @@ $dialog-body-bottom-shadow: inset 0 -11px 8px -10px var(--grey-color-20); .footer { padding: $space-ml $space-xl 0; } + + &-rtl { + .header { + &-button { + margin-left: $space-m; + margin-right: unset; + } + + &-buttons { + button { + margin-left: unset; + margin-right: $space-xs; + } + } + } + + .footer { + padding: $space-ml 0 0 $space-xl; + } + } } .body { diff --git a/src/components/Empty/Empty.stories.tsx b/src/components/Empty/Empty.stories.tsx index 7766b984e..85bf0fc50 100644 --- a/src/components/Empty/Empty.stories.tsx +++ b/src/components/Empty/Empty.stories.tsx @@ -80,7 +80,7 @@ Tasks_Complete.args = { Custom_Image.args = { ...emptyArgs, image: ( - + ), imageStyle: {}, mode: '', diff --git a/src/components/Grid/Styles/mixins.scss b/src/components/Grid/Styles/mixins.scss index eed4e50b9..71252d57c 100644 --- a/src/components/Grid/Styles/mixins.scss +++ b/src/components/Grid/Styles/mixins.scss @@ -7,12 +7,27 @@ } .col#{$class}-push-#{$index} { left: percentage(calc($index / $grid-columns)); + + &.col-rtl { + right: percentage(calc($index / $grid-columns)); + left: auto; + } } .col#{$class}-pull-#{$index} { right: percentage(calc($index / $grid-columns)); + + &.col-rtl { + right: auto; + left: percentage(calc($index / $grid-columns)); + } } .col#{$class}-offset-#{$index} { margin-left: percentage(calc($index / $grid-columns)); + + &.col-rtl { + margin-right: percentage(calc($index / $grid-columns)); + margin-left: 0; + } } .col#{$class}-order-#{$index} { order: $index; @@ -26,18 +41,38 @@ } .col-push-#{$index} { left: auto; + + &.col-rtl { + right: auto; + } } .col-pull-#{$index} { right: auto; + + &.col-rtl { + left: auto; + } } .col#{$class}-push-#{$index} { left: auto; + + &.col-rtl { + right: auto; + } } .col#{$class}-pull-#{$index} { right: auto; + + &.col-rtl { + left: auto; + } } .col#{$class}-offset-#{$index} { margin-left: 0; + + &.col-rtl { + margin-right: 0; + } } .col#{$class}-order-#{$index} { order: 0; diff --git a/src/components/Grid/Styles/rtl.scss b/src/components/Grid/Styles/rtl.scss index b02f20e13..750789413 100644 --- a/src/components/Grid/Styles/rtl.scss +++ b/src/components/Grid/Styles/rtl.scss @@ -11,64 +11,3 @@ direction: rtl; } } - -@mixin loop-grid-columns($index, $class) { - @if $index > 0 { - .col#{$class}-push-#{$index} { - // reset property in RTL direction - &.col-rtl { - right: percentage(calc($index / $grid-columns)); - left: auto; - } - } - - .col#{$class}-pull-#{$index} { - // reset property in RTL direction - &.col-rtl { - right: auto; - left: percentage(calc($index / $grid-columns)); - } - } - - .col#{$class}-offset-#{$index} { - // reset property in RTL direction - &.col-rtl { - margin-right: percentage(calc($index / $grid-columns)); - margin-left: 0; - } - } - } - - @if $index == 0 { - .col-push-#{$index} { - // reset property in RTL direction - &.col-rtl { - right: auto; - } - } - - .col-pull-#{$index} { - &.col-rtl { - left: auto; - } - } - - .col#{$class}-push-#{$index} { - &.col-rtl { - right: auto; - } - } - - .col#{$class}-pull-#{$index} { - &.col-rtl { - left: auto; - } - } - - .col#{$class}-offset-#{$index} { - &.col-rtl { - margin-right: 0; - } - } - } -} diff --git a/src/components/Inputs/Styles/rtl.scss b/src/components/Inputs/Styles/rtl.scss new file mode 100644 index 000000000..4a5f2c41e --- /dev/null +++ b/src/components/Inputs/Styles/rtl.scss @@ -0,0 +1,921 @@ +.input-wrapper { + &-rtl { + input { + padding: $space-xs $space-m $space-xs $space-xl; + + &.with-icon, + &.with-image-icon { + padding: $space-xs $space-xxl $space-xs $space-xl; + + &.left-icon { + padding: $space-xs $space-xxl $space-xs $space-xl; + } + + &.right-icon { + padding: $space-xs $space-xl $space-xs $space-xxl; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xxl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xxl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xxl; + } + } + } + + &.with-icon-button { + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + } + + &.with-icon-and-icon-button { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button $space-xs + $space-xxl; + + &.left-icon { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xxl; + } + + &.right-icon { + padding: $space-xs $space-xxl $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + } + } + + &.pill-shape-with-icon, + &.pill-shape-with-image-icon { + padding: $space-xs $space-xxl $space-xs $space-xl; + + &.left-icon { + padding: $space-xs $space-xxl $space-xs $space-xl; + } + + &.right-icon { + padding: $space-xs $space-xl $space-xs $space-xxl; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xxl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xxl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xxl; + } + } + } + + &.pill-shape-with-icon-button { + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + } + + &.pill-shape-with-icon-and-icon-button { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button $space-xs + $space-xl; + + &.left-icon { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xl; + } + + &.right-icon { + padding: $space-xs $space-xl $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + } + } + + &.pill-shape-with-icon-button ~ .icon-button { + &.left-icon { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 50%; + border-top-right-radius: 50%; + } + + &.right-icon { + border-bottom-left-radius: 50%; + border-top-left-radius: 50%; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &.pill-shape-with-icon-button ~ .clear-icon-button { + border-bottom-left-radius: 50%; + border-top-left-radius: 50%; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + &.pill-shape-with-icon-and-icon-button ~ .icon-button { + &.left-icon { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: inherit; + border-top-right-radius: inherit; + } + + &.right-icon { + border-bottom-left-radius: inherit; + border-top-left-radius: inherit; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &.input-large { + padding: $space-xs $space-m $space-xs $space-xxl; + + &.with-icon, + &.with-image-icon, + &.with-icon-button { + padding: $space-xs $input-padding-large-with-icon $space-xs + $space-xxl; + + &.left-icon { + padding: $space-xs $input-padding-large-with-icon + $space-xs $space-xxl; + } + + &.right-icon { + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs $input-padding-large-with-icon + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon; + } + } + } + + &.with-icon-and-icon-button { + padding: $space-xs + $input-padding-large-with-icon-and-icon-button $space-xs + $space-xxl; + + &.left-icon { + padding: $space-xs + $input-padding-large-with-icon-and-icon-button + $space-xs $space-xxl; + } + + &.right-icon { + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon-and-icon-button; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs + $input-padding-large-with-icon-and-icon-button + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon-and-icon-button; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon-and-icon-button; + } + } + } + + &.pill-shape-with-icon, + &.pill-shape-with-image-icon, + &.pill-shape-with-icon-button { + padding: $space-xs $input-padding-large-with-icon $space-xs + $space-xxl; + + &.left-icon { + padding: $space-xs $input-padding-large-with-icon + $space-xs $space-xxl; + } + + &.right-icon { + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs $input-padding-large-with-icon + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon; + } + } + } + + &.pill-shape-with-icon-and-icon-button { + padding: $space-xs + $input-padding-large-with-icon-and-icon-button $space-xs + $space-xxl; + + &.left-icon { + padding: $space-xs + $input-padding-large-with-icon-and-icon-button + $space-xs $space-xxl; + } + + &.right-icon { + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon-and-icon-button; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs + $input-padding-large-with-icon-and-icon-button + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon-and-icon-button; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon-and-icon-button; + } + } + } + } + + &.input-medium { + padding: $space-xs $space-m $space-xs $space-xl; + + &.with-icon, + &.with-image-icon { + padding: $space-xs $space-xxl $space-xs $space-xl; + + &.left-icon { + padding: $space-xs $space-xxl $space-xs $space-xl; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xxl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xxl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xxl; + } + } + } + + &.with-icon-button { + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + } + + &.with-icon-and-icon-button { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xxl; + + &.left-icon { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xxl; + } + + &.right-icon { + padding: $space-xs $space-xxl $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + } + } + + &.pill-shape-with-icon, + &.pill-shape-with-image-icon { + padding: $space-xs $space-xxl $space-xs $space-xl; + + &.left-icon { + padding: $space-xs $space-xxl $space-xs $space-xl; + } + + &.right-icon { + padding: $space-xs $space-xl $space-xs $space-xxl; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xxl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xxl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xxl; + } + } + } + + &.pill-shape-with-icon-button { + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + } + + &.pill-shape-with-icon-and-icon-button { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xl; + + &.left-icon { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xl; + } + + &.right-icon { + padding: $space-xs $space-xl $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; + } + } + } + } + + &.input-small { + padding: $space-xs $space-s $space-xs $space-l; + + &.with-icon, + &.with-image-icon, + &.with-icon-button { + padding: $space-xs $space-xl $space-xs + calc(#{$space-l} + $space-xxs); + + &.left-icon { + padding: $space-xs $space-xl $space-xs + calc(#{$space-l} + $space-xxs); + } + + &.right-icon { + padding: $space-xs calc(#{$space-l} + $space-xxs) + $space-xs $space-xl; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + } + + &.with-icon-and-icon-button { + padding: $space-xs + $input-padding-small-with-icon-and-icon-button $space-xs + calc(#{$space-l} + $space-xxs); + + &.left-icon { + padding: $space-xs + $input-padding-small-with-icon-and-icon-button + $space-xs calc(#{$space-l} + $space-xxs); + } + + &.right-icon { + padding: $space-xs calc(#{$space-l} + $space-xxs) + $space-xs + $input-padding-small-with-icon-and-icon-button; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs + $input-padding-small-with-icon-and-icon-button + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-small-with-icon-and-icon-button; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-small-with-icon-and-icon-button; + } + } + } + + &.pill-shape-with-icon, + &.pill-shape-with-image-icon { + padding: $space-xs $space-xl $space-xs + calc(#{$space-l} + $space-xxs); + + &.left-icon { + padding: $space-xs $space-xl $space-xs + calc(#{$space-l} + $space-xxs); + } + + &.right-icon { + padding: $space-xs calc(#{$space-l} + $space-xxs) + $space-xs $space-xl; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + } + + &.pill-shape-with-icon-button { + &.clear-disabled { + &.left-icon { + padding: $space-xs $space-xl $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs $space-xl; + } + } + } + + $input-padding-small-with-icon-and-icon-button-local: 28px; + + &.pill-shape-with-icon-and-icon-button { + padding: $space-xs + $input-padding-small-with-icon-and-icon-button $space-xs + $input-padding-small-with-icon-and-icon-button-local; + + &.left-icon { + padding: $space-xs + $input-padding-small-with-icon-and-icon-button + $space-xs + $input-padding-small-with-icon-and-icon-button-local; + } + + &.right-icon { + padding: $space-xs + $input-padding-small-with-icon-and-icon-button-local + $space-xs + $input-padding-small-with-icon-and-icon-button; + } + + &.clear-disabled { + &.left-icon { + padding: $space-xs + $input-padding-small-with-icon-and-icon-button + $space-xs $space-xs; + } + + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-small-with-icon-and-icon-button; + } + } + + &.clear-not-visible { + &.right-icon { + padding: $space-xs $space-xs $space-xs + $input-padding-small-with-icon-and-icon-button; + } + } + } + } + } + + .icon-wrapper { + &.left-icon { + left: unset; + right: $space-xxs; + } + + &.right-icon { + left: $space-xxs; + right: unset; + } + } + + .icon-button { + &.left-icon { + left: unset; + right: $space-xxxs; + } + + &.right-icon { + left: $space-xxxs; + right: unset; + } + } + + .clear-icon-button { + left: $space-xxxs; + right: unset; + + &.left-icon { + left: $space-xxxs; + right: unset; + } + + &.right-icon { + left: unset; + right: $space-xxxs; + } + } + + .icon-wrapper:not(:empty) + .icon-button { + &.left-icon { + left: unset; + right: $space-xl; + } + + &.right-icon { + left: $space-xl; + right: unset; + } + } + + .text-area-resize-icon { + left: $space-xxs; + right: unset; + } + + &.pill-shape { + .text-area-resize-icon { + left: 10px; + right: unset; + } + } + + &.input-large { + .icon-wrapper { + &.left-icon { + left: unset; + right: $space-xs; + } + + &.right-icon { + left: $space-xs; + right: unset; + } + } + + .icon-button { + &.left-icon { + left: unset; + right: $space-xs; + } + + &.right-icon { + left: $space-xs; + right: unset; + } + } + + .clear-icon-button { + left: $space-xxxs; + right: unset; + + &.left-icon { + left: $space-xxxs; + right: unset; + } + + &.right-icon { + left: unset; + right: $space-xxxs; + } + } + + .icon-wrapper:not(:empty) + .icon-button { + &.left-icon { + left: unset; + right: calc($space-xxl + $space-xxs); + } + + &.right-icon { + left: calc($space-xxl + $space-xxs); + right: unset; + } + } + } + + &.input-medium { + .icon-wrapper { + &.left-icon { + left: unset; + right: $space-xs; + } + + &.right-icon { + left: $space-xs; + right: unset; + } + } + + .icon-button { + &.left-icon { + left: unset; + right: $space-xxs; + } + + &.right-icon { + left: $space-xxs; + right: unset; + } + } + + .clear-icon-button { + left: 1px; + right: unset; + + &.left-icon { + left: 1px; + right: unset; + } + + &.right-icon { + left: unset; + right: $space-xxxs; + } + } + + .icon-wrapper:not(:empty) + .icon-button { + &.left-icon { + left: unset; + right: $space-xxl; + } + + &.right-icon { + left: $space-xxl; + right: unset; + } + } + } + + &.input-small { + .icon-wrapper { + &.left-icon { + left: unset; + right: $space-xxs; + } + + &.right-icon { + left: $space-xxs; + right: unset; + } + } + + .icon-button { + &.left-icon { + left: unset; + right: $space-xxxs; + } + + &.right-icon { + left: $space-xxxs; + right: unset; + } + } + + .clear-icon-button { + left: $space-xxxs; + right: unset; + + &.left-icon { + left: $space-xxxs; + right: unset; + } + + &.right-icon { + left: unset; + right: $space-xxxs; + } + } + + .icon-wrapper:not(:empty) + .icon-button { + &.left-icon { + left: unset; + right: $space-xl; + } + + &.right-icon { + left: $space-xl; + right: unset; + } + } + } + } +} diff --git a/src/components/Inputs/TextArea/TextArea.tsx b/src/components/Inputs/TextArea/TextArea.tsx index f523fe52c..e5915f84a 100644 --- a/src/components/Inputs/TextArea/TextArea.tsx +++ b/src/components/Inputs/TextArea/TextArea.tsx @@ -20,6 +20,7 @@ import { uniqueId, } from '../../../shared/utilities'; import { Breakpoints, useMatchMedia } from '../../../hooks/useMatchMedia'; +import { useCanvasDirection } from '../../../hooks/useCanvasDirection'; import styles from '../input.module.scss'; @@ -68,6 +69,8 @@ export const TextArea: FC = React.forwardRef( const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small); const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall); + const htmlDir: string = useCanvasDirection(); + const [textAreaId] = useState(uniqueId(id || 'textarea-')); const [inputValue, setInputValue] = useState(value); @@ -167,6 +170,7 @@ export const TextArea: FC = React.forwardRef( { [styles.disabled]: allowDisabledFocus || mergedDisabled, }, + { [styles.inputWrapperRtl]: htmlDir === 'rtl' }, ]); useEffect(() => setInputValue(value), [value]); @@ -238,6 +242,7 @@ export const TextArea: FC = React.forwardRef( )}
diff --git a/src/components/Inputs/TextInput/TextInput.tsx b/src/components/Inputs/TextInput/TextInput.tsx index a2af9ff45..2ccc24855 100644 --- a/src/components/Inputs/TextInput/TextInput.tsx +++ b/src/components/Inputs/TextInput/TextInput.tsx @@ -23,6 +23,7 @@ import { uniqueId, } from '../../../shared/utilities'; import { Breakpoints, useMatchMedia } from '../../../hooks/useMatchMedia'; +import { useCanvasDirection } from '../../../hooks/useCanvasDirection'; import styles from '../input.module.scss'; @@ -77,6 +78,8 @@ export const TextInput: FC = React.forwardRef( const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small); const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall); + const htmlDir: string = useCanvasDirection(); + const [inputValue, setInputValue] = useState(value); const [clearButtonShown, _setClearButtonShown] = @@ -266,6 +269,7 @@ export const TextInput: FC = React.forwardRef( { [styles.disabled]: allowDisabledFocus || mergedDisabled, }, + { [styles.inputWrapperRtl]: htmlDir === 'rtl' }, { ['in-form-item']: mergedFormItemInput }, ]); diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss index 1c30935f6..631040b5d 100644 --- a/src/components/Inputs/input.module.scss +++ b/src/components/Inputs/input.module.scss @@ -75,29 +75,38 @@ } &.with-icon-and-icon-button { - padding: $space-xs $space-xxl $space-xs 74px; + padding: $space-xs $space-xxl $space-xs + $input-padding-medium-with-icon-and-icon-button; &.left-icon { - padding: $space-xs $space-xxl $space-xs 74px; + padding: $space-xs $space-xxl $space-xs + $input-padding-medium-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 74px $space-xs $space-xxl; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button $space-xs + $space-xxl; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 74px; + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 74px $space-xs $space-xs; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 74px $space-xs $space-xs; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; } } } @@ -213,29 +222,38 @@ } &.pill-shape-with-icon-and-icon-button { - padding: $space-xs $space-xl $space-xs 74px; + padding: $space-xs $space-xl $space-xs + $input-padding-medium-with-icon-and-icon-button; &.left-icon { - padding: $space-xs $space-xl $space-xs 74px; + padding: $space-xs $space-xl $space-xs + $input-padding-medium-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 74px $space-xs $space-xl; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button $space-xs + $space-xl; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 74px; + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 74px $space-xs $space-xs; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 74px $space-xs $space-xs; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; } } } @@ -341,57 +359,72 @@ &.with-icon, &.with-image-icon, &.with-icon-button { - padding: $space-xs $space-xxl $space-xs 48px; + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon; &.left-icon { - padding: $space-xs $space-xxl $space-xs 48px; + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon; } &.right-icon { - padding: $space-xs 48px $space-xs $space-xxl; + padding: $space-xs $input-padding-large-with-icon $space-xs + $space-xxl; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 48px; + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon; } &.right-icon { - padding: $space-xs 48px $space-xs $space-xs; + padding: $space-xs $input-padding-large-with-icon + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 48px $space-xs $space-xs; + padding: $space-xs $input-padding-large-with-icon + $space-xs $space-xs; } } } &.with-icon-and-icon-button { - padding: $space-xs $space-xxl $space-xs 84px; + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon-and-icon-button; &.left-icon { - padding: $space-xs $space-xxl $space-xs 84px; + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 84px $space-xs $space-xxl; + padding: $space-xs + $input-padding-large-with-icon-and-icon-button $space-xs + $space-xxl; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 84px; + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 84px $space-xs $space-xs; + padding: $space-xs + $input-padding-large-with-icon-and-icon-button + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 84px $space-xs $space-xs; + padding: $space-xs + $input-padding-large-with-icon-and-icon-button + $space-xs $space-xs; } } } @@ -399,57 +432,72 @@ &.pill-shape-with-icon, &.pill-shape-with-image-icon, &.pill-shape-with-icon-button { - padding: $space-xs $space-xxl $space-xs 48px; + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon; &.left-icon { - padding: $space-xs $space-xxl $space-xs 48px; + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon; } &.right-icon { - padding: $space-xs 48px $space-xs $space-xxl; + padding: $space-xs $input-padding-large-with-icon $space-xs + $space-xxl; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 48px; + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon; } &.right-icon { - padding: $space-xs 48px $space-xs $space-xs; + padding: $space-xs $input-padding-large-with-icon + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 48px $space-xs $space-xs; + padding: $space-xs $input-padding-large-with-icon + $space-xs $space-xs; } } } &.pill-shape-with-icon-and-icon-button { - padding: $space-xs $space-xxl $space-xs 84px; + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon-and-icon-button; &.left-icon { - padding: $space-xs $space-xxl $space-xs 84px; + padding: $space-xs $space-xxl $space-xs + $input-padding-large-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 84px $space-xs $space-xxl; + padding: $space-xs + $input-padding-large-with-icon-and-icon-button $space-xs + $space-xxl; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 84px; + padding: $space-xs $space-xs $space-xs + $input-padding-large-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 84px $space-xs $space-xs; + padding: $space-xs + $input-padding-large-with-icon-and-icon-button + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 84px $space-xs $space-xs; + padding: $space-xs + $input-padding-large-with-icon-and-icon-button + $space-xs $space-xs; } } } @@ -516,29 +564,38 @@ } &.with-icon-and-icon-button { - padding: $space-xs $space-xxl $space-xs 74px; + padding: $space-xs $space-xxl $space-xs + $input-padding-medium-with-icon-and-icon-button; &.left-icon { - padding: $space-xs $space-xxl $space-xs 74px; + padding: $space-xs $space-xxl $space-xs + $input-padding-medium-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 74px $space-xs $space-xxl; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xxl; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 74px; + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 74px $space-xs $space-xs; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 74px $space-xs $space-xs; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; } } } @@ -598,29 +655,38 @@ } &.pill-shape-with-icon-and-icon-button { - padding: $space-xs $space-xl $space-xs 74px; + padding: $space-xs $space-xl $space-xs + $input-padding-medium-with-icon-and-icon-button; &.left-icon { - padding: $space-xs $space-xl $space-xs 74px; + padding: $space-xs $space-xl $space-xs + $input-padding-medium-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 74px $space-xs $space-xl; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xl; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 74px; + padding: $space-xs $space-xs $space-xs + $input-padding-medium-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 74px $space-xs $space-xs; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 74px $space-xs $space-xs; + padding: $space-xs + $input-padding-medium-with-icon-and-icon-button + $space-xs $space-xs; } } } @@ -635,16 +701,17 @@ &.with-icon, &.with-image-icon, &.with-icon-button { - padding: $space-xs calc(#{$space-l} + 4px) $space-xs $space-xl; + padding: $space-xs calc(#{$space-l} + $space-xxs) $space-xs + $space-xl; &.left-icon { - padding: $space-xs calc(#{$space-l} + 4px) $space-xs + padding: $space-xs calc(#{$space-l} + $space-xxs) $space-xs $space-xl; } &.right-icon { padding: $space-xs $space-xl $space-xs - calc(#{$space-l} + 4px); + calc(#{$space-l} + $space-xxs); } &.clear-disabled { @@ -665,45 +732,55 @@ } &.with-icon-and-icon-button { - padding: $space-xs calc(#{$space-l} + 4px) $space-xs 60px; + padding: $space-xs calc(#{$space-l} + $space-xxs) $space-xs + $input-padding-small-with-icon-and-icon-button; &.left-icon { - padding: $space-xs calc(#{$space-l} + 4px) $space-xs 60px; + padding: $space-xs calc(#{$space-l} + $space-xxs) $space-xs + $input-padding-small-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 60px $space-xs calc(#{$space-l} + 4px); + padding: $space-xs + $input-padding-small-with-icon-and-icon-button $space-xs + calc(#{$space-l} + $space-xxs); } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 60px; + padding: $space-xs $space-xs $space-xs + $input-padding-small-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 60px $space-xs $space-xs; + padding: $space-xs + $input-padding-small-with-icon-and-icon-button + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 60px $space-xs $space-xs; + padding: $space-xs + $input-padding-small-with-icon-and-icon-button + $space-xs $space-xs; } } } &.pill-shape-with-icon, &.pill-shape-with-image-icon { - padding: $space-xs calc(#{$space-l} + 4px) $space-xs $space-xl; + padding: $space-xs calc(#{$space-l} + $space-xxs) $space-xs + $space-xl; &.left-icon { - padding: $space-xs calc(#{$space-l} + 4px) $space-xs + padding: $space-xs calc(#{$space-l} + $space-xxs) $space-xs $space-xl; } &.right-icon { padding: $space-xs $space-xl $space-xs - calc(#{$space-l} + 4px); + calc(#{$space-l} + $space-xxs); } &.clear-disabled { @@ -748,30 +825,43 @@ } } + $input-padding-small-with-icon-and-icon-button-local: 28px; + &.pill-shape-with-icon-and-icon-button { - padding: $space-xs 28px $space-xs 60px; + padding: $space-xs + $input-padding-small-with-icon-and-icon-button-local + $space-xs $input-padding-small-with-icon-and-icon-button; &.left-icon { - padding: $space-xs 28px $space-xs 60px; + padding: $space-xs + $input-padding-small-with-icon-and-icon-button-local + $space-xs $input-padding-small-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 60px $space-xs 28px; + padding: $space-xs + $input-padding-small-with-icon-and-icon-button $space-xs + $input-padding-small-with-icon-and-icon-button-local; } &.clear-disabled { &.left-icon { - padding: $space-xs $space-xs $space-xs 60px; + padding: $space-xs $space-xs $space-xs + $input-padding-small-with-icon-and-icon-button; } &.right-icon { - padding: $space-xs 60px $space-xs $space-xs; + padding: $space-xs + $input-padding-small-with-icon-and-icon-button + $space-xs $space-xs; } } &.clear-not-visible { &.right-icon { - padding: $space-xs 60px $space-xs $space-xs; + padding: $space-xs + $input-padding-small-with-icon-and-icon-button + $space-xs $space-xs; } } } @@ -789,15 +879,15 @@ width: 36px; &.left-icon { - left: 4px; + left: $space-xxs; } &.right-icon { - right: 4px; + right: $space-xxs; } span { - padding: 8px 4px; + padding: $space-xs $space-xxs; } img { @@ -823,11 +913,11 @@ transition: none; &.left-icon { - left: 2px; + left: $space-xxxs; } &.right-icon { - right: 2px; + right: $space-xxxs; } svg { @@ -861,16 +951,16 @@ color: var(--grey-color-60); height: 35px; position: absolute; - right: 2px; + right: $space-xxxs; transition: none; width: 35px; &.left-icon { - right: 2px; + right: $space-xxxs; } &.right-icon { - left: 2px; + left: $space-xxxs; } &:active, @@ -908,7 +998,7 @@ font-family: $octuple-font-family; font-size: $text-font-size-3; line-height: $text-line-height-4; - min-height: calc($text-line-height-4 + 2px + $space-xs * 2); + min-height: calc($text-line-height-4 + $space-xxxs + $space-xs * 2); min-width: 320px; padding: $space-xs; @@ -995,8 +1085,8 @@ .text-area-resize-icon { position: absolute; - bottom: 8px; - right: 4px; + bottom: $space-xs; + right: $space-xxs; } &.pill-shape { @@ -1021,7 +1111,7 @@ flex-grow: 1; .text-area-resize-icon { - bottom: 4px; + bottom: $space-xxs; } &.pill-shape { @@ -1173,58 +1263,58 @@ &.input-large { .icon-wrapper { - bottom: 2px; - height: 40px; - width: 40px; + bottom: $space-xxxs; + height: $space-xxl; + width: $space-xxl; &.left-icon { - left: 8px; + left: $space-xs; } &.right-icon { - right: 8px; + right: $space-xs; } span { - height: 40px; + height: $space-xxl; } } .icon-button { - bottom: 2px; - height: 40px; + bottom: $space-xxxs; + height: $space-xxl; &.left-icon { - left: 8px; + left: $space-xs; } &.right-icon { - right: 8px; + right: $space-xs; } } .clear-icon-button { - bottom: 2px; - height: 40px; - padding: 12px; - right: 2px; - width: 40px; + bottom: $space-xxxs; + height: $space-xxl; + padding: $space-s; + right: $space-xxxs; + width: $space-xxl; } .icon-wrapper:not(:empty) + .icon-button { &.left-icon { - left: calc($space-xxl + 4px); + left: calc($space-xxl + $space-xxs); } &.right-icon { - right: calc($space-xxl + 4px); + right: calc($space-xxl + $space-xxs); } } .text-area { font-size: $text-font-size-4; line-height: $text-line-height-5; - min-height: calc($text-line-height-5 + 2px + $space-xs * 2); + min-height: calc($text-line-height-5 + $space-xxxs + $space-xs * 2); } } @@ -1235,11 +1325,11 @@ width: 36px; &.left-icon { - left: 4px; + left: $space-xs; } &.right-icon { - right: 4px; + right: $space-xs; } span { @@ -1253,11 +1343,11 @@ padding: $button-padding-vertical-small $space-xxs; &.left-icon { - left: 4px; + left: $space-xxs; } &.right-icon { - right: 4px; + right: $space-xxs; } } @@ -1282,50 +1372,50 @@ .text-area { font-size: $text-font-size-3; line-height: $text-line-height-4; - min-height: calc($text-line-height-4 + 2px + $space-xs * 2); + min-height: calc($text-line-height-4 + $space-xxxs + $space-xs * 2); } } &.input-small { .icon-wrapper { - bottom: 2px; - height: 24px; - width: 24px; + bottom: $space-xxxs; + height: $space-l; + width: $space-l; &.left-icon { - left: 4px; + left: $space-xxs; } &.right-icon { - right: 4px; + right: $space-xxs; } span { - height: 24px; - padding: 4px; + height: $space-l; + padding: $space-xxs; } } .icon-button { - bottom: 2px; - height: 24px; - padding: 4px; + bottom: $space-xxxs; + height: $space-l; + padding: $space-xxs; &.left-icon { - left: 2px; + left: $space-xxxs; } &.right-icon { - right: 2px; + right: $space-xxxs; } } .clear-icon-button { - bottom: 2px; - height: 24px; - padding: 4px; - right: 2px; - width: 24px; + bottom: $space-xxxs; + height: $space-l; + padding: $space-xxs; + right: $space-xxxs; + width: $space-l; } .icon-wrapper:not(:empty) + .icon-button { @@ -1341,7 +1431,7 @@ .text-area { font-size: $text-font-size-2; line-height: $text-line-height-3; - min-height: calc($text-line-height-3 + 2px + $space-xs * 2); + min-height: calc($text-line-height-3 + $space-xxxs + $space-xs * 2); } } @@ -1370,7 +1460,7 @@ .text-area-group { &:after { border-bottom-color: $focus-visible-shadow-color; - border-bottom-width: 2px; + border-bottom-width: $space-xxxs; } } } @@ -1413,3 +1503,5 @@ } } } + +@import './Styles/rtl'; diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 6716b7ba4..2c1e83c4f 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -52,6 +52,7 @@ export const Label: FC = ({ { [styles.inline]: inline, }, + { [styles.fieldLabelRtl]: htmlDir === 'rtl' }, sizeClassNames, classNames, ]); diff --git a/src/components/Label/label.module.scss b/src/components/Label/label.module.scss index 1c9e6a9db..71bc3bd25 100644 --- a/src/components/Label/label.module.scss +++ b/src/components/Label/label.module.scss @@ -86,6 +86,43 @@ } } +.field-label-rtl { + &.large.inline { + margin-left: $space-l; + margin-right: unset; + } + + &.medium.inline { + margin-left: $space-m; + margin-right: unset; + } + + &.small.inline { + margin-left: $space-s; + margin-right: unset; + } + + .field-label-icon-button { + margin-left: unset; + margin-right: 4px; + + &.large { + margin-left: unset; + margin-right: 8px; + } + + &.medium { + margin-left: unset; + margin-right: 4px; + } + + &.small { + margin-left: unset; + margin-right: 4px; + } + } +} + :global(.focus-visible) { .field-label-icon-button { .label-icon-button { diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx index 392f98d3c..50eb0ee30 100644 --- a/src/components/Loader/Loader.tsx +++ b/src/components/Loader/Loader.tsx @@ -1,6 +1,7 @@ import React, { FC } from 'react'; import { LoaderProps, LoaderSize } from './Loader.types'; import { mergeClasses } from '../../shared/utilities'; +import { useCanvasDirection } from '../../hooks/useCanvasDirection'; import styles from './loader.module.scss'; @@ -9,6 +10,7 @@ export const Loader: FC = ({ classNames, ...rest }) => { + const htmlDir: string = useCanvasDirection(); const dotClasses = mergeClasses([ styles.dot, { @@ -16,6 +18,7 @@ export const Loader: FC = ({ [styles.medium]: size === LoaderSize.Medium, [styles.large]: size === LoaderSize.Large, }, + { [styles.dotRtl]: htmlDir === 'rtl' }, ]); return (
= React.forwardRef( ( @@ -16,6 +17,8 @@ export const MatchScore: FC = React.forwardRef( }, ref: Ref ) => { + const htmlDir: string = useCanvasDirection(); + const absTotal: number = Math.abs(total); const absScore: number = Math.round(score); const fullCircles: number = Math.trunc(Math.round(score * 2.0) / 2.0); @@ -23,14 +26,18 @@ export const MatchScore: FC = React.forwardRef( Math.ceil(score - fullCircles - 0.25) ); const emptyCircles: number = total - fullCircles - halfCircle; - const matchScoreLabelClasses = mergeClasses(styles.label, 'body2'); + const matchScoreLabelClasses: string = mergeClasses(styles.label); return ( , HTMLDivElement> of="div" {...rest} ref={ref} - classes={[classNames, styles.matchScoreContainer]} + classes={[ + classNames, + styles.matchScoreContainer, + { [styles.matchScoreContainerRtl]: htmlDir === 'rtl' }, + ]} aria-label={ariaLabel} > {/* Full */} diff --git a/src/components/MatchScore/matchScore.module.scss b/src/components/MatchScore/matchScore.module.scss index 0460479db..b9c13bb03 100644 --- a/src/components/MatchScore/matchScore.module.scss +++ b/src/components/MatchScore/matchScore.module.scss @@ -7,6 +7,7 @@ $indicator-size: 12px; .label { color: var(--primary-color-70); font-family: $octuple-font-family; + font-size: $text-font-size-3; margin: 0; margin-left: $space-xxs; } @@ -42,4 +43,24 @@ $indicator-size: 12px; } } } + + &-rtl { + .label { + margin-left: 0; + margin-right: $space-xxs; + } + + .match-score-circle { + margin-left: $space-xxs; + margin-right: unset; + + &.half { + background: linear-gradient( + to left, + var(--accent-color-30) 50%, + transparent 50% + ); + } + } + } } diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index f277a5b50..157567b78 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -190,6 +190,7 @@ export const Pagination: FC = React.forwardRef( classNames, styles.pagination, { [styles.dots]: dots }, + { [styles.paginationRtl]: htmlDir === 'rtl' }, ]); return ( @@ -204,7 +205,6 @@ export const Pagination: FC = React.forwardRef( {layout.includes(PaginationLayoutOptions.Sizes) && moreThanOnePage && ( - {/** TODO: Replace with Select component when available */} = React.forwardRef( iconProps={{ role: 'presentation', path: _toggle - ? IconName.mdiChevronDown - : IconName.mdiChevronUp, + ? IconName.mdiChevronUp + : IconName.mdiChevronDown, }} size={ButtonSize.Medium} text={ @@ -256,7 +256,10 @@ export const Pagination: FC = React.forwardRef( disabled={_currentPage <= 1} iconProps={{ role: 'presentation', - path: IconName.mdiChevronLeft, + path: + htmlDir === 'rtl' + ? IconName.mdiChevronRight + : IconName.mdiChevronLeft, }} onClick={previous} size={ButtonSize.Medium} @@ -307,7 +310,10 @@ export const Pagination: FC = React.forwardRef( } iconProps={{ role: 'presentation', - path: IconName.mdiChevronRight, + path: + htmlDir === 'rtl' + ? IconName.mdiChevronLeft + : IconName.mdiChevronRight, }} onClick={() => next()} size={ButtonSize.Medium} @@ -316,7 +322,7 @@ export const Pagination: FC = React.forwardRef( {layout.includes(PaginationLayoutOptions.Jumper) && moreThanOnePage && ( - {htmlDir === 'ltr' && goToText} + {goToText} = React.forwardRef( } onChange={handleJumpOnChange} /> - {htmlDir === 'rtl' && goToText} )} diff --git a/src/components/Pagination/pagination.module.scss b/src/components/Pagination/pagination.module.scss index f04099745..64ae3cf03 100644 --- a/src/components/Pagination/pagination.module.scss +++ b/src/components/Pagination/pagination.module.scss @@ -159,6 +159,38 @@ vertical-align: middle; } } + + &-rtl { + .pagination-next { + margin-left: unset; + margin-right: $space-xxs; + } + + .pagination-previous { + margin-left: $space-xxs; + margin-right: unset; + } + + .jump { + margin: 0 $space-xs 0 0; + + .editor { + margin: 0 $space-xs 0 0; + padding-left: unset; + padding-right: $space-xs; + } + } + + .total { + margin: 0 0 0 $space-xs; + } + + &.dots { + .total { + margin: 0 0 0 $space-xs; + } + } + } } @media (min-width: $small-screen-size) { diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index 07a238070..86c8016bc 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -12,6 +12,7 @@ import { ButtonShape, NeutralButton } from '../Button'; import { Portal } from '../Portal'; import { useScrollLock } from '../../hooks/useScrollLock'; import { NoFormStyle } from '../Form/Context'; +import { useCanvasDirection } from '../../hooks/useCanvasDirection'; import styles from './panel.module.scss'; @@ -63,6 +64,8 @@ export const Panel = React.forwardRef( }, ref ) => { + const htmlDir: string = useCanvasDirection(); + const panelRef = useRef(null); const containerRef = useRef(null); const parentPanel = useContext(PanelContext); @@ -75,6 +78,7 @@ export const Panel = React.forwardRef( { [styles.visible]: visible }, { [styles.modeless]: overlay === false }, { [styles.modelessMask]: overlay === false && maskClosable }, + { [styles.panelBackdropRtl]: htmlDir === 'rtl' }, ]); const panelClasses: string = mergeClasses([ @@ -126,7 +130,15 @@ export const Panel = React.forwardRef( @@ -187,11 +199,19 @@ export const Panel = React.forwardRef( } if (['left', 'right'].includes(placement)) { - return { - transform: `translateX(${ - placement === 'left' ? -distance : distance - }px)`, - }; + if (htmlDir === 'rtl') { + return { + transform: `translateX(${ + placement === 'right' ? -distance : distance + }px)`, + }; + } else { + return { + transform: `translateX(${ + placement === 'left' ? -distance : distance + }px)`, + }; + } } else if (['top', 'bottom'].includes(placement)) { return { transform: `translateY(${ diff --git a/src/components/Panel/panel.module.scss b/src/components/Panel/panel.module.scss index 495535e4b..7f21cbd31 100644 --- a/src/components/Panel/panel.module.scss +++ b/src/components/Panel/panel.module.scss @@ -86,6 +86,10 @@ height: fit-content; justify-content: right; white-space: nowrap; + + button { + margin-left: $space-xs; + } } } @@ -182,3 +186,45 @@ } } } + +.panel-backdrop-rtl { + .panel { + &.left { + left: unset; + right: 0; + } + + &.right { + left: 0; + right: unset; + } + + .header { + &-button { + margin-left: $space-m; + margin-right: unset; + } + + &-buttons { + button { + margin-left: unset; + margin-right: $space-xs; + } + } + } + + .logo-gradient-header-wrapper { + .header-title { + & > :first-child { + padding-left: $space-s; + padding-right: 0; + } + } + + .header-action-buttons { + margin-left: calc(-#{$space-xl} / 2); + margin-right: unset; + } + } + } +} diff --git a/src/components/PersistentBar/PersistentBar.tsx b/src/components/PersistentBar/PersistentBar.tsx index 373f51556..d4b48bd1b 100644 --- a/src/components/PersistentBar/PersistentBar.tsx +++ b/src/components/PersistentBar/PersistentBar.tsx @@ -10,6 +10,7 @@ import { InternalButtonProps, } from '../Button'; import { Pagination, PaginationLayoutOptions } from '../Pagination'; +import { useCanvasDirection } from '../../hooks/useCanvasDirection'; import styles from './persistentBar.module.scss'; @@ -37,6 +38,8 @@ export const PersistentBar: FC = React.forwardRef( }, ref: Ref ) => { + const htmlDir: string = useCanvasDirection(); + const persistentBarClasses: string = mergeClasses([ styles.persistentBar, classNames, @@ -61,6 +64,7 @@ export const PersistentBar: FC = React.forwardRef( [styles.topPagination]: type === PersistentBarType.topBarPagination, }, + { [styles.persistentBarRtl]: htmlDir === 'rtl' }, ]); const getIconName = (): IconName => { @@ -69,7 +73,9 @@ export const PersistentBar: FC = React.forwardRef( } switch (type) { case PersistentBarType.topBarWithText: - return IconName.mdiArrowLeft; + return htmlDir === 'rtl' + ? IconName.mdiArrowRight + : IconName.mdiArrowLeft; default: return null; } diff --git a/src/components/PersistentBar/persistentBar.module.scss b/src/components/PersistentBar/persistentBar.module.scss index 6c40db8b0..fd33d04c9 100644 --- a/src/components/PersistentBar/persistentBar.module.scss +++ b/src/components/PersistentBar/persistentBar.module.scss @@ -63,4 +63,13 @@ .buttons-container { padding: $space-m; } + + &-rtl { + &.bottom-with-text { + .DefaultButton { + margin-left: $space-m; + margin-right: unset; + } + } + } } diff --git a/src/components/Pills/Pill.tsx b/src/components/Pills/Pill.tsx index eece77d75..afa4d8882 100644 --- a/src/components/Pills/Pill.tsx +++ b/src/components/Pills/Pill.tsx @@ -3,6 +3,7 @@ import { PillProps, PillSize, PillType } from './Pills.types'; import { mergeClasses } from '../../shared/utilities'; import { Icon, IconName, IconSize } from '../Icon'; import DisabledContext, { Disabled } from '../ConfigProvider/DisabledContext'; +import { useCanvasDirection } from '../../hooks/useCanvasDirection'; import styles from './pills.module.scss'; import { ButtonSize, DefaultButton } from '../Button'; @@ -31,6 +32,8 @@ export const Pill: FC = React.forwardRef( }, ref: Ref ) => { + const htmlDir: string = useCanvasDirection(); + const contextuallyDisabled: Disabled = useContext(DisabledContext); const mergedDisabled: boolean = configContextProps.noDisabledContext ? disabled @@ -70,6 +73,7 @@ export const Pill: FC = React.forwardRef( { [styles.grey]: theme === 'grey' }, { [styles.xsmall]: size === PillSize.XSmall }, { [styles.tagPillsDisabled]: mergedDisabled }, + { [styles.tagPillsRtl]: htmlDir === 'rtl' }, ]); return (
= React.forwardRef( const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small); const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall); + const htmlDir: string = useCanvasDirection(); + const radioButtonId = useRef(id || generateId()); const radioGroupContext = useRadioGroup(); const [isActive, setIsActive] = useState( @@ -89,6 +92,7 @@ export const RadioButton: FC = React.forwardRef( { [styles.selectorSmall]: mergedSize === SelectorSize.Small }, classNames, { [styles.disabled]: allowDisabledFocus || mergedDisabled }, + { [styles.selectorRtl]: htmlDir === 'rtl' }, { ['in-form-item']: mergedFormItemInput }, ]); diff --git a/src/components/RadioButton/radio.module.scss b/src/components/RadioButton/radio.module.scss index 2d8335f69..a6ad4731a 100644 --- a/src/components/RadioButton/radio.module.scss +++ b/src/components/RadioButton/radio.module.scss @@ -276,6 +276,62 @@ cursor: not-allowed; } } + + &-rtl { + .selector-label { + &-end { + margin-left: 0; + margin-right: $space-xs; + } + + &-start { + margin-left: $space-xs; + margin-right: 0; + } + } + + &-large { + .selector-label { + &-end { + margin-left: 0; + margin-right: $space-m; + } + + &-start { + margin-left: $space-m; + margin-right: 0; + } + } + } + + &-medium { + .selector-label { + &-end { + margin-left: 0; + margin-right: $space-xs; + } + + &-start { + margin-left: $space-xs; + margin-right: 0; + } + } + } + + &-small { + .selector-label { + &-end { + margin-left: 0; + margin-right: $space-xxs; + } + + &-start { + margin-left: $space-xxs; + margin-right: 0; + } + } + } + } } :global(.focus-visible) { diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index a16e044d2..94537906b 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -403,7 +403,7 @@ export const Select: FC = React.forwardRef( }; const getSelectedOptionText = (): string => { - if (showPills()) { + if (multiple) { return searchQuery; } const selectedOption = options @@ -450,9 +450,8 @@ export const Select: FC = React.forwardRef( } }; - // TODO: handle multiple with clearable padding flicker. const getStyle = (): React.CSSProperties => { - if (filterable && multiple && dropdownVisible) { + if (filterable && multiple && dropdownVisible && showPills()) { const paddingValue: number = width > 0 ? filled @@ -475,10 +474,7 @@ export const Select: FC = React.forwardRef( const selectInputProps: TextInputProps = { placeholder: showPills() ? '' : placeholder, - alignIcon: - htmlDir === 'rtl' - ? TextInputIconAlign.Left - : TextInputIconAlign.Right, + alignIcon: TextInputIconAlign.Right, clearable: clearable, inputWidth: inputWidth, iconButtonProps: { diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 03f4dd814..de4abd796 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -298,31 +298,60 @@ export const Slider: FC = React.forwardRef( thumbDiameter, thumbRadius ); - const showMaxLabel: boolean = - showLabels && - lowerThumbOffset < - maxLabelRef.current.getBoundingClientRect().left - - lowerLabelRef.current.offsetWidth / 2 - - thumbRadius; - maxLabelRef.current.style.opacity = showMaxLabel ? '1' : '0'; - - const showMinLabel: boolean = - showLabels && - lowerThumbOffset > - minLabelRef.current.getBoundingClientRect().right + - lowerLabelRef.current.offsetWidth / 2 - - thumbRadius; - minLabelRef.current.style.opacity = showMinLabel ? '1' : '0'; - const lowerLabelOffset: number = lowerLabelRef.current.offsetWidth / 2; + let showMaxLabel: boolean; + let showMinLabel: boolean; + // TODO: Need to investigate why `showMaxLabel` and `showMinLabel` + // calculations need to be duped depending on canvas direction. + // Moving these into a shared expression also doesn't work. if (htmlDir === 'rtl') { + showMaxLabel = + showLabels && + lowerThumbOffset < + minLabelRef.current.getBoundingClientRect().left - + lowerLabelRef.current.offsetWidth / 2 - + thumbRadius; + maxLabelRef.current.style.opacity = showMaxLabel + ? '1' + : '0'; + + showMinLabel = + showLabels && + lowerThumbOffset > + maxLabelRef.current.getBoundingClientRect().right + + lowerLabelRef.current.offsetWidth / 2 - + thumbRadius; + minLabelRef.current.style.opacity = showMinLabel + ? '1' + : '0'; + lowerLabelRef.current.style.right = `${ lowerThumbOffset - lowerLabelOffset }px`; lowerLabelRef.current.style.left = 'unset'; } else { + showMaxLabel = + showLabels && + lowerThumbOffset < + maxLabelRef.current.getBoundingClientRect().left - + lowerLabelRef.current.offsetWidth / 2 - + thumbRadius; + maxLabelRef.current.style.opacity = showMaxLabel + ? '1' + : '0'; + + showMinLabel = + showLabels && + lowerThumbOffset > + minLabelRef.current.getBoundingClientRect().right + + lowerLabelRef.current.offsetWidth / 2 - + thumbRadius; + minLabelRef.current.style.opacity = showMinLabel + ? '1' + : '0'; + lowerLabelRef.current.style.left = `${ lowerThumbOffset - lowerLabelOffset }px`; diff --git a/src/components/Stack/Stack.tsx b/src/components/Stack/Stack.tsx index 5a1f18073..432d2a609 100644 --- a/src/components/Stack/Stack.tsx +++ b/src/components/Stack/Stack.tsx @@ -4,6 +4,7 @@ import { mergeClasses } from '../../shared/utilities'; import { StackBreakpoint, StackProps } from './Stack.types'; import { useMatchMedia } from '../../octuple'; import { Breakpoints } from '../../hooks/useMatchMedia'; +import { useCanvasDirection } from '../../hooks/useCanvasDirection'; export const Stack: FC = React.forwardRef( ( @@ -27,6 +28,9 @@ export const Stack: FC = React.forwardRef( const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small); const mediumScreenActive: boolean = useMatchMedia(Breakpoints.Medium); const largeScreenActive: boolean = useMatchMedia(Breakpoints.Large); + + const htmlDir: string = useCanvasDirection(); + const breakPointConfigurationList: Array<[StackBreakpoint, boolean]> = [ ['large', largeScreenActive], ['medium', mediumScreenActive], @@ -71,6 +75,7 @@ export const Stack: FC = React.forwardRef( { [styles.fullWidth]: fullWidth }, { [styles.vertical]: direction === 'vertical' }, { [styles.horizontal]: direction === 'horizontal' }, + { [styles.stackRtl]: htmlDir === 'rtl' }, styles[gap], ]); diff --git a/src/components/Stack/stack.module.scss b/src/components/Stack/stack.module.scss index 6964f1d50..03f1dd9f8 100644 --- a/src/components/Stack/stack.module.scss +++ b/src/components/Stack/stack.module.scss @@ -118,4 +118,69 @@ } } } + + &-rtl { + &.horizontal { + &.xxxl { + > * + * { + margin-left: unset; + margin-right: $space-xxxl; + } + } + &.xxl { + > * + * { + margin-left: unset; + margin-right: $space-xxl; + } + } + &.xl { + > * + * { + margin-left: unset; + margin-right: $space-xl; + } + } + &.l { + > * + * { + margin-left: unset; + margin-right: $space-l; + } + } + &.m { + > * + * { + margin-left: unset; + margin-right: $space-m; + } + } + &.ml { + > * + * { + margin-left: unset; + margin-right: $space-ml; + } + } + &.s { + > * + * { + margin-left: unset; + margin-right: $space-s; + } + } + &.xs { + > * + * { + margin-left: unset; + margin-right: $space-xs; + } + } + &.xxs { + > * + * { + margin-left: unset; + margin-right: $space-xxs; + } + } + &.xxxs { + > * + * { + margin-left: unset; + margin-right: $space-xxxs; + } + } + } + } } diff --git a/src/components/Table/Hooks/useFilter/FilterDropdown.tsx b/src/components/Table/Hooks/useFilter/FilterDropdown.tsx index 537605ec0..a72061472 100644 --- a/src/components/Table/Hooks/useFilter/FilterDropdown.tsx +++ b/src/components/Table/Hooks/useFilter/FilterDropdown.tsx @@ -463,14 +463,19 @@ function FilterDropdown(props: FilterDropdownProps) { ); } + const htmlDir: string = useCanvasDirection(); + const menu = ( - + {dropdownContent} ); - const htmlDir: string = useCanvasDirection(); - return (
{children} @@ -479,6 +484,7 @@ function FilterDropdown(props: FilterDropdownProps) { trigger="click" onVisibleChange={onVisibleChange} placement={htmlDir === 'rtl' ? 'bottom-end' : 'bottom-start'} + portal positionStrategy="absolute" > tr { + > th { + &[colspan]:not([colspan='1']) { + text-align: center; + } - &-thead { - > tr { - > th { - &[colspan]:not([colspan='1']) { - .table-wrapper-rtl & { - text-align: center; + &:not(:last-child):not(.table-selection-column):not(.table-row-expand-icon-cell):not([colspan])::before { + right: auto; + left: 0; + } + + text-align: right; } } + } - &:not(:last-child):not(.table-selection-column):not(.table-row-expand-icon-cell):not([colspan])::before { - .table-wrapper-rtl & { - right: auto; - left: 0; + tbody { + > tr { + .table-wrapper:only-child { + margin: -$table-padding-vertical + ($table-padding-horizontal + ceil(14px * 1.4)) -$table-padding-vertical -$table-padding-horizontal; } } + } + + .table-pagination { + &-left { + justify-content: flex-end; + } - .table-wrapper-rtl & { - text-align: right; + &-right { + justify-content: flex-start; } } - } - } - &-tbody { - > tr { - .table-wrapper:only-child { - .table.table-rtl { - margin: -$table-padding-vertical - calc(14 + ceil(14 * 1.4)) -$table-padding-vertical -$table-padding-horizontal; + .table-column-sorter { + margin-right: 4px; + margin-left: 0; + } + + .table-filter-column-title { + padding: $table-padding-vertical $table-padding-horizontal + $table-padding-vertical 2.3em; + } + + thead tr th.table-column-has-sorters { + .table-filter-column-title { + padding: 0 0 0 2.3em; } } - } - } - &-pagination { - &-left { - .table-wrapper.table-wrapper-rtl & { - justify-content: flex-end; + .table-filter-trigger { + margin: -4px 4px -4px (-$table-padding-horizontal / 2); } - } - &-right { - .table-wrapper.table-wrapper-rtl & { - justify-content: flex-start; + .table-selection { + text-align: center; } - } - } - &-column-sorter { - .table-wrapper-rtl & { - margin-right: 4px; - margin-left: 0; - } - } + .table-row-indent { + float: right; + } - &-filter-column-title { - .table-wrapper-rtl & { - padding: $table-padding-vertical $table-padding-horizontal - $table-padding-vertical 2.3em; - } - } + .table-row-expand-icon { + float: right; + + .table-row-indent + & { + margin-right: 0; + margin-left: $space-xs; + } + + &:after { + transform: rotate(-90deg); + } + + &-collapsed:before { + transform: rotate(180deg); + } + + &-collapsed:after { + transform: rotate(0deg); + } + } - &-thead tr th.table-column-has-sorters { - .table-filter-column-title { - .table-rtl & { - padding: 0 0 0 2.3em; + tr { + &:last-of-type { + td { + &:first-of-type { + border-bottom-left-radius: 0; + border-bottom-right-radius: $table-border-radius; + } + &:last-of-type { + border-bottom-left-radius: $table-border-radius; + border-bottom-right-radius: 0; + } + &:only-of-type { + border-bottom-left-radius: $table-border-radius; + border-bottom-right-radius: $table-border-radius; + } + } + } } - } - } - &-filter-trigger { - .table-wrapper-rtl & { - margin: -4px 4px -4px (-$table-padding-horizontal / 2); - } - } + &.table-bordered { + table { + thead tr th, + tbody tr td, + tfoot tr th, + tfoot tr td { + border-right: none; + + border-left: $table-border-width $table-border-style + $table-border-color; + + &:last-of-type { + border-left: none; + border-right: none; + } + } - &-filter-dropdown { - &, - &-submenu { - .table-checkbox-wrapper + span { - .table-dropdown-rtl, - .table-dropdown-menu-submenu-rtl { - padding-right: 8px; - padding-left: 0; + thead tr, + tbody tr, + tfoot tr { + .table-cell-fix-right-first:after { + border-left: $table-border-style; + border-right: none; + } + } + } + + table tbody tr td { + .table-expanded-row-fixed { + &:after { + border-left: $table-border; + border-right: none; + left: 1px; + right: unset; + } + } + } + + &.table-scroll-horizontal { + .table-container .table-body { + table tbody { + tr.table-expanded-row, + tr.table-placeholder { + td { + border-left: 0; + border-right: unset; + } + } + } + } } } - } - } - &-selection { - .table-wrapper-rtl & { - text-align: center; - } - } + &.table-cell-bordered { + table { + tbody tr td, + tfoot tr td { + &:first-of-type { + border-left: none; + border-right: none; + } - &-row-indent { - .table-wrapper-rtl & { - float: right; - } - } + border-left: $table-border-width $table-border-style + $table-border-color; - &-row-expand-icon { - .table-wrapper-rtl & { - float: right; - } + &:last-of-type { + border-left: none; + } + } - .table-row-indent + & { - .table-wrapper-rtl & { - margin-right: 0; - margin-left: $space-xs; + tbody tr, + tfoot tr { + .table-cell-fix-right-first:after { + border-left: $table-border-style; + } + } + } + + table tbody tr td { + .table-expanded-row-fixed { + &:after { + border-left: $table-border; + border-right: unset; + left: 1px; + right: unset; + } + } + } } - } - &:after { - .table-wrapper-rtl & { - transform: rotate(-90deg); + &.table-header-bordered { + table { + thead tr th, + tfoot tr th { + &:first-of-type { + border-left: none; + border-right: none; + } + + border-left: $table-border-width $table-border-style + $table-border-color; + + &:last-of-type { + border-left: none; + } + } + + thead tr, + tbody tr, + tfoot tr { + .table-cell-fix-right-first:after { + border-left: $table-border-style; + } + } + } + + table tbody tr td { + .table-expanded-row-fixed { + &:after { + border-left: $table-border; + border-right: unset; + left: 1px; + right: unset; + } + } + } } - } - &-collapsed:before { - .table-wrapper-rtl & { - transform: rotate(180deg); + &.table-inner-bordered { + table { + thead tr th, + tbody tr td, + tfoot tr th, + tfoot tr td { + &:first-of-type { + border-left: none; + border-right: none; + } + + border-left: $table-border-width $table-border-style + $table-border-color; + + &:last-of-type { + border-left: none; + } + } + + thead tr, + tbody tr, + tfoot tr { + .table-cell-fix-right-first:after { + border-left: $table-border-style; + } + } + } + + table tbody tr td { + .table-expanded-row-fixed { + &:after { + border-left: $table-border; + border-right: unset; + left: 1px; + right: unset; + } + } + } } } + } + } +} - &-collapsed:after { - .table-wrapper-rtl & { - transform: rotate(0deg); +.table-filter-dropdown { + &-rtl { + .table-filter-dropdown-submenu { + .table-checkbox-wrapper + span { + .table-dropdown, + .table-dropdown-menu-submenu { + padding-right: 8px; + padding-left: 0; } } } diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss index 401cef693..8d7edd826 100644 --- a/src/components/Table/Styles/table.module.scss +++ b/src/components/Table/Styles/table.module.scss @@ -62,6 +62,7 @@ font-family: $octuple-font-family; font-size: $table-font-size; background: $table-background-color; + overflow: hidden; table { width: 100%; @@ -356,67 +357,6 @@ } } - &-filter-dropdown { - &-tree { - padding: 8px 8px 0; - - .tree-treenode .tree-node-content-wrapper:hover { - background-color: $tree-node-hover-bg; - } - - .tree-treenode-checkbox-checked .tree-node-content-wrapper { - &, - &:hover { - background-color: $tree-node-selected-bg; - } - } - } - - &-search { - padding: 8px; - border-bottom: $table-border-width $table-border-color - $table-border-style; - - &-input { - input { - min-width: 140px; - } - .icon { - opacity: $disabled-alpha-value; - } - } - } - - &-checkall { - width: 100%; - margin-bottom: 4px; - margin-left: 4px; - } - - &-submenu > ul { - max-height: calc(100vh - 130px); - overflow-x: hidden; - overflow-y: auto; - } - - &, - &-submenu { - .checkbox-wrapper + span { - padding-left: 8px; - } - } - - &-btns { - display: flex; - justify-content: space-between; - padding: 7px 8px; - overflow: hidden; - background-color: $table-header-filter-buttons-background-color; - border-top: $table-border-width $table-border-style - $table-border-color; - } - } - &-selection-col { width: $table-selection-column-width; } @@ -798,6 +738,66 @@ } } +.table-filter-dropdown { + &-tree { + padding: 8px 8px 0; + + .tree-treenode .tree-node-content-wrapper:hover { + background-color: $tree-node-hover-bg; + } + + .tree-treenode-checkbox-checked .tree-node-content-wrapper { + &, + &:hover { + background-color: $tree-node-selected-bg; + } + } + } + + &-search { + padding: 8px; + border-bottom: $table-border-width $table-border-color + $table-border-style; + + &-input { + input { + min-width: 140px; + } + .icon { + opacity: $disabled-alpha-value; + } + } + } + + &-checkall { + width: 100%; + margin-bottom: 4px; + margin-left: 4px; + } + + &-submenu > ul { + max-height: calc(100vh - 130px); + overflow-x: hidden; + overflow-y: auto; + } + + &, + &-submenu { + .checkbox-wrapper + span { + padding-left: 8px; + } + } + + &-btns { + display: flex; + justify-content: space-between; + padding: 7px 8px; + overflow: hidden; + background-color: $table-header-filter-buttons-background-color; + border-top: $table-border-width $table-border-style $table-border-color; + } +} + :global(.focus-visible) { .table-wrapper { .table { diff --git a/src/components/Tabs/Tab/Tab.tsx b/src/components/Tabs/Tab/Tab.tsx index d9e3c9ec0..401fd2911 100644 --- a/src/components/Tabs/Tab/Tab.tsx +++ b/src/components/Tabs/Tab/Tab.tsx @@ -8,6 +8,7 @@ import { Icon } from '../../Icon'; import { useConfig } from '../../ConfigProvider'; import { Badge } from '../../Badge'; import { Loader } from '../../Loader'; +import { useCanvasDirection } from '../../../hooks/useCanvasDirection'; import styles from '../tabs.module.scss'; @@ -26,6 +27,8 @@ export const Tab: FC = React.forwardRef( }, ref: Ref ) => { + const htmlDir: string = useCanvasDirection(); + const { onTabClick, currentActiveTab } = useTabs(); const iconExists: boolean = !!icon; @@ -38,6 +41,7 @@ export const Tab: FC = React.forwardRef( styles.tab, { [styles.active]: isActive }, { [styles.inverse]: light }, + { [styles.tabRtl]: htmlDir === 'rtl' }, classNames, ]); diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss index 8d1cc15a3..d7c0b0fee 100644 --- a/src/components/Tabs/tabs.module.scss +++ b/src/components/Tabs/tabs.module.scss @@ -80,6 +80,28 @@ &:focus-visible { outline: none; } + + &-rtl { + &:first-child { + padding-left: $space-m; + padding-right: 0; + } + + .tab-indicator { + border-radius: $space-xxs 0 0 $space-xxs; + } + + .badge, + .loader { + margin-left: unset; + margin-right: $space-xs; + } + + .icon + .label:not(:empty) { + margin-left: unset; + margin-right: $space-xs; + } + } } &.small { diff --git a/src/components/Tree/Internal/TreeNode.tsx b/src/components/Tree/Internal/TreeNode.tsx index a5ad441a8..5dba20ef4 100644 --- a/src/components/Tree/Internal/TreeNode.tsx +++ b/src/components/Tree/Internal/TreeNode.tsx @@ -348,9 +348,11 @@ class InternalTreeNode extends React.Component< const switcherCls = mergeClasses([ styles.treeSwitcher, - `tree-switcher_${ - expanded ? TREE_NODE_ICON_OPEN : TREE_NODE_ICON_CLOSE - }`, + (styles as any)[ + `tree-switcher_${ + expanded ? TREE_NODE_ICON_OPEN : TREE_NODE_ICON_CLOSE + }` + ], ]); const switcherIconDom = this.renderSwitcherIconDom(false); diff --git a/src/components/Tree/Internal/octree.module.scss b/src/components/Tree/Internal/octree.module.scss index 3a9ff857d..58900092a 100644 --- a/src/components/Tree/Internal/octree.module.scss +++ b/src/components/Tree/Internal/octree.module.scss @@ -69,13 +69,14 @@ vertical-align: top; cursor: pointer; } + // TODO: Replace with Octuple checkbox span { &.tree-switcher, &.tree-checkbox, &.tree-iconEle { display: inline-block; - width: 16px; - height: 16px; + width: 14px; + height: 14px; margin-right: 2px; line-height: 16px; vertical-align: -0.125em; diff --git a/src/styles/themes/_definitions.scss b/src/styles/themes/_definitions.scss index c342e8bbd..bd2e0ea79 100644 --- a/src/styles/themes/_definitions.scss +++ b/src/styles/themes/_definitions.scss @@ -484,6 +484,12 @@ $layout-trigger-height: 48px; $layout-zero-trigger-width: 32px; $layout-zero-trigger-height: 32px; +// Input +$input-padding-large-with-icon: 48px; +$input-padding-large-with-icon-and-icon-button: 84px; +$input-padding-medium-with-icon-and-icon-button: 74px; +$input-padding-small-with-icon-and-icon-button: 60px; + // Table $table-padding-vertical: var(--table-padding-vertical); From 55aef432ca7ff6cdd6a8346cd52d14d6b779af4f Mon Sep 17 00:00:00 2001 From: Dylan Kilgore Date: Fri, 23 Sep 2022 09:33:26 -0700 Subject: [PATCH 2/2] chore: picker: ensure dropdown scss module is rtl --- .../Internal/ocpicker.module.scss | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/DateTimePicker/Internal/ocpicker.module.scss b/src/components/DateTimePicker/Internal/ocpicker.module.scss index aefba7d19..aa0bff639 100644 --- a/src/components/DateTimePicker/Internal/ocpicker.module.scss +++ b/src/components/DateTimePicker/Internal/ocpicker.module.scss @@ -1237,17 +1237,19 @@ } .picker-dropdown { - .picker-range-arrow { - right: $picker-arrow-size; - left: unset; - margin-right: 10px; - margin-left: 0; - - &:before, - &:after { - right: 50%; - left: auto; - transform: translate(50%, -50%); + &-rtl { + .picker-range-arrow { + right: $picker-arrow-size; + left: unset; + margin-right: 10px; + margin-left: 0; + + &:before, + &:after { + right: 50%; + left: auto; + transform: translate(50%, -50%); + } } } }