fix: remove disableStyles prop from all components, import css files …

…last (#1102) Breaking Change: removed disableStyles prop from all components
SAP · Jun 22, 2020 · 5482bd6 · 5482bd6
1 parent 26974dd
commit 5482bd6
Show file tree

Hide file tree

Showing 57 changed files with 157 additions and 606 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -157,10 +157,10 @@
           "ignoreCase": true,
           "ignoreMemberSort": false,
           "memberSyntaxSortOrder": [
-            "none",
             "single",
             "multiple",
-            "all"
+            "all",
+            "none"
           ]
         }
       ],

diff --git a/.storybook/custom/components/DocsPage.js b/.storybook/custom/components/DocsPage.js
@@ -55,7 +55,7 @@ const DocsPage = () => {
             expanded
             withToolbar />)}
         <Heading>Properties</Heading>
-        <Props exclude={['disableStyles']} />
+        <Props />
         <Community />
         <Footer />
       </>

diff --git a/src/ActionBar/ActionBar.js b/src/ActionBar/ActionBar.js
@@ -2,7 +2,8 @@ import Button from '../Button/Button';
 import classnames from 'classnames';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React from 'react';
+import 'fundamental-styles/dist/action-bar.css';
 
 /**
  * The **Action Bar** is located at the top of the page and is used for page title
@@ -18,7 +19,6 @@ const ActionBar = React.forwardRef(({
     buttonProps,
     description,
     descriptionProps,
-    disableStyles,
     headingLevel,
     title,
     titleProps,
@@ -31,12 +31,6 @@ const ActionBar = React.forwardRef(({
         className
     );
 
-    useEffect(() => {
-        if (!disableStyles) {
-            require('fundamental-styles/dist/action-bar.css');
-        }
-    }, []);
-
     const actionBarHeaderClasses = classnames(
         'fd-action-bar__header',
         className
@@ -70,7 +64,6 @@ const ActionBar = React.forwardRef(({
                     <Button
                         {...buttonProps}
                         compact
-                        disableStyles={disableStyles}
                         glyph='navigation-left-arrow'
                         onClick={onBackClick}
                         option='transparent' />
@@ -110,8 +103,6 @@ ActionBar.propTypes = {
     description: PropTypes.string,
     /** Additional props to be spread to the description\'s `<p>` element */
     descriptionProps: PropTypes.object,
-    /** Internal use only */
-    disableStyles: PropTypes.bool,
     /** Heading level. `<h1>` is reserved for the page title */
     headingLevel: CustomPropTypes.range(2, 6),
     /**Additional props to be spread to the title\'s heading element */

diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js
@@ -2,19 +2,13 @@ import { AVATAR_SIZES } from '../utils/constants';
 import classnames from 'classnames';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React from 'react';
+import 'fundamental-styles/dist/icon.css';
+import 'fundamental-styles/dist/avatar.css';
 
 /** 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, disableStyles, role, placeholder, tile, zoom, ...props }, ref) => {
-
-    useEffect(() => {
-        if (!disableStyles) {
-            require('fundamental-styles/dist/icon.css');
-            require('fundamental-styles/dist/helpers.css');
-            require('fundamental-styles/dist/avatar.css');
-        }
-    }, []);
+const Avatar = React.forwardRef(({ glyph, size, circle, transparent, border, color, label, backgroundImageUrl, children, className, role, placeholder, tile, zoom, ...props }, ref) => {
 
     const styles = {
         backgroundImage: `url(${backgroundImageUrl})`
@@ -71,8 +65,6 @@ Avatar.propTypes = {
     className: PropTypes.string,
     /** Applies a background color */
     color: CustomPropTypes.range(1, 9),
-    /** Internal use only */
-    disableStyles: PropTypes.bool,
     /** The icon to include. See the icon page for the list of icons */
     glyph: PropTypes.string,
     /** Localized text for label */

diff --git a/src/Breadcrumb/Breadcrumb.js b/src/Breadcrumb/Breadcrumb.js
@@ -1,31 +1,23 @@
 import BreadcrumbItem from './_BreadcrumbItem';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React from 'react';
