Merge pull request #2644 from XiaoMi/hotfix/textarea(#2637)

fix(textarea): 禁用状态背景色改为G10 (#2637)
XiaoMi · Oct 26, 2023 · 92fc9f5 · 92fc9f5
2 parents 0773734 + 6858d33
commit 92fc9f5
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 57 deletions.
diff --git a/.changeset/chatty-singers-sin.md b/.changeset/chatty-singers-sin.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/textarea": patch
+---
+
+fix: 修复禁用状态背景色问题
diff --git a/.changeset/eight-jars-roll.md b/.changeset/eight-jars-roll.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Textarea fix: 修复禁用状态背景色问题
diff --git a/packages/ui/textarea/src/styles/textarea.scss b/packages/ui/textarea/src/styles/textarea.scss
@@ -1,11 +1,11 @@
-@import "~@hi-ui/core-css/lib/index.scss";
+@import '~@hi-ui/core-css/lib/index.scss';
 
-$prefix: "#{$component-prefix}-textarea" !default;
+$prefix: '#{$component-prefix}-textarea' !default;
 
 .#{$prefix} {
   $input-padding-width: calc(#{use-spacing(6)} - 1px);
-  $input-shadow: 0 0 0 2px use-color-mode("primary", 100);
-  $input-error-shadow: 0 0 0 2px use-color-mode("danger", 100);
+  $input-shadow: 0 0 0 2px use-color-mode('primary', 100);
+  $input-error-shadow: 0 0 0 2px use-color-mode('danger', 100);
 
   position: relative;
   display: inline-block;
@@ -20,22 +20,22 @@ $prefix: "#{$component-prefix}-textarea" !default;
     display: block;
     box-sizing: border-box;
     transition-property: all;
-    transition-duration: use-motion-duration("normal");
-    transition-timing-function: use-motion-bezier("normal");
+    transition-duration: use-motion-duration('normal');
+    transition-timing-function: use-motion-bezier('normal');
     width: 100%;
     font-size: inherit;
     line-height: inherit;
-    color: use-color("gray", 700);
+    color: use-color('gray', 700);
     resize: vertical;
     overflow: auto;
     z-index: auto;
     word-break: break-all;
 
     &::placeholder {
-      color: use-color("gray", 400);
+      color: use-color('gray', 400);
 
       .#{$prefix}--appearance-unset & {
-        color: use-color("gray", 500);
+        color: use-color('gray', 500);
       }
     }
 
@@ -50,28 +50,28 @@ $prefix: "#{$component-prefix}-textarea" !default;
     width: 100%;
     box-sizing: border-box;
     font-size: inherit;
-    border: use-border-size("normal") use-color-static("transparent");
-    background-color: use-color-static("white");
+    border: use-border-size('normal') use-color-static('transparent');
+    background-color: use-color-static('white');
     transition-property: all;
-    transition-duration: use-motion-duration("normal");
-    transition-timing-function: use-motion-bezier("normal");
+    transition-duration: use-motion-duration('normal');
+    transition-timing-function: use-motion-bezier('normal');
     outline: none;
     z-index: auto;
 
     &:not(.#{$prefix}__inner--disabled):hover {
-      z-index: calc(#{use-zindex("absolute")} + 1);
+      z-index: calc(#{use-zindex('absolute')} + 1);
     }
 
     &:not(.#{$prefix}__inner--disabled).#{$prefix}__inner--focused {
-      z-index: calc(#{use-zindex("absolute")} + 1);
+      z-index: calc(#{use-zindex('absolute')} + 1);
     }
   }
 
   &__header {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: use-color("gray", 700);
+    color: use-color('gray', 700);
     font-size: inherit;
     text-align: center;
   }
@@ -80,8 +80,8 @@ $prefix: "#{$component-prefix}-textarea" !default;
     &-sm {
       // height: use-height-size(6);
       height: auto;
-      font-size: use-text-size("sm");
-      line-height: use-text-lineheight("sm");
+      font-size: use-text-size('sm');
+      line-height: use-text-lineheight('sm');
 
       .#{$prefix}__text {
         padding: 1px $input-padding-width;
@@ -92,15 +92,15 @@ $prefix: "#{$component-prefix}-textarea" !default;
       }
 
       .#{$prefix}__inner {
-        border-radius: use-border-radius("normal");
+        border-radius: use-border-radius('normal');
       }
     }
 
     &-md {
       height: auto;
       // height: use-height-size(8);
-      font-size: use-text-size("normal");
-      line-height: use-text-lineheight("normal");
+      font-size: use-text-size('normal');
+      line-height: use-text-lineheight('normal');
 
       .#{$prefix}__text {
         padding: 4px $input-padding-width;
@@ -111,15 +111,15 @@ $prefix: "#{$component-prefix}-textarea" !default;
       }
 
       .#{$prefix}__inner {
-        border-radius: use-border-radius("normal");
+        border-radius: use-border-radius('normal');
       }
     }
 
     &-lg {
       // height: use-height-size(10);
       height: auto;
-      font-size: use-text-size("lg");
-      line-height: use-text-lineheight("lg");
+      font-size: use-text-size('lg');
+      line-height: use-text-lineheight('lg');
 
       .#{$prefix}__text {
         padding: 7px $input-padding-width;
@@ -130,30 +130,30 @@ $prefix: "#{$component-prefix}-textarea" !default;
       }
 
       .#{$prefix}__inner {
