Added property 'fullWidth' for LinkBarSearchField

src/atoms/LinkBarSearchField.jsx

@@ -28,15 +28,15 @@ const AbsoluteFontIcon = styled(FontIconBase)`
 const InputBase = LinkBarElementBase.withComponent('input');
 const Input = styled(InputBase)`
 	${(props) => {
-		const { size, icon } = props;
+		const { size, icon, fullWidth } = props;
 		const horizontalBase = getVariable('horizontalBase')(props);
 		const placeholderColor = getColor(props.placeholderColor)(props);
 
 		const widthFactor = size === 'small' ? 9 : 13;
 		const marginFactor = size === 'small' ? 1/2 : 1;
 
 		const horizontalMargin = `calc(${marginFactor} * ${horizontalBase})`;
-		const width = `calc(${widthFactor} * ${horizontalBase})`;
+		const width = fullWidth ? `calc(100% - calc(2 * ${horizontalMargin}))` : `calc(${widthFactor} * ${horizontalBase})`;
 		let paddingLeft = '1rem';
 		if (icon) {
 			paddingLeft = size === 'small' ? '2.7rem' : '4.4rem';
@@ -58,21 +58,26 @@ const Input = styled(InputBase)`
 		`;
 	}}
 `;
-
+const Form = styled.form`
+	${({ fullWidth }) => fullWidth && css(`
+		width: 100%;
+	`)}
+`
 const LinkBarSearchField = ({
 	action,
 	iconColor,
 	inputName,
 	formName,
 	size,
 	icon,
+	fullWidth,
 	...rest
 }) => (
 	<Fragment>
 		{icon && <AbsoluteFontIcon name={icon} size={size} textColor={iconColor} inset />}
-		<form id={formName} name={formName} action={action}>
-			<Input id={inputName} name={inputName} size={size} type="search" inset rounded required icon={icon} {...rest} />
-		</form>
+		<Form id={formName} name={formName} action={action} fullWidth={fullWidth}>
+			<Input id={inputName} name={inputName} size={size} type="search" inset rounded required icon={icon} fullWidth={fullWidth} {...rest} />
+		</Form>
 	</Fragment>
 );
 LinkBarSearchField.propTypes = {
@@ -94,8 +99,10 @@ LinkBarSearchField.propTypes = {
 	textColor: PropTypes.string,
 	/** Icon's name, for example "search", if empty(by default) icon will not render */
 	icon: PropTypes.string,
+	/** If true will change width to 100% except calculated margins, which depends on size and horizontalBase */
+	fullWidth: PropTypes.bool,
 };
-LinkBarSearchField.defaultProps ={
+LinkBarSearchField.defaultProps = {
 	activeBackgroundColor: null,
 	backgroundColor: 'grayTintLighter',
 	iconColor: 'link',
@@ -105,6 +112,7 @@ LinkBarSearchField.defaultProps ={
 	size: 'medium',
 	textColor: 'type',
 	icon: "",
+	fullWidth: false,
 };
 
 export { LinkBarSearchField };

stories/link-bar-elements/SearchFieldStory.js

@@ -4,7 +4,6 @@ import { withInfo } from '@storybook/addon-info';
 // HorizontalLinkBar
 import {
 	HorizontalLinkBar,
-	LinkBarLink,
 	SmallLinkBarLink,
 	LargeLinkBarLink,
 	LinkBarSearchField,
@@ -21,9 +20,9 @@ const SearchFieldStory = () => (
 		</HorizontalLinkBar>
 		<div>-</div>
 		<HorizontalLinkBar backgroundColor="grayTintLighter">
-			<LinkBarLink linkText="One" url="https://example.com" isActive />
-			<LinkBarLink linkText="Two" url="https://example.com" />
 			<LinkBarSearchField
+				isListItem
+				fullWidth
 				placeholder="Search My Shoe"
 				backgroundColor="white"
 			/>

yarn.lock

@@ -8261,7 +8261,7 @@ sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-scheduler@^0.13.3, scheduler@^0.13.4:
+scheduler@^0.13.4:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
   integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==