Skip to content

Commit

Permalink
fix: clean up from pr review (#1456)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomzemp
tomzemp authored Feb 16, 2024
1 parent 7482f2d commit ced3e26
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 89 deletions.
16 changes: 8 additions & 8 deletions components/chip/src/chip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { Content } from './content.js'
import { Icon } from './icon.js'
import { Remove } from './remove.js'

const DEFAULT_INLINE_MARGIN = '4'

const Chip = ({
selected,
dense,
Expand Down Expand Up @@ -100,10 +102,12 @@ const Chip = ({
<style jsx>{`
span {
${marginBottom && `margin-bottom: ${marginBottom}px;`}
${marginLeft &&
`margin-inline-start: ${marginInlineStart ?? marginLeft}px;`}
${marginRight &&
`margin-inline-end: ${marginInlineEnd ?? marginRight}px;`}
margin-inline-start: ${marginInlineStart ??
marginLeft ??
DEFAULT_INLINE_MARGIN}px;
margin-inline-end: ${marginInlineEnd ??
marginRight ??
DEFAULT_INLINE_MARGIN}px;
${marginTop && `margin-top: ${marginTop}px`}
}
`}</style>
Expand All @@ -113,10 +117,6 @@ const Chip = ({
Chip.defaultProps = {
dataTest: 'dhis2-uicore-chip',
marginBottom: 4,
marginLeft: 4,
marginRight: 4,
marginInlineStart: 4,
marginInlineEnd: 4,
marginTop: 4,
}

Expand Down
11 changes: 11 additions & 0 deletions components/menu/src/menu-item/menu-item.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,3 +166,14 @@ SubMenus.parameters = {
},
},
}

export const RTLSuffixAndChevron = (args) => (
<div dir="rtl">
<Template {...args} />
</div>
)
RTLSuffixAndChevron.args = {
label: 'Security notifications',
chevron: true,
suffix: <Tag>3</Tag>,
}
4 changes: 4 additions & 0 deletions components/menu/src/menu-item/menu-item.styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,10 @@ export default css`
margin-inline-start: ${spacers.dp24};
}
.chevron:dir(rtl) {
transform: rotate(180deg);
}
li.dense .icon {
margin-inline-end: ${spacers.dp8};
width: 16px;
Expand Down
2 changes: 1 addition & 1 deletion components/pagination/src/page-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const PageControls = ({
padding-inline-end: 0;
margin-inline-start: ${spacers.dp4};
}
div :global(.navigator-icon:dir(rtl)) {
div .navigator-icon:dir(rtl) {
transform: rotate(180deg);
}
`}</style>
Expand Down
2 changes: 1 addition & 1 deletion components/sharing-dialog/src/sharing-dialog.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ export const RTL = (args) => {
</div>
)
}
// Have this be the primary story on the docs page

RTL.parameters = {
docs: { disable: false, source: { type: 'dynamic' } },
}
150 changes: 71 additions & 79 deletions components/transfer/src/icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,29 @@ const centerButtonStyles = css`
`

export const IconAddAll = ({ dataTest, disabled }) => (
<>
<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"
/>
<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>
<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>
<style jsx>{centerButtonStyles}</style>
</>
</div>
)

IconAddAll.propTypes = {
Expand All @@ -46,21 +44,19 @@ IconAddAll.propTypes = {
}

export const IconAddIndividual = ({ dataTest, disabled }) => (
<>
<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>
<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>
<style jsx>{centerButtonStyles}</style>
</>
</div>
)

IconAddIndividual.propTypes = {
Expand All @@ -69,33 +65,31 @@ IconAddIndividual.propTypes = {
}

export const IconRemoveAll = ({ dataTest, disabled }) => (
<>
<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)"
/>
<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>
<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>
<style jsx>{centerButtonStyles}</style>
</>
</div>
)

IconRemoveAll.propTypes = {
Expand All @@ -104,24 +98,22 @@ IconRemoveAll.propTypes = {
}

export const IconRemoveIndividual = ({ dataTest, disabled }) => (
<>
<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>
<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>
<style jsx>{centerButtonStyles}</style>
</>
</div>
)

IconRemoveIndividual.propTypes = {
Expand Down

0 comments on commit ced3e26

Please sign in to comment.