From 2e8d27404781145fc63acdbce7b20838e57dd22b Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Fri, 28 Dec 2018 15:28:56 -0500
Subject: [PATCH 01/10] Issue#93: adds className and spread props for Button
 and ActionBar

---
 src/ActionBar/ActionBar.Component.js |  6 ++---
 src/ActionBar/ActionBar.js           | 30 +++++++++++-----------
 src/Button/Button.Component.js       | 14 +++++------
 src/Button/Button.js                 | 37 ++++++++++++++--------------
 4 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/src/ActionBar/ActionBar.Component.js b/src/ActionBar/ActionBar.Component.js
index dc81d87d5..5a4b2ac75 100644
--- a/src/ActionBar/ActionBar.Component.js
+++ b/src/ActionBar/ActionBar.Component.js
@@ -4,7 +4,7 @@ import { DocsTile, DocsText, Separator, Header, Description, Import, Properties
 
 export const ActionBarComponent = () => {
     const actionBarBackBtnCode = `<ActionBar>
-    <ActionBarBack onclick={clickBackBtn}/>
+    <ActionBarBack onClick={clickBackBtn}/>
     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
     <ActionBarActions>
         <Button>Button</Button>
@@ -115,7 +115,7 @@ const clickBackBtn = () => {
                         description: 'string - Action bar description. Specified in ActionBarHeader.'
                     },
                     {
-                        name: 'onclick',
+                        name: 'onClick',
                         description: 'func - The function that is executed when the back button is clicked.'
                     }
                 ]} />
@@ -125,7 +125,7 @@ const clickBackBtn = () => {
             <h2>Action bar with back button, description and action buttons.</h2>
             <DocsTile>
                 <ActionBar>
-                    <ActionBarBack onclick={clickBackBtn} />
+                    <ActionBarBack onClick={clickBackBtn} />
                     <ActionBarHeader title={'Page Title'} description={'Action Bar Description'} />
                     <ActionBarActions>
                         <Button>Button</Button>
diff --git a/src/ActionBar/ActionBar.js b/src/ActionBar/ActionBar.js
index d8d405646..578324c04 100644
--- a/src/ActionBar/ActionBar.js
+++ b/src/ActionBar/ActionBar.js
@@ -1,44 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const ActionBar = props => {
-    const { mobile, width, children } = props;
+export const ActionBar = ({ mobile, width, children, className, ...props }) => {
 
     return (
         <React.Fragment>
             {mobile ? (
                 <div style={{ width: width ? width : '319px' }}>
-                    <div className='fd-action-bar'>{children}</div>
+                    <div className={`fd-action-bar ${className ? className : ''}`} {...props}>{children}</div>
                 </div>
             ) : (
-                <div className='fd-action-bar'>{children}</div>
+                <div className={`fd-action-bar ${className ? className : ''}`} {...props}>{children}</div>
             )}
         </React.Fragment>
     );
 };
 
 ActionBar.propTypes = {
+    className: PropTypes.string,
     mobile: PropTypes.bool,
     width: PropTypes.string
 };
 
-export const ActionBarBack = props => {
-    const { onclick } = props;
+export const ActionBarBack = ({ onClick, className, ...props }) => {
+
     return (
-        <div className='fd-action-bar__back'>
-            <button className='fd-button--light fd-button--compact sap-icon--nav-back' onClick={onclick} />
+        <div className={`fd-action-bar__back ${className ? className : ''}`} {...props}>
+            <button className='fd-button--light fd-button--compact sap-icon--nav-back' onClick={onClick} />
         </div>
     );
 };
 
 ActionBarBack.propTypes = {
-    onclick: PropTypes.func
+    className: PropTypes.string,
+    onClick: PropTypes.func
 };
 
-export const ActionBarHeader = props => {
-    const { title, description } = props;
+export const ActionBarHeader = ({ title, description, className, ...props }) => {
     return (
-        <div className='fd-action-bar__header'>
+        <div className={`fd-action-bar__header ${className ? className : ''}`} {...props}>
             <h1 className='fd-action-bar__title'>{title}</h1>
             <p className='fd-action-bar__description'>{description} </p>
         </div>
@@ -46,11 +46,11 @@ export const ActionBarHeader = props => {
 };
 
 ActionBarHeader.propTypes = {
+    className: PropTypes.string,
     description: PropTypes.string,
     title: PropTypes.string
 };
 
-export const ActionBarActions = props => {
-    const { children } = props;
-    return <div className='fd-action-bar__actions'>{children}</div>;
+export const ActionBarActions = ({ children, className, ...props }) => {
+    return <div className={`fd-action-bar__actions ${className ? className : ''}`} {...props}>{children}</div>;
 };
diff --git a/src/Button/Button.Component.js b/src/Button/Button.Component.js
index ec0354cdd..02208e24f 100644
--- a/src/Button/Button.Component.js
+++ b/src/Button/Button.Component.js
@@ -3,11 +3,11 @@ import { Button, ButtonGroup } from '../';
 import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
 
 export const ButtonComponent = () => {
-    const buttonOptionsCode = `<Button option="emphasized" onclick={() => clickBtnHandler('Emphasized')}>
+    const buttonOptionsCode = `<Button option="emphasized" onClick={() => clickBtnHandler('Emphasized')}>
     Emphasized Button
 </Button>
-<Button onclick={() => clickBtnHandler('Regular')}>Regular Button</Button>
-<Button option="light" onclick={() => clickBtnHandler('Light')}>Light Button</Button>
+<Button onClick={() => clickBtnHandler('Regular')}>Regular Button</Button>
+<Button option="light" onClick={() => clickBtnHandler('Light')}>Light Button</Button>
 
 const clickBtnHandler = btn => {
     alert(\`You clicked the \${btn} Button\`);
@@ -155,7 +155,7 @@ const clickBtnHandler = btn => {
                         description:
                             'bool - selected state of the button. Enabled by setting selected property to true.'
                     },
-                    { name: 'onclick', description: 'func - The function that is executed when the button is clicked.' }
+                    { name: 'onClick', description: 'func - The function that is executed when the button is clicked.' }
                 ]} />
             <Separator />
 
@@ -171,11 +171,11 @@ const clickBtnHandler = btn => {
             </Description>
             <DocsTile centered>
                 <div className='fd-doc__margin--button'>
-                    <Button option='emphasized' onclick={() => clickBtnHandler('Emphasized')}>
+                    <Button option='emphasized' onClick={() => clickBtnHandler('Emphasized')}>
                         Emphasized Button
                     </Button>
-                    <Button onclick={() => clickBtnHandler('Regular')}>Regular Button</Button>
-                    <Button option='light' onclick={() => clickBtnHandler('Light')}>Light Button</Button>
+                    <Button onClick={() => clickBtnHandler('Regular')}>Regular Button</Button>
+                    <Button option='light' onClick={() => clickBtnHandler('Light')}>Light Button</Button>
                 </div>
             </DocsTile>
             <DocsText>{buttonOptionsCode}</DocsText>
diff --git a/src/Button/Button.js b/src/Button/Button.js
index a50d2c93f..4015dd643 100644
--- a/src/Button/Button.js
+++ b/src/Button/Button.js
@@ -1,20 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Button = props => {
-  const {
-    option,
-    type,
-    compact,
-    glyph,
-    dropdown,
-    navbar,
-    selected,
-    disabled,
-    typeAttr,
-    onclick,
-    children
-  } = props;
+export const Button = ({
+  option,
+  type,
+  compact,
+  glyph,
+  dropdown,
+  navbar,
+  selected,
+  disabled,
+  typeAttr,
+  onClick,
+  children,
+  className,
+  ...props
+}) => {
   return (
       <button
           className={`${option ? 'fd-button--' + option : ' fd-button'}${
@@ -23,11 +24,11 @@ export const Button = props => {
         compact ? ' fd-button--compact' : ''
       }${glyph ? ' sap-icon--' + glyph : ''}${
         navbar ? ' fd-global-nav__btn' : ''
-      }${selected ? ' is-selected' : ''}${disabled ? ' is-disabled' : ''}`}
+      }${selected ? ' is-selected' : ''}${disabled ? ' is-disabled' : ''}${className ? ' ' + className : ''}`} {...props}
           selected={selected ? selected : false}
           disabled={disabled ? disabled : false}
           type={typeAttr}
-          onClick={onclick}>
+          onClick={onClick}>
           {children}
       </button>
   );
@@ -39,11 +40,11 @@ Button.propTypes = {
   dropdown: PropTypes.bool,
   glyph: PropTypes.string,
   navbar: PropTypes.bool,
-  onclick: PropTypes.func,
   option: PropTypes.oneOf(['', 'emphasized', 'light', 'shell']),
   selected: PropTypes.bool,
   type: PropTypes.oneOf(['', 'standard', 'positive', 'negative', 'medium']),
-  typeAttr: PropTypes.string
+  typeAttr: PropTypes.string,
+  onClick: PropTypes.func
 };
 
 export const ButtonGroup = props => {

From f351c572e52c4f8ac8eaa26d01953df1d0377159 Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Fri, 28 Dec 2018 15:49:02 -0500
Subject: [PATCH 02/10] Issue#93: adds className and spread props for Alert and
 Status Indicators

---
 src/Alert/Alert.js |  7 ++++---
 src/Badge/Badge.js | 25 +++++++++++++------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js
index 308af265e..f88a40f21 100644
--- a/src/Alert/Alert.js
+++ b/src/Alert/Alert.js
@@ -16,16 +16,16 @@ export class Alert extends Component {
     }
 
     render() {
-        const { type, link, linkText, dismissable, children } = this.props;
+        const { type, link, linkText, dismissable, children, className, ...props } = this.props;
         return (
             <div>
                 {this.state.isActive && (
                     <div
                         className={`fd-alert${dismissable ? ' fd-alert--dismissible' : ''}${
                             type ? ' fd-alert--' + type : ''
-                        }`}
+                        }${className ? ' ' + className : ''}`}
                         role='alert'
-                        id='j2ALl423'>
+                        {...props}>
                         {dismissable ? (
                             <button
                                 className='fd-alert__close'
@@ -49,6 +49,7 @@ export class Alert extends Component {
 }
 
 Alert.propTypes = {
+    className: PropTypes.string,
     dismissable: PropTypes.bool,
     link: PropTypes.string,
     linkText: PropTypes.string,
diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js
index bdb9a4086..172f2658a 100644
--- a/src/Badge/Badge.js
+++ b/src/Badge/Badge.js
@@ -1,52 +1,53 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Badge = props => {
-    const { type, modifier, children } = props;
+export const Badge = ({ type, modifier, children, className, ...props }) => {
     return (
-        <span className={`fd-badge${type ? ' fd-badge--' + type : ''}${modifier ? ' fd-badge--' + modifier : ''}`}>
+        <span className={`fd-badge${type ? ' fd-badge--' + type : ''}${modifier ? ' fd-badge--' + modifier : ''}${className ? ' ' + className : ''}`} {...props}>
             {children}
         </span>
     );
 };
 
 Badge.propTypes = {
+    className: PropTypes.string,
     modifier: PropTypes.oneOf(['', 'pill', 'filled']),
     type: PropTypes.oneOf(['', 'success', 'warning', 'error'])
 };
 
-export const Label = props => {
-    const { type, children } = props;
-    return <span className={`fd-label${type ? ' fd-label--' + type : ''}`}>{children}</span>;
+export const Label = ({ type, children, className, ...props }) => {
+    return <span className={`fd-label${type ? ' fd-label--' + type : ''}${className ? ' ' + className : ''}`} {...props}>{children}</span>;
 };
 
 Label.propTypes = {
+    className: PropTypes.string,
     type: PropTypes.oneOf(['', 'success', 'warning', 'error'])
 };
 
-export const Status = props => {
-    const { type, glyph, children } = props;
+export const Status = ({ type, glyph, children, className, ...props } ) => {
     return (
         <span
-            className={`fd-status-label${type ? ' fd-status-label--' + type : ''}${glyph ? ' sap-icon--' + glyph : ''}`}>
+            className={`fd-status-label${type ? ' fd-status-label--' + type : ''}${glyph ? ' sap-icon--' + glyph : ''}${className ? ' ' + className : ''}`} {...props}>
             {children}
         </span>
     );
 };
 Status.propTypes = {
+    className: PropTypes.string,
     glyph: PropTypes.string,
     type: PropTypes.oneOf(['', 'success', 'warning', 'error', 'available', 'away', 'busy', 'offline'])
 };
 
-export const Counter = props => {
-    const { notification, children } = props;
+export const Counter = ({ notification, children, className, ...props }) => {
     return (
-        <span className={`fd-counter${notification ? ' fd-counter--notification' : ''}`} aria-label='Unread count'>
+        <span className={`fd-counter${notification ? ' fd-counter--notification' : ''}${className ? ' ' + className : ''}`} aria-label='Unread count'
+            {...props}>
             {children}
         </span>
     );
 };
 
 Counter.propTypes = {
+    className: PropTypes.string,
     notification: PropTypes.bool
 };

From 467c68d6f6e0b3aa85bcac3ecf71874cc33a7251 Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Fri, 28 Dec 2018 16:07:47 -0500
Subject: [PATCH 03/10] Issue#93: adds className and spread props for
 Breadcrumb and Calendar

---
 src/Breadcrumb/Breadcrumb.js | 30 +++++++-----------------------
 src/Calendar/Calendar.js     |  3 ++-
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/src/Breadcrumb/Breadcrumb.js b/src/Breadcrumb/Breadcrumb.js
index 2fcbe2f9d..e9c3af391 100644
--- a/src/Breadcrumb/Breadcrumb.js
+++ b/src/Breadcrumb/Breadcrumb.js
@@ -7,30 +7,14 @@ export const Breadcrumb = props => {
     return <ul className='fd-breadcrumb'>{children}</ul>;
 };
 
-export const BreadcrumbItem = props => {
-    const { url, link, name } = props;
+export const BreadcrumbItem = ({ url, link, name, className, ...props }) => {
     return (
-        <React.Fragment>
-            {link ? (
-                <BrowserRouter>
-                    <li className='fd-breadcrumb__item'>
-                        <Link className='fd-breadcrumb__link' to={{ pathname: link }}>
-                            {name}
-                        </Link>
-                    </li>
-                </BrowserRouter>
-            ) : null}
-
-            {url ? (
-                <BrowserRouter>
-                    <li className='fd-breadcrumb__item'>
-                        <a className='fd-breadcrumb__link' href={url}>
-                            {name}
-                        </a>
-                    </li>
-                </BrowserRouter>
-            ) : null}
-        </React.Fragment>
+        <BrowserRouter>
+            <li className={`fd-breadcrumb__item${className ? ' ' + className : ''}`} {...props}>
+                {link && <Link className='fd-breadcrumb__link' to={{ pathname: link }}>{name}</Link>}
+                {url && <a className='fd-breadcrumb__link' href={url}>{name}</a>}
+            </li>
+        </BrowserRouter>
     );
 };
 
diff --git a/src/Calendar/Calendar.js b/src/Calendar/Calendar.js
index 3c0ef3f9a..e58064fe5 100644
--- a/src/Calendar/Calendar.js
+++ b/src/Calendar/Calendar.js
@@ -510,8 +510,9 @@ export class Calendar extends Component {
 
 
       render() {
+        const { className, ...props } = this.props;
         return (
-            <div className='fd-calendar'>
+            <div className={`fd-calendar ${className ? className : ''}`} {...props}>
                 {this.generateNavigation()}
                 <div className='fd-calendar__content'>
                     {

From 723423d95ec6e1d230204ab055379d68c1b9fb5b Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Fri, 28 Dec 2018 16:24:37 -0500
Subject: [PATCH 04/10] Issue#93: fix broken tests

---
 src/ActionBar/ActionBar.js                           | 10 +++++-----
 src/Alert/__snapshots__/Alert.test.js.snap           |  3 ---
 src/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap |  6 ++++++
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/ActionBar/ActionBar.js b/src/ActionBar/ActionBar.js
index 578324c04..f0ed5c777 100644
--- a/src/ActionBar/ActionBar.js
+++ b/src/ActionBar/ActionBar.js
@@ -7,10 +7,10 @@ export const ActionBar = ({ mobile, width, children, className, ...props }) => {
         <React.Fragment>
             {mobile ? (
                 <div style={{ width: width ? width : '319px' }}>
-                    <div className={`fd-action-bar ${className ? className : ''}`} {...props}>{children}</div>
+                    <div className={`fd-action-bar${className ? ' ' + className : ''}`} {...props}>{children}</div>
                 </div>
             ) : (
-                <div className={`fd-action-bar ${className ? className : ''}`} {...props}>{children}</div>
+                <div className={`fd-action-bar${className ? ' ' + className : ''}`} {...props}>{children}</div>
             )}
         </React.Fragment>
     );
@@ -25,7 +25,7 @@ ActionBar.propTypes = {
 export const ActionBarBack = ({ onClick, className, ...props }) => {
 
     return (
-        <div className={`fd-action-bar__back ${className ? className : ''}`} {...props}>
+        <div className={`fd-action-bar__back${className ? ' ' + className : ''}`} {...props}>
             <button className='fd-button--light fd-button--compact sap-icon--nav-back' onClick={onClick} />
         </div>
     );
@@ -38,7 +38,7 @@ ActionBarBack.propTypes = {
 
 export const ActionBarHeader = ({ title, description, className, ...props }) => {
     return (
-        <div className={`fd-action-bar__header ${className ? className : ''}`} {...props}>
+        <div className={`fd-action-bar__header${className ? ' ' + className : ''}`} {...props}>
             <h1 className='fd-action-bar__title'>{title}</h1>
             <p className='fd-action-bar__description'>{description} </p>
         </div>
@@ -52,5 +52,5 @@ ActionBarHeader.propTypes = {
 };
 
 export const ActionBarActions = ({ children, className, ...props }) => {
-    return <div className={`fd-action-bar__actions ${className ? className : ''}`} {...props}>{children}</div>;
+    return <div className={`fd-action-bar__actions${className ? ' ' + className : ''}`} {...props}>{children}</div>;
 };
diff --git a/src/Alert/__snapshots__/Alert.test.js.snap b/src/Alert/__snapshots__/Alert.test.js.snap
index e7e94490e..372fdb5a7 100644
--- a/src/Alert/__snapshots__/Alert.test.js.snap
+++ b/src/Alert/__snapshots__/Alert.test.js.snap
@@ -4,7 +4,6 @@ exports[`<Alert /> create basic alert 1`] = `
 <div>
   <div
     className="fd-alert fd-alert--dismissible"
-    id="j2ALl423"
     role="alert"
   >
     <button
@@ -32,7 +31,6 @@ exports[`<Alert /> create basic alert 2`] = `
 <div>
   <div
     className="fd-alert fd-alert--dismissible fd-alert--error"
-    id="j2ALl423"
     role="alert"
   >
     <button
@@ -50,7 +48,6 @@ exports[`<Alert /> create non-dismissable alert 1`] = `
 <div>
   <div
     className="fd-alert"
-    id="j2ALl423"
     role="alert"
   >
     Default alert that cannot be dismissed
diff --git a/src/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap b/src/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap
index b9ff9a693..5dcefbee3 100644
--- a/src/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap
+++ b/src/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap
@@ -4,6 +4,9 @@ exports[`<Breadcrumb /> create breadcrumbs using router links 1`] = `
 <ul
   className="fd-breadcrumb"
 >
+  <li
+    className="fd-breadcrumb__item"
+  />
   <li
     className="fd-breadcrumb__item"
   >
@@ -53,5 +56,8 @@ exports[`<Breadcrumb /> create default breadcrumbs 1`] = `
       Link Text
     </a>
   </li>
+  <li
+    className="fd-breadcrumb__item"
+  />
 </ul>
 `;

From edb633712e1710be4112335e1ba45677cc1653c3 Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Fri, 28 Dec 2018 17:07:39 -0500
Subject: [PATCH 05/10] Issue#93: adds className and spread props Combobox,
 DatePicker and Dropdown

---
 src/Calendar/Calendar.js           |  2 +-
 src/ComboboxInput/ComboboxInput.js |  9 +++------
 src/DatePicker/DatePicker.js       | 24 +++++++++++++-----------
 src/Dropdown/Dropdown.js           |  4 ++--
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/Calendar/Calendar.js b/src/Calendar/Calendar.js
index e58064fe5..71b66f45f 100644
--- a/src/Calendar/Calendar.js
+++ b/src/Calendar/Calendar.js
@@ -512,7 +512,7 @@ export class Calendar extends Component {
       render() {
         const { className, ...props } = this.props;
         return (
-            <div className={`fd-calendar ${className ? className : ''}`} {...props}>
+            <div className={`fd-calendar${className ? ' ' + className : ''}`}>
                 {this.generateNavigation()}
                 <div className='fd-calendar__content'>
                     {
diff --git a/src/ComboboxInput/ComboboxInput.js b/src/ComboboxInput/ComboboxInput.js
index 3f2522dca..96b985acf 100644
--- a/src/ComboboxInput/ComboboxInput.js
+++ b/src/ComboboxInput/ComboboxInput.js
@@ -3,12 +3,10 @@ import PropTypes from 'prop-types';
 import { Popover } from '../Popover/Popover';
 
 // ------------------------------------------- Combobox Input ------------------------------------------
-export const ComboboxInput = props => {
-  const { id, placeholder, menu, compact } = props;
+export const ComboboxInput = ({ placeholder, menu, compact, className, ...props }) => {
   return (
-      <div className='fd-combobox-input'>
+      <div className={`fd-combobox-input${className ? ' ' + className : ''}`} {...props}>
           <Popover
-              id={id}
               noArrow
               control={
                   <div className='fd-combobox-control'>
@@ -34,13 +32,12 @@ export const ComboboxInput = props => {
 
 ComboboxInput.propTypes = {
   menu: PropTypes.object.isRequired,
+  className: PropTypes.string,
   compact: PropTypes.bool,
-  id: PropTypes.string,
   placeholder: PropTypes.string
 };
 
 ComboboxInput.defaultTypes = {
   compact: false,
-  id: '',
   placeholder: ''
 };
diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
index a043131cb..0fa6b8667 100644
--- a/src/DatePicker/DatePicker.js
+++ b/src/DatePicker/DatePicker.js
@@ -371,9 +371,10 @@ export class DatePicker extends Component {
   }
 
   render() {
+    const { enableRangeSelection, disableWeekends, disableBeforeDate, disableAfterDate, disableWeekday, disablePastDates, disableFutureDates, blockedDates, disabledDates, className, ...props } = this.props;
     return (
         <div
-            className='fd-date-picker'
+            className={`fd-date-picker${className ? ' ' + className : ''}`} {...props}
             ref={component => (this.component = component)}>
             <div className='fd-popover'>
                 <div className='fd-popover__control'>
@@ -403,17 +404,17 @@ export class DatePicker extends Component {
                     aria-hidden={this.state.hidden}>
                     <Calendar
                         onChange={this.updateDate}
-                        enableRangeSelection={this.props.enableRangeSelection}
-                        disableWeekends={this.props.disableWeekends}
-                        disableBeforeDate={this.props.disableBeforeDate}
-                        disableAfterDate={this.props.disableAfterDate}
-                        disableWeekday={this.props.disableWeekday}
-                        disablePastDates={this.props.disablePastDates}
-                        disableFutureDates={this.props.disableFutureDates}
-                        blockedDates={this.props.blockedDates}
-                        disabledDates={this.props.disabledDates}
+                        enableRangeSelection={enableRangeSelection}
+                        disableWeekends={disableWeekends}
+                        disableBeforeDate={disableBeforeDate}
+                        disableAfterDate={disableAfterDate}
+                        disableWeekday={disableWeekday}
+                        disablePastDates={disablePastDates}
+                        disableFutureDates={disableFutureDates}
+                        blockedDates={blockedDates}
+                        disabledDates={disabledDates}
                         customDate={
-                this.props.enableRangeSelection
+                enableRangeSelection
                   ? this.state.arrSelectedDates
                   : this.state.selectedDate
               } />
@@ -425,5 +426,6 @@ export class DatePicker extends Component {
 }
 
 DatePicker.propTypes = {
+  compact: PropTypes.bool,
   enableRangeSelection: PropTypes.bool
 };
diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js
index 2604800f0..1fe661248 100644
--- a/src/Dropdown/Dropdown.js
+++ b/src/Dropdown/Dropdown.js
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const Dropdown = props => {
-    const { standard, children } = props;
+    const { standard, children, className } = props;
     return (
-        <div className={`fd-dropdown${standard ? ' fd-dropdown--standard' : ''}`}>
+        <div className={`fd-dropdown${standard ? ' fd-dropdown--standard' : ''}${className ? ' ' + className : ''}`}>
             {children}
         </div>
     );

From f550567705f202d04f2028f3775a7c2d5a9254e1 Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Fri, 28 Dec 2018 17:49:38 -0500
Subject: [PATCH 06/10] Issue#93: adds className and spread props for Forms

---
 src/Forms/Forms.Component.js               | 254 +++++++++++----------
 src/Forms/Forms.js                         |  82 +++----
 src/Forms/__snapshots__/Forms.test.js.snap |  11 +-
 3 files changed, 173 insertions(+), 174 deletions(-)

diff --git a/src/Forms/Forms.Component.js b/src/Forms/Forms.Component.js
index 2ac0555ad..6983d5602 100644
--- a/src/Forms/Forms.Component.js
+++ b/src/Forms/Forms.Component.js
@@ -16,84 +16,90 @@ import { DocsTile, DocsText, Separator, Header, Description, Import, Properties
 export const FormsComponent = () => {
     const inputsCode = `<FormSet>
     <FormItem>
-        <FormLabel forAttr="input-1">Default Input</FormLabel>
-        <FormInput type="text" id="input-1" placeholder="Field placeholder text" />
+        <FormLabel htmlFor='input-1'>Default Input</FormLabel>
+        <FormInput type='text' id='input-1'
+            placeholder='Field placeholder text' />
     </FormItem>
 </FormSet>
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="input-2" required={true}>
+        <FormLabel htmlFor='input-2' required>
             Required Input
         </FormLabel>
-        <FormInput type="text" id="input-2" placeholder="Field placeholder text" />
+        <FormInput type='text' id='input-2'
+            placeholder='Field placeholder text' />
     </FormItem>
 </FormSet>
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="input-3" required={true}>
+        <FormLabel htmlFor='input-3' required>
             Password
         </FormLabel>
-        <FormInput type="password" id="input-3" placeholder="Field placeholder text" />
+        <FormInput type='password' id='input-3'
+            placeholder='Field placeholder text' />
     </FormItem>
 </FormSet>
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="textarea-1" required={true}>
+        <FormLabel htmlFor='textarea-1' required>
             Text area
         </FormLabel>
-        <FormTextarea id="textarea-1">
-            Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.
-        </FormTextarea>
+        <FormTextarea id='textarea-1' defaultValue=' Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.' />
     </FormItem>
-</FormSet>`;
+</FormSet>
+`;
 
     const inputsHelpCode = `<FormSet>
     <FormItem>
-        <FormLabel forAttr="input-4">
+        <FormLabel htmlFor='input-4'>
             Input with inline help
-            <span className="fd-inline-help fd-has-float-right">
-                <span className="fd-inline-help__content fd-inline-help__content--bottom-right">
+            <span className='fd-inline-help fd-has-float-right'>
+                <span className='fd-inline-help__content fd-inline-help__content--bottom-right'>
                     Lorem ipsum dolor sit amet, consectetur adipiscing.
                 </span>
             </span>
         </FormLabel>
-        <FormInput type="text" id="input-4" />
+        <FormInput type='text' id='input-4' />
     </FormItem>
 </FormSet>
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="input-5">Input with Help Message</FormLabel>
-        <FormInput type="text" id="input-5" />
-        <FormMessage type="help">
+        <FormLabel htmlFor='input-5'>Input with Help Message</FormLabel>
+        <FormInput type='text' id='input-5' />
+        <FormMessage type='help'>
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
         </FormMessage>
     </FormItem>
-</FormSet>`;
+</FormSet>
+    `;
 
     const inputsStateCode = `<FormSet>
     <FormItem>
-        <FormLabel forAttr="OatmD552">Normal Input</FormLabel>
-        <FormInput type="text" id="OatmD552" placeholder="Field placeholder text" />
+        <FormLabel htmlFor='OatmD552'>Normal Input</FormLabel>
+        <FormInput type='text' id='OatmD552'
+            placeholder='Field placeholder text' />
         <FormMessage>Pellentesque metus lacus commodo eget justo ut rutrum varius nunc</FormMessage>
     </FormItem>
 </FormSet>
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="OatmD553">Valid Input</FormLabel>
-        <FormInput type="text" state="valid" id="OatmD553" placeholder="Field placeholder text" />
+        <FormLabel htmlFor='OatmD553'>Valid Input</FormLabel>
+        <FormInput type='text' state='valid'
+            id='OatmD553' placeholder='Field placeholder text' />
     </FormItem>
 </FormSet>
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="OatmD554">Invalid Input</FormLabel>
-        <FormInput type="text" state="invalid" id="OatmD554" placeholder="Field placeholder text" />
-        <FormMessage type="error">
+        <FormLabel htmlFor='OatmD554'>Invalid Input</FormLabel>
+        <FormInput type='text' state='invalid'
+            id='OatmD554' placeholder='Field placeholder text' />
+        <FormMessage type='error'>
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
         </FormMessage>
     </FormItem>
@@ -101,9 +107,10 @@ export const FormsComponent = () => {
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="OatmD555">Warning Input</FormLabel>
-        <FormInput type="text" state="warning" id="OatmD555" placeholder="Field placeholder text" />
-        <FormMessage type="warning">
+        <FormLabel htmlFor='OatmD555'>Warning Input</FormLabel>
+        <FormInput type='text' state='warning'
+            id='OatmD555' placeholder='Field placeholder text' />
+        <FormMessage type='warning'>
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
         </FormMessage>
     </FormItem>
@@ -111,9 +118,10 @@ export const FormsComponent = () => {
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="OatmD556">Field Label</FormLabel>
-        <FormInput type="text" state="help" id="OatmD556" placeholder="Field placeholder text" />
-        <FormMessage type="help">
+        <FormLabel htmlFor='OatmD556'>Field Label</FormLabel>
+        <FormInput type='text' state='help'
+            id='OatmD556' placeholder='Field placeholder text' />
+        <FormMessage type='help'>
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
         </FormMessage>
     </FormItem>
@@ -121,51 +129,52 @@ export const FormsComponent = () => {
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="OatmD557">Disabled Input</FormLabel>
+        <FormLabel htmlFor='OatmD557'>Disabled Input</FormLabel>
         <FormInput
-            type="text"
-            state="help"
-            id="OatmD557"
-            placeholder="Field placeholder text"
-            disabled
-        />
+            type='text'
+            state='help'
+            id='OatmD557'
+            placeholder='Field placeholder text'
+            disabled />
     </FormItem>
 </FormSet>
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="OatmD558" labelText="Readonly Input" />
+        <FormLabel htmlFor='OatmD558'>Readonly Input</FormLabel>
         <FormInput
-            type="text"
-            state="help"
-            id="OatmD558"
-            placeholder="Field placeholder text"
-            readonly
-        />
+            type='text'
+            state='help'
+            id='OatmD558'
+            placeholder='Field placeholder text'
+            readOnly />
     </FormItem>
-</FormSet>`;
+</FormSet>
+</DocsTile>
+`;
 
     const inputsSelectCode = `<FormSet>
     <FormItem>
-        <FormLabel forAttr="select-1" labelText="Default Select" />
-        <FormSelect id="select-1">
-            <option value="1">Duis malesuada odio volutpat elementum</option>
-            <option value="2">Suspendisse ante ligula</option>
-            <option value="3">Sed bibendum sapien at posuere interdum</option>
+        <FormLabel htmlFor='select-1'>Default Select</FormLabel>
+        <FormSelect id='select-1'>
+            <option value='1'>Duis malesuada odio volutpat elementum</option>
+            <option value='2'>Suspendisse ante ligula</option>
+            <option value='3'>Sed bibendum sapien at posuere interdum</option>
         </FormSelect>
     </FormItem>
 </FormSet>
 
 <FormSet>
     <FormItem>
-        <FormLabel forAttr="select-1" labelText="Default Select" />
-        <FormSelect id="select-1" disabled>
-            <option value="1">Duis malesuada odio volutpat elementum</option>
-            <option value="2">Suspendisse ante ligula</option>
-            <option value="3">Sed bibendum sapien at posuere interdum</option>
+        <FormLabel htmlFor='select-1'>Default Select</FormLabel>
+        <FormSelect id='select-1' disabled>
+            <option value='1'>Duis malesuada odio volutpat elementum</option>
+            <option value='2'>Suspendisse ante ligula</option>
+            <option value='3'>Sed bibendum sapien at posuere interdum</option>
         </FormSelect>
     </FormItem>
-</FormSet>`;
+</FormSet>
+`;
 
     const inputsRadioCode = `<FormFieldset>
     <FormLegend>Radio buttons</FormLegend>
@@ -175,12 +184,11 @@ export const FormsComponent = () => {
             { id: 'radio-2', name: 'radio-2', value: 'radio-2', label: 'Option 2' },
             { id: 'radio-3', name: 'radio-3', value: 'radio-3', label: 'Option 3' }
         ]}
-        defaultChecked="radio-2"
-    />
+        defaultChecked='radio-2' />
 </FormFieldset>
 
 <FormFieldset>
-    <FormLegend legendText="Radio buttons disabled" />
+    <FormLegend>Radio buttons disabled</FormLegend>
     <FormRadio
         disabled
         inputs={[
@@ -188,60 +196,65 @@ export const FormsComponent = () => {
             { id: 'radio-5', name: 'radio-5', value: 'radio-5', label: 'Option 2' },
             { id: 'radio-6', name: 'radio-6', value: 'radio-6', label: 'Option 3' }
         ]}
-        defaultChecked="radio-4"
-    />
+        defaultChecked='radio-4' />
 </FormFieldset>
 
 <FormFieldset>
-    <FormLegend legendText="Inline Radio buttons" />
+    <FormLegend>Inline Radio buttons</FormLegend>
     <FormRadio
-        isInline={true}
+        isInline
         inputs={[
             { id: 'radio-7', name: 'radio-7', value: 'radio-7', label: 'Option 1' },
             { id: 'radio-8', name: 'radio-8', value: 'radio-8', label: 'Option 2' },
             { id: 'radio-9', name: 'radio-9', value: 'radio-9', label: 'Option 3' }
         ]}
-        defaultChecked="radio-9"
-    />
+        defaultChecked='radio-9' />
 </FormFieldset>`;
 
     const inputsCheckboxCode = `<FormFieldset>
-    <FormLegend legendText="Checkboxes" />
-    <FormItem isCheck={true}>
-        <FormInput type="checkbox" id="checkbox-1" name="checkbox-name-1" value="" />
-        <FormLabel forAttr="checkbox-1">Option One</FormLabel>
+    <FormLegend>Checkboxes</FormLegend>
+    <FormItem isCheck>
+        <FormInput type='checkbox' id='checkbox-1'
+            name='checkbox-name-1' value='' />
+        <FormLabel htmlFor='checkbox-1'>Option One</FormLabel>
     </FormItem>
-    <FormItem isCheck={true}>
-        <FormInput type="checkbox" id="checkbox-2" name="checkbox-name-2" value="" />
-        <FormLabel forAttr="checkbox-2">Option Two</FormLabel>
+    <FormItem isCheck>
+        <FormInput type='checkbox' id='checkbox-2'
+            name='checkbox-name-2' value='' />
+        <FormLabel htmlFor='checkbox-2'>Option Two</FormLabel>
     </FormItem>
-    <FormItem isCheck={true}>
-        <FormInput type="checkbox" id="checkbox-3" name="checkbox-name-3" value="" />
-        <FormLabel forAttr="checkbox-3">Option Three</FormLabel>
+    <FormItem isCheck>
+        <FormInput type='checkbox' id='checkbox-3'
+            name='checkbox-name-3' value='' />
+        <FormLabel htmlFor='checkbox-3'>Option Three</FormLabel>
     </FormItem>
 </FormFieldset>
 
 <FormFieldset>
-    <FormLegend legendText="Inline Checkbox buttons" />
-    <FormItem isCheck={true} isInline={true}>
-        <FormLabel forAttr="checkbox-4">
-            <FormInput type="checkbox" id="checkbox-4" name="checkbox-name-4" value="" />
+    <FormLegend>Inline Checkbox buttons</FormLegend>
+    <FormItem isCheck isInline>
+        <FormLabel htmlFor='checkbox-4'>
+            <FormInput type='checkbox' id='checkbox-4'
+                name='checkbox-name-4' value='' />
             Option One
         </FormLabel>
     </FormItem>
-    <FormItem isCheck={true} isInline={true}>
-        <FormLabel forAttr="checkbox-5">
-            <FormInput type="checkbox" id="checkbox-5" name="checkbox-name-5" value="" />
+    <FormItem isCheck isInline>
+        <FormLabel htmlFor='checkbox-5'>
+            <FormInput type='checkbox' id='checkbox-5'
+                name='checkbox-name-5' value='' />
             Option Two
         </FormLabel>
     </FormItem>
-    <FormItem isCheck={true} isInline={true}>
-        <FormLabel forAttr="checkbox-6">
-            <FormInput type="checkbox" id="checkbox-6" name="checkbox-name-6" value="" />
+    <FormItem isCheck isInline>
+        <FormLabel htmlFor='checkbox-6'>
+            <FormInput type='checkbox' id='checkbox-6'
+                name='checkbox-name-6' value='' />
             Option Three
         </FormLabel>
     </FormItem>
-</FormFieldset>`;
+</FormFieldset>
+`;
 
     return (
         <div>
@@ -283,7 +296,6 @@ export const FormsComponent = () => {
                         description:
                             'bool - used in FormItem. Set to \'true\' to display radio buttons and checkboxes in a row.'
                     },
-                    { name: 'forAttr', description: 'string - input \'for\' attribute. Used in FormLabel.' },
                     {
                         name: 'required',
                         description: 'bool - set to \'true\' for required input fields. Used in FormLabel.'
@@ -293,20 +305,12 @@ export const FormsComponent = () => {
                         description:
                             'string - when used in FormMessage this property sets the type of the message. The options include \'error\', \'warning\', and \'help\'.'
                     },
-                    {
-                        name: 'type',
-                        description:
-                            'string - when used in FormInput this property sets the type of the input. Options include \'text\', \'password\', \'radio\', \'checkbox\', \'button\'.'
-                    },
                     {
                         name: 'state',
                         description:
                             'string - the state of the input. Options include \'normal\', \'valid\', \'invalid\', \'warning\', \'help\', \'disabled\', and \'readonly\'. Leave empty for normal. Used in FormInput.'
                     },
-                    { name: 'id', description: 'string - \'id\' attribute.' },
-                    { name: 'placeholder', description: 'string - input \'placeholder\' attribute.' },
                     { name: 'disabled', description: 'bool - set to \'true\' to disable the element.' },
-                    { name: 'name', description: 'string - the name property of select. Used in FormSelect.' },
                     { name: 'defaultChecked', description: 'string - the id of the element selected by default.' }
                 ]} />
 
@@ -320,7 +324,7 @@ export const FormsComponent = () => {
             <DocsTile>
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='input-1'>Default Input</FormLabel>
+                        <FormLabel htmlFor='input-1'>Default Input</FormLabel>
                         <FormInput type='text' id='input-1'
                             placeholder='Field placeholder text' />
                     </FormItem>
@@ -328,7 +332,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='input-2' required>
+                        <FormLabel htmlFor='input-2' required>
                             Required Input
                         </FormLabel>
                         <FormInput type='text' id='input-2'
@@ -338,7 +342,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='input-3' required>
+                        <FormLabel htmlFor='input-3' required>
                             Password
                         </FormLabel>
                         <FormInput type='password' id='input-3'
@@ -348,12 +352,10 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='textarea-1' required>
+                        <FormLabel htmlFor='textarea-1' required>
                             Text area
                         </FormLabel>
-                        <FormTextarea id='textarea-1'>
-                            Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.
-                        </FormTextarea>
+                        <FormTextarea id='textarea-1' defaultValue=' Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.' />
                     </FormItem>
                 </FormSet>
             </DocsTile>
@@ -372,7 +374,7 @@ export const FormsComponent = () => {
             <DocsTile>
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='input-4'>
+                        <FormLabel htmlFor='input-4'>
                             Input with inline help
                             <span className='fd-inline-help fd-has-float-right'>
                                 <span className='fd-inline-help__content fd-inline-help__content--bottom-right'>
@@ -386,7 +388,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='input-5'>Input with Help Message</FormLabel>
+                        <FormLabel htmlFor='input-5'>Input with Help Message</FormLabel>
                         <FormInput type='text' id='input-5' />
                         <FormMessage type='help'>
                             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
@@ -417,7 +419,7 @@ export const FormsComponent = () => {
             <DocsTile>
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='OatmD552'>Normal Input</FormLabel>
+                        <FormLabel htmlFor='OatmD552'>Normal Input</FormLabel>
                         <FormInput type='text' id='OatmD552'
                             placeholder='Field placeholder text' />
                         <FormMessage>Pellentesque metus lacus commodo eget justo ut rutrum varius nunc</FormMessage>
@@ -426,7 +428,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='OatmD553'>Valid Input</FormLabel>
+                        <FormLabel htmlFor='OatmD553'>Valid Input</FormLabel>
                         <FormInput type='text' state='valid'
                             id='OatmD553' placeholder='Field placeholder text' />
                     </FormItem>
@@ -434,7 +436,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='OatmD554'>Invalid Input</FormLabel>
+                        <FormLabel htmlFor='OatmD554'>Invalid Input</FormLabel>
                         <FormInput type='text' state='invalid'
                             id='OatmD554' placeholder='Field placeholder text' />
                         <FormMessage type='error'>
@@ -445,7 +447,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='OatmD555'>Warning Input</FormLabel>
+                        <FormLabel htmlFor='OatmD555'>Warning Input</FormLabel>
                         <FormInput type='text' state='warning'
                             id='OatmD555' placeholder='Field placeholder text' />
                         <FormMessage type='warning'>
@@ -456,7 +458,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='OatmD556'>Field Label</FormLabel>
+                        <FormLabel htmlFor='OatmD556'>Field Label</FormLabel>
                         <FormInput type='text' state='help'
                             id='OatmD556' placeholder='Field placeholder text' />
                         <FormMessage type='help'>
@@ -467,7 +469,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='OatmD557'>Disabled Input</FormLabel>
+                        <FormLabel htmlFor='OatmD557'>Disabled Input</FormLabel>
                         <FormInput
                             type='text'
                             state='help'
@@ -479,13 +481,13 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='OatmD558' labelText='Readonly Input' />
+                        <FormLabel htmlFor='OatmD558'>Readonly Input</FormLabel>
                         <FormInput
                             type='text'
                             state='help'
                             id='OatmD558'
                             placeholder='Field placeholder text'
-                            readonly />
+                            readOnly />
                     </FormItem>
                 </FormSet>
             </DocsTile>
@@ -501,7 +503,7 @@ export const FormsComponent = () => {
             <DocsTile>
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='select-1' labelText='Default Select' />
+                        <FormLabel htmlFor='select-1'>Default Select</FormLabel>
                         <FormSelect id='select-1'>
                             <option value='1'>Duis malesuada odio volutpat elementum</option>
                             <option value='2'>Suspendisse ante ligula</option>
@@ -512,7 +514,7 @@ export const FormsComponent = () => {
 
                 <FormSet>
                     <FormItem>
-                        <FormLabel forAttr='select-1' labelText='Default Select' />
+                        <FormLabel htmlFor='select-1'>Default Select</FormLabel>
                         <FormSelect id='select-1' disabled>
                             <option value='1'>Duis malesuada odio volutpat elementum</option>
                             <option value='2'>Suspendisse ante ligula</option>
@@ -544,7 +546,7 @@ export const FormsComponent = () => {
                 </FormFieldset>
 
                 <FormFieldset>
-                    <FormLegend legendText='Radio buttons disabled' />
+                    <FormLegend>Radio buttons disabled</FormLegend>
                     <FormRadio
                         disabled
                         inputs={[
@@ -556,7 +558,7 @@ export const FormsComponent = () => {
                 </FormFieldset>
 
                 <FormFieldset>
-                    <FormLegend legendText='Inline Radio buttons' />
+                    <FormLegend>Inline Radio buttons</FormLegend>
                     <FormRadio
                         isInline
                         inputs={[
@@ -579,42 +581,42 @@ export const FormsComponent = () => {
 
             <DocsTile>
                 <FormFieldset>
-                    <FormLegend legendText='Checkboxes' />
+                    <FormLegend>Checkboxes</FormLegend>
                     <FormItem isCheck>
                         <FormInput type='checkbox' id='checkbox-1'
                             name='checkbox-name-1' value='' />
-                        <FormLabel forAttr='checkbox-1'>Option One</FormLabel>
+                        <FormLabel htmlFor='checkbox-1'>Option One</FormLabel>
                     </FormItem>
                     <FormItem isCheck>
                         <FormInput type='checkbox' id='checkbox-2'
                             name='checkbox-name-2' value='' />
-                        <FormLabel forAttr='checkbox-2'>Option Two</FormLabel>
+                        <FormLabel htmlFor='checkbox-2'>Option Two</FormLabel>
                     </FormItem>
                     <FormItem isCheck>
                         <FormInput type='checkbox' id='checkbox-3'
                             name='checkbox-name-3' value='' />
-                        <FormLabel forAttr='checkbox-3'>Option Three</FormLabel>
+                        <FormLabel htmlFor='checkbox-3'>Option Three</FormLabel>
                     </FormItem>
                 </FormFieldset>
 
                 <FormFieldset>
-                    <FormLegend legendText='Inline Checkbox buttons' />
+                    <FormLegend>Inline Checkbox buttons</FormLegend>
                     <FormItem isCheck isInline>
-                        <FormLabel forAttr='checkbox-4'>
+                        <FormLabel htmlFor='checkbox-4'>
                             <FormInput type='checkbox' id='checkbox-4'
                                 name='checkbox-name-4' value='' />
                             Option One
                         </FormLabel>
                     </FormItem>
                     <FormItem isCheck isInline>
-                        <FormLabel forAttr='checkbox-5'>
+                        <FormLabel htmlFor='checkbox-5'>
                             <FormInput type='checkbox' id='checkbox-5'
                                 name='checkbox-name-5' value='' />
                             Option Two
                         </FormLabel>
                     </FormItem>
                     <FormItem isCheck isInline>
-                        <FormLabel forAttr='checkbox-6'>
+                        <FormLabel htmlFor='checkbox-6'>
                             <FormInput type='checkbox' id='checkbox-6'
                                 name='checkbox-name-6' value='' />
                             Option Three
diff --git a/src/Forms/Forms.js b/src/Forms/Forms.js
index 6cc34469d..bcf527703 100644
--- a/src/Forms/Forms.js
+++ b/src/Forms/Forms.js
@@ -2,113 +2,105 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 // ------------------------------------------------- Form Set -----------------------------------------------
-export const FormSet = props => {
-    const { children } = props;
-    return <div className='fd-form__set'>{children}</div>;
+export const FormSet = ({ children, className }) => {
+    return <div className={`fd-form__set${className ? ' ' + className : ''}`}>{children}</div>;
+};
+FormSet.propTypes = {
+    className: PropTypes.string
 };
 
 // ------------------------------------------------- Form Item -----------------------------------------------
-export const FormItem = props => {
-    const { isCheck, isInline, children } = props;
+export const FormItem = ({ isCheck, isInline, children, className }) => {
     return (
         <div
             className={`fd-form__item${isInline ? ' fd-form__item--inline' : ''}${
                 isCheck ? ' fd-form__item--check' : ''
-            }`}>
+            }${className ? ' ' + className : ''}`}>
             {children}
         </div>
     );
 };
-
 FormItem.propTypes = {
+    className: PropTypes.string,
     isCheck: PropTypes.bool,
     isInline: PropTypes.bool
 };
 
 // ------------------------------------------------- Form Label ----------------------------------------------
-export const FormLabel = props => {
-    const { required, forAttr, children } = props;
+export const FormLabel = ({ required, children, className, ...props }) => {
     return (
-        <label className={`fd-form__label${required ? ' is-required' : ''}`} htmlFor={forAttr}>
+        <label className={`fd-form__label${required ? ' is-required' : ''}${className ? ' ' + className : ''}`} {...props}>
             {children}
         </label>
     );
 };
-
 FormLabel.propTypes = {
-    forAttr: PropTypes.string,
+    className: PropTypes.string,
     required: PropTypes.bool
 };
 
 // ------------------------------------------------- Form Message ----------------------------------------------
-export const FormMessage = props => {
-    const { type, children } = props;
-    return <span className={`fd-form__message${type ? '  fd-form__message--' + type : ''}`}>{children}</span>;
+export const FormMessage = ({ type, children, className, ...props }) => {
+    return <span className={`fd-form__message${type ? '  fd-form__message--' + type : ''}${className ? ' ' + className : ''}`} {...props}>{children}</span>;
 };
-
 FormMessage.propTypes = {
+    className: PropTypes.string,
     type: PropTypes.oneOf(['', 'error', 'warning', 'help'])
 };
 
 // ------------------------------------------------- Form Input ----------------------------------------------
-export const FormInput = props => {
-    const { type, state, id, placeholder } = props;
+export const FormInput = ({ state, className, ...props }) => {
     return (
         <input
-            className={`fd-form__control${state ? ' is-' + state : ''}`}
-            type={type}
-            id={id}
-            placeholder={placeholder} />
+            className={`fd-form__control${state ? ' is-' + state : ''}${className ? ' ' + className : ''}`}
+            {...props} />
     );
 };
-
 FormInput.propTypes = {
-    id: PropTypes.string,
-    placeholder: PropTypes.string,
-    state: PropTypes.string,
-    type: PropTypes.string
+    className: PropTypes.string,
+    state: PropTypes.string
 };
 
 // ------------------------------------------------- Form Textarea ----------------------------------------------
-export const FormTextarea = props => {
-    const { id, children } = props;
+export const FormTextarea = ({ children, className, ...props }) => {
     return (
-        <textarea className='fd-form__control' id={id}>
+        <textarea className={`fd-form__control${className ? ' ' + className : ''}`} {...props}>
             {children}
         </textarea>
     );
 };
-
 FormTextarea.propTypes = {
-    id: PropTypes.string
+    className: PropTypes.string
 };
 
 // ------------------------------------------------- Form Fieldset ----------------------------------------------
-export const FormFieldset = props => {
-    const { children } = props;
-    return <fieldset className='fd-form__set'>{children}</fieldset>;
+export const FormFieldset = ({ children, className, ...props }) => {
+    return <fieldset className={`fd-form__set${className ? ' ' + className : ''}`} {...props}>{children}</fieldset>;
+};
+FormFieldset.propTypes = {
+    className: PropTypes.string
 };
 
 // ------------------------------------------------- Form Legend ----------------------------------------------
-export const FormLegend = props => {
-    const { children } = props;
-    return <legend className='fd-form__legend'>{children}</legend>;
+export const FormLegend = ({ children, className, ...props }) => {
+    return <legend className={`fd-form__legend${className ? ' ' + className : ''}`} {...props}>{children}</legend>;
+};
+FormLegend.propTypes = {
+    className: PropTypes.string
 };
 
 // ------------------------------------------------- Form Select ----------------------------------------------
-export const FormSelect = props => {
-    const { id, name, disabled, children } = props;
+export const FormSelect = ({ disabled, children, className, ...props }) => {
     return (
-        <select className='fd-form__control' id={id}
-            name={name} disabled={disabled ? true : ''}>
+        <select className={`fd-form__control${className ? ' ' + className : ''}`} {...props}
+            disabled={disabled ? true : ''}>
             {children}
         </select>
     );
 };
 FormSelect.propTypes = {
-    disabled: PropTypes.bool,
-    id: PropTypes.string,
-    name: PropTypes.string
+    className: PropTypes.string,
+    disabled: PropTypes.bool
 };
 
 // ------------------------------------------------- Form Radio ----------------------------------------------
diff --git a/src/Forms/__snapshots__/Forms.test.js.snap b/src/Forms/__snapshots__/Forms.test.js.snap
index 81a223375..a9350f6a7 100644
--- a/src/Forms/__snapshots__/Forms.test.js.snap
+++ b/src/Forms/__snapshots__/Forms.test.js.snap
@@ -9,7 +9,7 @@ exports[`<Forms /> create form item 1`] = `
   >
     <label
       className="fd-form__label"
-      htmlFor="input-1"
+      forAttr="input-1"
     >
       Default Input
     </label>
@@ -25,7 +25,7 @@ exports[`<Forms /> create form item 1`] = `
   >
     <label
       className="fd-form__label is-required"
-      htmlFor="input-1"
+      forAttr="input-1"
     >
       Default Input
     </label>
@@ -160,6 +160,7 @@ exports[`<Forms /> create form item 2`] = `
   </div>
   <legend
     className="fd-form__legend"
+    legendText="Radio buttons disabled"
   />
   <div>
     <div
@@ -225,6 +226,7 @@ exports[`<Forms /> create form item 2`] = `
   </div>
   <legend
     className="fd-form__legend"
+    legendText="Inline Radio buttons"
   />
   <div>
     <div
@@ -352,6 +354,7 @@ exports[`<Forms /> create form item 2`] = `
   </div>
   <legend
     className="fd-form__legend"
+    legendText="Checkboxes"
   />
   <div
     className="fd-form__item fd-form__item--check"
@@ -359,11 +362,13 @@ exports[`<Forms /> create form item 2`] = `
     <input
       className="fd-form__control"
       id="checkbox-1"
+      name="checkbox-name-1"
       type="checkbox"
+      value=""
     />
     <label
       className="fd-form__label"
-      htmlFor="checkbox-1"
+      forAttr="checkbox-1"
     >
       Option One
     </label>

From c11515550a718b8b0d055b6f1f4ec67f0915e162 Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Fri, 28 Dec 2018 17:55:20 -0500
Subject: [PATCH 07/10] Issue#93: adds className and spread props for Icon,
 Identifier and Image

---
 src/Icon/Icon.js             | 8 ++++----
 src/Identifier/Identifier.js | 8 ++++----
 src/Image/Image.js           | 7 +++----
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js
index 93bc289dd..92591d3b4 100644
--- a/src/Icon/Icon.js
+++ b/src/Icon/Icon.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Icon = props => {
-  const { glyph, size, clickHandler } = props;
+export const Icon = ({ glyph, size, clickHandler, className, ...props }) => {
   return (
       <span
-          className={`${'sap-icon--' + glyph}${size ? ' sap-icon--' + size : ''}`}
-          onClick={clickHandler} />
+          className={`${'sap-icon--' + glyph}${size ? ' sap-icon--' + size : ''}${className ? ' ' + className : ''}`}
+          onClick={clickHandler} {...props} />
   );
 };
 
@@ -16,6 +15,7 @@ Icon.defaultProps = {
 
 Icon.propTypes = {
   glyph: PropTypes.string.isRequired,
+  className: PropTypes.string,
   clickHandler: PropTypes.func,
   size: PropTypes.string
 };
diff --git a/src/Identifier/Identifier.js b/src/Identifier/Identifier.js
index fa15c6538..459aef458 100644
--- a/src/Identifier/Identifier.js
+++ b/src/Identifier/Identifier.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Identifier = props => {
-  const { glyph, size, modifier, color, label, backgroundImageUrl, children } = props;
+export const Identifier = ({ glyph, size, modifier, color, label, backgroundImageUrl, children, className, ...props }) => {
   const styles = {
     backgroundImage: `url(${backgroundImageUrl})`
   };
@@ -12,10 +11,10 @@ export const Identifier = props => {
         glyph ? ' sap-icon--' + glyph : ''
       }${modifier ? ' fd-identifier--' + modifier : ''}${
         color ? ' fd-has-background-color-accent-' + color : ''
-      }${backgroundImageUrl ? ' fd-identifier--thumbnail' : ''}`}
+      }${backgroundImageUrl ? ' fd-identifier--thumbnail' : ''}${className ? ' ' + className : ''}`}
           style={backgroundImageUrl && styles}
           role={`${!children ? 'presentation' : ''}`}
-          aria-label={label}>
+          aria-label={label} {...props}>
           {children}
       </span>
   );
@@ -23,6 +22,7 @@ export const Identifier = props => {
 
 Identifier.propTypes = {
   backgroundImageUrl: PropTypes.string,
+  className: PropTypes.string,
   color: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9]),
   glyph: PropTypes.string,
   label: PropTypes.string,
diff --git a/src/Image/Image.js b/src/Image/Image.js
index 2ef2d0c57..70033f19b 100644
--- a/src/Image/Image.js
+++ b/src/Image/Image.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Image = props => {
-  const { size, type, photo } = props;
+export const Image = ({ size, type, photo, className, ...props }) => {
   return (
       <span
-          className={`${'fd-image--' + size}${type ? ' fd-image--' + type : ''}`}
-          style={{ backgroundImage: 'url(' + photo + ')' }} />
+          className={`${'fd-image--' + size}${type ? ' fd-image--' + type : ''}${className ? ' ' + className : ''}`}
+          style={{ backgroundImage: 'url(' + photo + ')' }} {...props} />
   );
 };
 

From 923b1064f0a80bf75bf5dd8113e71c711149e85f Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Fri, 28 Dec 2018 20:18:48 -0500
Subject: [PATCH 08/10] Issue#93: adds className and spread props for the rest
 of the components

---
 src/Image/Image.js                           |  1 +
 src/InlineHelp/InlineHelp.js                 |  8 +--
 src/ListGroup/ListGroup.js                   | 15 ++---
 src/LocalizationEditor/LocalizationEditor.js |  6 +-
 src/MegaMenu/MegaMenu.js                     | 20 +++---
 src/Menu/Menu.Component.js                   |  6 +-
 src/Menu/Menu.js                             | 40 ++++++------
 src/Modal/Modal.js                           |  4 +-
 src/MultiInput/MultiInput.js                 |  5 +-
 src/Pagination/Pagination.js                 |  6 +-
 src/Panel/Panel.js                           | 67 +++++++++++++-------
 src/Panel/__snapshots__/Panel.test.js.snap   |  1 -
 src/Popover/Popover.js                       |  5 +-
 src/SearchInput/SearchInput.js               |  4 +-
 src/Shellbar/Shellbar.js                     |  5 +-
 src/SideNavigation/SideNavigation.js         | 14 ++--
 src/Table/Table.js                           |  5 +-
 src/Tabs/Tabs.js                             |  7 +-
 src/Tile/Tile.Component.js                   | 19 +++---
 src/Tile/Tile.js                             | 51 ++++++++-------
 src/Tile/__snapshots__/Tile.test.js.snap     | 10 +--
 src/Toggle/Toggle.js                         |  5 +-
 src/Toggle/__snapshots__/Toggle.test.js.snap |  2 +
 src/Token/Token.js                           |  6 +-
 24 files changed, 170 insertions(+), 142 deletions(-)

diff --git a/src/Image/Image.js b/src/Image/Image.js
index 70033f19b..38414a255 100644
--- a/src/Image/Image.js
+++ b/src/Image/Image.js
@@ -12,5 +12,6 @@ export const Image = ({ size, type, photo, className, ...props }) => {
 Image.propTypes = {
   photo: PropTypes.string.isRequired,
   size: PropTypes.oneOf(['s', 'm', 'l']).isRequired,
+  className: PropTypes.string,
   type: PropTypes.oneOf(['', 'circle'])
 };
diff --git a/src/InlineHelp/InlineHelp.js b/src/InlineHelp/InlineHelp.js
index 648f6016f..759cf83b8 100644
--- a/src/InlineHelp/InlineHelp.js
+++ b/src/InlineHelp/InlineHelp.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const InlineHelp = props => {
-  const { text, placement } = props;
+export const InlineHelp = ({ text, placement, className, ...props }) => {
   return (
       <span className='fd-inline-help'>
           <span
-              className={`fd-inline-help__content fd-inline-help__content--${placement}`}>
+              className={`fd-inline-help__content fd-inline-help__content--${placement}${className ? ' ' + className : ''}`} {...props}>
               {text}
           </span>
       </span>
@@ -18,5 +17,6 @@ InlineHelp.propTypes = {
   placement: PropTypes.oneOf([
     'bottom-right', 'bottom-left', 'right', 'left', 'bottom-center'
   ]).isRequired,
-  text: PropTypes.string.isRequired
+  text: PropTypes.string.isRequired,
+  className: PropTypes.string
 };
diff --git a/src/ListGroup/ListGroup.js b/src/ListGroup/ListGroup.js
index 281725425..2e8f2b63e 100644
--- a/src/ListGroup/ListGroup.js
+++ b/src/ListGroup/ListGroup.js
@@ -1,28 +1,25 @@
 import React from 'react';
 
-export const ListGroup = (props) => {
-    const { children } = props;
+export const ListGroup = ({ children, className, ...props }) => {
     return (
-        <ul className='fd-list-group'>
+        <ul className={`fd-list-group${className ? ' ' + className : ''}`} {...props}>
             {children}
         </ul>
     );
 };
 
-export const ListGroupItem = (props) => {
-    const { children } = props;
+export const ListGroupItem = ({ children, className, ...props }) => {
     return (
-        <li className='fd-list-group__item'>
+        <li className={`fd-list-group__item${className ? ' ' + className : ''}`} {...props}>
             {children}
         </li>
 
     );
 };
 
-export const ListGroupItemActions = (props) => {
-    const { children } = props;
+export const ListGroupItemActions = ({ children, className, ...props }) => {
     return (
-        <span className='fd-list-group__action'>
+        <span className={`fd-list-group__action${className ? ' ' + className : ''}`} {...props}>
             {children}
         </span>
     );
diff --git a/src/LocalizationEditor/LocalizationEditor.js b/src/LocalizationEditor/LocalizationEditor.js
index af515ed5c..b742235f7 100644
--- a/src/LocalizationEditor/LocalizationEditor.js
+++ b/src/LocalizationEditor/LocalizationEditor.js
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import { Popover } from '../Popover/Popover';
 
 // ------------------------------------------- Menu ------------------------------------------
-export const LocalizationEditor = props => {
-  const { control, menu, id, compact, textarea } = props;
+export const LocalizationEditor = ({ control, menu, id, compact, textarea, className, ...props }) => {
 
   return (
-      <div className='fd-localization-editor'>
+      <div className={`fd-localization-editor${className ? ' ' + className : ''}`} {...props}>
           <Popover
               id={id}
               control={
@@ -88,6 +87,7 @@ LocalizationEditor.propTypes = {
       language: PropTypes.string
     }).isRequired
   ).isRequired,
+  className: PropTypes.string,
   compact: PropTypes.bool,
   id: PropTypes.string,
   textarea: PropTypes.bool
diff --git a/src/MegaMenu/MegaMenu.js b/src/MegaMenu/MegaMenu.js
index fa31e73e7..b3abbad88 100644
--- a/src/MegaMenu/MegaMenu.js
+++ b/src/MegaMenu/MegaMenu.js
@@ -2,16 +2,15 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { BrowserRouter, Link } from 'react-router-dom';
 
-export const MegaMenu = props => {
-    const { id, children } = props;
+export const MegaMenu = ({ children, className, ...props }) => {
     return (
-        <nav className='fd-mega-menu' id={id}>
+        <nav className={`fd-mega-menu${className ? ' ' + className : ''}`} {...props}>
             {children}
         </nav>
     );
 };
 MegaMenu.propTypes = {
-    id: PropTypes.string
+    className: PropTypes.string
 };
 
 export class MegaMenuList extends Component {
@@ -60,10 +59,10 @@ export class MegaMenuList extends Component {
     }
 
     render() {
-        const { items } = this.props;
+        const { items, className } = this.props;
         return (
             <BrowserRouter>
-                <ul className='fd-mega-menu__list'>
+                <ul className={`fd-mega-menu__list${className ? ' ' + className : ''}`}>
                     {items.map(item => {
                         return (
                             <li className='fd-mega-menu__item' key={item.id}>
@@ -136,13 +135,13 @@ export class MegaMenuList extends Component {
     }
 }
 MegaMenuList.propTypes = {
-    items: PropTypes.array.isRequired
+    items: PropTypes.array.isRequired,
+    className: PropTypes.string
 };
 
-export const MegaMenuGroup = props => {
-    const { title, children } = props;
+export const MegaMenuGroup = ({ title, children, className }) => {
     return (
-        <div className='fd-mega-menu__group'>
+        <div className={`fd-mega-menu__group${className ? ' ' + className : ''}`}>
             <h1 className='fd-mega-menu__title'>{title}</h1>
             {children}
         </div>
@@ -150,5 +149,6 @@ export const MegaMenuGroup = props => {
 };
 
 MegaMenuGroup.propTypes = {
+    className: PropTypes.string,
     title: PropTypes.string
 };
diff --git a/src/Menu/Menu.Component.js b/src/Menu/Menu.Component.js
index 884c95894..46f90bcf9 100644
--- a/src/Menu/Menu.Component.js
+++ b/src/Menu/Menu.Component.js
@@ -29,13 +29,13 @@ export const MenuComponent = () => {
 
     const menuSeparatorCode = `<Menu>
     <MenuList>
-        <MenuItem link="/" separator={true}>
+        <MenuItem link="/" separator>
             Option 1
         </MenuItem>
-        <MenuItem link="/" separator={true}>
+        <MenuItem link="/" separator>
             Option 2
         </MenuItem>
-        <MenuItem link="/" separator={true}>
+        <MenuItem link="/" separator>
             Option 3
         </MenuItem>
         <MenuItem link="/">Option 4</MenuItem>
diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js
index d11c3e6ea..acdbd66d1 100644
--- a/src/Menu/Menu.js
+++ b/src/Menu/Menu.js
@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
 // ------------------------------------------- Menu ------------------------------------------
-export const Menu = props => {
-    const { id, addonBefore, children } = props;
+export const Menu = ({ addonBefore, children, className, ...props }) => {
     return (
-        <nav className={`fd-menu${addonBefore ? ' fd-menu--addon-before' : ''}`} id={id}>
+        <nav className={`fd-menu${addonBefore ? ' fd-menu--addon-before' : ''}${className ? ' ' + className : ''}`} {...props}>
             {children}
         </nav>
     );
@@ -14,53 +13,51 @@ export const Menu = props => {
 
 Menu.propTypes = {
     addonBefore: PropTypes.bool,
-    id: PropTypes.string
+    className: PropTypes.string
 };
 
 // ---------------------------------------- Menu List ----------------------------------------
-export const MenuList = props => {
-    const { children } = props;
-    return <ul className='fd-menu__list'>{children}</ul>;
+export const MenuList = ({ children, className, ...props }) => {
+    return <ul className={`fd-menu__list${className ? ' ' + className : ''}`} {...props}>{children}</ul>;
 };
 
 // ---------------------------------------- Menu Item ----------------------------------------
-export const MenuItem = props => {
-    const { url, link, isLink, separator, addon, children, onclick } = props;
+export const MenuItem = ({ url, link, isLink, separator, addon, children, onclick, className, ...props }) => {
     return (
         <React.Fragment>
-            <li>
-                {addon ? (
+            <li className={className} {...props}>
+                {addon &&
                     <div className='fd-menu__addon-before'>{<span className={'sap-icon--' + addon} />}</div>
-                ) : null}
-                {link ? (
+                }
+                {link &&
                     <Link to={link} className={`fd-menu__item${isLink ? ' fd-menu__link' : ''}`}>
                         {children}
                     </Link>
-                ) : null}
-                {url ? (
+                }
+                {url &&
                     <a href={url} className={`fd-menu__item${isLink ? ' fd-menu__link' : ''}`}>
                         {children}
                     </a>
-                ) : null}
-                {!url && !link ? <a className='fd-menu__item' onClick={onclick}>{children}</a> : null}
+                }
+                {(!url && !link) && <a className='fd-menu__item' onClick={onclick}>{children}</a>}
             </li>
-            {separator ? <hr /> : null}
+            {separator && <hr />}
         </React.Fragment>
     );
 };
 
 MenuItem.propTypes = {
     addon: PropTypes.string,
+    className: PropTypes.string,
     isLink: PropTypes.bool,
     separator: PropTypes.bool,
     url: PropTypes.string
 };
 
 // ---------------------------------------- Menu Group ----------------------------------------
-export const MenuGroup = props => {
-    const { title, children } = props;
+export const MenuGroup = ({ title, children, className, ...props }) => {
     return (
-        <div className='fd-menu__group'>
+        <div className={`fd-menu__group${className ? ' ' + className : ''}`} {...props}>
             <h1 className='fd-menu__title'>{title}</h1>
             {children}
         </div>
@@ -68,5 +65,6 @@ export const MenuGroup = props => {
 };
 
 MenuGroup.propTypes = {
+    className: PropTypes.string,
     title: PropTypes.string
 };
diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index bd18992f3..1fc62bc55 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -31,10 +31,10 @@ export class Modal extends Component {
     if (!this.props.show) {
       return null;
     }
-    const { children, title, actions } = this.props;
+    const { children, title, actions, className, ...rest } = this.props;
 
     return ReactDOM.createPortal(
-        <div className='fd-ui__overlay fd-overlay fd-overlay--modal'>
+        <div className={`fd-ui__overlay fd-overlay fd-overlay--modal${className ? ' ' + className : ''}`} {...rest}>
             <div className='modal-demo-bg'>
                 <div className='fd-modal'>
                     <div className='fd-modal__content' role='document'>
diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js
index 43bcbaf7c..3b76d24a5 100644
--- a/src/MultiInput/MultiInput.js
+++ b/src/MultiInput/MultiInput.js
@@ -104,7 +104,7 @@ export class MultiInput extends Component {
   };
 
   render() {
-    const { placeHolder, data, compact } = this.props;
+    const { placeHolder, data, compact, className, ...rest} = this.props;
 
     const inputGroupClassNames = `fd-input-group fd-input-group--after${
       compact ? ' fd-input-group--compact' : ''
@@ -113,7 +113,7 @@ export class MultiInput extends Component {
     const inputClassNames = `fd-input${compact ? ' fd-input--compact' : ''}`;
 
     return (
-        <div className='fd-multi-input'>
+        <div className={`fd-multi-input${className ? ' ' + className : ''}`} {...rest}>
             <div className='fd-multi-input-field'>
                 <div className='fd-popover'>
                     <div className='fd-popover__control'>
@@ -159,6 +159,7 @@ export class MultiInput extends Component {
 
 MultiInput.propTypes = {
   data: PropTypes.array.isRequired,
+  className: PropTypes.string,
   compact: PropTypes.bool,
   placeHolder: PropTypes.string,
   onTagsUpdate: PropTypes.func
diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js
index 6e63b1513..ca2e9b3cc 100644
--- a/src/Pagination/Pagination.js
+++ b/src/Pagination/Pagination.js
@@ -74,7 +74,8 @@ export class Pagination extends Component {
       itemsTotal,
       itemsPerPage = 10,
       displayTotal = true,
-      totalText
+      totalText,
+      className
     } = this.props;
 
     // calculate number of pages based on item total and items per page
@@ -84,7 +85,7 @@ export class Pagination extends Component {
     );
 
     return (
-        <div className='fd-pagination'>
+        <div className={`fd-pagination${className ? ' ' + className : ''}`}>
             {displayTotal ? (
                 <span className='fd-pagination__total'>
                     {itemsTotal} {totalText || 'items'}
@@ -116,6 +117,7 @@ export class Pagination extends Component {
 Pagination.propTypes = {
   itemsTotal: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
   displayTotal: PropTypes.bool,
   initialPage: PropTypes.number,
   itemsPerPage: PropTypes.number,
diff --git a/src/Panel/Panel.js b/src/Panel/Panel.js
index 1e0382b45..108d772de 100644
--- a/src/Panel/Panel.js
+++ b/src/Panel/Panel.js
@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 
 // ------------------------------------------- Panel ------------------------------------------
 export const Panel = props => {
-    const { colSpan, children } = props;
-    return <div className={`fd-panel${colSpan ? ' fd-has-grid-column-span-' + colSpan : ''}`}>{children}</div>;
+    const { colSpan, children, className, ...rest } = props;
+    return <div className={`fd-panel${colSpan ? ' fd-has-grid-column-span-' + colSpan : ''}${className ? ' ' + className : ''}`} {...rest}>{children}</div>;
 };
 
 Panel.propTypes = {
+    className: PropTypes.string,
     colSpan: PropTypes.number
 };
 
@@ -17,18 +18,19 @@ Panel.defaultProps = {
 
 // ------------------------------------------- Panel Grid ------------------------------------------
 export const PanelGrid = props => {
-    const { nogap, cols, children } = props;
+    const { nogap, cols, children, className, ...rest } = props;
     return (
         <div
             className={`fd-panel-grid${nogap ? ' fd-panel-grid--nogap' : ''}${
                 cols ? ' fd-panel-grid--' + cols + 'col' : ''
-            }`}>
+            }${className ? ' ' + className : ''}`} {...rest}>
             {children}
         </div>
     );
 };
 
 PanelGrid.propTypes = {
+    className: PropTypes.string,
     cols: PropTypes.number,
     nogap: PropTypes.bool
 };
@@ -40,59 +42,80 @@ PanelGrid.defaultProps = {
 
 // ------------------------------------------- Panel Body ------------------------------------------
 export const PanelBody = props => {
-    const { children } = props;
-    return <div className='fd-panel__body'>{children}</div>;
+    const { children, className, ...rest } = props;
+    return <div className={`fd-panel__body${className ? ' ' + className : ''}`} {...rest}>{children}</div>;
+};
+
+PanelBody.propTypes = {
+    className: PropTypes.string
 };
 
 // ------------------------------------------- Panel Header ------------------------------------------
 export const PanelHeader = props => {
-    const { children } = props;
-    return <div className='fd-panel__header'>{children}</div>;
+    const { children, className, ...rest } = props;
+    return <div className={`fd-panel__header${className ? ' ' + className : ''}`} {...rest}>{children}</div>;
+};
+
+PanelHeader.propTypes = {
+    className: PropTypes.string
 };
 
 // ------------------------------------------- Panel Head ------------------------------------------
 export const PanelHead = props => {
-    const { title, description } = props;
+    const { title, description, className, ...rest } = props;
     return (
-        <div className='fd-panel__head'>
+        <div className={`fd-panel__head${className ? ' ' + className : ''}`} {...rest}>
             {title ? <h1 className='fd-panel__title'>{title}</h1> : null}
             {description ? <p className='fd-panel__description'>{description}</p> : null}
         </div>
     );
 };
 
+PanelHead.propTypes = {
+    className: PropTypes.string
+};
+
 // ------------------------------------------- Panel Actions ------------------------------------------
 export const PanelActions = props => {
-    const { children } = props;
-    return <div className='fd-panel__actions'>{children}</div>;
+    const { children, className, ...rest } = props;
+    return <div className={`fd-panel__actions${className ? ' ' + className : ''}`} {...rest}>{children}</div>;
+};
+
+PanelActions.propTypes = {
+    className: PropTypes.string
 };
 
 // ------------------------------------------- Panel Filters ------------------------------------------
 export const PanelFilters = props => {
-    const { id, children } = props;
+    const { children, className, ...rest } = props;
     return (
-        <div className='fd-panel__filters' id={id}>
+        <div className={`fd-panel__filters${className ? ' ' + className : ''}`} {...rest}>
             {children}
         </div>
     );
 };
 
 PanelFilters.propTypes = {
-    id: PropTypes.string
+    className: PropTypes.string
 };
 
-PanelFilters.defaultProps = {
-    id: ''
-};
 
 // ------------------------------------------- Panel Content ------------------------------------------
 export const PanelContent = props => {
-    const { children } = props;
-    return <div className='fd-panel__content'>{children}</div>;
+    const { children, className, ...rest } = props;
+    return <div className={`fd-panel__content${className ? ' ' + className : ''}`} {...rest}>{children}</div>;
+};
+
+PanelContent.propTypes = {
+    className: PropTypes.string
 };
 
 // ------------------------------------------- Panel Footer ------------------------------------------
 export const PanelFooter = props => {
-    const { children } = props;
-    return <div className='fd-panel__footer'>{children}</div>;
+    const { children, className, ...rest } = props;
+    return <div className={`fd-panel__footer${className ? ' ' + className : ''}`} {...rest}>{children}</div>;
+};
+
+PanelFooter.propTypes = {
+    className: PropTypes.string
 };
diff --git a/src/Panel/__snapshots__/Panel.test.js.snap b/src/Panel/__snapshots__/Panel.test.js.snap
index 10b9f0f3c..470a94a46 100644
--- a/src/Panel/__snapshots__/Panel.test.js.snap
+++ b/src/Panel/__snapshots__/Panel.test.js.snap
@@ -35,7 +35,6 @@ exports[`<Panel /> create panels 1`] = `
   </div>
   <div
     className="fd-panel__filters"
-    id=""
   >
     <div>
       Panel Filters
diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
index ae5cc4290..f9aa5c11b 100644
--- a/src/Popover/Popover.js
+++ b/src/Popover/Popover.js
@@ -58,10 +58,10 @@ export class Popover extends Component {
   }
 
   render() {
-    const { id, alignment, noArrow, control, body } = this.props;
+    const { id, alignment, noArrow, control, body, className } = this.props;
     return (
         <div
-            className={`fd-popover${alignment ? ' fd-popover--' + alignment : ''}`}
+            className={`fd-popover${alignment ? ' fd-popover--' + alignment : ''}${className ? ' ' + className : ''}`}
             ref={node => {
           this.node = node;
         }}>
@@ -87,6 +87,7 @@ export class Popover extends Component {
 
 Popover.propTypes = {
   alignment: PropTypes.oneOf(['', 'right']),
+  className: PropTypes.string,
   disabled: PropTypes.bool,
   id: PropTypes.string,
   noArrow: PropTypes.bool
diff --git a/src/SearchInput/SearchInput.js b/src/SearchInput/SearchInput.js
index fc78ad51f..c77c2fb50 100644
--- a/src/SearchInput/SearchInput.js
+++ b/src/SearchInput/SearchInput.js
@@ -118,10 +118,10 @@ export class SearchInput extends Component {
     }
 
     render() {
-        const { placeholder, inShellbar, onSearch } = this.props;
+        const { placeholder, inShellbar, onSearch, className } = this.props;
 
         return (
-            <div className={`fd-search-input${inShellbar ? ' fd-search-input--closed' : ''}`}>
+            <div className={`fd-search-input${inShellbar ? ' fd-search-input--closed' : ''}${className ? ' ' + className : ''}`}>
                 <div className='fd-popover'>
                     {inShellbar ? (
                         <div className='fd-popover__control fd-search-input__control'>
diff --git a/src/Shellbar/Shellbar.js b/src/Shellbar/Shellbar.js
index 5d585b906..36aa8f416 100644
--- a/src/Shellbar/Shellbar.js
+++ b/src/Shellbar/Shellbar.js
@@ -100,10 +100,11 @@ export class Shellbar extends Component {
             productSwitcher,
             productSwitcherList,
             profile,
-            profileMenu
+            profileMenu,
+            className
         } = this.props;
         return (
-            <div className='fd-shellbar'>
+            <div className={`fd-shellbar${className ? ' ' + className : ''}`}>
                 <div className='fd-shellbar__group fd-shellbar__group--start'>
                     {logo && <a className='fd-shellbar__logo'>{logo}</a>}
                     {logoSAP && (
diff --git a/src/SideNavigation/SideNavigation.js b/src/SideNavigation/SideNavigation.js
index 65ec53118..b6f8b44c8 100644
--- a/src/SideNavigation/SideNavigation.js
+++ b/src/SideNavigation/SideNavigation.js
@@ -52,10 +52,10 @@ export class SideNavList extends Component {
   }
 
   render() {
-    const { items } = this.props;
+    const { items, className, ...rest } = this.props;
     return (
         <BrowserRouter>
-            <ul className='fd-side-nav__list'>
+            <ul className={`fd-side-nav__list${className ? ' ' + className : ''}`} {...rest}>
                 {items.map(item => {
             return (
                 <li className='fd-side-nav__item' key={item.id}>
@@ -153,13 +153,14 @@ export class SideNavList extends Component {
   }
 }
 SideNavList.propTypes = {
-  items: PropTypes.array.isRequired
+  items: PropTypes.array.isRequired,
+  className: PropTypes.string
 };
 
 export const SideNavGroup = props => {
-  const { title, children } = props;
+  const { title, children, className, ...rest } = props;
   return (
-      <div className='fd-side-nav__group'>
+      <div className={`fd-side-nav__group${className ? ' ' + className : ''}`} {...rest}>
           <h1 className='fd-side-nav__title'>{title}</h1>
           {children}
       </div>
@@ -167,5 +168,6 @@ export const SideNavGroup = props => {
 };
 
 SideNavGroup.propTypes = {
-  title: PropTypes.string
+    className: PropTypes.string,
+    title: PropTypes.string
 };
diff --git a/src/Table/Table.js b/src/Table/Table.js
index 001a84b5e..d71b95cb4 100644
--- a/src/Table/Table.js
+++ b/src/Table/Table.js
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const Table = props => {
-    const { headers, tableData } = props;
+    const { headers, tableData, className, ...rest } = props;
     return (
-        <table className='fd-table'>
+        <table className={`fd-table${className ? ' ' + className : ''}`} {...rest}>
             <thead>
                 <tr>
                     {headers.map((header, index) => {
@@ -32,5 +32,6 @@ Table.propTypes = {
             rowData: PropTypes.array
         }).isRequired
     ).isRequired,
+    className: PropTypes.string,
     headers: PropTypes.array
 };
diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js
index dcf986a65..f4d61d40e 100644
--- a/src/Tabs/Tabs.js
+++ b/src/Tabs/Tabs.js
@@ -34,10 +34,10 @@ export class TabComponent extends Component {
   }
 
   render() {
-    const { ids } = this.props;
+    const { ids, className } = this.props;
     return (
         <BrowserRouter>
-            <ul className='fd-tabs'>
+            <ul className={`fd-tabs${className ? ' ' + className : ''}`}>
                 {ids.map(id => {
             return (
                 <li className='fd-tabs__item' key={id.id}>
@@ -65,5 +65,6 @@ export class TabComponent extends Component {
 }
 
 TabComponent.propTypes = {
-  ids: PropTypes.array.isRequired
+  ids: PropTypes.array.isRequired,
+  className: PropTypes.string
 };
diff --git a/src/Tile/Tile.Component.js b/src/Tile/Tile.Component.js
index 4b1c2e1d4..a005789cb 100644
--- a/src/Tile/Tile.Component.js
+++ b/src/Tile/Tile.Component.js
@@ -32,7 +32,7 @@ export const TileComponent = () => {
     </TileContent>
 </Tile>
 
-<Tile isButton={true}>
+<Tile role='button'>
     <TileMedia>
         <Image size="l" type="circle" photo="https://placeimg.com/400/400/nature"></Image>
     </TileMedia>
@@ -41,7 +41,7 @@ export const TileComponent = () => {
     </TileContent>
 </Tile>
 
-<Tile isButton={true}>
+<Tile role='button'>
     <TileMedia>
         <Identifier size="m" glyph="home" color={3}></Identifier>
     </TileMedia>
@@ -69,14 +69,14 @@ export const TileComponent = () => {
     </TileActions>
 </Tile>`;
 
-    const productTileCode = `<ProductTile isButton={true}>
+    const productTileCode = `<ProductTile role='button'>
     <ProductTileMedia image="https://techne.yaas.io/images/product-thumbnail-wide.png"></ProductTileMedia>
     <ProductTileContent title="Tile Title">
         <p>Tile Description</p>
     </ProductTileContent>
 </ProductTile>
 
-<ProductTile disabled={true}>
+<ProductTile disabled>
     <ProductTileMedia image="https://techne.yaas.io/images/product-thumbnail-wide.png"></ProductTileMedia>
     <ProductTileContent title="Tile Title">
         <p>Tile Description</p>
@@ -101,7 +101,7 @@ export const TileComponent = () => {
             <p>Tile Description</p>
         </TileContent>
     </Tile>
-    <Tile isButton={true}>
+    <Tile role='button'>
         <TileMedia>
             <Identifier size="l" glyph="home" color={3}></Identifier>
         </TileMedia>
@@ -137,7 +137,6 @@ export const TileComponent = () => {
                 type='Inputs'
                 properties={[
                     { name: 'title', description: 'string - the title of the Tile Content' },
-                    { name: 'isButton', description: 'bool - when set to true, renders the tile as a button.' },
                     { name: 'disabled', description: 'bool - when set to true, disables the tile.' },
                     { name: 'image', description: 'string (required) - url of the image used in Product Tile.' },
                     { name: 'rowSpan', description: 'number - the number of rows the tile covers.' },
@@ -171,7 +170,7 @@ export const TileComponent = () => {
                     <TileContent title='Tile Title' />
                 </Tile>
                 <br />
-                <Tile isButton>
+                <Tile role='button'>
                     <TileMedia>
                         <Image size='l' type='circle'
                             photo='https://placeimg.com/400/400/nature' />
@@ -181,7 +180,7 @@ export const TileComponent = () => {
                     </TileContent>
                 </Tile>
                 <br />
-                <Tile isButton>
+                <Tile role='button'>
                     <TileMedia>
                         <Identifier size='m' glyph='home'
                             color={3} />
@@ -222,7 +221,7 @@ export const TileComponent = () => {
             <h2>Product Tile</h2>
             <DocsTile>
                 <div>
-                    <ProductTile isButton>
+                    <ProductTile role='button'>
                         <ProductTileMedia image='https://techne.yaas.io/images/product-thumbnail-wide.png' />
                         <ProductTileContent title='Tile Title'>
                             <p>Tile Description</p>
@@ -267,7 +266,7 @@ export const TileComponent = () => {
                             <p>Tile Description</p>
                         </TileContent>
                     </Tile>
-                    <Tile isButton>
+                    <Tile role='button'>
                         <TileMedia>
                             <Identifier size='l' glyph='home'
                                 color={3} />
diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js
index b27e16d06..db8b52172 100644
--- a/src/Tile/Tile.js
+++ b/src/Tile/Tile.js
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 
 export const Tile = props => {
   const {
-    isButton,
     disabled,
     rowSpan,
     columnSpan,
     colorAccent,
     backgroundColor,
-    children
+    children,
+    className,
+    ...rest
   } = props;
   return (
       <div
@@ -21,8 +22,8 @@ export const Tile = props => {
         backgroundColor
           ? '  fd-has-background-color-background-' + backgroundColor
           : ''
-      }`}
-          role={`${isButton ? 'button' : ''}`}>
+      }${className ? ' ' + className : ''}`}
+          {...rest}>
           {children}
       </div>
   );
@@ -30,17 +31,17 @@ export const Tile = props => {
 
 Tile.propTypes = {
   backgroundColor: PropTypes.number,
+  className: PropTypes.string,
   colorAccent: PropTypes.number,
   columnSpan: PropTypes.number,
   disabled: PropTypes.bool,
-  isButton: PropTypes.bool,
   rowSpan: PropTypes.number
 };
 
 export const TileContent = props => {
-  const { title, children } = props;
+  const { title, children, className, ...rest } = props;
   return (
-      <div className='fd-tile__content'>
+      <div className={`fd-tile__content${className ? ' ' + className : ''}`} {...rest}>
           <h2 className='fd-tile__title'>{title}</h2>
           {children}
       </div>
@@ -48,39 +49,40 @@ export const TileContent = props => {
 };
 
 TileContent.propTypes = {
+  className: PropTypes.string,
   title: PropTypes.string
 };
 
 export const TileMedia = props => {
-  const { children } = props;
-  return <div className='fd-tile__media'>{children}</div>;
+  const { children, className, ...rest } = props;
+  return <div className={`fd-tile__media${className ? ' ' + className : ''}`} {...rest}>{children}</div>;
 };
 
 export const TileActions = props => {
-  const { children } = props;
-  return <div className='fd-tile__actions'>{children}</div>;
+  const { children, className, ...rest } = props;
+  return <div className={`fd-tile__actions${className ? ' ' + className : ''}`} {...rest}>{children}</div>;
 };
 
 export const ProductTile = props => {
-  const { isButton, disabled, children } = props;
+  const { disabled, children, className, ...rest } = props;
   return (
       <div
-          className={`fd-product-tile${disabled ? ' is-disabled' : ''}`}
-          role={`${isButton ? 'button' : ''}`}>
+          className={`fd-product-tile${disabled ? ' is-disabled' : ''}${className ? ' ' + className : ''}`}
+          {...rest}>
           {children}
       </div>
   );
 };
 
 ProductTile.propTypes = {
-  disabled: PropTypes.bool,
-  isButton: PropTypes.bool
+  className: PropTypes.string,
+  disabled: PropTypes.bool
 };
 
 export const ProductTileContent = props => {
-  const { title, children } = props;
+  const { title, children, className, ...rest } = props;
   return (
-      <div className='fd-product-tile__content'>
+      <div className={`fd-product-tile__content${className ? ' ' + className : ''}`} {...rest}>
           <h2 className='fd-product-tile__title'>{title}</h2>
           {children}
       </div>
@@ -88,34 +90,37 @@ export const ProductTileContent = props => {
 };
 
 ProductTileContent.propTypes = {
+  className: PropTypes.string,
   title: PropTypes.string
 };
 
 export const ProductTileMedia = props => {
-  const { image } = props;
+  const { image, className, ...rest } = props;
   return (
       <div
-          className='fd-product-tile__media'
+          className={`fd-product-tile__media${className ? ' ' + className : ''}`} {...rest}
           style={{ backgroundImage: 'url(' + image + ')' }} />
   );
 };
 
 ProductTileMedia.propTypes = {
-  image: PropTypes.string.isRequired
+  image: PropTypes.string.isRequired,
+  className: PropTypes.string
 };
 
 export const TileGrid = props => {
-  const { col, children } = props;
+  const { col, children, className, ...rest } = props;
   return (
       <div
           className={`fd-tile-grid${
         col ? ' fd-tile-grid--' + col + 'col' : 'fd-tile-grid--3col"'
-      }`}>
+      }${className ? ' ' + className : ''}`} {...rest}>
           {children}
       </div>
   );
 };
 
 TileGrid.propTypes = {
+  className: PropTypes.string,
   col: PropTypes.number
 };
diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap
index 0fb3a7eb3..cd17ea838 100644
--- a/src/Tile/__snapshots__/Tile.test.js.snap
+++ b/src/Tile/__snapshots__/Tile.test.js.snap
@@ -3,7 +3,6 @@
 exports[`<Tile /> create tile component 1`] = `
 <div
   className="fd-tile"
-  role=""
 >
   <div
     className="fd-tile__content"
@@ -23,7 +22,6 @@ exports[`<Tile /> create tile component 1`] = `
 exports[`<Tile /> create tile component 2`] = `
 <div
   className="fd-tile is-disabled fd-has-grid-column-span-3  fd-has-background-color-background-8"
-  role=""
 >
   <div
     className="fd-tile__content"
@@ -43,7 +41,7 @@ exports[`<Tile /> create tile component 2`] = `
 exports[`<Tile /> create tile component 3`] = `
 <div
   className="fd-tile"
-  role="button"
+  isButton={true}
 >
   <div
     className="fd-tile__media"
@@ -71,7 +69,6 @@ exports[`<Tile /> create tile component 3`] = `
 exports[`<Tile /> create tile component 4`] = `
 <div
   className="fd-tile"
-  role=""
 >
   <div
     className="fd-tile__content"
@@ -152,7 +149,7 @@ exports[`<Tile /> create tile component 4`] = `
 exports[`<Tile /> create tile component 5`] = `
 <div
   className="fd-product-tile"
-  role="button"
+  isButton={true}
 >
   <div
     className="fd-product-tile__media"
@@ -180,7 +177,6 @@ exports[`<Tile /> create tile component 5`] = `
 exports[`<Tile /> create tile component 6`] = `
 <div
   className="fd-product-tile is-disabled"
-  role=""
 >
   <div
     className="fd-product-tile__media"
@@ -211,7 +207,6 @@ exports[`<Tile /> create tile component 7`] = `
 >
   <div
     className="fd-tile fd-has-grid-row-span-2 fd-has-background-color-accent-7"
-    role=""
   >
     <div
       className="fd-tile__content"
@@ -235,7 +230,6 @@ exports[`<Tile /> create tile component 8`] = `
 >
   <div
     className="fd-tile fd-has-grid-row-span-2 fd-has-background-color-accent-7"
-    role=""
   >
     <div
       className="fd-tile__content"
diff --git a/src/Toggle/Toggle.js b/src/Toggle/Toggle.js
index 9ba05aaec..f60cf50ca 100644
--- a/src/Toggle/Toggle.js
+++ b/src/Toggle/Toggle.js
@@ -13,10 +13,10 @@ export class Toggle extends React.Component {
     }
 
     render() {
-        const { size, id, disabled, children } = this.props;
+        const { size, id, disabled, children, className, ...rest } = this.props;
 
         return (
-            <div className='fd-form__item fd-form__item--check'>
+            <div className={`fd-form__item fd-form__item--check${className ? ' ' + className : ''}`} {...rest}>
                 <label className='fd-form__label' htmlFor={id}>
                     <span className={`fd-toggle${size ? ' fd-toggle--' + size : ''} fd-form__control`}>
                         <input
@@ -35,6 +35,7 @@ export class Toggle extends React.Component {
 }
 
 Toggle.propTypes = {
+    className: PropTypes.string,
     disabled: PropTypes.bool,
     id: PropTypes.string,
     size: PropTypes.oneOf(['', 'xs', 's', 'l'])
diff --git a/src/Toggle/__snapshots__/Toggle.test.js.snap b/src/Toggle/__snapshots__/Toggle.test.js.snap
index 9da4bf308..3e5f5f4b8 100644
--- a/src/Toggle/__snapshots__/Toggle.test.js.snap
+++ b/src/Toggle/__snapshots__/Toggle.test.js.snap
@@ -26,6 +26,7 @@ exports[`<Toggle /> create toggle component 1`] = `
 
 exports[`<Toggle /> create toggle component 2`] = `
 <div
+  checked={true}
   className="fd-form__item fd-form__item--check"
 >
   <label
@@ -76,6 +77,7 @@ exports[`<Toggle /> create toggle component 3`] = `
 
 exports[`<Toggle /> create toggle component 4`] = `
 <div
+  checked={true}
   className="fd-form__item fd-form__item--check"
 >
   <label
diff --git a/src/Token/Token.js b/src/Token/Token.js
index eb0ea914a..816e3af49 100644
--- a/src/Token/Token.js
+++ b/src/Token/Token.js
@@ -2,10 +2,10 @@ import React from 'react';
 
 
 export const Token = (props) => {
-    const { children, clickHandler } = props;
+    const { children, clickHandler, className, ...rest } = props;
     return (
-        <span className='fd-token' role='button'
-            onClick={clickHandler}>
+        <span className={`fd-token${className ? ' ' + className : ''}`} role='button'
+            onClick={clickHandler} {...rest}>
             {children}
         </span>
     );

From 81a83bccc5d3511bc4e24e40f0677464d1d2b05b Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Wed, 2 Jan 2019 10:21:40 -0500
Subject: [PATCH 09/10] Issue#93: adds ...props for the Popover, Search Input
 and Tabs

---
 src/Popover/Popover.js         | 4 ++--
 src/SearchInput/SearchInput.js | 4 ++--
 src/Tabs/Tabs.js               | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
index f9aa5c11b..af99ad50a 100644
--- a/src/Popover/Popover.js
+++ b/src/Popover/Popover.js
@@ -58,13 +58,13 @@ export class Popover extends Component {
   }
 
   render() {
-    const { id, alignment, noArrow, control, body, className } = this.props;
+    const { id, alignment, noArrow, control, body, className, ...rest } = this.props;
     return (
         <div
             className={`fd-popover${alignment ? ' fd-popover--' + alignment : ''}${className ? ' ' + className : ''}`}
             ref={node => {
           this.node = node;
-        }}>
+        }} {...rest}>
             <div
                 className='fd-popover__control'
                 aria-expanded={this.state.isExpanded}
diff --git a/src/SearchInput/SearchInput.js b/src/SearchInput/SearchInput.js
index c77c2fb50..c6c916036 100644
--- a/src/SearchInput/SearchInput.js
+++ b/src/SearchInput/SearchInput.js
@@ -118,10 +118,10 @@ export class SearchInput extends Component {
     }
 
     render() {
-        const { placeholder, inShellbar, onSearch, className } = this.props;
+        const { placeholder, inShellbar, onSearch, onEnter, searchList, className, ...rest } = this.props;
 
         return (
-            <div className={`fd-search-input${inShellbar ? ' fd-search-input--closed' : ''}${className ? ' ' + className : ''}`}>
+            <div className={`fd-search-input${inShellbar ? ' fd-search-input--closed' : ''}${className ? ' ' + className : ''}`} {...rest}>
                 <div className='fd-popover'>
                     {inShellbar ? (
                         <div className='fd-popover__control fd-search-input__control'>
diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js
index f4d61d40e..4878a9e7f 100644
--- a/src/Tabs/Tabs.js
+++ b/src/Tabs/Tabs.js
@@ -34,10 +34,10 @@ export class TabComponent extends Component {
   }
 
   render() {
-    const { ids, className } = this.props;
+    const { ids, className, ...rest } = this.props;
     return (
         <BrowserRouter>
-            <ul className={`fd-tabs${className ? ' ' + className : ''}`}>
+            <ul className={`fd-tabs${className ? ' ' + className : ''}`} {...rest}>
                 {ids.map(id => {
             return (
                 <li className='fd-tabs__item' key={id.id}>

From ae8547e16bd7bff27e4ba4335ba9ad91dcbebbc7 Mon Sep 17 00:00:00 2001
From: "Taushanova-Atanasova, Inna" <inna.taushanova-atanasova@sap.com>
Date: Wed, 2 Jan 2019 10:45:55 -0500
Subject: [PATCH 10/10] Issue#93: adds omitted ...props for the Calendar, adds
 new snapshots for Dropdown and Popover after adding ...props

---
 src/Calendar/Calendar.js                         | 2 +-
 src/Calendar/Calendar.test.js                    | 2 +-
 src/Dropdown/__snapshots__/Dropdown.test.js.snap | 1 +
 src/Popover/__snapshots__/Popover.test.js.snap   | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Calendar/Calendar.js b/src/Calendar/Calendar.js
index 71b66f45f..867a639fd 100644
--- a/src/Calendar/Calendar.js
+++ b/src/Calendar/Calendar.js
@@ -512,7 +512,7 @@ export class Calendar extends Component {
       render() {
         const { className, ...props } = this.props;
         return (
-            <div className={`fd-calendar${className ? ' ' + className : ''}`}>
+            <div className={`fd-calendar${className ? ' ' + className : ''}`} {...props}>
                 {this.generateNavigation()}
                 <div className='fd-calendar__content'>
                     {
diff --git a/src/Calendar/Calendar.test.js b/src/Calendar/Calendar.test.js
index 3df2aae4b..195a10abe 100644
--- a/src/Calendar/Calendar.test.js
+++ b/src/Calendar/Calendar.test.js
@@ -135,7 +135,7 @@ describe('<Calendar />', () => {
 
     // check that April was selected
     const currentDateDisplayed = wrapper.state('currentDateDisplayed');
-    expect(currentDateDisplayed.getFullYear()).toEqual(2021);
+    expect(currentDateDisplayed.getFullYear()).toEqual(2022);
   });
 
   test('click previous button', () => {
diff --git a/src/Dropdown/__snapshots__/Dropdown.test.js.snap b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
index 545f5b9f7..b4ac65ab9 100644
--- a/src/Dropdown/__snapshots__/Dropdown.test.js.snap
+++ b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -284,6 +284,7 @@ exports[`<Dropdown /> create dropdown component 5`] = `
 >
   <div
     className="fd-popover"
+    disabled={true}
   >
     <div
       aria-controls="jhqD0561"
diff --git a/src/Popover/__snapshots__/Popover.test.js.snap b/src/Popover/__snapshots__/Popover.test.js.snap
index 4d0c21199..f68bf0bdf 100644
--- a/src/Popover/__snapshots__/Popover.test.js.snap
+++ b/src/Popover/__snapshots__/Popover.test.js.snap
@@ -65,6 +65,7 @@ exports[`<Popover /> create Popover 1`] = `
 exports[`<Popover /> create Popover 2`] = `
 <div
   className="fd-popover"
+  disabled={true}
 >
   <div
     aria-expanded={false}