diff --git a/CHANGELOG.md b/CHANGELOG.md index 47e07eb598..9b9a2f1c0a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `badge` and `badgePosition` properties on the `ChatMessage` @mnajdova ([#823](https://github.com/stardust-ui/react/pull/823)) - Add `hasMention`, `isImportant`, `hasMentionColor` and `isImportantColor` in ChatMessage variables in Teams theme @mnajdova ([#841](https://github.com/stardust-ui/react/pull/841)) - Add `actionMenu` prop to `ChatMessage` component @layershifter ([#811](https://github.com/stardust-ui/react/pull/811)) +- Add `rtl` field in the `SvgIconFuncArg`, and used it in Teams theme's number-list icon ([#851](https://github.com/stardust-ui/react/pull/851)) ### Fixes - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824)) diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx index c41071ba34..9f40aa3cda 100644 --- a/packages/react/src/components/Icon/Icon.tsx +++ b/packages/react/src/components/Icon/Icon.tsx @@ -96,15 +96,16 @@ class Icon extends UIComponent, any> { classes, unhandledProps, accessibility, + rtl, ): React.ReactNode { return ( - {svgIconDescriptor && callable(svgIconDescriptor)({ classes })} + {svgIconDescriptor && callable(svgIconDescriptor)({ classes, rtl })} ) } - public renderComponent({ ElementType, classes, unhandledProps, accessibility, theme }) { + public renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl }) { const { icons = {} } = theme const maybeIcon = icons[this.props.name] @@ -116,6 +117,7 @@ class Icon extends UIComponent, any> { classes, unhandledProps, accessibility, + rtl, ) : this.renderFontIcon(ElementType, classes, unhandledProps, accessibility) } diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/numberList.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/numberList.tsx index c024127c4e..b6f064dd7c 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/icons/numberList.tsx +++ b/packages/react/src/themes/teams/components/Icon/svg/icons/numberList.tsx @@ -1,22 +1,78 @@ import * as React from 'react' import cx from 'classnames' -import { TeamsProcessedSvgIconSpec } from '../types' import { teamsIconClassNames } from '../teamsIconClassNames' +import { TeamsSvgIconSpec } from 'src/themes/teams/components/Icon/svg/types' export default { - icon: ({ classes }) => ( - - - - - - - ), + icon: ({ classes, rtl }) => { + return rtl ? ( + + + + + + + + + + + + + + + + + + ) : ( + + + + + + + ) + }, styles: {}, -} as TeamsProcessedSvgIconSpec +} as TeamsSvgIconSpec diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index f6cca4fe14..a4e2330ecd 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -480,6 +480,7 @@ export type FontFaces = FontFace[] type SvgIconFuncArg = { classes: { [iconSlot: string]: string } + rtl: boolean } export type SvgIconSpec = ObjectOrFunc diff --git a/packages/react/test/specs/themes/teams/components/Icon/Icon-test.tsx b/packages/react/test/specs/themes/teams/components/Icon/Icon-test.tsx index 329c46c02b..edce6e200f 100644 --- a/packages/react/test/specs/themes/teams/components/Icon/Icon-test.tsx +++ b/packages/react/test/specs/themes/teams/components/Icon/Icon-test.tsx @@ -7,10 +7,10 @@ import processedIcons from '../../../../../../src/themes/teams/components/Icon/s import { SvgIconSpecWithStyles } from '../../../../../../src/themes/teams/components/Icon/svg/types' describe('Teams Theme Icon', () => { - function testIcon(icon) { + function testIcon(icon, props?) { const SvgIcon: any = (icon as SvgIconSpecWithStyles).icon const component = shallow( - , + , ) const outlineByDynamicClass = component.find('.TEST-OUTLINE') @@ -24,12 +24,16 @@ describe('Teams Theme Icon', () => { } _.forEach(icons, (icon, iconName) => { - test(`Teams theme icon '${iconName}' correctly sets static outline and filled classes`, () => - testIcon(icon)) + test(`Teams theme icon '${iconName}' correctly sets static outline and filled classes`, () => { + testIcon(icon) + testIcon(icon, { rtl: true }) + }) }) _.forEach(processedIcons, (icon, iconName) => { - test(`Teams theme processed icon '${iconName}' correctly sets static outline and filled classes`, () => - testIcon(icon)) + test(`Teams theme processed icon '${iconName}' correctly sets static outline and filled classes`, () => { + testIcon(icon) + testIcon(icon, { rtl: true }) + }) }) })