feat: update fundamental styles to 0.11.3-rc.8 (#1142)

In this change we
* Update `fundamental-styles` to `0.11.3-rc.8` and support the new features and fixes therein.
* This also includes some accessibility upgrades
  * ActionBar has a glyph based back button. Enforce aria-label for it.
  * MultiInput has a glyph based popover trigger button. Enforce aria-label for it.
  * Tokens have a glyph based close/clear button. Allow setting aria-label for it.
  * It wasn't possible to remove MultiInput tokens from the input field using a keyboard. After this change, if a MultiInput token has focus, pressing `backspace` or `delete` should remove it.
  * Update TimePicker stories so that there are no accessibility issues in Storybook
  * Support FormLabel with colons feature (SAP/fundamental-styles#1181)
  * Deprecate LocalizationEditor (SAP/fundamental-styles#1261)

Author: prsdthkr

.storybook/custom/components/Description.js

@@ -0,0 +1,12 @@
+import Markdown from 'markdown-to-jsx';
+import React from 'react';
+
+const Description = (props) => {
+    return (
+        <Markdown options={{ forceBlock: true}}>{props.desc}</Markdown>
+    )
+}
+
+Description.displayName = 'Description';
+
+export default Description;

.storybook/custom/components/DocsPage.js

@@ -1,5 +1,6 @@
 import '../custom.scss';
 import Community from './Community';
+import Description from './Description';
 import { DocsContext } from '@storybook/addon-docs/blocks';
 import Footer from './Footer';
 import Header from './Header';
@@ -10,7 +11,6 @@ import React, { useContext, useEffect } from 'react';
 import {
     Title,
     Subtitle,
-    Description,
     Heading,
     Props,
     DocsStory,
@@ -46,8 +46,8 @@ const DocsPage = () => {
         <Title />
         <Toc />
         <Subtitle />
+        {context?.parameters?.description && <Description desc={context?.parameters?.description} />}
         <Import />
-        <Description />
         <Heading>Examples</Heading>
         {stories.map((story) => story && <DocsStory
             key={story.id}

.storybook/custom/custom.scss

@@ -243,3 +243,23 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
         height: 120px;
     }
 }
+
+/* blockquote e.g. depreciated warning */
+blockquote {
+    margin: 15px 0;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-left-width: 5px;
+    border-radius: 5px;
+    background: #fffde4;
+    font-size: 1rem;
+
+    &.docs-deprecated {
+        background: #ffebeb;
+        background: var(--sapErrorBackground, #ffebeb);
+        color: #bb0000;
+        color: var(--sapNegativeColor, #bb0000);
+        border-color: #bb0000;
+        border-color: var(--sapNegativeColor, #bb0000);
+    }
+}

package-lock.json

@@ -51,7 +51,7 @@
     "chain-function": "^1.0.1",
     "classnames": "^2.2.6",
     "detect-browser": "^5.1.0",
-    "fundamental-styles": "0.11.3-rc.7",
+    "fundamental-styles": "0.11.3-rc.8",
     "keycode": "^2.2.0",
     "moment": "^2.26.0",
     "prop-types": "^15.7.1",

package.json

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import PropTypes from 'prop-types';
 import React from 'react';
+import requiredIf from 'react-required-if';
 import 'fundamental-styles/dist/action-bar.css';
 
 /**
@@ -15,6 +16,7 @@ const ActionBar = React.forwardRef(({
     actionClassName,
     actionProps,
     className,
+    backButtonLabel,
     buttonContainerClassName,
     buttonProps,
     description,
@@ -62,6 +64,7 @@ const ActionBar = React.forwardRef(({
             <div {...props} className={actionBarHeaderClasses}>
                 {onBackClick && (<div className={actionBarBackClasses}>
                     <Button
+                        aria-label={backButtonLabel}
                         {...buttonProps}
                         compact
                         glyph='navigation-left-arrow'
@@ -93,6 +96,10 @@ ActionBar.propTypes = {
     actionProps: PropTypes.object,
     /** Button components to add to the ActionBar */
     actions: PropTypes.node,
+    /** Localized string for 'Back' button's aria-label. This is required if the button is enabled and `buttonProps` doesn't have a valid `aria-label` */
+    backButtonLabel: requiredIf(PropTypes.string, props => {
+        return typeof props?.onBackClick === 'function' && (!props?.buttonProps || !props.buttonProps['aria-label']?.trim());
+    }),
     /** Classnames to spread to the back Button container */
     buttonContainerClassName: PropTypes.string,
     /** Additional props to be spread to the `<button>` element */

src/ActionBar/ActionBar.js

@@ -19,6 +19,7 @@ export const primary = () => (
                 <Button option='emphasized'>Button</Button>
             </>
         )}
+        backButtonLabel='Back to home'
         description={'Action Bar Description'}
         onBackClick={() => {}}
         title={'Page Title'} />
@@ -41,18 +42,25 @@ more than 3-4 actions. This also works well for a responsive/adaptive applicatio
 
 export const contextualMenu = () => (
     <ActionBar
-        actions={<Popover
-            body={
-                <Menu>
-                    <Menu.List>
-                        <Menu.Item url='#'>Option 1</Menu.Item>
-                        <Menu.Item url='#'>Option 2</Menu.Item>
-                        <Menu.Item url='#'>Option 3</Menu.Item>
-                        <Menu.Item url='#'>Option 4</Menu.Item>
-                    </Menu.List>
-                </Menu>}
-            control={<Button glyph='vertical-grip' option='transparent' />}
-            placement='bottom-end' />}
+        actions={
+            <Popover
+                body={
+                    <Menu>
+                        <Menu.List>
+                            <Menu.Item url='#'>Option 1</Menu.Item>
+                            <Menu.Item url='#'>Option 2</Menu.Item>
+                            <Menu.Item url='#'>Option 3</Menu.Item>
+                            <Menu.Item url='#'>Option 4</Menu.Item>
+                        </Menu.List>
+                    </Menu>}
+                control={
+                    <Button
+                        aria-label='More actions'
+                        glyph='vertical-grip'
+                        option='transparent' />
+                }
+                placement='bottom-end' />
+        }
         description='Action Bar Description'
         title='Page Title' />
 );
@@ -64,6 +72,9 @@ export const dev = () => (
         actions={(<><Button>Button</Button>
             <Button option='emphasized'>Button</Button></>
         )}
+        buttonProps={{
+            'aria-label': 'Back to home'
+        }}
         description={text('description', 'Action Bar description')}
         headingLevel={number('headingLevel', 2, {
             range: true,

src/ActionBar/__stories__/ActionBar.stories.js

@@ -14,6 +14,7 @@ exports[`Storyshots Component API/ActionBar Dev 1`] = `
         className="fd-action-bar__back"
       >
         <button
+          aria-label="Back to home"
           className="fd-button fd-button--transparent fd-button--compact sap-icon--navigation-left-arrow"
           onClick={[Function]}
           type="button"
@@ -161,6 +162,7 @@ exports[`Storyshots Component API/ActionBar Primary 1`] = `
         className="fd-action-bar__back"
       >
         <button
+          aria-label="Back to home"
           className="fd-button fd-button--transparent fd-button--compact sap-icon--navigation-left-arrow"
           onClick={[Function]}
           type="button"
@@ -230,6 +232,7 @@ exports[`Storyshots Component API/ActionBar With a ContextualMenu 1`] = `
                 aria-controls="fd-mocked-short-id"
                 aria-expanded={false}
                 aria-haspopup={true}
+                aria-label="More actions"
                 className="fd-button fd-button--transparent sap-icon--vertical-grip"
                 onClick={[Function]}
                 onKeyPress={[Function]}

src/ActionBar/__stories__/__snapshots__/ActionBar.stories.storyshot

@@ -11,6 +11,7 @@ const FormLabel = React.forwardRef(({
     className,
     disabled,
     isInlineHelp,
+    includeColon,
     ...props
 }, ref) => {
 
@@ -19,7 +20,8 @@ const FormLabel = React.forwardRef(({
         {
             'is-disabled': disabled,
             'fd-form-label--inline-help': isInlineHelp,
-            'fd-form-label--required': required
+            'fd-form-label--required': required,
+            'fd-form-label--colon': includeColon
         },
         className
     );
@@ -44,6 +46,8 @@ FormLabel.propTypes = {
     className: PropTypes.string,
     /** Set to **true** to mark component as disabled and make it non-interactive */
     disabled: PropTypes.bool,
+    /** Set to **true** to add the `:` character at the end of a label as pseudo element.*/
+    includeColon: PropTypes.bool,
     /** Set to **true** if child is InlineHelp component */
     isInlineHelp: PropTypes.bool,
     /** Set to **true** for required input fields */

src/Forms/FormLabel.js

@@ -12,18 +12,39 @@ export default {
 
 export const primary = () => (
     <FormItem>
-        <FormLabel>Default Label</FormLabel>
-        <FormInput />
+        <FormLabel htmlFor='primaryLabelExample' >Default Label</FormLabel>
+        <FormInput id='primaryLabelExample' />
     </FormItem>
 );
 
 export const required = () => (
     <FormItem>
-        <FormLabel required>Required Label</FormLabel>
-        <FormInput />
+        <FormLabel
+            htmlFor='requiredLabelExample'
+            required>
+            Required Label
+        </FormLabel >
+        <FormInput id='requiredLabelExample' />
     </FormItem>
 );
 
+/** To achieve overflow proof colon provide the `includeColon` property. The `:` character will be added at the end of a label as pseudo element. */
+
+export const includeColon = () => (
+    <div style={{
+        maxWidth: '250px'
+    }}>
+        <FormItem>
+            <FormLabel
+                htmlFor='includeColonLabelExample'
+                includeColon>
+                Overflow proof colon, overflow proof colon, overflow proof colon
+            </FormLabel>
+            <FormInput id='includeColonLabelExample' />
+        </FormItem>
+    </div>
+);
+
 export const disabled = () => (
     <FormItem>
         <FormLabel disabled>Disabled Label</FormLabel>
@@ -34,9 +55,12 @@ export const disabled = () => (
 export const dev = () => (
     <FormItem>
         <FormLabel
+            htmlFor='devLabelExample'
+            includeColon={boolean('Include colon?', false)}
             required={boolean('Required?', true)}>
-            Default</FormLabel>
-        <FormInput />
+            Dev
+        </FormLabel>
+        <FormInput id='devLabelExample' />
     </FormItem>
 );