-        border-radius: use-border-radius("normal");
+        border-radius: use-border-radius('normal');
       }
     }
   }
 
   &--appearance {
     &-line {
       .#{$prefix}__inner {
-        border-color: use-color("gray", 300);
+        border-color: use-color('gray', 300);
 
         &:not(.#{$prefix}__inner--disabled):hover {
-          border-color: use-color-mode("primary");
+          border-color: use-color-mode('primary');
         }
 
         &:not(.#{$prefix}__inner--disabled).#{$prefix}__inner--focused {
           box-shadow: $input-shadow;
-          border-color: use-color-mode("primary");
+          border-color: use-color-mode('primary');
         }
 
         &:not(.#{$prefix}__inner--disabled).#{$prefix}__inner--invalid {
-          border-color: use-color-mode("error");
+          border-color: use-color-mode('error');
 
           &:hover {
-            border-color: use-color-mode("error");
+            border-color: use-color-mode('error');
           }
 
           &.#{$prefix}__inner--focused {
@@ -169,35 +169,35 @@ $prefix: "#{$component-prefix}-textarea" !default;
         padding-right: 0;
 
         &::placeholder {
-          color: use-color("gray", 500);
+          color: use-color('gray', 500);
         }
       }
 
       &:not(.#{$prefix}__inner--disabled) .#{$prefix}__inner:hover {
-        background-color: use-color("gray", 100);
+        background-color: use-color('gray', 100);
       }
     }
 
     &-filled {
       .#{$prefix}__inner {
-        background-color: use-color("gray", 100);
+        background-color: use-color('gray', 100);
 
         &:not(.#{$prefix}__inner--disabled):hover {
-          background-color: use-color-static("white");
-          border-color: use-color-mode("primary");
+          background-color: use-color-static('white');
+          border-color: use-color-mode('primary');
         }
 
         &:not(.#{$prefix}__inner--disabled).#{$prefix}__inner--focused {
           box-shadow: $input-shadow;
-          border-color: use-color-mode("primary");
-          background-color: use-color-static("white");
+          border-color: use-color-mode('primary');
+          background-color: use-color-static('white');
         }
 
         &:not(.#{$prefix}__inner--disabled).#{$prefix}__inner--invalid {
-          border-color: use-color-mode("error");
+          border-color: use-color-mode('error');
 
           &:hover {
-            border-color: use-color-mode("error");
+            border-color: use-color-mode('error');
           }
 
           &.#{$prefix}__inner--focused {
@@ -215,38 +215,38 @@ $prefix: "#{$component-prefix}-textarea" !default;
 
       .#{$prefix}__inner {
         &::after {
-          content: "";
+          content: '';
           box-sizing: border-box;
           display: block;
           position: absolute;
           bottom: 0;
           // 两边透明边框各负 1px
           left: -1px;
           right: -1px;
-          border-bottom: 1px solid use-color("gray", 300);
+          border-bottom: 1px solid use-color('gray', 300);
           transition: all 0.3s;
         }
 
         &:not(.#{$prefix}__inner--disabled):hover {
           &::after {
-            border-bottom-color: use-color-mode("primary");
+            border-bottom-color: use-color-mode('primary');
           }
         }
 
         &:not(.#{$prefix}__inner--disabled).#{$prefix}__inner--focused {
           &::after {
-            border-bottom-color: use-color-mode("primary");
+            border-bottom-color: use-color-mode('primary');
           }
         }
 
         &:not(.#{$prefix}__inner--disabled).#{$prefix}__inner--invalid {
           &::after {
-            border-bottom-color: use-color-mode("error");
+            border-bottom-color: use-color-mode('error');
           }
 
           &.hover {
             &::after {
-              border-bottom-color: use-color-mode("error");
+              border-bottom-color: use-color-mode('error');
             }
           }
         }
@@ -257,12 +257,12 @@ $prefix: "#{$component-prefix}-textarea" !default;
     &-filled {
       .#{$prefix}__inner {
         &.#{$prefix}__inner--disabled {
-          color: use-color("gray", 400);
-          -webkit-text-fill-color: use-color("gray", 400);
-          background-color: use-color("gray", 200);
+          color: use-color('gray', 400);
+          -webkit-text-fill-color: use-color('gray', 400);
+          background-color: use-color('gray', 100);
 
           .#{$prefix}__text {
-            color: use-color("gray", 400);
+            color: use-color('gray', 400);
           }
         }
       }
@@ -272,12 +272,12 @@ $prefix: "#{$component-prefix}-textarea" !default;
     &-underline {
       .#{$prefix}__inner {
         &.#{$prefix}__inner--disabled {
-          color: use-color("gray", 400);
-          -webkit-text-fill-color: use-color("gray", 400);
+          color: use-color('gray', 400);
+          -webkit-text-fill-color: use-color('gray', 400);
           background-color: transparent;
 
           .#{$prefix}__text {
-            color: use-color("gray", 400);
+            color: use-color('gray', 400);
           }
         }
       }
