Restyled component group header to minimize width on IE/Edge too. Fixes

#367.
Orckestra · Jan 25, 2017 · e96febf · e96febf
1 parent e98cca8
commit e96febf
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git a/Website/Composite/console/components/presentation/Palette.js b/Website/Composite/console/components/presentation/Palette.js
@@ -17,6 +17,7 @@ export const ItemGroup = styled.div`
 `;
 export const ItemGroupTop = styled.div`
 	position: relative;
+	display: inline-block;
 	width: max-content;
 	cursor: default;
 `;
@@ -131,27 +132,29 @@ const Palette = props => {
 		{props.itemGroups.map(itemGroup =>
 			<ItemGroup
 				key={itemGroup.get('name')}>
-				<ItemGroupTop
-					onClick={() => {
-						let closed = props.dialogData.get('closed') || Immutable.Map();
-						closed = closed.set(itemGroup.get('name'), !closed.get(itemGroup.get('name')));
-						props.dispatch(
-							setDialogState(
-								props.dialogName,
-								props.dialogData
-								.set('closed', closed)
-							)
-						);
-					}}>
-					<ItemGroupSwitch
-						id={props.dialogData.getIn(['closed', itemGroup.get('name')]) ?
-							'chevron-right' :
-							'chevron-down'
-						}
-					/>
-					<ItemGroupCount>({itemGroup.get('entries').size})</ItemGroupCount>
-					<ItemGroupTitle>{itemGroup.get('title')}</ItemGroupTitle>
-				</ItemGroupTop>
+				<div>
+					<ItemGroupTop
+						onClick={() => {
+							let closed = props.dialogData.get('closed') || Immutable.Map();
+							closed = closed.set(itemGroup.get('name'), !closed.get(itemGroup.get('name')));
+							props.dispatch(
+								setDialogState(
+									props.dialogName,
+									props.dialogData
+									.set('closed', closed)
+								)
+							);
+						}}>
+						<ItemGroupSwitch
+							id={props.dialogData.getIn(['closed', itemGroup.get('name')]) ?
+								'chevron-right' :
+								'chevron-down'
+							}
+						/>
+						<ItemGroupCount>({itemGroup.get('entries').size})</ItemGroupCount>
+						<ItemGroupTitle>{itemGroup.get('title')}</ItemGroupTitle>
+					</ItemGroupTop>
+				</div>
 				{itemGroup.get('entries').map(item => {
 					let itemName = item.get('id');
 					const selectItem = () => props.dispatch(

diff --git a/Website/test/unit/suite/view/presentation/Palette.spec.js b/Website/test/unit/suite/view/presentation/Palette.spec.js
@@ -61,9 +61,11 @@ describe('Palette', () => {
 		renderer.render(<Palette {...props}/>);
 		return expect(renderer, 'to have rendered', <div>
 			<ItemGroup key='group1'>
-				<ItemGroupTop>
-					<ItemGroupTitle>First group</ItemGroupTitle>
-				</ItemGroupTop>
+				<div>
+					<ItemGroupTop>
+						<ItemGroupTitle>First group</ItemGroupTitle>
+					</ItemGroupTop>
+				</div>
 				<Item key='entry1' active={false}>
 					<PreviewImage image='/path/to/image1.png'/>
 					<InfoBox>
@@ -80,9 +82,11 @@ describe('Palette', () => {
 				</Item>
 			</ItemGroup>
 			<ItemGroup key='group2'>
-				<ItemGroupTop>
-					<ItemGroupTitle>Second group</ItemGroupTitle>
-				</ItemGroupTop>
+				<div>
+					<ItemGroupTop>
+						<ItemGroupTitle>Second group</ItemGroupTitle>
+					</ItemGroupTop>
+				</div>
 				<Item key='entry3' active={false}>
 					<PreviewIcon id='testicon'/>
 					<InfoBox>