@douyinfe/semi-foundation 2.33.0 → 2.34.0-alpha.1

package/lib/cjs/navigation/itemFoundation.d.ts

@@ -34,6 +34,8 @@ export interface ItemAdapter<P = Record<string, any>, S = Record<string, any>> e
     getIsCollapsed(): boolean;
     getSelected(): boolean;
     getIsOpen(): boolean;
+    getIsInSubNav(): boolean;
+    getMode(): string;
 }
 export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ItemAdapter<P, S>, P, S> {
     _timer: number;

package/lib/cjs/navigation/navigation.css

@@ -56,7 +56,6 @@
   padding: 8px 12px;
   box-sizing: border-box;
   margin-top: 0;
-  margin-bottom: 8px;
   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;
@@ -241,6 +240,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+}
+.semi-navigation-sub.semi-navigation-sub-open {
+  margin-top: 8px;
 }
 .semi-navigation-sub .semi-navigation-item {
   color: var(--semi-color-text-0);
@@ -249,9 +254,6 @@
   font-weight: 400;
   width: 100%;
 }
-.semi-navigation-sub .semi-navigation-item:first-child {
-  margin-top: 8px;
-}
 .semi-navigation-sub .semi-navigation-item > .semi-navigation-sub .semi-navigation-item-text:first-child {
   margin-left: 44px;
 }
@@ -333,6 +335,12 @@
   transition: transform 200ms ease-in-out;
   transform: rotate(-180deg);
 }
+.semi-navigation-icon-rotate-0-no-transition {
+  transform: rotate(0);
+}
+.semi-navigation-icon-rotate-180-no-transition {
+  transform: rotate(-180deg);
+}
 
 /* Header、Footer-Common */
 .semi-navigation-header {
@@ -393,6 +401,11 @@
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-item-selected:not(.semi-navigation-item-disabled).semi-navigation-item-normal:hover .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary);
 }
+.semi-navigation-vertical .semi-navigation-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+}
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title {
   color: var(--semi-color-text-0);
   background-color: transparent;
@@ -470,9 +483,6 @@
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary-disabled);
 }
-.semi-navigation-vertical .semi-navigation-item:last-of-type {
-  margin-bottom: 0;
-}
 .semi-navigation-vertical .semi-navigation-inner {
   flex-direction: column;
 }
@@ -671,6 +681,66 @@
   padding: 0;
 }
 
+.semi-navigation-first-layer > .semi-navigation-sub-title .semi-navigation-item-text {
+  font-weight: 600;
+}
+.semi-navigation-first-layer > .semi-navigation-item-text {
+  font-weight: 600;
+}
+
+.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
+  color: var(--semi-color-primary);
+}
+
+.semi-navigation-sub-wrap .semi-navigation-sub-title {
+  margin-bottom: 0;
+}
+.semi-navigation-sub-wrap .semi-navigation-item:last-of-type {
+  margin-bottom: 0;
+}
+
+.semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-text {
+  color: var(--semi-color-disabled-text);
+}
+
+.semi-navigation-item-horizontal.semi-navigation-item {
+  width: fit-content;
+  margin-bottom: 0;
+  margin-right: 8px;
+}
+.semi-navigation-item-horizontal.semi-navigation-item.semi-navigation-item-disabled {
+  color: var(--semi-color-disabled-text);
+}
+.semi-navigation-item-horizontal .semi-navigation-sub-title .semi-navigation-item-icon:first-child,
+.semi-navigation-item-horizontal .semi-navigation-sub-title .semi-navigation-item-text {
+  color: var(--semi-color-text-2);
+  background-color: transparent;
+}
+.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child,
+.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-selected .semi-navigation-item-text {
+  color: var(--semi-color-text-0);
+}
+.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child,
+.semi-navigation-item-horizontal .semi-navigation-sub-title.semi-navigation-sub-title-disabled .semi-navigation-item-text {
+  color: var(--semi-color-disabled-text);
+}
+.semi-navigation-item-horizontal.semi-navigation-first-layer {
+  color: var(--semi-color-text-2);
+}
+.semi-navigation-item-horizontal.semi-navigation-item-selected {
+  background-color: transparent;
+}
+.semi-navigation-item-horizontal.semi-navigation-item-selected .semi-navigation-item-icon:first-child,
+.semi-navigation-item-horizontal.semi-navigation-item-selected .semi-navigation-item-text {
+  color: var(--semi-color-text-0);
+}
+.semi-navigation-item-horizontal .semi-navigation-item-icon:first-child {
+  margin-right: 8px;
+}
+.semi-navigation-item-horizontal .semi-navigation-item-icon:last-child {
+  margin-left: 8px;
+}
+
 .semi-rtl .semi-navigation,
 .semi-portal-rtl .semi-navigation {
   direction: rtl;

package/lib/cjs/navigation/navigation.scss

@@ -76,7 +76,7 @@ $module: #{$prefix}-navigation;
         padding: $spacing-navigation_item-paddingY $spacing-navigation_item-paddingX;
         box-sizing: border-box;
         margin-top: 0;
-        margin-bottom: $spacing-navigation_item-marginBottom;
+        // margin-bottom: $spacing-navigation_item-marginBottom;
 
         @include font-size-regular;
         font-weight: $font-navigation_item_normal-fontWeight;
@@ -257,6 +257,13 @@ $module: #{$prefix}-navigation;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-navigation_item-marginBottom;
+
+        &.#{$module}-sub-open {
+            margin-top: $spacing-navigation_sub_item_first_child-marginTop;
+        }
 
         .#{$module}-item {
             color: $color-navigation_itemLn-text-default;
