feat: Custom CSS namespace (#1239)

* Added CssNamespaceContext and withStyles HOC * Implement withStyles HOC * Implement withStyles HOC * Added a no styles story for each component * Fix unit tests * Updated snapshots and visual tests * Rename TreeNode.js to _TreeNode.js as it is not an exported component * storyshots + fd-col-number replacement * update snaps * rebuild all visual snapshots * allow size mistmatch for visual tests Co-authored-by: jbadan <jenna.badanowski@gmail.com>
SAP · Oct 11, 2020 · a99b2f9 · a99b2f9
1 parent e501e87
commit a99b2f9
Show file tree

Hide file tree

Showing 251 changed files with 4,439 additions and 958 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -141,7 +141,7 @@
       "react/no-did-update-set-state": 2,
       "react/no-multi-comp": 2,
       "react/no-unknown-property": 2,
-      "react/prop-types": 2,
+      "react/prop-types": [2, {"ignore": ["cssNamespace"], "skipUndeclared": true}],
       "react/react-in-jsx-scope": 2,
       "react/self-closing-comp": 2,
       "react/sort-prop-types": [2,

diff --git a/.storybook/custom/custom.scss b/.storybook/custom/custom.scss
@@ -319,87 +319,87 @@ blockquote {
         align-items: center;
     }
 
-    .fd-col--10 {
+    .docs-col--10 {
         .col-content {
             background-color: #3694b5;
             color: black;
         }
     }
 
-    .fd-col--9 {
+    .docs-col--9 {
         .col-content {
             background-color: #3a73a2;
             color: black;
         }
     }
 
-    .fd-col--7 {
+    .docs-col--7 {
         .col-content {
             background-color: #43317c;
             color: white;
         }
     }
 
-    .fd-col--6 {
+    .docs-col--6 {
         .col-content {
             background-color: #471069;
             color: white;
         }
     }
 
-    .fd-col--5 {
+    .docs-col--5 {
         .col-content {
             background-color: #452073;
             color: white;
         }
     }
 
-    .fd-col--4 {
+    .docs-col--4 {
         .col-content {
             background-color: #414186;
             color: white;
         }
     }
 
-    .fd-col--3 {
+    .docs-col--3 {
         .col-content {
             background-color: #3d6299;
             color: white;
         }
     }
-    .fd-col--1 {
+    .docs-col--1 {
         .col-content {
             background-color: #34a4bf;
             color: black;
         }
     }
 
     .docs-layout-grid-first,
-    .fd-col--12 {
+    .docs-col--12 {
         .col-content {
             background-color: #30c5d2;
             color: black;
         }
     }
 
     .docs-layout-grid-second,
-    .fd-col--11 {
+    .docs-col--11 {
         .col-content {
             background-color: #32b5c8;
             color: black;
         }
     }
 
     .docs-layout-grid-third,
-    .fd-col--8 {
+    .docs-col--8 {
         .col-content {
             background-color: #3f528f;
             color: white;
         }
     }
 
     .docs-layout-grid-fourth,
-    .fd-col--2 {
+    .docs-col--2 {
         .col-content {
             background-color: #3883ac;
             color: black;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "chain-function": "^1.0.1",
     "classnames": "^2.2.6",
     "fundamental-styles": "0.12.0-rc.64",
+    "hoist-non-react-statics": "^3.3.2",
     "keycode": "^2.2.0",
     "moment": "^2.26.0",
     "prop-types": "^15.7.1",

diff --git a/src/ActionBar/ActionBar.js b/src/ActionBar/ActionBar.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import requiredIf from 'react-required-if';
 import Title from '../Title/Title';
+import withStyles from '../utils/withStyles';
 import styles from 'fundamental-styles/dist/action-bar.css';
 
 const classnames = classnamesBind.bind(styles);
@@ -18,6 +19,7 @@ const ActionBar = React.forwardRef(({
     actionClassName,
     actionProps,
     className,
+    cssNamespace,
     backButtonLabel,
     buttonContainerClassName,
     buttonProps,
@@ -32,29 +34,29 @@ const ActionBar = React.forwardRef(({
 }, ref) => {
 
     const actionBarClasses = classnames(
-        'fd-action-bar',
+        `${cssNamespace}-action-bar`,
         className
     );
 
     const actionBarHeaderClasses = classnames(
-        'fd-action-bar__header',
+        `${cssNamespace}-action-bar__header`,
         className
     );
 
     const actionBarBackClasses = classnames(
-        'fd-action-bar__back',
+        `${cssNamespace}-action-bar__back`,
         buttonContainerClassName
     );
 
     const actionBarDescriptionClasses = classnames(
-        'fd-action-bar__description',
+        `${cssNamespace}-action-bar__description`,
         {
-            'fd-action-bar__description--back': onBackClick
+            [`${cssNamespace}-action-bar__description--back`]: onBackClick
         }
     );
 
     const actionBarActionsClasses = classnames(
-        'fd-action-bar__actions',
+        `${cssNamespace}-action-bar__actions`,
         actionClassName
     );
 
@@ -72,7 +74,7 @@ const ActionBar = React.forwardRef(({
                         onClick={onBackClick}
                         option='transparent' />
                 </div>)}
-                <div className={classnames('fd-action-bar__title')}>
+                <div className={classnames(`${cssNamespace}-action-bar__title`)}>
                     <Title
                         {...titleProps}
                         level={headingLevel}
@@ -138,4 +140,4 @@ ActionBar.defaultProps = {
     headingLevel: 3
 };
 
-export default ActionBar;
+export default withStyles(ActionBar);
diff --git a/src/ActionBar/__stories__/ActionBar.stories.js b/src/ActionBar/__stories__/ActionBar.stories.js
@@ -104,3 +104,19 @@ export const dev = () => (
 );
 
 dev.parameters = { docs: { disable: true } };
+
+export const noStyles = () => (
+    <ActionBar
+        actions={(
+            <>
+                <Button>Button</Button>
+                <Button option='emphasized'>Button</Button>
+            </>
+        )}
+        backButtonLabel='Back to home'
+        cssNamespace='xxx'
+        description={'Action Bar Description'}
+        onBackClick={() => {}}
+        title={'Page Title'} />
+);
+noStyles.parameters = { docs: { disable: true } };
diff --git a/src/ActionBar/__stories__/__snapshots__/ActionBar.stories.storyshot b/src/ActionBar/__stories__/__snapshots__/ActionBar.stories.storyshot
@@ -194,6 +194,75 @@ exports[`Storyshots Component API/ActionBar No Description 1`] = `
 </div>
 `;
 
+exports[`Storyshots Component API/ActionBar No Styles 1`] = `
+<div
+  dir="ltr"
+>
+  <div
+    className="xxx-action-bar"
+  >
+    <div
+      className="xxx-action-bar__header"
+    >
+      <div
+        className="xxx-action-bar__back"
+      >
+        <button
+          aria-label="Back to home"
+          className="xxx-button xxx-button--transparent xxx-button--compact"
+          onClick={[Function]}
+          type="button"
+        >
+          <i
+            aria-hidden={true}
+            className="sap-icon--navigation-left-arrow"
+            role="img"
+          />
+        </button>
+      </div>
+      <div
+        className="xxx-action-bar__title"
+      >
+        <h3
+          className="xxx-title xxx-title--h3"
+        >
+          Page Title
+        </h3>
+      </div>
+      <div
+        className="xxx-action-bar__actions"
+      >
+        <button
+          className="xxx-button"
+          type="button"
+        >
+          <span
+            className="xxx-button__text"
+          >
+            Button
+          </span>
+        </button>
+        <button
+          className="xxx-button xxx-button--emphasized"
+          type="button"
+        >
+          <span
+            className="xxx-button__text"
+          >
+            Button
+          </span>
+        </button>
+      </div>
+    </div>
+    <p
+      className="xxx-action-bar__description xxx-action-bar__description--back"
+    >
+      Action Bar Description
+    </p>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Component API/ActionBar Primary 1`] = `
 <div
   dir="ltr"

diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js
@@ -3,6 +3,7 @@ import classnamesBind from 'classnames/bind';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
+import withStyles from '../utils/withStyles';
 import avatarStyles from 'fundamental-styles/dist/avatar.css';
 import iconStyles from 'fundamental-styles/dist/icon.css';
 
@@ -13,23 +14,23 @@ const classnames = classnamesBind.bind({
 
 /** An **Avatar** is a visual presentation option around using an icon or user initials. */
 
-const Avatar = React.forwardRef(({ glyph, size, circle, transparent, border, color, label, backgroundImageUrl, children, className, role, placeholder, tile, zoom, ...props }, ref) => {
+const Avatar = React.forwardRef(({ glyph, size, circle, cssNamespace, transparent, border, color, label, backgroundImageUrl, children, className, role, placeholder, tile, zoom, ...props }, ref) => {
 
     const styles = {
         backgroundImage: `url(${backgroundImageUrl})`
     };
     const avatarClasses = classnames(
-        'fd-avatar',
+        `${cssNamespace}-avatar`,
         {
-            [`fd-avatar--${size}`]: !!size,
+            [`${cssNamespace}-avatar--${size}`]: !!size,
             [`sap-icon--${glyph}`]: !!glyph,
-            [`fd-avatar--accent-color-${color}`]: !!color,
-            'fd-avatar--thumbnail': backgroundImageUrl,
-            'fd-avatar--placeholder': placeholder,
-            'fd-avatar--tile': tile,
-            'fd-avatar--circle': circle,
-            'fd-avatar--transparent': transparent,
-            'fd-avatar--border': border
+            [`${cssNamespace}-avatar--accent-color-${color}`]: !!color,
+            [`${cssNamespace}-avatar--thumbnail`]: backgroundImageUrl,
+            [`${cssNamespace}-avatar--placeholder`]: placeholder,
+            [`${cssNamespace}-avatar--tile`]: tile,
+            [`${cssNamespace}-avatar--circle`]: circle,
+            [`${cssNamespace}-avatar--transparent`]: transparent,
+            [`${cssNamespace}-avatar--border`]: border
         },
         className
     );
@@ -49,7 +50,7 @@ const Avatar = React.forwardRef(({ glyph, size, circle, transparent, border, col
             ref={ref}
             role={ariaRole}
             style={backgroundImageUrl && styles}>
-            {zoom && <span className={classnames('fd-avatar__zoom-icon', 'sap-icon--edit')} role='presentation' />}
+            {zoom && <span className={classnames(`${cssNamespace}-avatar__zoom-icon`, 'sap-icon--edit')} role='presentation' />}
             {children}
         </span>
     );
@@ -93,4 +94,4 @@ Avatar.propTypes = {
     zoom: PropTypes.bool
 };
 
-export default Avatar;
+export default withStyles(Avatar);
diff --git a/src/Avatar/__stories__/Avatar.stories.js b/src/Avatar/__stories__/Avatar.stories.js
@@ -154,3 +154,11 @@ export const accentColors = () => (
             size='m' />
     </div>
 );
+
+export const noStyles = () => (
+    <Avatar
+        cssNamespace='xxx'
+        glyph='cart'
+        size='m' />
+);
+noStyles.parameters = { docs: { disable: true } };
diff --git a/src/Avatar/__stories__/__snapshots__/Avatar.stories.storyshot b/src/Avatar/__stories__/__snapshots__/Avatar.stories.storyshot
@@ -211,6 +211,17 @@ exports[`Storyshots Component API/Avatar Initials 1`] = `
 </div>
 `;
 
+exports[`Storyshots Component API/Avatar No Styles 1`] = `
+<div
+  dir="ltr"
+>
+  <span
+    className="xxx-avatar xxx-avatar--m sap-icon--cart"
+    role="presentation"
+  />
+</div>
+`;
+
 exports[`Storyshots Component API/Avatar Placeholder 1`] = `
 <div
   dir="ltr"