feat: update fundamental-styles to 0.13.1-rc.2 (#1266)

* update to latest

* remove tabindex

* Revert "remove tabindex"

This reverts commit 970a9f4.

Author: meganaconley

package-lock.json

@@ -50,7 +50,7 @@
     "@popperjs/core": "^2.4.3",
     "chain-function": "^1.0.1",
     "classnames": "^2.2.6",
-    "fundamental-styles": "0.13.0-rc.34",
+    "fundamental-styles": "0.13.1-rc.2",
     "hoist-non-react-statics": "^3.3.2",
     "keycode": "^2.2.0",
     "moment": "^2.26.0",

package.json

@@ -14,7 +14,8 @@ const classnames = classnamesBind.bind(styles);
 const Breadcrumb = React.forwardRef(({ children, cssNamespace, ...props }, ref) => (
     <ul {...props}
         className={classnames(`${cssNamespace}-breadcrumb`)}
-        ref={ref}>{children}</ul>)
+        ref={ref}
+        role='menu'>{children}</ul>)
 );
 
 Breadcrumb.displayName = 'Breadcrumb';

src/Breadcrumb/Breadcrumb.js

@@ -10,11 +10,17 @@ const BreadcrumbItem = ({ url, name, className, children, cssNamespace, ...props
     const renderLink = () => {
         if (!children && url) {
             return (
-                <a className={classnames(`${cssNamespace}-breadcrumb__link`)} href={url}>{name}</a>
+                <a
+                    className={classnames(`${cssNamespace}-breadcrumb__link`)}
+                    href={url}
+                    tabIndex='0'>
+                    {name}
+                </a>
             );
         } else if (children) {
             return React.cloneElement(children, {
-                'className': classnames(`${cssNamespace}-breadcrumb__link`)
+                'className': classnames(`${cssNamespace}-breadcrumb__link`),
+                'tabIndex': '0'
             });
         }
     };
@@ -25,7 +31,11 @@ const BreadcrumbItem = ({ url, name, className, children, cssNamespace, ...props
     );
 
     return (
-        <li {...props} className={breadcrumbItemClasses}>
+        <li
+            {...props}
+            className={breadcrumbItemClasses}
+            role='menuitem'
+            tabIndex='-1'>
             {renderLink()}
         </li>
     );

src/Breadcrumb/_BreadcrumbItem.js

@@ -6,33 +6,43 @@ exports[`Storyshots Component API/Breadcrumb No Styles 1`] = `
 >
   <ul
     className="xxx-breadcrumb"
+    role="menu"
   >
     <li
       className="xxx-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="xxx-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>
     </li>
     <li
       className="xxx-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="xxx-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>
     </li>
     <li
       className="xxx-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="xxx-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>
@@ -47,33 +57,43 @@ exports[`Storyshots Component API/Breadcrumb Primary 1`] = `
 >
   <ul
     className="fd-breadcrumb"
+    role="menu"
   >
     <li
       className="fd-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="fd-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>
     </li>
     <li
       className="fd-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="fd-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>
     </li>
     <li
       className="fd-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="fd-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>
@@ -88,33 +108,43 @@ exports[`Storyshots Component API/Breadcrumb With url property 1`] = `
 >
   <ul
     className="fd-breadcrumb"
+    role="menu"
   >
     <li
       className="fd-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="fd-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>
     </li>
     <li
       className="fd-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="fd-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>
     </li>
     <li
       className="fd-breadcrumb__item"
+      role="menuitem"
+      tabIndex="-1"
     >
       <a
         className="fd-breadcrumb__link"
         href="#"
+        tabIndex="0"
       >
         Link Text
       </a>

src/Breadcrumb/__stories__/__snapshots__/Breadcrumb.stories.storyshot

@@ -32,6 +32,8 @@ const Button = React.forwardRef(({
     className,
     cssNamespace,
     textClassName,
+    badge,
+    badgeClassName,
     ...props
 }, ref) => {
 
@@ -52,6 +54,11 @@ const Button = React.forwardRef(({
         textClassName
     );
 
+    const badgeClasses = classnames(
+        `${cssNamespace}-button__badge`,
+        badgeClassName
+    );
+
     const ariaDisabled = props['aria-disabled'];
     let disabledInAnyWay = disabled || ariaDisabled;
 
@@ -107,11 +114,11 @@ const Button = React.forwardRef(({
                 className={buttonClasses}
                 onClick={onClickHandler}
                 ref={ref}
-                selected={selected}
                 type={typeAttr}>
                 {iconBeforeText && renderIcon()}
                 {children && <span className={buttonTextClasses}>{children}</span>}
                 {!iconBeforeText && renderIcon()}
+                {badge && <span className={badgeClasses}>{badge}</span>}
             </button>
             {renderButtonStateMessage()}
         </>
@@ -140,11 +147,21 @@ const validateStateTransitionMessage = (props, propName) => {
     }
 };
 
+const badgePropValidation = (props, propName) => {
+    if (props[propName].length < 1 || props[propName].length > 4) {
+        return new Error(`${propName} must be between 1-4 characters.`);
+    }
+};
+
 Button.propTypes = {
     /** Set to **true** to enable button focus through keyboard on a disabled button */
     allowFocusOnDisable: PropTypes.bool,
     /** Automatically set when disabled prop is passed into button */
     'aria-disabled': PropTypes.bool,
+    /** Content to display in a badge. Must be between 1-4 characters */
+    badge: badgePropValidation,
+    /** CSS class(es) to add to the badge element */
+    badgeClassName: PropTypes.string,
     /** Node(s) to render within the component */
     children: PropTypes.node,
     /** CSS class(es) to add to the element */

src/Button/Button.js

@@ -95,6 +95,34 @@ export const sizes = () => (
 
 sizes.storyName = 'Sizes';
 
+/** Button gets a badge in cases of collecting a number of items from various pages in order to trigger an action.
+ * Currently the Emphasized, Standard and Transparent type of buttons are recommended to be used with Badge.
+ * Badges cannot contain more than 4 characters.
+ */
+
+export const badges = () => (
+    <div className='fddocs-container'>
+        <Button badge='1234'>Default</Button>
+        <Button badge='123' option='emphasized'>Emphasized</Button>
+        <Button badge='12' option='transparent'>Transparent</Button>
+        <Button badge='1234' compact>Default compact</Button>
+        <Button
+            badge='123'
+            compact
+            option='emphasized'>
+            Emphasized compact
+        </Button>
+        <Button
+            badge='12'
+            compact
+            option='transparent'>
+            Transparent compact
+        </Button>
+    </div>
+);
+
+badges.storyName = 'Badges';
+
 /** There are four states: default, `selected`, `disabled`, and `allowFocusOnDisable`. `allowFocusOnDisabled` allows a
  * disabled button to be focusable. This is to ensure a screen reader can tab into the button and read its state.
  * if `allowFocusOnDisabled` is selected there must be a `disabledMessage` and `enabledMessage` prop within the button

src/Button/__stories__/Button.stories.js

@@ -9,9 +9,12 @@ export default {
 };
 
 export const primary = () => (<ButtonSegmented>
-    <Button glyph='survey' />
-    <Button glyph='pie-chart' selected />
-    <Button glyph='pool' />
+    <Button aria-label='Survey' glyph='survey' />
+    <Button
+        aria-label='Pie chart'
+        glyph='pie-chart'
+        selected />
+    <Button aria-label='Pool' glyph='pool' />
 </ButtonSegmented>);
 
 
@@ -27,9 +30,12 @@ compact.storyName = 'Compact';
 
 export const noStyles = () => (
     <ButtonSegmented cssNamespace='xxx'>
-        <Button glyph='survey' />
-        <Button glyph='pie-chart' selected />
-        <Button glyph='pool' />
+        <Button aria-label='Survey' glyph='survey' />
+        <Button
+            aria-label='Pie chart'
+            glyph='pie-chart'
+            selected />
+        <Button aria-label='Pool' glyph='pool' />
     </ButtonSegmented>
 );
 noStyles.parameters = { docs: { disable: true } };