+import 'fundamental-styles/dist/breadcrumb.css';
 
 /** A **Breadcrumb** allows users to see the current page and navigation path to that page.
  * Users can navigate to previous levels in the path. When clicking on the current page,
  * a dropdown allows users to access other pages at that same level. */
 
-const Breadcrumb = React.forwardRef(({ children, disableStyles, ...props }, ref) => {
-
-    useEffect(() => {
-        if (!disableStyles) {
-            require('fundamental-styles/dist/breadcrumb.css');
-        }
-    }, []);
-
-    return (<ul {...props}
+const Breadcrumb = React.forwardRef(({ children, ...props }, ref) => (
+    <ul {...props}
         className='fd-breadcrumb'
-        ref={ref}>{children}</ul>);
-});
+        ref={ref}>{children}</ul>)
+);
 
 Breadcrumb.displayName = 'Breadcrumb';
 
 Breadcrumb.propTypes = {
     /** List item (`Breadcrumb.Item`) nodes or React Router Link components */
-    children: PropTypes.node,
-    /** Internal use only */
-    disableStyles: PropTypes.bool
+    children: PropTypes.node
 };
 
 Breadcrumb.Item = BreadcrumbItem;

diff --git a/src/BusyIndicator/BusyIndicator.js b/src/BusyIndicator/BusyIndicator.js
@@ -2,25 +2,18 @@ import { BUSY_INDICATOR_SIZES } from '../utils/constants';
 import classnames from 'classnames';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React from 'react';
