@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

package/lib/es/avatar/foundation.js

@@ -3,12 +3,10 @@ import warning from '../utils/warning';
 export default class AvatarFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.handleFocusVisible = event => {
       const {
         target
       } = event;
-
       try {
         if (target.matches(':focus-visible')) {
           this._adapter.setFocusVisible(true);
@@ -17,35 +15,44 @@ export default class AvatarFoundation extends BaseFoundation {
         warning(true, 'Warning: [Semi Avatar] The current browser does not support the focus-visible');
       }
     };
-
     this.handleBlur = () => {
       this._adapter.setFocusVisible(false);
     };
+    this.changeScale = () => {
+      const {
+        gap
+      } = this.getProps();
+      const node = this._adapter.getAvatarNode();
+      const stringNode = node === null || node === void 0 ? void 0 : node.firstChild;
+      const [nodeWidth, stringNodeWidth] = [(node === null || node === void 0 ? void 0 : node.offsetWidth) || 0, (stringNode === null || stringNode === void 0 ? void 0 : stringNode.offsetWidth) || 0];
+      if (nodeWidth !== 0 && stringNodeWidth !== 0 && gap * 2 < nodeWidth) {
+        const scale = nodeWidth - gap * 2 > stringNodeWidth ? 1 : (nodeWidth - gap * 2) / stringNodeWidth;
+        this._adapter.setScale(scale);
+      }
+    };
+  }
+  init() {
+    const {
+      children
+    } = this.getProps();
+    if (typeof children === "string") {
+      this.changeScale();
+    }
   }
-
-  init() {} // eslint-disable-line
-
-
-  destroy() {} // eslint-disable-line
-
-
+  destroy() {}
   handleImgLoadError() {
     const {
       onError
     } = this.getProps();
     const errorFlag = onError ? onError() : undefined;
-
     if (errorFlag !== false) {
       this._adapter.notifyImgState(false);
     }
   }
-
   handleEnter(e) {
     this._adapter.notifyEnter(e);
   }
-
   handleLeave(e) {
     this._adapter.notifyLeave(e);
   }
-
 }

package/lib/es/avatar/variables.scss

@@ -24,29 +24,85 @@ $font-avatar_extra_large-lineHeight: 77px; // 文本行高 - 超大
 
 $radius-avatar: var(--semi-border-radius-circle); // 头像圆角
 
-$width-avatar_extra_large-border: 3px; // 头像描边尺寸 - 超大
-$spacing-avatar_extra_large-marginLeft: -32px; // 头像左侧外边距 - 超大
+$width-avatar_extra_large-border: 3px; // 头像组头像描边尺寸 - 超大
+$spacing-avatar_extra_large-marginLeft: -32px; // 头像组头像左侧外边距 - 超大
 
-$width-avatar_large-border: 3px; // 头像描边尺寸 - 大
+$width-avatar_large-border: 3px; // 头像组头像描边尺寸 - 大
 $spacing-avatar_large-marginLeft: -18px; // 头像左侧外边距 - 大
 
-$width-avatar_medium-border: 2px; // 头像描边尺寸 - 中
+$width-avatar_medium-border: 2px; // 头像组头像描边尺寸 - 中
 $spacing-avatar_medium-marginLeft: -12px; // 头像左侧外边距 - 中
 
-$width-avatar_default-border: 2px; // 头像描边尺寸 - 默认
+$width-avatar_default-border: 2px; // 头像组头像描边尺寸 - 默认
 $spacing-avatar_default-marginLeft: -12px; // 头像左侧外边距 - 默认
 
-$width-avatar_small-border: 2px; // 头像描边尺寸 - 小
+$width-avatar_small-border: 2px; // 头像组头像描边尺寸 - 小
 $spacing-avatar_small-marginLeft: -12px; // 头像左侧外边距 - 小
 
-$width-avatar_extra_small-border: 1px; // 头像描边尺寸 - 超小
+$width-avatar_extra_small-border: 1px; // 头像组头像描边尺寸 - 超小
 $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 
-$width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
+$width-avatar_extra_extra_small-border: 1px; // 头像组头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
-
 $width-avatar-outline: 2px; //头像聚焦轮廓宽度
 
