fix: add enable counter for fluid text input (#18281)

* fix: add enable counter for text input * fix: snapshots
carbon-design-system · Feb 11, 2025 · affc44d · affc44d
1 parent 32f0e85
commit affc44d
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 8 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10862,6 +10862,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "enableCounter": Object {
+        "type": "bool",
+      },
       "id": Object {
         "isRequired": true,
         "type": "string",
@@ -10879,6 +10882,9 @@ Map {
         "isRequired": true,
         "type": "node",
       },
+      "maxCount": Object {
+        "type": "number",
+      },
       "onChange": Object {
         "type": "func",
       },

diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.tsx b/packages/react/src/components/FluidTextInput/FluidTextInput.tsx
@@ -49,6 +49,16 @@ export interface FluidTextInputProps {
    */
   isPassword?: boolean;
 
+  /**
+   * Max character count allowed for the textInput. This is needed in order for enableCounter to display
+   */
+  maxCount?: number;
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter?: boolean;
+
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control
@@ -147,6 +157,16 @@ FluidTextInput.propTypes = {
    */
   isPassword: PropTypes.bool,
 
+  /**
+   * Max character count allowed for the textInput. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes.number,
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes.bool,
+
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control

diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
@@ -352,6 +352,7 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
 
   const counterClasses = classNames(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--text-area__label-counter`]: true,
   });
 
   const helperTextClasses = classNames(`${prefix}--form__helper-text`, {

diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -42,9 +42,21 @@
     align-items: center;
     margin: 0;
     block-size: convert.to-rem(16px);
-    inline-size: auto;
     inset-block-start: convert.to-rem(13px);
-    inset-inline-start: $spacing-05;
+
+    // For the main label
+    &:not(.#{$prefix}--text-area__label-counter) {
+      inline-size: auto;
+      inset-inline-end: auto;
+      inset-inline-start: $spacing-05;
+    }
+
+    // For the counter
+    &.#{$prefix}--text-area__label-counter {
+      inline-size: auto;
+      inset-inline-end: $spacing-05;
+      inset-inline-start: auto;
+    }
   }
 
   .#{$prefix}--text-area--fluid .#{$prefix}--label::-webkit-scrollbar,

diff --git a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss
@@ -33,9 +33,21 @@
     align-items: center;
     margin: 0;
     block-size: convert.to-rem(16px);
-    inline-size: calc(100% - 2rem);
     inset-block-start: convert.to-rem(13px);
-    inset-inline-start: $spacing-05;
+
+    // For the main label
+    &:not(.#{$prefix}--text-input__label-counter) {
+      inline-size: auto;
+      inset-inline-end: auto;
+      inset-inline-start: $spacing-05;
+    }
+
+    // For the counter
+    &.#{$prefix}--text-input__label-counter {
+      inline-size: auto;
+      inset-inline-end: $spacing-05;
+      inset-inline-start: auto;
+    }
   }
 
   .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar,

diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
@@ -235,6 +235,7 @@
   }
 
   .#{$prefix}--text-area__label-wrapper {
+    position: relative;
     display: flex;
     justify-content: space-between;
     inline-size: 100%;

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
@@ -534,9 +534,5 @@
     display: flex;
     justify-content: space-between;
     inline-size: 100%;
-
-    .#{$prefix}--text-input__label-counter {
-      align-self: end;
-    }
   }
 }