diff --git a/.changeset/twelve-ears-rush.md b/.changeset/twelve-ears-rush.md new file mode 100644 index 0000000..4b782ae --- /dev/null +++ b/.changeset/twelve-ears-rush.md @@ -0,0 +1,5 @@ +--- +"@kaizen/draft-likert-scale-legacy": minor +--- + +Fix RTL styles like Likert Scale diff --git a/draft-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss b/draft-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss index fe064b8..0c5eaaa 100644 --- a/draft-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss +++ b/draft-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss @@ -33,39 +33,53 @@ $fifth: $color-red-500; -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1; } +@mixin right-likert-item($height) { + border-top-right-radius: $height; + border-bottom-right-radius: $height; +} + +@mixin left-likert-item($height) { + border-top-left-radius: $height; + border-bottom-left-radius: $height; +} + @mixin fill($height) { &:first-child .likertItemFill { - border-top-left-radius: $height; - border-bottom-left-radius: $height; + @include left-likert-item($height); [dir="rtl"] & { - border-radius: $height 0; + border-radius: 0; + + @include right-likert-item($height); } &::after { - border-top-left-radius: $height; - border-bottom-left-radius: $height; + @include left-likert-item($height); [dir="rtl"] & { - border-radius: $height 0; + border-radius: 0; + + @include right-likert-item($height); } } } &:last-child .likertItemFill { - border-top-right-radius: $height; - border-bottom-right-radius: $height; + @include right-likert-item($height); [dir="rtl"] & { - border-radius: 0 $height; + border-radius: 0; + + @include left-likert-item($height); } &::after { - border-top-right-radius: $height; - border-bottom-right-radius: $height; + @include right-likert-item($height); [dir="rtl"] & { - border-radius: 0 $height; + border-radius: 0; + + @include left-likert-item($height); } } } @@ -145,8 +159,13 @@ $fifth: $color-red-500; &[dir="rtl"], [dir="rtl"] & { - margin-right: 2px; - margin-left: 2px; + &:first-child { + margin-left: 2px; + } + + &:last-child { + margin-right: 2px; + } } @include fill($block-height); diff --git a/draft-packages/likert-scale-legacy/docs/LikertScaleLegacy.stories.tsx b/draft-packages/likert-scale-legacy/docs/LikertScaleLegacy.stories.tsx index cf08f78..4d5058a 100644 --- a/draft-packages/likert-scale-legacy/docs/LikertScaleLegacy.stories.tsx +++ b/draft-packages/likert-scale-legacy/docs/LikertScaleLegacy.stories.tsx @@ -78,9 +78,10 @@ DefaultStory.args = { labelId: "456", } -const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ - isReversed, -}) => { +const StickerSheetTemplate: StoryFn<{ + isReversed: boolean + textDirection: "ltr" | "rtl" +}> = ({ isReversed }) => { const SectionHeading = ({ heading }: { heading: string }): JSX.Element => ( {heading} @@ -176,3 +177,25 @@ StickerSheetReversed.parameters = { chromatic: { disable: false }, controls: { disable: true }, } + +export const StickerSheetRTL = StickerSheetTemplate.bind({}) +StickerSheetRTL.storyName = "Sticker Sheet (RTL)" +StickerSheetRTL.args = { + textDirection: "rtl", // Global control; see storybook/preview.tsx +} +StickerSheetRTL.parameters = { + chromatic: { disable: false }, + controls: { disable: true }, +} + +export const StickerSheetReversedRTL = StickerSheetTemplate.bind({}) +StickerSheetReversedRTL.storyName = "Sticker Sheet (Reversed & RTL)" +StickerSheetReversedRTL.args = { + isReversed: true, + textDirection: "rtl", // Global control; see storybook/preview.tsx +} +StickerSheetReversedRTL.parameters = { + backgrounds: { default: "Purple 700" }, + chromatic: { disable: false }, + controls: { disable: true }, +}