Space & SpaceVertical default to 100% width of their container again (#954)

Author: Luke Bowerman

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.37] - 2020-05-20
+
+### Fixed
+
+- `Space` & `SpaceVertical` default to 100% width of their container again
+
 ## [0.7.36] - 2020-05-20
 
 ### Added

packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Fieldset 1`] = `
 .c0 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24,6 +25,7 @@ exports[`Fieldset 1`] = `
 }
 
 .c2 {
+  width: 100%;
   padding: 0rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -180,6 +182,7 @@ exports[`Fieldset 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <legend
     className="c1"
@@ -192,6 +195,7 @@ exports[`Fieldset 1`] = `
   <div
     className="c2 "
     role="group"
+    width="100%"
   >
     <div
       className="c3 "

packages/components/src/Form/__snapshots__/Form.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Form with one child 1`] = `
 .c0 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -150,6 +151,7 @@ exports[`Form with one child 1`] = `
 
 <form
   className="c0"
+  width="100%"
 >
   <div
     className="c1 "

packages/components/src/Layout/Space/Space.tsx

@@ -125,4 +125,4 @@ export const Space = styled.div<SpaceHelperProps>`
     !around && !between && !evenly && fauxFlexGap}
 `
 
-Space.defaultProps = { alignItems: 'center' }
+Space.defaultProps = { alignItems: 'center', width: '100%' }

packages/components/src/Layout/Space/SpaceVertical.tsx

@@ -72,4 +72,4 @@ export const SpaceVertical = styled.div<SpaceVerticalProps>`
       : `&& > *:first-child { margin-top: ${theme.space.none}; }`}
 `
 
-SpaceVertical.defaultProps = { align: 'start' }
+SpaceVertical.defaultProps = { align: 'start', width: '100%' }

packages/components/src/Layout/Space/__snapshots__/Space.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Space around + gap (all you get is around) 1`] = `
 .c0 {
+  width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -21,6 +22,7 @@ exports[`Space around + gap (all you get is around) 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑
@@ -39,6 +41,7 @@ exports[`Space around + gap (all you get is around) 1`] = `
 
 exports[`Space around 1`] = `
 .c0 {
+  width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -58,6 +61,7 @@ exports[`Space around 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑
@@ -76,6 +80,7 @@ exports[`Space around 1`] = `
 
 exports[`Space between 1`] = `
 .c0 {
+  width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -95,6 +100,7 @@ exports[`Space between 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑
@@ -113,6 +119,7 @@ exports[`Space between 1`] = `
 
 exports[`Space default 1`] = `
 .c0 {
+  width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -136,6 +143,7 @@ exports[`Space default 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑
@@ -154,6 +162,7 @@ exports[`Space default 1`] = `
 
 exports[`Space evenly 1`] = `
 .c0 {
+  width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -173,6 +182,7 @@ exports[`Space evenly 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑
@@ -191,6 +201,7 @@ exports[`Space evenly 1`] = `
 
 exports[`Space reversed 1`] = `
 .c0 {
+  width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -214,6 +225,7 @@ exports[`Space reversed 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑
@@ -232,6 +244,7 @@ exports[`Space reversed 1`] = `
 
 exports[`Space with specified gap 1`] = `
 .c0 {
+  width: 100%;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -255,6 +268,7 @@ exports[`Space with specified gap 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑

packages/components/src/Layout/Space/__snapshots__/SpaceVertical.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`SpaceVertical default 1`] = `
 .c0 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,6 +26,7 @@ exports[`SpaceVertical default 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑
@@ -43,6 +45,7 @@ exports[`SpaceVertical default 1`] = `
 
 exports[`SpaceVertical reversed 1`] = `
 .c0 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -66,6 +69,7 @@ exports[`SpaceVertical reversed 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑
@@ -84,6 +88,7 @@ exports[`SpaceVertical reversed 1`] = `
 
 exports[`SpaceVertical with specified gap 1`] = `
 .c0 {
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -107,6 +112,7 @@ exports[`SpaceVertical with specified gap 1`] = `
 
 <div
   className="c0"
+  width="100%"
 >
   <div>
     🥑