fixed fullwidth and changed how buttons collapse.

gambitph · May 18, 2024 · 615d812 · 615d812
1 parent 7ae311c
commit 615d812
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/block-components/button/style.js b/src/block-components/button/style.js
@@ -45,7 +45,7 @@ const Styles = props => {
 				attrName="fullWidth"
 				attrNameTemplate={ attrNameTemplate }
 				key="buttonFullWidth-save"
-				valueCallback={ () => '1 1 0' }
+				valueCallback={ () => '1 0 var(--stk-button-group-flex-wrap, 0)' }
 				enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) }
 			/>
 			<BlockCss
@@ -56,7 +56,7 @@ const Styles = props => {
 				attrName="fullWidth"
 				attrNameTemplate={ attrNameTemplate }
 				key="buttonFullWidth-flex"
-				valueCallback={ () => '1 1 0' }
+				valueCallback={ () => '1 0 var(--stk-button-group-flex-wrap, 0)' }
 				enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) }
 			/>
 			<BlockCss

diff --git a/src/block/button-group/style.js b/src/block/button-group/style.js
@@ -210,6 +210,30 @@ const Styles = props => {
 				} }
 				dependencies={ [ 'flexWrap' ] }
 			/>
+			<BlockCss
+				{ ...propsToPass }
+				renderIn="save"
+				selector=".stk-button-group"
+				styleRule="--stk-button-group-flex-wrap"
+				attrName="flexWrap"
+				key="flexWrap-save-button-group"
+				responsive="all"
+				valueCallback={ value => {
+					return value ? 'auto' : undefined
+				} }
+			/>
+			<BlockCss
+				{ ...propsToPass }
+				renderIn="save"
+				selector=".stk-button-group .stk-block-button"
+				styleRule="width"
+				attrName="flexWrap"
+				key="flexWrap-save-button-group-unset-width"
+				responsive="all"
+				valueCallback={ value => {
+					return value ? 'unset' : undefined
+				} }
+			/>
 		</>
 	)
 }