Skip to content

Commit 90d84e9

Browse files
author
Lucas
authored
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
1 parent cbf43f9 commit 90d84e9

File tree

5 files changed

+68
-14
lines changed

5 files changed

+68
-14
lines changed

packages/core/.storybook/theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
}
1313
}
1414

15-
html[data-theme='dark'],
15+
html[data-theme='dark']:not(:has(div[data-theme='light'])),
1616
div[data-theme='dark'] {
1717
@include theme-custom-properties($dark-theme);
1818
}
@@ -28,7 +28,7 @@
2828
}
2929
}
3030

31-
html[data-theme='light'],
31+
html[data-theme='light']:not(:has(div[data-theme='dark'])),
3232
div[data-theme='light'] {
3333
@include theme-custom-properties($light-theme);
3434
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,10 @@ button.addressBookBtn {
7979
flex: 1;
8080
font-weight: 400;
8181
padding-right: size_unit(1.5);
82+
white-space: nowrap;
8283
&:first-child {
8384
font-weight: 600;
84-
flex:0;
85+
flex: 0;
8586
}
8687

8788
p {
@@ -93,7 +94,6 @@ button.addressBookBtn {
9394
}
9495
}
9596

96-
9797
.children {
9898
pointer-events: none;
9999
position: absolute;
@@ -102,7 +102,7 @@ button.addressBookBtn {
102102
z-index: 1;
103103
background: var(--light-mode-light-grey, var(--dark-mode-dark-grey, #2f2f2f)) !important;
104104
padding-left: size_unit(1.5);
105-
105+
106106
@media (max-width: $breakpoint-popup) {
107107
top: 8px;
108108
left: 0px;
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* eslint-disable unicorn/no-null */
2+
import React from 'react';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
5+
import { DestinationAddressInput, DestinationAddressInputProps } from './DestinationAddressInput';
6+
import noop from 'lodash/noop';
7+
import { Flex } from '@lace/ui';
8+
9+
const meta: Meta<DestinationAddressInputProps> = {
10+
title: 'Components/DestinationAddressInput',
11+
component: DestinationAddressInput,
12+
parameters: {
13+
layout: 'centered'
14+
},
15+
render: (props) => (
16+
<Flex flexDirection="column" alignItems="stretch">
17+
<DestinationAddressInput {...props} />
18+
</Flex>
19+
)
20+
};
21+
22+
export default meta;
23+
24+
type Story = StoryObj<DestinationAddressInputProps>;
25+
26+
const data: DestinationAddressInputProps = {
27+
value: {
28+
name: 'My Address',
29+
address:
30+
'addr_test1qqmlvzkhufx0f94vqtfsmfa7yzxtwql8ga8aq5yk6u98gn593a82g73tm9n0l6vehusxn3fxwwxhrssgmvnwnlaa6p4qdgdrwh'
31+
},
32+
validationObject: { name: true, address: true },
33+
options: [],
34+
onChange: noop,
35+
valid: true,
36+
translations: {
37+
recipientAddress: 'Recipient Address'
38+
}
39+
};
40+
41+
export const Overview: Story = {
42+
args: {
43+
...data
44+
}
45+
};
46+
47+
export const LongName: Story = {
48+
args: {
49+
...data,
50+
value: {
51+
...data.value,
52+
name: 'My Payment Address'
53+
}
54+
}
55+
};

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ export const storyContainer = style([
1111
{ flex: 1, overflowY: 'auto' },
1212
]);
1313

14-
export const root = style([
15-
sx({
16-
minHeight: '$fill',
17-
h: '$fill',
18-
}),
19-
]);
14+
export const root = style({
15+
minHeight: '100%',
16+
height: '100%',
17+
display: 'flex',
18+
flexDirection: 'row',
19+
});

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ import type { DecoratorFunction } from '@storybook/csf/dist/story';
44
import type { ReactFramework } from '@storybook/react';
55

66
import { ThemeColorScheme, LocalThemeProvider } from '../../../design-tokens';
7-
import { Flex } from '../../flex';
87

98
import * as styles from './color-schema.css';
109

1110
export const colorSchemaDecorator: DecoratorFunction<
1211
ReactFramework
1312
> = Story => (
14-
<Flex className={styles.root} flexDirection="row">
13+
<div className={styles.root}>
1514
<LocalThemeProvider
1615
colorScheme={ThemeColorScheme.Light}
1716
className={styles.storyContainer}
@@ -24,5 +23,5 @@ export const colorSchemaDecorator: DecoratorFunction<
2423
>
2524
<Story />
2625
</LocalThemeProvider>
27-
</Flex>
26+
</div>
2827
);

0 commit comments

Comments
 (0)