+$width-avatar_additional-border: 1.5px; // 额外描边尺寸
+$color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
+$spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
+
+$width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_large: 28px; // large 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部 slot 圆形半径
+$color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
+
+$radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
+$font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
+$font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
+$font-avatar_bottom_slot-large-fontSize: 12px; // large 底部 slot 文字大小
+$font-avatar_bottom_slot-extra_large-fontSize: 14px; // extra large 底部 slot 文字大小
+$spacing-avatar-bottom_slot_square-paddingX:4px; // 底部 slot square 形状左边距
+$spacing-avatar-bottom_slot_square-paddingY:1px; //底部 slot square 形状右边距
+
+$font-avatar_top_slot-small-fontSize: 5px; // small 顶部 slot 文字大小
+$font-avatar_top_slot-default-fontSize: 6px; // default 顶部 slot 文字大小
+$font-avatar_top_slot-medium-fontSize: 8px; // medium 顶部 slot 文字大小
+$font-avatar_top_slot-large-fontSize: 14px; // large 顶部 slot 文字大小
+$font-avatar_top_slot-extra_large-fontSize: 16px; // extra large 顶部 slot 文字大小
+
+$spacing-avatar-top_slot_small-content-marginTop: 0px; // small 顶部文字 marginTop
+$spacing-avatar-top_slot_default-content-marginTop: -2px; // default 顶部文字 marginTop
+$spacing-avatar-top_slot_medium-content-marginTop: 0px; // medium 顶部文字 marginTop
+$spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 marginTop
+$spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
+
+$color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 
+$width-avatar-bottom_slot_square_large-border:2px; // large 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_extra_large-border:2px; // extra large 头像底部 square 边框宽度
+
+$color-avatar-top_slot_text:var(--semi-color-bg-0); //顶部 Slot 文字颜色
+$color-avatar-top_slot_gradient_start: var(--semi-color-primary); // 顶部 slot 渐变起始色
+$color-avatar-top_slot_gradient_end: var(--semi-color-primary); //  顶部 slot 渐变结束色
+
+
+$spacing-avatar-top_slot_small-shift: -28px; // small 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_default-shift: -32px; // default 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_medium-shift: -30px; // medium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_large-shift: -30px; // large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_extra_large-shift: -32px; // extra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+
+$spacing-avatar-top_slot_small-scale: 0.4; // small 顶部 slot 缩放比例
+$spacing-avatar-top_slot_default-scale: 0.7; // default 顶部 slot 缩放比例
+$spacing-avatar-top_slot_medium-scale: 0.8; // medium 顶部 slot 缩放比例
+$spacing-avatar-top_slot_large-scale: 1.1; // large 顶部 slot 缩放比例
+$spacing-avatar-top_slot_extra_large-scale: 1.4; // large 顶部 slot 缩放比例 
+
+
 // radius
 $radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
 $radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
@@ -54,4 +110,4 @@ $radius-avatar_small: 3px; // 小尺寸头像的圆角
 $radius-avatar_default: 3px; // 默认尺寸头像的圆角
 $radius-avatar_medium: 3px; // 中尺寸头像的圆角
 $radius-avatar_large: 6px; // 大尺寸头像的圆角
-$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角

package/lib/es/backtop/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-backtop")
+  PREFIX: `${BASE_CLASS_PREFIX}-backtop`
 };
 const strings = {};
 export { cssClasses, strings };

package/lib/es/backtop/foundation.d.ts

@@ -1,6 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type BackTopClickEvent = any;
-export declare type Target = any;
+export type BackTopClickEvent = any;
+export type Target = any;
 export interface BackTopAdapter extends DefaultAdapter {
     updateVisible: (visible: boolean) => void;
     notifyClick: (e: BackTopClickEvent) => void;

package/lib/es/backtop/foundation.js

@@ -3,7 +3,6 @@ import { Animation } from '@douyinfe/semi-animation';
 export default class BackTopFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.scrollTo = (targetNode, from, to) => {
       const {
         duration
@@ -23,29 +22,23 @@ export default class BackTopFoundation extends BaseFoundation {
         let {
           scrollTop
         } = _ref;
-
         this._adapter.targetScrollToTop(targetNode, scrollTop);
       });
       this.animation.start();
     };
-
     this.handleScroll = () => {
       const {
         target,
         visibilityHeight
       } = this.getProps();
       const targetNode = target();
-
       const update = () => {
         const scrollTop = this.getScroll(targetNode);
-
         this._adapter.updateVisible(scrollTop > visibilityHeight);
       };
-
       requestAnimationFrame(update);
     };
   }