@@ -296,17 +296,17 @@ $prefix: "#{$component-prefix}-textarea" !default;
 
       &[data-count]::after {
         content: attr(data-count);
-        color: use-color("gray", 500);
-        font-size: use-text-size("sm");
-        font-weight: use-font-weight("normal");
-        line-height: use-text-lineheight("sm");
+        color: use-color('gray', 500);
+        font-size: use-text-size('sm');
+        font-weight: use-font-weight('normal');
+        line-height: use-text-lineheight('sm');
         white-space: nowrap;
         pointer-events: none;
         float: right;
         position: absolute;
         right: use-spacing(5);
         bottom: use-spacing(1);
-        z-index: calc(#{use-zindex("absolute")} + 1);
+        z-index: calc(#{use-zindex('absolute')} + 1);
       }
     }
   }

diff --git a/packages/ui/textarea/stories/disabled.stories.tsx b/packages/ui/textarea/stories/disabled.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import TextArea from '../src'
+
+/**
+ * @title 禁用状态
+ */
+export const Disabled = () => {
+  return (
+    <>
+      <h1>Disabled</h1>
+      <div className="textarea-disabled__wrap">
+        <h2>普通</h2>
+        <div>
+          <TextArea appearance="line" disabled placeholder="请输入"></TextArea>
+          <br />
+          <br />
+          <TextArea appearance="unset" disabled placeholder="请输入"></TextArea>
+          <br />
+          <br />
+          <TextArea appearance="filled" disabled placeholder="请输入"></TextArea>
+        </div>
+        <br />
+        <h2>Invalid</h2>
+        <div>
+          <TextArea invalid appearance="line" disabled placeholder="请输入"></TextArea>
+          <br />
+          <br />
+          <TextArea invalid appearance="unset" disabled placeholder="请输入"></TextArea>
+          <br />
+          <br />
+          <TextArea invalid appearance="filled" disabled placeholder="请输入"></TextArea>
+        </div>
+        <br />
+        <h2>有值</h2>
+        <div>
+          <TextArea value="输入值" appearance="line" disabled placeholder="请输入"></TextArea>
+          <br />
+          <br />
+          <TextArea value="输入值" appearance="unset" disabled placeholder="请输入"></TextArea>
+          <br />
+          <br />
+          <TextArea value="输入值" appearance="filled" disabled placeholder="请输入"></TextArea>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/textarea/stories/index.stories.tsx b/packages/ui/textarea/stories/index.stories.tsx
@@ -4,6 +4,7 @@ import TextArea from '@hi-ui/textarea'
 export * from './basic.stories'
 export * from './auto-size.stories'
 export * from './show-count.stories'
+export * from './disabled.stories'
 export * from './header.stories'
 
 export default {