style(FluidNumberInput): add initial styles

carbon-design-system · Nov 29, 2022 · 1c984ba · 1c984ba
1 parent f4122ae
commit 1c984ba
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 7 deletions.
diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
@@ -36,16 +36,20 @@ const ToggleTip = (
 
 export const Default = () => (
   <FluidNumberInput
-    labelText={ToggleTip}
+    label={ToggleTip}
     placeholder="Placeholder text"
     id="input-1"
+    step={10}
+    min={0}
+    max={100}
+    defaultValue={50}
   />
 );
 
 export const Skeleton = () => (
   <div style={{ width: '300px' }}>
     <FluidNumberInputSkeleton
-      labelText="Label"
+      label="Label"
       placeholder="Placeholder text"
       id="input-1"
     />

diff --git a/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss b/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss
@@ -6,7 +6,7 @@
 //
 
 //-----------------------------
-// Fluid ComboBox
+// Fluid Multiselect
 //-----------------------------
 @use '../../config' as *;
 @use '../../motion' as *;

diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
@@ -6,7 +6,7 @@
 //
 
 //-----------------------------
-// Fluid NumberInput
+// Fluid Number Input
 //-----------------------------
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -17,8 +17,58 @@
 @use '../number-input';
 
 @mixin fluid-number-input {
-  // Style overrides go here
-  //   .#{$prefix}--number-input--fluid {
+  .#{$prefix}--number-input--fluid {
+    position: relative;
+    height: 100%;
+    background: $field;
+  }
 
-  //   }
+  .#{$prefix}--number-input--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--number-input--fluid input[type='number'] {
+    min-height: rem(64px);
+    padding: rem(32px) rem(80px) rem(13px) $spacing-05;
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__controls {
+    top: rem(23px);
+    height: rem(40px);
+    transform: translate(0);
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border-bottom: 1px solid transparent;
+  }
+
+  // Focus Overrides
+  .#{$prefix}--number-input--fluid
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover {
+    border-bottom: 1px solid $focus;
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon:hover::after {
+    top: 0;
+    height: 100%;
+    background: $focus;
+  }
 }