feat: update fd-styles to 0.12.1-rc13 (#1235)

* update to rc72 * update to rc77 * update snapshots * fix infolabel and objectstatus * Update Table.stories.storyshot * update snaps * Update .size-limit * spacing * Trigger Build
SAP · Oct 13, 2020 · c08dcad · c08dcad
1 parent e360f15
commit c08dcad
Show file tree

Hide file tree

Showing 42 changed files with 2,312 additions and 539 deletions.
diff --git a/.size-limit b/.size-limit
@@ -3,6 +3,6 @@
     name: "Fundamental-React Size",
     webpack: true,
     path: "lib/index.js",
-    limit: "245 KB"
+    limit: "246 KB"
   }
 ]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "@popperjs/core": "^2.4.3",
     "chain-function": "^1.0.1",
     "classnames": "^2.2.6",
-    "fundamental-styles": "0.12.0-rc.64",
+    "fundamental-styles": "0.12.1-rc.13",
     "hoist-non-react-statics": "^3.3.2",
     "keycode": "^2.2.0",
     "moment": "^2.26.0",

diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js
@@ -1,6 +1,7 @@
 import { AVATAR_SIZES } from '../utils/constants';
 import classnamesBind from 'classnames/bind';
 import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
+import Icon from '../Icon/Icon';
 import PropTypes from 'prop-types';
 import React from 'react';
 import withStyles from '../utils/withStyles';
@@ -13,8 +14,7 @@ const classnames = classnamesBind.bind({
 });
 
 /** An **Avatar** is a visual presentation option around using an icon or user initials. */
-
-const Avatar = React.forwardRef(({ glyph, size, circle, cssNamespace, transparent, border, color, label, backgroundImageUrl, children, className, role, placeholder, tile, zoom, ...props }, ref) => {
+const Avatar = React.forwardRef(({ glyph, size, circle, cssNamespace, transparent, border, color, label, backgroundImageUrl, children, className, role, placeholder, tile, zoom, zoomLabel, ...props }, ref) => {
 
     const styles = {
         backgroundImage: `url(${backgroundImageUrl})`
@@ -23,7 +23,6 @@ const Avatar = React.forwardRef(({ glyph, size, circle, cssNamespace, transparen
         `${cssNamespace}-avatar`,
         {
             [`${cssNamespace}-avatar--${size}`]: !!size,
-            [`sap-icon--${glyph}`]: !!glyph,
             [`${cssNamespace}-avatar--accent-color-${color}`]: !!color,
             [`${cssNamespace}-avatar--thumbnail`]: backgroundImageUrl,
             [`${cssNamespace}-avatar--placeholder`]: placeholder,
@@ -50,7 +49,10 @@ const Avatar = React.forwardRef(({ glyph, size, circle, cssNamespace, transparen
             ref={ref}
             role={ariaRole}
             style={backgroundImageUrl && styles}>
-            {zoom && <span className={classnames(`${cssNamespace}-avatar__zoom-icon`, 'sap-icon--edit')} role='presentation' />}
+            {glyph && <Icon ariaHidden className={classnames(`${cssNamespace}-avatar__icon`)}
+                glyph={glyph} />}
+            {zoom && <Icon ariaLabel={zoomLabel} className={classnames(`${cssNamespace}-avatar__zoom-icon`)}
+                glyph={'edit'} />}
             {children}
         </span>
     );
@@ -91,7 +93,9 @@ Avatar.propTypes = {
     /** Set to **true** to use transparent background */
     transparent: PropTypes.bool,
     /** Set to **true** to include a zoom icon */
-    zoom: PropTypes.bool
+    zoom: PropTypes.bool,
+    /** Localized text for zoom icon label */
+    zoomLabel: PropTypes.string
 };
 
 export default withStyles(Avatar);
diff --git a/src/Avatar/__stories__/Avatar.stories.js b/src/Avatar/__stories__/Avatar.stories.js
@@ -101,15 +101,20 @@ export const placeholder = () => (
 export const zoom = () => (
     <div className='fddocs-container'>
         <Avatar circle glyph='washing-machine'
-            size='xs' zoom />
+            size='xs' zoom
+            zoomLabel='Edit' />
         <Avatar circle glyph='washing-machine'
-            size='s' zoom />
+            size='s' zoom
+            zoomLabel='Edit' />
         <Avatar circle glyph='washing-machine'
-            size='m' zoom />
+            size='m' zoom
+            zoomLabel='Edit' />
         <Avatar circle glyph='washing-machine'
-            size='l' zoom />
+            size='l' zoom
+            zoomLabel='Edit' />
         <Avatar circle glyph='washing-machine'
-            size='xl' zoom />
+            size='xl' zoom
+            zoomLabel='Edit' />
     </div>
 );