fix(Forms): remove extra space from Value.* components with inline …

…property (#4246)
dnbexperience · Nov 8, 2024 · 8b96fd1 · 8b96fd1
1 parent f45aa4a
commit 8b96fd1
Show file tree

Hide file tree

Showing 19 changed files with 62 additions and 60 deletions.
diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/Examples.tsx b/...nb-design-system-portal/src/docs/uilib/extensions/forms/Value/ArraySelection/Examples.tsx
@@ -97,9 +97,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.ArraySelection value={['Foo', 'Bar', 'Baz']} inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.ArraySelection value={['Foo', 'Bar', 'Baz']} inline /> This
+        is after the component
       </P>
     </ComponentBox>
   )

diff --git a/...design-system-portal/src/docs/uilib/extensions/forms/Value/BankAccountNumber/Examples.tsx b/...design-system-portal/src/docs/uilib/extensions/forms/Value/BankAccountNumber/Examples.tsx
@@ -46,9 +46,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.BankAccountNumber value="20001234567" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.BankAccountNumber value="20001234567" inline /> This is
+        after the component
       </P>
     </ComponentBox>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Boolean/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Boolean/Examples.tsx
@@ -54,8 +54,8 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        <span style={{ color: 'red' }}>This is before the component</span>
-        <Value.Boolean value={true} inline />
+        <span style={{ color: 'red' }}>This is before the component</span>{' '}
+        <Value.Boolean value={true} inline />{' '}
         <span style={{ color: 'red' }}>This is after the component</span>
       </P>
     </ComponentBox>

diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Currency/Examples.tsx b/...ages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Currency/Examples.tsx
@@ -54,9 +54,8 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.Currency value={25000} inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.Currency value={25000} inline /> This is after the component
       </P>
     </ComponentBox>
   )
@@ -66,9 +65,9 @@ export const InlineAndLabel = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.Currency label="Label text" value={25000} inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.Currency label="Label text" value={25000} inline /> This is
+        after the component
       </P>
     </ComponentBox>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Date/Examples.tsx
@@ -34,9 +34,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.Date label="Label text" value="2023-01-16" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.Date label="Label text" value="2023-01-16" inline /> This is
+        after the component
       </P>
     </ComponentBox>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Email/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Email/Examples.tsx
@@ -49,9 +49,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.Email value="firstname.lastname@domain.com" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.Email value="firstname.lastname@domain.com" inline /> This
+        is after the component
       </P>
     </ComponentBox>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Name/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Name/Examples.tsx
@@ -55,10 +55,10 @@ export const Inline = () => {
         }}
       >
         <P>
-          This is before the component
-          <Value.Name.First path="/firstName" inline />
-          <Value.Name.Last path="/lastName" inline />
-          This is after the component
+          This is before the component{' '}
+          <Value.Name.First path="/firstName" inline />{' '}
+          <Value.Name.Last path="/lastName" inline /> This is after the
+          component
         </P>
       </Form.Handler>
     </ComponentBox>

diff --git a/...n-system-portal/src/docs/uilib/extensions/forms/Value/NationalIdentityNumber/Examples.tsx b/...n-system-portal/src/docs/uilib/extensions/forms/Value/NationalIdentityNumber/Examples.tsx
@@ -49,9 +49,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.NationalIdentityNumber value="25017598765" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.NationalIdentityNumber value="25017598765" inline /> This is
+        after the component
       </P>
     </ComponentBox>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Number/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Number/Examples.tsx
@@ -46,8 +46,7 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.Number value={123} inline />
+        This is before the component <Value.Number value={123} inline />{' '}
         This is after the component
       </P>
     </ComponentBox>

diff --git a/...esign-system-portal/src/docs/uilib/extensions/forms/Value/OrganizationNumber/Examples.tsx b/...esign-system-portal/src/docs/uilib/extensions/forms/Value/OrganizationNumber/Examples.tsx
@@ -46,9 +46,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.OrganizationNumber value="123456789" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.OrganizationNumber value="123456789" inline /> This is after
+        the component
       </P>
     </ComponentBox>
   )

diff --git a/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/PhoneNumber/Examples.tsx b/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/PhoneNumber/Examples.tsx
@@ -56,9 +56,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.PhoneNumber value="98712345" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.PhoneNumber value="98712345" inline /> This is after the
+        component
       </P>
     </ComponentBox>
   )

diff --git a/...design-system-portal/src/docs/uilib/extensions/forms/Value/PostalCodeAndCity/Examples.tsx b/...design-system-portal/src/docs/uilib/extensions/forms/Value/PostalCodeAndCity/Examples.tsx
@@ -59,9 +59,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.PostalCodeAndCity value="0010 Oslo" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.PostalCodeAndCity value="0010 Oslo" inline /> This is after
+        the component
       </P>
     </ComponentBox>
   )

diff --git a/...dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SelectCountry/Examples.tsx b/...dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SelectCountry/Examples.tsx
@@ -48,9 +48,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.SelectCountry value="NO" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.SelectCountry value="NO" inline /> This is after the
+        component
       </P>
     </ComponentBox>
   )

diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Selection/Examples.tsx b/...ges/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Selection/Examples.tsx
@@ -38,8 +38,7 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.Selection value="Baz" inline />
+        This is before the component <Value.Selection value="Baz" inline />{' '}
         This is after the component
       </P>
     </ComponentBox>

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/Examples.tsx
@@ -46,9 +46,9 @@ export const Inline = () => {
   return (
     <ComponentBox>
       <P>
-        This is before the component
-        <Value.String value="Text value" inline />
-        This is after the component
+        This is before the component{' '}
+        <Value.String value="Text value" inline /> This is after the
+        component
       </P>
     </ComponentBox>
   )

diff --git a/...n-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock.mdx b/...n-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock.mdx
@@ -6,6 +6,8 @@ showTabs: true
 tabs:
   - title: Info
     key: '/info'
+  - title: Demos
+    key: '/demos'
   - title: Properties
     key: '/properties'
 breadcrumb:

diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/Examples.tsx b/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/Examples.tsx
@@ -17,10 +17,8 @@ export const Inline = () => {
       data-visual-test="value-block-inline"
     >
       <P>
-        this is before the value
-        <ValueBlock inline>Foo</ValueBlock>
-        <ValueBlock inline>Bar</ValueBlock>
-        this is after the value
+        this is before the value <ValueBlock inline>Foo</ValueBlock>{' '}
+        <ValueBlock inline>Bar</ValueBlock> this is after the value
       </P>
     </ComponentBox>
   )

diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/stories/ValueBlock.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/stories/ValueBlock.stories.tsx
@@ -0,0 +1,15 @@
+import { Value } from '../..'
+import { P } from '../../../../elements'
+
+export default {
+  title: 'Eufemia/Extensions/Forms/ValueBlock',
+}
+
+export function Inline() {
+  return (
+    <P>
+      Max value (
+      <Value.Currency value={123} decimals={0} inline />)
+    </P>
+  )
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/dnb-value-block.scss b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/dnb-value-block.scss
@@ -21,16 +21,6 @@
 
   &--inline:not([class*='__composition']) {
     display: inline-block;
-    &::before,
-    &::after {
-      content: '\00A0'; // non-breaking space
-    }
-    .dnb-forms-value-block + & {
-      &::before {
-        content: none;
-      }
-    }
-
     font-size: inherit;
   }