Number: Add showcase of number component width when step controls are…

… enabled
dnbexperience · Dec 21, 2023 · f71283d · f71283d
1 parent 8b41a01
commit f71283d
Showing 1 changed file with 38 additions and 2 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
@@ -94,31 +94,67 @@ export const HorizontalLayout = () => {
 
 export const Widths = () => {
   return (
-    <ComponentBox>
+    <ComponentBox hideCode>
+      <h4 className="dnb-lead">Without step controls</h4>
+      <Field.Number
+        label="Default width (property omitted)"
+        value={123}
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        label="Small"
+        value={123}
+        width="small"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        label="Medium"
+        value={123}
+        width="medium"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        label="Large"
+        value={123}
+        width="large"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        label="Stretch"
+        value={123}
+        width="stretch"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <h4 className="dnb-lead">With step controls</h4>
       <Field.Number
+        showStepControls
         label="Default width (property omitted)"
         value={123}
         onChange={(value) => console.log('onChange', value)}
       />
       <Field.Number
+        showStepControls
         label="Small"
         value={123}
         width="small"
         onChange={(value) => console.log('onChange', value)}
       />
       <Field.Number
+        showStepControls
         label="Medium"
         value={123}
         width="medium"
         onChange={(value) => console.log('onChange', value)}
       />
       <Field.Number
+        showStepControls
         label="Large"
         value={123}
         width="large"
         onChange={(value) => console.log('onChange', value)}
       />
       <Field.Number
+        showStepControls
         label="Stretch"
         value={123}
         width="stretch"
@@ -271,7 +307,7 @@ export const WithStepControlsDisabled = () => (
 )
 
 export const WithSlider = () => (
-  <ComponentBox>
+  <ComponentBox hideCode>
     {() => {
       const Component = () => {
         const [value, setValue] = React.useState(50000)