@douyinfe/semi-ui 2.15.2-alpha.0 → 2.17.0-alpha.1

package/button/buttonGroup.tsx

@@ -33,9 +33,10 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
     };
 
     static defaultProps = {
+        // There are default values ​​for type and theme in Button. 
+        // In order to allow users to individually customize the type and theme of the Button through the parameters of the Button in the ButtonGroup,
+        // the default value of type and theme is not given in the ButtonGroup。
         size: 'default',
-        type: 'primary',
-        theme: 'light',
     };
 
     render() {

package/cascader/index.tsx

@@ -29,6 +29,7 @@ import Tag from '../tag';
 import TagInput from '../tagInput';
 import { Motion } from '../_base/base';
 import { isSemiIcon } from '../_utils';
+import { Position } from '../tooltip/index';
 
 export { CascaderType, ShowNextType } from '@douyinfe/semi-foundation/cascader/foundation';
 export { CascaderData, Entity, Data, CascaderItemProps } from './item';
@@ -82,6 +83,7 @@ export interface CascaderProps extends BasicCascaderProps {
     onBlur?: (e: MouseEvent) => void;
     onFocus?: (e: MouseEvent) => void;
     validateStatus?: ValidateStatus;
+    position?: Position;
 }
 
 export interface CascaderState extends BasicCascaderInnerData {
@@ -169,6 +171,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         leafOnly: PropTypes.bool,
         enableLeafClick: PropTypes.bool,
         preventScroll: PropTypes.bool,
+        position:PropTypes.string
     };
 
     static defaultProps = {
@@ -954,12 +957,13 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             stopPropagation,
             mouseLeaveDelay,
             mouseEnterDelay,
+            position
         } = this.props;
         const { isOpen, rePosKey } = this.state;
         const { direction } = this.context;
         const content = this.renderContent();
         const selection = this.renderSelection();
-        const pos = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+        const pos = position ?? (direction === 'rtl' ? 'bottomRight' : 'bottomLeft');
         const mergedMotion: Motion = this.foundation.getMergedMotion();
         return (
             <Popover

package/dist/css/semi.css

@@ -14257,8 +14257,9 @@ body[theme-mode=dark], body .semi-always-dark {
   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;
+  position: relative;
   display: inline-flex;
-  column-gap: 8px;
+  flex-wrap: wrap;
   min-height: 20px;
   min-width: 16px;
   cursor: pointer;
@@ -14306,7 +14307,6 @@ body[theme-mode=dark], body .semi-always-dark {
   border-radius: var(--semi-border-radius-small);
 }
 .semi-radio-buttonRadioGroup {
-  position: relative;
   padding: 4px;
   border-radius: var(--semi-border-radius-small);
   line-height: 16px;
@@ -14330,6 +14330,7 @@ body[theme-mode=dark], body .semi-always-dark {
   border: 1px solid transparent;
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
+  position: relative;
   margin-right: 8px;
   flex-shrink: 0;
 }
@@ -14399,18 +14400,19 @@ body[theme-mode=dark], body .semi-always-dark {
   border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
-  display: inline-flex;
-  margin-top: 2px;
-  position: relative;
+  position: absolute;
+  display: inline-block;
+  top: 2px;
+  left: 0;
   width: 16px;
   height: 16px;
   vertical-align: sub;
   user-select: none;
 }
 .semi-radio-inner-display {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
   box-sizing: border-box;
   width: 16px;
   height: 16px;
@@ -14419,14 +14421,11 @@ body[theme-mode=dark], body .semi-always-dark {
   background: transparent;
 }
 .semi-radio-inner-display .semi-icon {
+  position: absolute;
   width: 100%;
   height: 100%;
   font-size: 14px;
 }
-.semi-radio-content {
-  display: flex;
-  flex-direction: column;
-}
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
 }
@@ -14435,6 +14434,8 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-addon {
   user-select: none;
+  padding-left: 8px;
+  margin-left: 16px;
   color: var(--semi-color-text-0);
   display: inline-flex;
   align-items: center;
@@ -14523,7 +14524,11 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-disabled-text);
 }
 .semi-radio-extra {
+  flex-grow: 1;
+  flex-basis: 100%;
+  flex-shrink: 0;
   color: var(--semi-color-text-2);
+  padding-left: 24px;
   box-sizing: border-box;
 }
 .semi-radio-focus {
@@ -14538,20 +14543,25 @@ body[theme-mode=dark], body .semi-always-dark {
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.semi-radioGroup-vertical {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
+.semi-radioGroup-vertical .semi-radio:last-of-type {
+  margin-bottom: 0;
 }
 .semi-radioGroup-vertical-default .semi-radio {
-  display: flex;
+  display: block;
+  margin-bottom: 12px;
 }
 .semi-radioGroup-vertical-card .semi-radio {
   display: flex;
+  margin-bottom: 16px;
 }
-.semi-radioGroup-horizontal {
-  display: inline-flex;
-  column-gap: 16px;
+.semi-radioGroup-horizontal .semi-radio {
+  margin-right: 16px;
+}
+.semi-radioGroup-horizontal .semi-radio:last-of-type {
+  margin-right: 0;
+}
+.semi-radioGroup-horizontal-default {
+  display: inline-block;
 }
 .semi-radioGroup-buttonRadio {
   display: inline-block;
@@ -14575,14 +14585,59 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
   padding-left: 0;
 }
+.semi-rtl .semi-radio-inner,
+.semi-portal-rtl .semi-radio-inner {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-radio-inner-display,
+.semi-portal-rtl .semi-radio-inner-display {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-radio-addon,
+.semi-portal-rtl .semi-radio-addon {
+  padding-left: 0;
+  margin-left: 0;
+  padding-right: 8px;
+  margin-right: 16px;
+}
 .semi-rtl .semi-radio-addon-buttonRadio,
 .semi-portal-rtl .semi-radio-addon-buttonRadio {
   margin-right: 0;
 }
+.semi-rtl .semi-radio-extra,
+.semi-portal-rtl .semi-radio-extra {
+  padding-left: 0;
+  padding-right: 24px;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-inner,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
+  margin-right: 0;
+  margin-left: 8px;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-addon,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
+  margin-right: 0;
+  padding-right: 0;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-extra,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
+  padding-right: 0;
+}
 .semi-rtl .semi-radioGroup,
 .semi-portal-rtl .semi-radioGroup {
   direction: rtl;
 }
+.semi-rtl .semi-radioGroup-horizontal .semi-radio,
+.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
+.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
+  margin-left: 0;
+}
 
 .semi-rating {
   display: inline-block;
@@ -15599,6 +15654,9 @@ body[theme-mode=dark], body .semi-always-dark {
   cursor: pointer;
   transition: #fff 0.3s;
 }
+.semi-slider-handle:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }
@@ -19596,6 +19654,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-tree-select-arrow {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
   height: 100%;
   justify-content: center;
   width: 32px;
@@ -19620,6 +19679,7 @@ body[theme-mode=dark], body .semi-always-dark {
   display: inline-flex;
   align-items: center;
   height: 100%;
+  flex-shrink: 0;
   justify-content: center;
   width: 32px;
   color: var(--semi-color-text-2);
@@ -19727,6 +19787,12 @@ body[theme-mode=dark], body .semi-always-dark {
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+.semi-typography-text {
+  display: inline-block;
+}
+.semi-typography-text-icon {
+  display: inline-flex;
+}
 .semi-typography.semi-typography-secondary {
   color: var(--semi-color-text-1);
 }
@@ -19758,6 +19824,7 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-link);
 }
 .semi-typography-icon {
+  display: inline-flex;
   margin-right: 4px;
   vertical-align: middle;
   color: inherit;