+import 'fundamental-styles/dist/busy-indicator.css';
 
 /** A **Busy Indicator** informs the user of an ongoing operation. */
 const BusyIndicator = React.forwardRef(({
     className,
     show,
     size,
-    disableStyles,
     localizedText,
     ...props
 }, ref) => {
 
-    useEffect(() => {
-        if (!disableStyles) {
-            require('fundamental-styles/dist/icon.css');
-            require('fundamental-styles/dist/busy-indicator.css');
-        }
-    }, []);
-
     const busyIndicatorClasses = classnames(
         {
             [`fd-busy-indicator--${size}`]: size === 'm' || size === 'l',
@@ -51,8 +44,6 @@ BusyIndicator.displayName = 'BusyIndicator';
 BusyIndicator.propTypes = {
     /** CSS class(es) to add to the element */
     className: PropTypes.string,
-    /** Internal use only */
-    disableStyles: PropTypes.bool,
     /** Localized text to be updated based on location/language */
     localizedText: CustomPropTypes.i18n({
         /** aria-label for Busy Indicator component */

diff --git a/src/Button/Button.js b/src/Button/Button.js
@@ -1,7 +1,9 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { BUTTON_OPTIONS, BUTTON_TYPES } from '../utils/constants';
-import React, { useEffect } from 'react';
+import 'fundamental-styles/dist/icon.css';
+import 'fundamental-styles/dist/button.css';
 
 /** A **Button** allows users to perform an action. The priority of buttons within a page should be considered.
 For instance, only use the main button once within a page or dialog. Color is also important. For
@@ -12,7 +14,6 @@ const Button = React.forwardRef(({
     option,
     type,
     compact,
-    disableStyles,
     glyph,
     selected,
     disabled,
@@ -23,13 +24,6 @@ const Button = React.forwardRef(({
     ...props
 }, ref) => {
 
-    useEffect(() => {
-        if (!disableStyles) {
-            require('fundamental-styles/dist/icon.css');
-            require('fundamental-styles/dist/button.css');
-        }
-    }, []);
-
     const buttonClasses = classnames(
         'fd-button',
         {
@@ -63,8 +57,6 @@ Button.propTypes = {
     compact: PropTypes.bool,
     /** Set to **true** to mark component as disabled and make it non-interactive */
     disabled: PropTypes.bool,
-    /** Internal use only */
-    disableStyles: PropTypes.bool,
     /** The icon to include. See the icon page for the list of icons */
     glyph: PropTypes.string,
     /** Indicates the importance of the button: 'empahsized' or 'transparent' */

diff --git a/src/Button/ButtonSegmented.js b/src/Button/ButtonSegmented.js
@@ -1,37 +1,27 @@
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React from 'react';
+import 'fundamental-styles/dist/segmented-button.css';
 
 /** Group a series of buttons together on a single line with the segmented button.
  * Only one of the options can be active at a time, the others remain or become inactive.
  * The option can be activated by clicking on it.
  * This type of button is comparable to a radio button group. */
-const ButtonSegmented = React.forwardRef(({ children, disableStyles, ...props }, ref) => {
-
-    useEffect(() => {
-        if (!disableStyles) {
-            require('fundamental-styles/dist/segmented-button.css');
-        }
-    }, []);
-
-    return (
-        <div
-            {...props}
-            aria-label='Group label'
-            className='fd-segmented-button'
-            ref={ref}
-            role='group'>
-            {children}
-        </div>
-    );
-});
+const ButtonSegmented = React.forwardRef(({ children, ...props }, ref) => (
+    <div
+        {...props}
+        aria-label='Group label'
+        className='fd-segmented-button'
+        ref={ref}
+        role='group'>
+        {children}
+    </div>)
+);
 
 ButtonSegmented.displayName = 'ButtonSegmented';
 
 ButtonSegmented.propTypes = {
     /** Node(s) to render within the component */
-    children: PropTypes.node,
-    /** Internal use only */
-    disableStyles: PropTypes.bool
+    children: PropTypes.node
 };
 
 export default ButtonSegmented;
diff --git a/src/Calendar/Calendar.js b/src/Calendar/Calendar.js
@@ -7,6 +7,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import { isDateBetween, isEnabledDate } from '../utils/dateUtils';
 import React, { Component } from 'react';
+import 'fundamental-styles/dist/calendar.css';
 
 /** A **Calendar** is commonly used as the contents of a **Popover** when composing a **DatePicker**.
 It is rarely used on its own as a standalone component. */
@@ -48,9 +49,6 @@ class Calendar extends Component {
     }
 
     componentDidMount = () => {
-        if (!this.props.disableStyles) {
-            require('fundamental-styles/dist/calendar.css');
-        }
         this.gridManager = new GridManager(this.getGridOptions());
     }
 
@@ -464,15 +462,13 @@ class Calendar extends Component {
                         <Button
                             aria-label={previousButtonLabel}
                             compact
-                            disableStyles={this.props.disableStyles}
                             glyph='slim-arrow-left'
                             onClick={this.handlePrevious}
                             option='transparent' />
                     </div>
                     <div className='fd-calendar__action'>
                         <Button
                             compact
-                            disableStyles={this.props.disableStyles}
                             onClick={this.showMonths}
                             option='transparent'>
                             <span>
@@ -483,7 +479,6 @@ class Calendar extends Component {
                     <div className='fd-calendar__action'>
                         <Button
                             compact
-                            disableStyles={this.props.disableStyles}
                             onClick={this.showYears}
                             option='transparent'>
                             <span>
@@ -496,7 +491,6 @@ class Calendar extends Component {
                         <Button
                             aria-label={nextButtonLabel}
                             compact
-                            disableStyles={this.props.disableStyles}
                             glyph='slim-arrow-right'
                             onClick={this.handleNext}
                             option='transparent' />
@@ -505,7 +499,6 @@ class Calendar extends Component {
                         <div className='fd-calendar__action'>
                             <Button
                                 compact
-                                disableStyles={this.props.disableStyles}
                                 onClick={this.handleToday}
                                 option={'transparent'}>
                                 {this.props.localizedText.todayLabel}
@@ -660,7 +653,6 @@ class Calendar extends Component {
     render() {
         const {
             enableRangeSelection,
-            disableStyles,
             disableWeekends,
             disableBeforeDate,
             disableAfterDate,
@@ -730,8 +722,6 @@ Calendar.propTypes = {
     disableFutureDates: PropTypes.bool,
     /** Set to **true** to disable dates before today\'s date */
     disablePastDates: PropTypes.bool,
-    /** Internal use only */
-    disableStyles: PropTypes.bool,
     /** Disables dates that match a weekday */
     disableWeekday: PropTypes.arrayOf(PropTypes.string),
     /** Set to **true** to disables dates that match a weekend */