Skip to content

Commit e0bfba6

Browse files
bedrich-schindlerbedrich-schindler
committed
Refactor components which use multiple class names to use classNames util to unify approach of writing class names and to avoid empty spaces in output; refactor all helper files to use named exports, move all helper files from services and utils into helpers folder and rename all helpers folders on component level to _helpers (#270)
1 parent 039aa56 commit e0bfba6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+295
-188
lines changed

‎doczrc.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default {
1919
],
2020
Helpers: [
2121
'CSS Helpers',
22+
'JS Helpers',
2223
],
2324
// eslint-disable-next-line sort-keys
2425
Guides: [
@@ -62,6 +63,10 @@ export default {
6263
menu: [],
6364
name: 'CSS Helpers',
6465
},
66+
{
67+
menu: [],
68+
name: 'JS Helpers',
69+
},
6570
{
6671
menu: [
6772
'Theming Overview', // Theming submenu

‎src/docs/_components/Placeholder/Placeholder.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3+
import { classNames } from '../../../lib/utils/classNames';
34
import styles from './Placeholder.scss';
45

56
export const Placeholder = ({
@@ -11,12 +12,12 @@ export const Placeholder = ({
1112
width,
1213
}) => (
1314
<div
14-
className={[
15+
className={classNames(
1516
styles.root,
16-
bordered ? styles.rootBordered : '',
17-
dark ? styles.rootDark : '',
18-
inline ? styles.rootInline : '',
19-
].join(' ')}
17+
bordered && styles.rootBordered,
18+
dark && styles.rootDark,
19+
inline && styles.rootInline,
20+
)}
2021
style={{
2122
'--rui-local-height': height,
2223
'--rui-local-width': width,

‎src/docs/js-helpers/classnames.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
name: Classnames
3+
menu: JS Helpers
4+
route: /js-helpers/class-names
5+
---
6+
7+
# Classnames
8+
9+
import { Playground } from 'docz'
10+
import { classNames} from '../../lib';
11+
12+
The `classNames` helper joins all classnames you pass into the function as
13+
single classname. It automatically filters out empty strings and values that
14+
are not strings, so you can conditionally assemble classnames and `classNames`
15+
function will take care about the single format of classname for you.
16+
17+
## Basic Usage
18+
19+
To use `classNames` helper, you need to import it first:
20+
21+
```js
22+
import { classNames } from '@react-ui-org/react-ui';
23+
```
24+
25+
And use it:
26+
27+
<Playground>
28+
<div
29+
className={classNames(
30+
'd-inline-block',
31+
Date.now() > 1609455600 && 'text-warning',
32+
Date.now() > 1622498400 ? 'text-muted' : null,
33+
)}
34+
>
35+
{(new Date()).toLocaleDateString()}
36+
</div>
37+
</Playground>

‎src/lib/components/Alert/Alert.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import getRootColorClassName from '../../helpers/getRootColorClassName';
43
import { withProviderContext } from '../../provider';
4+
import { classNames } from '../../utils/classNames';
5+
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
56
import styles from './Alert.scss';
67

78
export const Alert = ({
@@ -13,10 +14,10 @@ export const Alert = ({
1314
translations,
1415
}) => (
1516
<div
16-
className={[
17+
className={classNames(
1718
styles.root,
1819
getRootColorClassName(color, styles),
19-
].join(' ')}
20+
)}
2021
id={id}
2122
role="alert"
2223
>

‎src/lib/components/Badge/Badge.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import getRootColorClassName from '../../helpers/getRootColorClassName';
43
import { withProviderContext } from '../../provider';
4+
import { classNames } from '../../utils/classNames';
5+
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
56
import styles from './Badge.scss';
67

78
export const Badge = ({
@@ -11,11 +12,11 @@ export const Badge = ({
1112
priority,
1213
}) => (
1314
<div
14-
className={[
15+
className={classNames(
1516
styles.root,
16-
priority === 'outline' ? styles.rootPriorityOutline : '',
17+
priority === 'outline' && styles.rootPriorityOutline,
1718
getRootColorClassName(color, styles),
18-
].join(' ')}
19+
)}
1920
id={id}
2021
>
2122
{label}

‎src/lib/components/Button/Button.jsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import PropTypes from 'prop-types';
22
import React, { useContext } from 'react';
3-
import getRootSizeClassName from '../../helpers/getRootSizeClassName';
4-
import getRootColorClassName from '../../helpers/getRootColorClassName';
5-
import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
63
import { withProviderContext } from '../../provider';
7-
import transferProps from '../../utils/transferProps';
4+
import { classNames } from '../../utils/classNames';
5+
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
6+
import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
7+
import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
8+
import { transferProps } from '../_helpers/transferProps';
89
import withForwardedRef from '../withForwardedRef';
910
import { ButtonGroupContext } from '../ButtonGroup';
1011
import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
@@ -36,7 +37,7 @@ export const Button = ({
3637
/* eslint-disable react/button-has-type */
3738
<button
3839
{...transferProps(restProps)}
39-
className={[
40+
className={classNames(
4041
styles.root,
4142
getRootPriorityClassName(
4243
resolveContextOrProp(context && context.priority, priority),
@@ -48,10 +49,10 @@ export const Button = ({
4849
styles,
4950
),
5051
getRootLabelVisibilityClassName(labelVisibility, styles),
51-
resolveContextOrProp(context && context.block, block) ? styles.rootBlock : '',
52-
context ? styles.rootGrouped : '',
53-
feedbackIcon ? styles.hasRootFeedback : '',
54-
].join(' ')}
52+
resolveContextOrProp(context && context.block, block) && styles.rootBlock,
53+
context && styles.rootGrouped,
54+
feedbackIcon && styles.hasRootFeedback,
55+
)}
5556
disabled={resolveContextOrProp(context && context.disabled, disabled) || !!feedbackIcon}
5657
id={id}
5758
ref={forwardedRef}

‎src/lib/components/ButtonGroup/ButtonGroup.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { withProviderContext } from '../../provider';
4+
import { classNames } from '../../utils/classNames';
45
import styles from './ButtonGroup.scss';
56
import { ButtonGroupContext } from './ButtonGroupContext';
67

@@ -13,10 +14,10 @@ export const ButtonGroup = ({
1314
...restProps
1415
}) => (
1516
<div
16-
className={[
17+
className={classNames(
1718
styles.root,
18-
block ? styles.isRootBlock : '',
19-
].join(' ')}
19+
block && styles.isRootBlock,
20+
)}
2021
role="group"
2122
{...restProps}
2223
>

‎src/lib/components/CTA/CTA.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { withProviderContext } from '../../provider';
4+
import { classNames } from '../../utils/classNames';
45
import styles from './CTA.scss';
56

67
export const CTA = (props) => {
@@ -27,10 +28,10 @@ export const CTA = (props) => {
2728

2829
return (
2930
<div
30-
className={[
31+
className={classNames(
3132
styles.root,
3233
alignClass(align),
33-
].join(' ')}
34+
)}
3435
>
3536
{children}
3637
</div>

‎src/lib/components/Card/Card.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import getRootColorClassName from '../../helpers/getRootColorClassName';
43
import { withProviderContext } from '../../provider';
4+
import { classNames } from '../../utils/classNames';
5+
import { getRootColorClassName } from '../_helpers/getRootColorClassName';
56
import styles from './Card.scss';
67

78
export const Card = ({
@@ -13,13 +14,13 @@ export const Card = ({
1314
color,
1415
}) => (
1516
<div
16-
className={[
17+
className={classNames(
1718
styles.root,
1819
getRootColorClassName(color, styles),
19-
dense ? styles.rootDense : '',
20-
raised ? styles.rootRaised : '',
21-
disabled ? styles.isDisabled : '',
22-
].join(' ')}
20+
dense && styles.rootDense,
21+
raised && styles.rootRaised,
22+
disabled && styles.isDisabled,
23+
)}
2324
id={id}
2425
>
2526
{children}

‎src/lib/components/CheckboxField/CheckboxField.jsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import PropTypes from 'prop-types';
22
import React, { useContext } from 'react';
3-
import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
43
import { withProviderContext } from '../../provider';
5-
import transferProps from '../../utils/transferProps';
4+
import { classNames } from '../../utils/classNames';
5+
import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
6+
import { transferProps } from '../_helpers/transferProps';
67
import { FormLayoutContext } from '../FormLayout';
78
import withForwardedRef from '../withForwardedRef';
89
import styles from './CheckboxField.scss';
@@ -26,15 +27,15 @@ export const CheckboxField = ({
2627

2728
return (
2829
<label
29-
className={[
30+
className={classNames(
3031
styles.root,
31-
context ? styles.isRootInFormLayout : '',
32+
context && styles.isRootInFormLayout,
3233
context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
33-
labelPosition === 'before' ? styles.hasRootLabelBefore : '',
34-
disabled ? styles.isRootDisabled : '',
35-
required ? styles.isRootRequired : '',
34+
labelPosition === 'before' && styles.hasRootLabelBefore,
35+
disabled && styles.isRootDisabled,
36+
required && styles.isRootRequired,
3637
getRootValidationStateClassName(validationState, styles),
37-
].join(' ')}
38+
)}
3839
htmlFor={id}
3940
id={id && `${id}__label`}
4041
>
@@ -51,10 +52,10 @@ export const CheckboxField = ({
5152
value={value}
5253
/>
5354
<div
54-
className={[
55+
className={classNames(
5556
styles.label,
56-
isLabelVisible ? '' : styles.isLabelHidden,
57-
].join(' ')}
57+
!isLabelVisible && styles.isLabelHidden,
58+
)}
5859
id={id && `${id}__labelText`}
5960
>
6061
{label}

0 commit comments

Comments
 (0)