fix: address book name broken on address input LW-10451 (#1158)

* fix: prevent line break on white spaces

* fix: use normal styles for element outside theme provider

* feat: add story

* fix: global theme overriding light theme

* refactor: not needed anymore

Author: Lucas

packages/core/.storybook/theme.scss

@@ -12,7 +12,7 @@
     }
   }
 
-  html[data-theme='dark'],
+  html[data-theme='dark']:not(:has(div[data-theme='light'])),
   div[data-theme='dark'] {
     @include theme-custom-properties($dark-theme);
   }
@@ -28,7 +28,7 @@
     }
   }
 
-  html[data-theme='light'],
+  html[data-theme='light']:not(:has(div[data-theme='dark'])),
   div[data-theme='light'] {
     @include theme-custom-properties($light-theme);
   }

packages/core/src/ui/components/DestinationAddressInput/DestinationAddressInput.module.scss

@@ -79,9 +79,10 @@ button.addressBookBtn {
     flex: 1;
     font-weight: 400;
     padding-right: size_unit(1.5);
+    white-space: nowrap;
     &:first-child {
       font-weight: 600;
-      flex:0;
+      flex: 0;
     }
 
     p {
@@ -93,7 +94,6 @@ button.addressBookBtn {
   }
 }
 
-
 .children {
   pointer-events: none;
   position: absolute;
@@ -102,7 +102,7 @@ button.addressBookBtn {
   z-index: 1;
   background: var(--light-mode-light-grey, var(--dark-mode-dark-grey, #2f2f2f)) !important;
   padding-left: size_unit(1.5);
-  
+
   @media (max-width: $breakpoint-popup) {
     top: 8px;
     left: 0px;

packages/core/src/ui/components/DestinationAddressInput/DestinationAddressInput.stories.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable unicorn/no-null */
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DestinationAddressInput, DestinationAddressInputProps } from './DestinationAddressInput';
+import noop from 'lodash/noop';
+import { Flex } from '@lace/ui';
+
+const meta: Meta<DestinationAddressInputProps> = {
+  title: 'Components/DestinationAddressInput',
+  component: DestinationAddressInput,
+  parameters: {
+    layout: 'centered'
+  },
+  render: (props) => (
+    <Flex flexDirection="column" alignItems="stretch">
+      <DestinationAddressInput {...props} />
+    </Flex>
+  )
+};
+
+export default meta;
+
+type Story = StoryObj<DestinationAddressInputProps>;
+
+const data: DestinationAddressInputProps = {
+  value: {
+    name: 'My Address',
+    address:
+      'addr_test1qqmlvzkhufx0f94vqtfsmfa7yzxtwql8ga8aq5yk6u98gn593a82g73tm9n0l6vehusxn3fxwwxhrssgmvnwnlaa6p4qdgdrwh'
+  },
+  validationObject: { name: true, address: true },
+  options: [],
+  onChange: noop,
+  valid: true,
+  translations: {
+    recipientAddress: 'Recipient Address'
+  }
+};
+
+export const Overview: Story = {
+  args: {
+    ...data
+  }
+};
+
+export const LongName: Story = {
+  args: {
+    ...data,
+    value: {
+      ...data.value,
+      name: 'My Payment Address'
+    }
+  }
+};

packages/ui/src/design-system/decorators/color-schema/color-schema.css.ts

@@ -11,9 +11,9 @@ export const storyContainer = style([
   { flex: 1, overflowY: 'auto' },
 ]);
 
-export const root = style([
-  sx({
-    minHeight: '$fill',
-    h: '$fill',
-  }),
-]);
+export const root = style({
+  minHeight: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+});

packages/ui/src/design-system/decorators/color-schema/color-schema.decorator.tsx

@@ -4,14 +4,13 @@ import type { DecoratorFunction } from '@storybook/csf/dist/story';
 import type { ReactFramework } from '@storybook/react';
 
 import { ThemeColorScheme, LocalThemeProvider } from '../../../design-tokens';
-import { Flex } from '../../flex';
 
 import * as styles from './color-schema.css';
 
 export const colorSchemaDecorator: DecoratorFunction<
   ReactFramework
 > = Story => (
-  <Flex className={styles.root} flexDirection="row">
+  <div className={styles.root}>
     <LocalThemeProvider
       colorScheme={ThemeColorScheme.Light}
       className={styles.storyContainer}
@@ -24,5 +23,5 @@ export const colorSchemaDecorator: DecoratorFunction<
     >
       <Story />
     </LocalThemeProvider>
-  </Flex>
+  </div>
 );