Skip to content

Commit

Permalink
fix: firefox icon transformations
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomzemp
tomzemp committed Feb 12, 2024
1 parent 2668bbf commit e28f2be
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 94 deletions.
35 changes: 19 additions & 16 deletions components/node/src/toggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,20 @@ import PropTypes from 'prop-types'
import React from 'react'

const ArrowDown = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
<style jsx>{`
svg {
fill: inherit;
height: 24px;
width: 24px;
vertical-align: middle;
pointer-events: none;
}
`}</style>
</svg>
<div className="nodeArrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
<style jsx>{`
svg {
fill: inherit;
height: 24px;
width: 24px;
vertical-align: middle;
pointer-events: none;
}
`}</style>
</svg>
</div>
)

export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
Expand Down Expand Up @@ -55,20 +57,21 @@ export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
z-index: 2;
fill: ${colors.grey900};
}
div :global(svg) {
div :global(.nodeArrow) {
vertical-align: top;
transform: rotate(-90deg);
transition: transform 0.1s ease-out;
}
div :global(svg:dir(rtl)) {
div :global(.nodeArrow:dir(rtl)) {
transform: rotate(90deg);
}
.open :global(svg) {
.open :global(.nodeArrow) {
transform: rotate(0);
}
.open :global(svg:dir(rtl)) {
.open :global(.nodeArrow:dir(rtl)) {
transform: rotate(0);
}
div:hover {
cursor: pointer;
border-radius: 3px;
Expand Down
9 changes: 9 additions & 0 deletions components/switch/src/switch/switch-icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ const styles = css`
transform: scale(-1, 1);
}
svg[dir='rtl'] {
transform: scale(-1, 1);
}
svg.dense {
height: 14px;
width: 27px;
Expand All @@ -35,6 +39,10 @@ const styles = css`
display: none;
}
svg[dir='rtl'] .checkmark {
display: none;
}
svg.checked .handle-unchecked,
svg:not(.checked) .handle-checked {
fill: none;
Expand Down Expand Up @@ -93,6 +101,7 @@ export function SwitchRegular({ className }) {
viewBox="0 0 42 22"
xmlns="http://www.w3.org/2000/svg"
className={className}
dir={document.documentElement?.dir ?? 'ltr'}
>
<path
d="M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z"
Expand Down
25 changes: 17 additions & 8 deletions components/switch/src/switch/switch.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { sharedPropTypes } from '@dhis2/ui-constants'
import React from 'react'
import React, { useEffect } from 'react'
import { Switch } from './index.js'

const subtitle = 'An input control that allows an on and an off state'
Expand Down Expand Up @@ -139,10 +139,19 @@ export const ImageLabelDense = Template.bind({})
ImageLabelDense.args = { ...ImageLabel.args, ...DefaultDense.args }
ImageLabelDense.storyName = 'Image label - Dense'

export const RTL = (args) => (
<div dir="rtl">
<Template {...args} />
<Template checked={true} value="checked" />
<Template error={true} checked={true} value="error" />
</div>
)
export const RTL = (args) => {
useEffect(() => {
document.documentElement.setAttribute('dir', 'rtl')
return () => {
document.documentElement.setAttribute('dir', 'ltr')
}
}, [])

return (
<div dir="rtl">
<Template {...args} />
<Template checked={true} value="checked" />
<Template error={true} checked={true} value="error" />
</div>
)
}
152 changes: 82 additions & 70 deletions components/transfer/src/icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,37 @@ const centerButtonStyles = css`
svg {
min-width: 20px;
}
svg:dir(rtl) {
div.centerButton:dir(rtl) {
transform: rotate(180deg) translateX(4px);
}
`

export const IconAddAll = ({ dataTest, disabled }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
data-test={dataTest}
fill={disabled ? theme.disabled : '#404B5A'}
>
<g fillRule="evenodd">
<polygon
fillRule="nonzero"
points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
/>

<polygon
fillRule="nonzero"
points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
/>
</g>

<>
<div className="centerButton">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
data-test={dataTest}
fill={disabled ? theme.disabled : '#404B5A'}
>
<g fillRule="evenodd">
<polygon
fillRule="nonzero"
points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
/>

<polygon
fillRule="nonzero"
points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
/>
</g>
</svg>
</div>
<style jsx>{centerButtonStyles}</style>
</svg>
</>
)

IconAddAll.propTypes = {
Expand All @@ -43,18 +46,21 @@ IconAddAll.propTypes = {
}

export const IconAddIndividual = ({ dataTest, disabled }) => (
<svg
fill={disabled ? theme.disabled : '#404B5A'}
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
data-test={dataTest}
>
<polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />

<>
<div className="centerButton">
<svg
fill={disabled ? theme.disabled : '#404B5A'}
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
data-test={dataTest}
>
<polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
</svg>
</div>
<style jsx>{centerButtonStyles}</style>
</svg>
</>
)

IconAddIndividual.propTypes = {
Expand All @@ -63,30 +69,33 @@ IconAddIndividual.propTypes = {
}

export const IconRemoveAll = ({ dataTest, disabled }) => (
<svg
fill={disabled ? theme.disabled : '#404B5A'}
width="16px"
height="16px"
viewBox="0 0 16 16"
data-test={dataTest}
xmlns="http://www.w3.org/2000/svg"
>
<g fillRule="evenodd">
<polygon
fillRule="nonzero"
points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
transform="matrix(-1 0 0 1 20 0)"
/>

<polygon
fillRule="nonzero"
points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
transform="matrix(-1 0 0 1 7.06 0)"
/>
</g>

<>
<div className="centerButton">
<svg
fill={disabled ? theme.disabled : '#404B5A'}
width="16px"
height="16px"
viewBox="0 0 16 16"
data-test={dataTest}
xmlns="http://www.w3.org/2000/svg"
>
<g fillRule="evenodd">
<polygon
fillRule="nonzero"
points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
transform="matrix(-1 0 0 1 20 0)"
/>

<polygon
fillRule="nonzero"
points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
transform="matrix(-1 0 0 1 7.06 0)"
/>
</g>
</svg>
</div>
<style jsx>{centerButtonStyles}</style>
</svg>
</>
)

IconRemoveAll.propTypes = {
Expand All @@ -95,21 +104,24 @@ IconRemoveAll.propTypes = {
}

export const IconRemoveIndividual = ({ dataTest, disabled }) => (
<svg
fill={disabled ? theme.disabled : '#404B5A'}
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
data-test={dataTest}
>
<polygon
points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
transform="matrix(-1 0 0 1 16 0)"
/>

<>
<div className="centerButton">
<svg
fill={disabled ? theme.disabled : '#404B5A'}
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
data-test={dataTest}
>
<polygon
points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
transform="matrix(-1 0 0 1 16 0)"
/>
</svg>
</div>
<style jsx>{centerButtonStyles}</style>
</svg>
</>
)

IconRemoveIndividual.propTypes = {
Expand Down

0 comments on commit e28f2be

Please sign in to comment.