1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00

fix: Prevent text highlighting overlap between chips (#188)

This commit is contained in:
Valentin Jonovs 2019-10-08 11:58:35 +02:00 committed by Ivar Conradi Østhus
parent c536a42c79
commit 0989f8e681
2 changed files with 61 additions and 35 deletions

View File

@ -5,24 +5,32 @@ exports[`renders correctly when disabled 1`] = `
<p>
featureName
</p>
<react-mdl-Chip
<div
style={
Object {
"marginRight": "3px",
"display": "flex",
}
}
>
item1
</react-mdl-Chip>
<react-mdl-Chip
style={
Object {
"marginRight": "3px",
<react-mdl-Chip
style={
Object {
"marginRight": "3px",
}
}
}
>
item2
</react-mdl-Chip>
>
item1
</react-mdl-Chip>
<react-mdl-Chip
style={
Object {
"marginRight": "3px",
}
}
>
item2
</react-mdl-Chip>
</div>
</div>
`;
@ -32,6 +40,13 @@ exports[`renders strategy with empty list as param 1`] = `
<p>
featureName
</p>
<div
style={
Object {
"display": "flex",
}
}
/>
<div
style={
Object {
@ -73,26 +88,34 @@ exports[`renders strategy with list as param 1`] = `
<p>
featureName
</p>
<react-mdl-Chip
onClose={[Function]}
<div
style={
Object {
"marginRight": "3px",
"display": "flex",
}
}
>
item1
</react-mdl-Chip>
<react-mdl-Chip
onClose={[Function]}
style={
Object {
"marginRight": "3px",
<react-mdl-Chip
onClose={[Function]}
style={
Object {
"marginRight": "3px",
}
}
}
>
item2
</react-mdl-Chip>
>
item1
</react-mdl-Chip>
<react-mdl-Chip
onClose={[Function]}
style={
Object {
"marginRight": "3px",
}
}
>
item2
</react-mdl-Chip>
</div>
<div
style={
Object {

View File

@ -54,15 +54,18 @@ export default class InputList extends Component {
return (
<div>
<p>{name}</p>
{list.map((entryValue, index) => (
<Chip
key={index + entryValue}
style={{ marginRight: '3px' }}
onClose={disabled ? undefined : () => this.onClose(index)}
>
{entryValue}
</Chip>
))}
<div style={{ display: 'flex' }}>
{list.map((entryValue, index) => (
<Chip
key={index + entryValue}
style={{ marginRight: '3px' }}
onClose={disabled ? undefined : () => this.onClose(index)}
>
{entryValue}
</Chip>
))}
</div>
{disabled ? (
''