-
   init() {
     const {
       target
@@ -54,7 +47,6 @@ export default class BackTopFoundation extends BaseFoundation {
     targetNode.addEventListener('scroll', this.handleScroll);
     this.handleScroll();
   }
-
   destroy() {
     const {
       target
@@ -63,21 +55,16 @@ export default class BackTopFoundation extends BaseFoundation {
     targetNode && targetNode.removeEventListener('scroll', this.handleScroll);
     this.animation && this.animation.destroy();
   }
-
   getScroll(target) {
     if (this._adapter.isWindowUndefined()) {
       return 0;
     }
-
     const prop = 'pageYOffset';
     const method = 'scrollTop';
-
     const isWindow = this._adapter.targetIsWindow(target);
-
     const scroll = isWindow ? target[prop] : target[method];
     return scroll;
   }
-
   setScrollTop(to) {
     const {
       target
@@ -86,11 +73,8 @@ export default class BackTopFoundation extends BaseFoundation {
     const from = this.getScroll(targetNode);
     this.scrollTo(targetNode, from, to);
   }
-
   onClick(e) {
     this.setScrollTop(0);
-
     this._adapter.notifyClick(e);
   }
-
 }

package/lib/es/badge/badge.css

@@ -139,6 +139,16 @@
 .semi-badge-warning.semi-badge-inverted {
   color: var(--semi-color-warning);
 }
+.semi-badge-success.semi-badge-solid {
+  background-color: var(--semi-color-success);
+}
+.semi-badge-success.semi-badge-light {
+  background-color: var(--semi-color-success-light-default);
+  color: var(--semi-color-success);
+}
+.semi-badge-success.semi-badge-inverted {
+  color: var(--semi-color-success);
+}
 
 .semi-rtl .semi-badge,
 .semi-portal-rtl .semi-badge {

package/lib/es/badge/badge.scss

@@ -163,6 +163,19 @@ $module: #{$prefix}-badge;
         }
     }
 
+    &-success {
+        &.#{$module}-solid {
+            background-color: $color-badge_success_solid-bg-default;
+        }
+        &.#{$module}-light {
+            background-color: $color-badge_success_light-bg-default;
+            color: $color-badge_success_light-text-default;
+        }
+        &.#{$module}-inverted {
+            color: $color-badge_success_inverted-text-default;
+        }
+    }
+
 }
 
 @import "./rtl.scss";

package/lib/es/badge/constants.js

@@ -1,9 +1,9 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-badge")
+  PREFIX: `${BASE_CLASS_PREFIX}-badge`
 };
 const strings = {
-  TYPE_SET: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],
+  TYPE_SET: ['success', 'primary', 'secondary', 'tertiary', 'warning', 'danger'],
   THEME_SET: ['solid', 'light', 'inverted'],
   POS_SET: ['leftTop', 'leftBottom', 'rightTop', 'rightBottom']
 };

package/lib/es/badge/variables.scss

@@ -29,6 +29,10 @@ $color-badge_warning_light-bg-default: var(--semi-color-warning-light-default);
 $color-badge_warning_light-text-default: var(--semi-color-warning); // 文字颜色 - 浅版危险
 $color-badge_warning_inverted-text-default: var(--semi-color-warning); // 文字颜色 - 白底
 
+$color-badge_success_solid-bg-default: var(--semi-color-success); // 背景颜色 - 成功
+$color-badge_success_light-bg-default: var(--semi-color-success-light-default); // 背景颜色 - 浅版成功
+$color-badge_success_light-text-default: var(--semi-color-success); // 文字颜色 - 浅版成功
+$color-badge_success_inverted-text-default: var(--semi-color-success); // 文字颜色 - 白底
 
 $width-badge_dot: 8px; // 点状徽标宽度
 $height-badge_dot: 8px; // 点状徽标高度

package/lib/es/banner/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-banner")
+  PREFIX: `${BASE_CLASS_PREFIX}-banner`
 };
 const strings = {
   TYPE: ['info', 'success', 'danger', 'warning']

package/lib/es/banner/foundation.js

@@ -3,11 +3,8 @@ export default class BannerFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, BannerFoundation.defaultAdapter), adapter));
   }
-
   removeBanner(e) {
     this._adapter.notifyClose(e);
-
     this._adapter.setVisible();
   }
