fix(DatePicker): ensure icon is correct if label extends past input (#…

…14919) * fix(DatePicker): ensure icon is correct if label extends past input * style(FluidDatePicker): adjust span width when fluid
carbon-design-system · Oct 18, 2023 · 20c087b · 20c087b
1 parent a0cf45d
commit 20c087b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -217,13 +217,15 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
         </Text>
       )}
       <div className={wrapperClasses}>
-        {input}
-        {isFluid && <DatePickerIcon datePickerType={datePickerType} />}
-        <DatePickerIcon
-          datePickerType={datePickerType}
-          invalid={invalid}
-          warn={warn}
-        />
+        <span>
+          {input}
+          {isFluid && <DatePickerIcon datePickerType={datePickerType} />}
+          <DatePickerIcon
+            datePickerType={datePickerType}
+            invalid={invalid}
+            warn={warn}
+          />
+        </span>
       </div>
       {invalid && (
         <>

diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -51,11 +51,14 @@
   }
 
   .#{$prefix}--date-picker-input__wrapper {
-    position: relative;
     display: flex;
     align-items: center;
   }
 
+  .#{$prefix}--date-picker-input__wrapper span {
+    position: relative;
+  }
+
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker__input,
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--label {

diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -60,6 +60,12 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper
+    > span {
+    inline-size: 100%;
+  }
+
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper
     .#{$prefix}--date-picker__input {