From 143c355d93320487ab2af2a7614571bdfaf13bc1 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 29 Jan 2019 16:19:57 +0100 Subject: [PATCH 1/7] -wip --- docs/src/components/ExternalExampleLayout.tsx | 37 ++++++++++--------- .../Types/DividerExample.shorthand.rtl.tsx | 6 +++ docs/src/routes.tsx | 2 +- screener.config.js | 3 +- 4 files changed, 29 insertions(+), 19 deletions(-) create mode 100644 docs/src/examples/components/Divider/Types/DividerExample.shorthand.rtl.tsx diff --git a/docs/src/components/ExternalExampleLayout.tsx b/docs/src/components/ExternalExampleLayout.tsx index f16e3c44fa..f3621b16ea 100644 --- a/docs/src/components/ExternalExampleLayout.tsx +++ b/docs/src/components/ExternalExampleLayout.tsx @@ -11,11 +11,12 @@ import { } from 'docs/src/utils' import PageNotFound from '../views/PageNotFound' import { babelConfig, importResolver } from './Playground/renderConfig' +import Provider from '../../../src/components/Provider/Provider' const examplePaths = exampleSourcesContext.keys() const ExternalExampleLayout: any = props => { - const { exampleName } = props.match.params + const { exampleName, rtl } = props.match.params const exampleFilename = exampleKebabNameToSourceFilename(exampleName) const examplePath = _.find(examplePaths, path => { @@ -27,22 +28,24 @@ const ExternalExampleLayout: any = props => { const exampleSource: ExampleSource = exampleSourcesContext(examplePath) return ( - - - {({ element, error }) => ( - <> - {element} - {/* This block allows to see issues with examples as visual regressions. */} - {error &&
{error.toString()}
} - - )} - - + + + + {({ element, error }) => ( + <> + {element} + {/* This block allows to see issues with examples as visual regressions. */} + {error &&
{error.toString()}
} + + )} + + + ) } diff --git a/docs/src/examples/components/Divider/Types/DividerExample.shorthand.rtl.tsx b/docs/src/examples/components/Divider/Types/DividerExample.shorthand.rtl.tsx new file mode 100644 index 0000000000..bcc59d2a3f --- /dev/null +++ b/docs/src/examples/components/Divider/Types/DividerExample.shorthand.rtl.tsx @@ -0,0 +1,6 @@ +import * as React from 'react' +import { Divider } from '@stardust-ui/react' + +const DividerExampleShorthand = () => + +export default DividerExampleShorthand diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx index f44f5b380d..282373b690 100644 --- a/docs/src/routes.tsx +++ b/docs/src/routes.tsx @@ -18,7 +18,7 @@ import IntegrateCustomComponents from './views/IntegrateCustomComponents' const Router = () => ( - + diff --git a/screener.config.js b/screener.config.js index 267d4c485a..5a0933ef9f 100644 --- a/screener.config.js +++ b/screener.config.js @@ -30,9 +30,10 @@ const screenerConfig = { .sync('docs/src/examples/**/*.tsx', { ignore: ['**/index.tsx', '**/*.knobs.tsx'] }) .map(examplePath => { const { name: nameWithoutExtension, base: nameWithExtension } = path.parse(examplePath) + const rtl = nameWithExtension.endsWith('.rtl.tsx') return { - url: `http://localhost:8080/maximize/${_.kebabCase(nameWithoutExtension)}`, + url: `http://localhost:8080/maximize/${_.kebabCase(nameWithoutExtension)}/${rtl}`, name: nameWithExtension, } }), From 1d9742dc8207bf42e431b8eae837a9a20b6d17e2 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 29 Jan 2019 16:39:13 +0100 Subject: [PATCH 2/7] -updated filename --- docs/src/components/ExternalExampleLayout.tsx | 4 ++-- .../DividerExample.rtl.tsx} | 0 docs/src/utils/exampleKebabNameToSourceFilename.ts | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) rename docs/src/examples/components/Divider/{Types/DividerExample.shorthand.rtl.tsx => Rtl/DividerExample.rtl.tsx} (100%) diff --git a/docs/src/components/ExternalExampleLayout.tsx b/docs/src/components/ExternalExampleLayout.tsx index f3621b16ea..2997a0a7d9 100644 --- a/docs/src/components/ExternalExampleLayout.tsx +++ b/docs/src/components/ExternalExampleLayout.tsx @@ -18,12 +18,12 @@ const examplePaths = exampleSourcesContext.keys() const ExternalExampleLayout: any = props => { const { exampleName, rtl } = props.match.params const exampleFilename = exampleKebabNameToSourceFilename(exampleName) - + console.log(exampleFilename) const examplePath = _.find(examplePaths, path => { const { exampleName } = parseExamplePath(path) return exampleFilename === exampleName }) - + console.log(examplePath) if (!examplePath) return const exampleSource: ExampleSource = exampleSourcesContext(examplePath) diff --git a/docs/src/examples/components/Divider/Types/DividerExample.shorthand.rtl.tsx b/docs/src/examples/components/Divider/Rtl/DividerExample.rtl.tsx similarity index 100% rename from docs/src/examples/components/Divider/Types/DividerExample.shorthand.rtl.tsx rename to docs/src/examples/components/Divider/Rtl/DividerExample.rtl.tsx diff --git a/docs/src/utils/exampleKebabNameToSourceFilename.ts b/docs/src/utils/exampleKebabNameToSourceFilename.ts index 0d66d8d35f..009226c496 100644 --- a/docs/src/utils/exampleKebabNameToSourceFilename.ts +++ b/docs/src/utils/exampleKebabNameToSourceFilename.ts @@ -10,6 +10,7 @@ const exampleKebabNameToSourceFilename = (exampleKebabName: string) => { return `${_.startCase(exampleKebabName) .replace(/ /g, '') .replace(/Shorthand$/, '.shorthand') + .replace(/Rtl$/, '.rtl') .replace(/Perf$/, '.perf')}.source.json` } From b3a252a3fa6be2c414ffdfb969f2395e3c0556b6 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 29 Jan 2019 16:55:57 +0100 Subject: [PATCH 3/7] -updated changelog --- CHANGELOG.md | 3 +++ docs/src/components/ExternalExampleLayout.tsx | 10 +++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 55d86f73f5..9bb4dee92b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Fix layout of `Accordion` panel's title @kuzhelov ([#780](https://github.com/stardust-ui/react/pull/780)) +### Features +- Add mechanism for adding rtl visual tests @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) + ## [v0.19.0](https://github.com/stardust-ui/react/tree/v0.19.0) (2019-01-28) [Compare changes](https://github.com/stardust-ui/react/compare/v0.18.0...v0.19.0) diff --git a/docs/src/components/ExternalExampleLayout.tsx b/docs/src/components/ExternalExampleLayout.tsx index 2997a0a7d9..e707e904bd 100644 --- a/docs/src/components/ExternalExampleLayout.tsx +++ b/docs/src/components/ExternalExampleLayout.tsx @@ -18,17 +18,20 @@ const examplePaths = exampleSourcesContext.keys() const ExternalExampleLayout: any = props => { const { exampleName, rtl } = props.match.params const exampleFilename = exampleKebabNameToSourceFilename(exampleName) - console.log(exampleFilename) + const examplePath = _.find(examplePaths, path => { const { exampleName } = parseExamplePath(path) return exampleFilename === exampleName }) - console.log(examplePath) + if (!examplePath) return const exampleSource: ExampleSource = exampleSourcesContext(examplePath) + const isRtlEnabled = rtl === 'true' + return ( - + + {/*
*/} { )} + {/*
*/} ) } From f1a941b7de34e84819112c60c815c2f4a6f38769 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 30 Jan 2019 12:23:01 +0200 Subject: [PATCH 4/7] enable div in ExampleLayout, add example with Button --- docs/src/components/ExternalExampleLayout.tsx | 36 +++++++++---------- .../Button/Rtl/ButtonExample.rtl.tsx | 11 ++++++ 2 files changed, 29 insertions(+), 18 deletions(-) create mode 100644 docs/src/examples/components/Button/Rtl/ButtonExample.rtl.tsx diff --git a/docs/src/components/ExternalExampleLayout.tsx b/docs/src/components/ExternalExampleLayout.tsx index e707e904bd..7a6a9f0cfe 100644 --- a/docs/src/components/ExternalExampleLayout.tsx +++ b/docs/src/components/ExternalExampleLayout.tsx @@ -31,24 +31,24 @@ const ExternalExampleLayout: any = props => { return ( - {/*
*/} - - - {({ element, error }) => ( - <> - {element} - {/* This block allows to see issues with examples as visual regressions. */} - {error &&
{error.toString()}
} - - )} - - - {/*
*/} +
+ + + {({ element, error }) => ( + <> + {element} + {/* This block allows to see issues with examples as visual regressions. */} + {error &&
{error.toString()}
} + + )} + + +
) } diff --git a/docs/src/examples/components/Button/Rtl/ButtonExample.rtl.tsx b/docs/src/examples/components/Button/Rtl/ButtonExample.rtl.tsx new file mode 100644 index 0000000000..08f85da2b5 --- /dev/null +++ b/docs/src/examples/components/Button/Rtl/ButtonExample.rtl.tsx @@ -0,0 +1,11 @@ +import { Button } from '@stardust-ui/react' +import * as React from 'react' + +const ButtonExampleRtl = () => ( +
+
+) + +export default ButtonExampleRtl From c19384b7e95f74c47b232764346593ea5fe438b3 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 30 Jan 2019 12:07:28 +0100 Subject: [PATCH 5/7] -added mechanism for popout examples with rtl on or off -added rtl ecamples for the Button and Divider components -rtl examples are in rtl mode by default --- CHANGELOG.md | 2 +- .../ComponentControls/ComponentControls.tsx | 2 +- .../ComponentControlsMaximize.tsx | 6 +++--- .../ComponentExample/ComponentExample.tsx | 6 ++++-- .../src/examples/components/Button/Rtl/index.tsx | 16 ++++++++++++++++ docs/src/examples/components/Button/index.tsx | 2 ++ .../examples/components/Divider/Rtl/index.tsx | 16 ++++++++++++++++ 7 files changed, 43 insertions(+), 7 deletions(-) create mode 100644 docs/src/examples/components/Button/Rtl/index.tsx create mode 100644 docs/src/examples/components/Divider/Rtl/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 9bb4dee92b..e00c08535c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,7 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix layout of `Accordion` panel's title @kuzhelov ([#780](https://github.com/stardust-ui/react/pull/780)) ### Features -- Add mechanism for adding rtl visual tests @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) +- Add rtl examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) ## [v0.19.0](https://github.com/stardust-ui/react/tree/v0.19.0) (2019-01-28) diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx index 35f697dde2..67e6411d8b 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx @@ -56,7 +56,7 @@ const ComponentControls: React.FC = props => { - + ) diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx index 6e3f7014c7..75a18a9a5f 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx @@ -6,10 +6,10 @@ import { NavLink } from 'react-router-dom' import { updateForKeys } from 'docs/src/hoc' -const ComponentControlsMaximize: any = ({ examplePath }) => ( +const ComponentControlsMaximize: any = ({ examplePath, rtl }) => ( @@ -22,4 +22,4 @@ ComponentControlsMaximize.propTypes = { examplePath: PropTypes.string.isRequired, } -export default updateForKeys(['examplePath'])(ComponentControlsMaximize) +export default updateForKeys(['examplePath', 'rtl'])(ComponentControlsMaximize) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index fd4ccf366f..d522617dba 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -64,7 +64,9 @@ class ComponentExample extends React.Component ( + + + +) + +export default Rtl diff --git a/docs/src/examples/components/Button/index.tsx b/docs/src/examples/components/Button/index.tsx index 2644fa841b..7769e71a51 100644 --- a/docs/src/examples/components/Button/index.tsx +++ b/docs/src/examples/components/Button/index.tsx @@ -4,6 +4,7 @@ import Variations from './Variations' import States from './States' import Groups from './Groups' import Usage from './Usage' +import Rtl from './Rtl' import Performance from './Performance' const ButtonExamples = () => ( @@ -13,6 +14,7 @@ const ButtonExamples = () => ( + ) diff --git a/docs/src/examples/components/Divider/Rtl/index.tsx b/docs/src/examples/components/Divider/Rtl/index.tsx new file mode 100644 index 0000000000..ea1b51318b --- /dev/null +++ b/docs/src/examples/components/Divider/Rtl/index.tsx @@ -0,0 +1,16 @@ +import * as React from 'react' + +import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' +import PerformanceSection from 'docs/src/components/ComponentDoc/PerformanceSection' + +const Rtl = () => ( + + + +) + +export default Rtl From 39e7fa98bc334720af147b106dffa68c69ef6825 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 30 Jan 2019 13:45:49 +0100 Subject: [PATCH 6/7] -added Divider example -changed order in gulp-example-menu --- build/gulp/plugins/gulp-example-menu.ts | 3 ++- .../examples/components/Divider/Rtl/DividerExample.rtl.tsx | 4 ++-- docs/src/examples/components/Divider/index.tsx | 2 ++ 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/build/gulp/plugins/gulp-example-menu.ts b/build/gulp/plugins/gulp-example-menu.ts index 4d613bb14a..0e699f0cbd 100644 --- a/build/gulp/plugins/gulp-example-menu.ts +++ b/build/gulp/plugins/gulp-example-menu.ts @@ -15,7 +15,8 @@ const SECTION_ORDER = { Groups: 5, DEFAULT_ORDER: 6, Usage: 9, - Performance: 10, + Rtl: 10, + Performance: 11, } const getSectionOrder = sectionName => diff --git a/docs/src/examples/components/Divider/Rtl/DividerExample.rtl.tsx b/docs/src/examples/components/Divider/Rtl/DividerExample.rtl.tsx index bcc59d2a3f..767ccf57fa 100644 --- a/docs/src/examples/components/Divider/Rtl/DividerExample.rtl.tsx +++ b/docs/src/examples/components/Divider/Rtl/DividerExample.rtl.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { Divider } from '@stardust-ui/react' -const DividerExampleShorthand = () => +const DividerExampleRtl = () => -export default DividerExampleShorthand +export default DividerExampleRtl diff --git a/docs/src/examples/components/Divider/index.tsx b/docs/src/examples/components/Divider/index.tsx index 3b0fbe11ac..e4e459fd15 100644 --- a/docs/src/examples/components/Divider/index.tsx +++ b/docs/src/examples/components/Divider/index.tsx @@ -2,11 +2,13 @@ import * as React from 'react' import Performance from './Performance' import Types from './Types' import Variations from './Variations' +import Rtl from './Rtl' const DividerExamples = () => (
+
) From cedea109dfdd582772ad91f51398ce7985a677ea Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 30 Jan 2019 13:48:37 +0100 Subject: [PATCH 7/7] -fixed changelog after merging master --- CHANGELOG.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e854390c12..a1e6891ac3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,7 +18,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] ### Features -- Export `triangle-left` and `triangle-right` icons in Teams theme @codepretty ([#785](https://github.com/stardust-ui/react/pull/785)) +- Export `triangle-down` and `triangle-right` icons in Teams theme @codepretty ([#785](https://github.com/stardust-ui/react/pull/785)) +- Add rtl examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) ### Fixes - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779)) @@ -31,9 +32,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix layout of `Accordion` panel's title @kuzhelov ([#780](https://github.com/stardust-ui/react/pull/780)) - Allow to use `createRef()` API with `triggerRef` prop in `Portal` component @layershifter ([#787](https://github.com/stardust-ui/react/pull/787)) -### Features -- Add rtl examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) - ## [v0.19.0](https://github.com/stardust-ui/react/tree/v0.19.0) (2019-01-28) [Compare changes](https://github.com/stardust-ui/react/compare/v0.18.0...v0.19.0)