-
 }

package/lib/es/base/constants.js

@@ -1,4 +1,4 @@
 import { BASE_CLASS_PREFIX } from './env';
-const VALIDATE_STATUS = ['default', 'error', 'warning', 'success']; // const VALIDATE_STATUS = ['default', 'error', 'warning', 'success', 'validating'] as const;
-
+const VALIDATE_STATUS = ['default', 'error', 'warning', 'success'];
+// const VALIDATE_STATUS = ['default', 'error', 'warning', 'success', 'validating'] as const;
 export { BASE_CLASS_PREFIX, VALIDATE_STATUS };

package/lib/es/base/foundation.d.ts

@@ -3,7 +3,7 @@
  * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
  *
  */
-export declare type noopFunction = (...args: any) => any;
+export type noopFunction = (...args: any) => any;
 export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>> {
     getContext(key: string): any;
     getContexts(): any;
@@ -11,7 +11,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
     getProps(): P;
     getState(key: string): any;
     getStates(): S;
-    setState(s: Pick<S, keyof S>, callback?: any): void;
+    setState<K extends keyof S>(s: Pick<S, K>, callback?: any): void;
     getCache(c: string): any;
     getCaches(): any;
     setCache(key: any, value: any): void;
@@ -45,7 +45,7 @@ declare class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record
     getProps(): any;
     getState(key: string): any;
     getStates(): any;
-    setState(states: S, cb?: (...args: any) => void): void;
+    setState<K extends keyof S>(states: Pick<S, K>, cb?: (...args: any) => void): void;
     getContext(key: string): any;
     getContexts(): any;
     getCaches(): any;

package/lib/es/base/foundation.js

@@ -1,47 +1,32 @@
 import _noop from "lodash/noop";
-
 /**
  * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
  * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
  *
  */
 import log from '../utils/log';
-
 class BaseFoundation {
-  constructor(adapter) {
-    this._adapter = Object.assign(Object.assign({}, BaseFoundation.defaultAdapter), adapter);
-  }
   /** @return enum{css className} */
-
   /* istanbul ignore next */
-
-
   static get cssClasses() {
     // Classes extending Foundation should implement this method to return an object which exports every
     // CSS class the foundation class needs as a property. e.g. {ACTIVE: 'component--active'}
     return {};
   }
   /** @return enum{strings} */
-
   /* istanbul ignore next */
-
-
   static get strings() {
     // Classes extending Foundation should implement this method to return an object which exports all
     // semantic strings as constants. e.g. {ARIA_ROLE: 'tablist'}
     return {};
   }
   /** @return enum{numbers} */
-
   /* istanbul ignore next */
-
-
   static get numbers() {
     // Classes extending Foundation should implement this method to return an object which exports all
     // of its semantic numbers as constants. e.g. {ANIMATION_DELAY_MS: 350}
     return {};
   }
-
   static get defaultAdapter() {
     return {
       getProp: _noop,
@@ -58,90 +43,72 @@ class BaseFoundation {
       persistEvent: _noop
     };
   }
-
+  constructor(adapter) {
+    this._adapter = Object.assign(Object.assign({}, BaseFoundation.defaultAdapter), adapter);
+  }
   getProp(key) {
     return this._adapter.getProp(key);
   }
-
   getProps() {
     return this._adapter.getProps();
   }
-
   getState(key) {
     return this._adapter.getState(key);
   }
-
   getStates() {
     return this._adapter.getStates();
   }
-
   setState(states, cb) {
     return this._adapter.setState(Object.assign({}, states), cb);
   }
-
   getContext(key) {
     return this._adapter.getContext(key);
   }
   /* istanbul ignore next */
-
-
   getContexts() {
     return this._adapter.getContexts();
   }
   /* istanbul ignore next */
-
-
   getCaches() {
     return this._adapter.getCaches();
   }
-
   getCache(key) {
     return this._adapter.getCache(key);
   }
-
   setCache(key, value) {
     return key && this._adapter.setCache(key, value);
   }
-
   stopPropagation(e) {
     this._adapter.stopPropagation(e);
-  } // Determine whether a controlled component
-
-
+  }
+  // Determine whether a controlled component
   _isControlledComponent() {
     let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'value';
     const props = this.getProps();
     const isControlComponent = (key in props);
     return isControlComponent;
-  } // Does the user have incoming props, eg: _isInProps (value)
-
-
+  }
+  // Does the user have incoming props, eg: _isInProps (value)
   _isInProps(key) {
     const props = this.getProps();
     return key in props;
   }
-
-  init(lifecycle) {// Subclasses should override this method to perform initialization routines (registering events, etc.)
+  init(lifecycle) {
+    // Subclasses should override this method to perform initialization routines (registering events, etc.)
   }
-
-  destroy() {// Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
+  destroy() {
+    // Subclasses should override this method to perform de-initialization routines (de-registering events, etc.)
   }
   /* istanbul ignore next */
-
-
   log(text) {
     for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       rest[_key - 1] = arguments[_key];
     }
-
     log(text, ...rest);
   }
-
   _persistEvent(e) {
     // only work for react adapter for now
     this._adapter.persistEvent(e);
   }
-
 }
-
 export default BaseFoundation;

package/lib/es/breadcrumb/breadcrumb.css

@@ -12,11 +12,13 @@
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
 }
 .semi-breadcrumb-wrapper-compact {
   font-size: 12px;
   line-height: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
 }
 .semi-breadcrumb-item-wrap {
   display: inline-flex;
@@ -46,15 +48,15 @@
   color: var(--semi-color-text-0);
   cursor: default;
 }
