Browse Source

style: [Cascader] modify style when multiple and disabled #400 (#401)

Co-authored-by: chenyuling <[email protected]>
boomboomchen 3 years ago
parent
commit
0bfd8e214b

+ 1 - 1
packages/semi-foundation/cascader/cascader.scss

@@ -116,7 +116,7 @@ $module: #{$prefix}-cascader;
                 margin-left: 0;
             }
 
-            &-disabled {
+            &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
                 cursor: not-allowed;
                 

+ 31 - 0
packages/semi-ui/cascader/_story/cascader.stories.js

@@ -393,6 +393,23 @@ export const Disabled = () => {
         filterTreeNode
         disabled
       />
+      <br /><br />
+      <Cascader
+        defaultValue={['yazhou', 'zhongguo']}
+        style={{ width: 300 }}
+        treeData={treeData2}
+        multiple
+        filterTreeNode
+        disabled
+      />
+      <br /><br />
+      <Cascader
+        defaultValue={['yazhou', 'zhongguo']}
+        style={{ width: 300 }}
+        treeData={treeData2}
+        multiple
+        disabled
+      />
     </div>
   );
 };
@@ -439,6 +456,20 @@ export const DisabledOption = () => {
         defaultValue={['yazhou', 'riben']}
         placeholder="Japan node is disabled"
       />
+      <br />
+      <br />
+      <div>multiple selection + filterTreeNode + defaultValue is disabled option</div>
+      <Cascader
+          filterTreeNode
+          multiple
+          style={{ width: 300 }}
+          treeData={treeData2}
+          defaultValue={[
+              ['yazhou', 'riben'],
+              ['beimeizhou', 'jianada']
+          ]}
+          placeholder="Japan node is disabled"
+      />
     </div>
   );
 };