@@ -268,9 +275,9 @@ $module: #{$prefix}-navigation;
             font-weight: $font-navigation_sub_item-fontWeight;
             width: 100%;
 
-            &:first-child {
-                margin-top: $spacing-navigation_sub_item_first_child-marginTop;
-            }
+            // &:first-child {
+            //     margin-top: $spacing-navigation_sub_item_first_child-marginTop;
+            // }
 
             & > &-text:first-child {
                 margin-left: $spacing-base-tight + $width-navigation_icon_left + $width-navigation_icon_text_between;
@@ -343,6 +350,12 @@ $module: #{$prefix}-navigation;
         transform: rotate(-180deg);
     }
 
+    &-icon-rotate-0-no-transition {
+        transform: rotate(0);
+    }
+    &-icon-rotate-180-no-transition {
+        transform: rotate(-180deg);
+    }
 }
 
 /* Header、Footer-Common */
@@ -430,6 +443,12 @@ $module: #{$prefix}-navigation;
             }
         }
 
+        &-list {
+            display: flex;
+            flex-direction: column;
+            row-gap: $spacing-navigation_item-marginBottom;
+        }
+
         &-list > .#{$module}-sub-wrap {
             & > .#{$module}-sub-title {
                 color: $color-navigation_itemL1-text-default;
@@ -483,9 +502,9 @@ $module: #{$prefix}-navigation;
         }
     }
 
-    .#{$module}-item:last-of-type {
-        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
-    }
+    // .#{$module}-item:last-of-type {
+    //     margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
+    // }
 
     .#{$module}-inner {
         flex-direction: column;
@@ -714,4 +733,97 @@ $module: #{$prefix}-navigation;
     }
 }
 
+// The following css is used for the variant generation of NavItem and NavSub in C2D
+.#{$module}-first-layer {
+    > .#{$module}-sub-title {
+        .#{$module}-item-text {
+            font-weight: 600;
+        }
+    }
+
+    > .#{$module}-item-text {
+        font-weight: 600;
+    }
+}
+
+.#{$module}-sub-title-selected {
+    .#{$module}-item-icon:first-child {
+        color: $color-navigation_itemL1_selected_icon-default;
+    }
+}
+
+.#{$module}-sub-wrap {
+    .#{$module}-sub-title {
+        margin-bottom: $spacing-navigation_sub_title-marginBottom;
+    }
+
+    .#{$module}-item:last-of-type {
+        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
+    } 
+}
+
+.#{$module}-sub-title {
+    &.#{$module}-sub-title-disabled {
+        .semi-navigation-item-text {
+            color: $color-navigation_itemL1_disabled-text-default;
+        }
+    }
+}
+
+.#{$module}-item-horizontal {
+    // The width of nav NavItem and NavSub in the horizontal direction both need fit-content
+    &.#{$module}-item { 
+        width: fit-content;
+        margin-bottom: $spacing-navigation_horizontal_nav_list_item-marginBottom;
+        margin-right: $spacing-navigation_horizontal_nav_list_item_not_last-marginRight;
+
+        &.#{$module}-item-disabled {
+            color: $color-navigation_horizontal_itemL1_disabled-text-default;
+        }
+    }
+
+    .#{$module}-sub-title {
+        .#{$module}-item-icon:first-child,
+        .#{$module}-item-text {
+            color: var(--semi-color-text-2);
+            background-color: transparent;
+        }
+
+        &.#{$module}-sub-title-selected {
+            .#{$module}-item-icon:first-child,
+            .#{$module}-item-text {
+                color: $color-navigation_horizontal_itemL1_selected-text-default;
+            }
+        }
+
+        &.#{$module}-sub-title-disabled {
+            .#{$module}-item-icon:first-child,
+            .#{$module}-item-text {
+                color: $color-navigation_horizontal_itemL1_disabled-text-default;
+            }
+        }
+    }
+
+    &.#{$module}-first-layer {
+        color: $color-navigation_horizontal_itemL1-text-default;
+    }
+
+    &.#{$module}-item-selected {
+        background-color: $color-navigation_horizontal_itemL1_selected-bg-default;
+
+        .#{$module}-item-icon:first-child,
+        .#{$module}-item-text {
+            color: $color-navigation_horizontal_itemL1_selected-text-default;
+        }
+    }
+
+    .semi-navigation-item-icon:first-child {
+        margin-right: $spacing-navigation_horizontal_icon_last-marginLeft;
+    }
+
+    .semi-navigation-item-icon:last-child {
+        margin-left: $spacing-navigation_horizontal_icon_first-marginRight;
+    }
+}
+
 @import "./rtl.scss";

package/lib/cjs/navigation/subNavFoundation.d.ts

@@ -21,6 +21,8 @@ export interface SubNavAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyGlobalOnClick(data: OnClickData): void;
     getIsSelected(itemKey: string | number): boolean;
     getIsOpen(): boolean;
+    getIsCollapsed(): boolean;
+    getMode(): string;
 }
 export default class SubNavFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<SubNavAdapter<P, S>, P, S> {
     constructor(adapter: SubNavAdapter<P, S>);