+.semi-breadcrumb-item-active .semi-typography {
+  font-weight: 600;
+}
 .semi-breadcrumb-item-icon {
   margin-bottom: -1px;
 }
 .semi-breadcrumb-item-more svg {
   vertical-align: middle;
 }
-.semi-breadcrumb-item-icon + .semi-breadcrumb-item-title {
-  margin-left: 4px;
-}
 .semi-breadcrumb-item-link {
   display: inline-flex;
   align-items: center;

package/lib/es/breadcrumb/breadcrumb.scss

@@ -15,10 +15,12 @@ $module: #{$prefix}-breadcrumb;
 
         &-loose {
             @include font-size-regular;
+            font-size: $font-breadcrumb_loose-fontSize;
         }
 
         &-compact {
             @include font-size-small;
+            font-size: $font-breadcrumb_compact-fontSize;
         }
     }
 
@@ -67,6 +69,10 @@ $module: #{$prefix}-breadcrumb;
             color: $color-breadcrumb_active-text-active;
             cursor: default;
         }
+
+        .#{$prefix}-typography {
+            font-weight: $font-breadcrumb_active-fontWeight;
+        }
     }
 
     &-item-icon {
@@ -80,14 +86,14 @@ $module: #{$prefix}-breadcrumb;
         }
     }
 
-    &-item-icon+&-item-title {
-        margin-left: $spacing-breadcrumb_item_text-marginLeft;
-    }
+    // &-item-icon+&-item-title {
+    //     margin-left: $spacing-breadcrumb_item_text-marginLeft;
+    // }
 
     &-item-link {
         display: inline-flex;
         align-items: center;
-        column-gap: 4px;
+        column-gap: $spacing-breadcrumb_item_text-marginLeft;
         text-decoration: inherit;
         transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
         transform: scale($transform_scale-breadcrumb_link-text);

package/lib/es/breadcrumb/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-breadcrumb")
+  PREFIX: `${BASE_CLASS_PREFIX}-breadcrumb`
 };
 const strings = {
   MORE_TYPE: ['default', 'popover']

package/lib/es/breadcrumb/foundation.js

@@ -1,29 +1,23 @@
-/* eslint-disable prefer-const */
 import BaseFoundation from '../base/foundation';
 import isEnterPress from '../utils/isEnterPress';
 export default class BreadcrumbFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   handleClick(info, event) {
     this._adapter.notifyClick(info, event);
   }
-
   handleExpand(clickEvent) {
     this._adapter.expandCollapsed(clickEvent);
   }
   /**
    * A11y: simulate clear button click
    */
-
-
   handleExpandEnterPress(keyboardEvent) {
     if (isEnterPress(keyboardEvent)) {
       this.handleExpand(keyboardEvent);
     }
   }
-
   genRoutes(routes) {
     return routes.map(route => {
       if (typeof route !== 'object') {
@@ -34,11 +28,9 @@ export default class BreadcrumbFoundation extends BaseFoundation {
           }
         };
       }
-
       let config = {};
       config._origin = route;
       return Object.assign(Object.assign({}, config), route);
     });
   }
-
 }