BREAKING CHANGE(web-twig): Remove boolprop filter from Twig component…

…s #DS-798 Let Twig solve the boolean values by itself. ## Migration Guide You should set the boolean props using boolean values. If you used string for example, switch to boolean. - `<Button isDisabled="false">` → `<Button isDisabled={false}>` Type casting is generally considered an anti-pattern. We are removing this functionality to enforce stricter type adherence. Now, the correct type usage in all components is necessary but not yet enforced (this will require future functionality). For instance, a string value will be interpreted strictly as a string, and vice versa. Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · 981195b · 981195b
1 parent 198af86
commit 981195b
Show file tree

Hide file tree

Showing 17 changed files with 41 additions and 41 deletions.
diff --git a/packages/web-twig/CONTRIBUTING.md b/packages/web-twig/CONTRIBUTING.md
@@ -53,7 +53,7 @@ The `false` value is never passed and is treated as empty/null, so the prop will
 Do not use:
 
 ```twig
-{%- set _ariaHidden = props.ariaHidden | default(true) | boolprop -%}
+{%- set _ariaHidden = props.ariaHidden | default(true) -%}
 ```
 
 Instead use:

diff --git a/packages/web-twig/src/Resources/components/Accordion/AccordionContent.twig b/packages/web-twig/src/Resources/components/Accordion/AccordionContent.twig
@@ -3,7 +3,7 @@
 {%- set _id = props.id -%}
 {%- set _labelledById = props.labelledById -%}
 {%- set _parent = props.parent | default(null) -%}
-{%- set _isOpen = props.isOpen | default(false) | boolprop -%}
+{%- set _isOpen = props.isOpen | default(false) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Collapse' -%}

diff --git a/packages/web-twig/src/Resources/components/Accordion/AccordionHeader.twig b/packages/web-twig/src/Resources/components/Accordion/AccordionHeader.twig
@@ -3,7 +3,7 @@
 {%- set _id = props.id -%}
 {%- set _elementType = (props.elementType is defined) ? props.elementType : 'h3' -%}
 {%- set _for = props.for -%}
-{%- set _isOpen = props.isOpen | default(false) | boolprop -%}
+{%- set _isOpen = props.isOpen | default(false) -%}
 {%- set _unsafeSlot = props.UNSAFE_slot | default(null) -%}
 
 {# Class names #}

diff --git a/packages/web-twig/src/Resources/components/Alert/Alert.twig b/packages/web-twig/src/Resources/components/Alert/Alert.twig
@@ -2,7 +2,7 @@
 {%- set props = props | default([]) -%}
 {%- set _color = props.color | default('success') -%}
 {%- set _iconName = props.iconName | default(null) -%}
-{%- set _isCentered = props.isCentered | default(false) | boolprop -%}
+{%- set _isCentered = props.isCentered | default(false) -%}
 {%- set _elementType = props.elementType | default('div') -%}
 
 {# Class names #}

diff --git a/packages/web-twig/src/Resources/components/Button/Button.twig b/packages/web-twig/src/Resources/components/Button/Button.twig
@@ -2,10 +2,10 @@
 {%- set props = props | default([]) -%}
 {%- set _color = props.color | default('primary') -%}
 {%- set _size = props.size | default('medium') -%}
-{%- set _isBlock = props.isBlock | default(false) | boolprop -%}
-{%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
-{%- set _isLoading = props.isLoading | default(false) | boolprop -%}
-{%- set _isSquare = props.isSquare | default(false) | boolprop -%}
+{%- set _isBlock = props.isBlock | default(false) -%}
+{%- set _isDisabled = props.isDisabled | default(false) -%}
+{%- set _isLoading = props.isLoading | default(false) -%}
+{%- set _isSquare = props.isSquare | default(false) -%}
 {%- set _type = props.type | default('button') -%}
 
 {# Class names #}

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
@@ -3,10 +3,10 @@
 {%- set _color = props.color | default('primary') -%}
 {%- set _size = props.size | default('medium') -%}
 {%- set _href = props.href -%}
-{%- set _isBlock = props.isBlock | default(false) | boolprop -%}
-{%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
-{%- set _isLoading = props.isLoading | default(false) | boolprop -%}
-{%- set _isSquare = props.isSquare | default(false) | boolprop -%}
+{%- set _isBlock = props.isBlock | default(false) -%}
+{%- set _isDisabled = props.isDisabled | default(false) -%}
+{%- set _isLoading = props.isLoading | default(false) -%}
+{%- set _isSquare = props.isSquare | default(false) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}

diff --git a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
@@ -3,11 +3,11 @@
 {%- set _helperText = props.helperText | default(null) -%}
 {%- set _id = props.id | default(null) -%}
 {%- set _inputProps = props.inputProps | default([]) -%}
-{%- set _isChecked = props.isChecked | default(false) | boolprop -%}
-{%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
-{%- set _isItem = props.isItem | default(false) | boolprop -%}
-{%- set _isLabelHidden = props.isLabelHidden | default(false) | boolprop -%}
-{%- set _isRequired = props.isRequired | default(false) | boolprop -%}
+{%- set _isChecked = props.isChecked | default(false) -%}
+{%- set _isDisabled = props.isDisabled | default(false) -%}
+{%- set _isItem = props.isItem | default(false) -%}
+{%- set _isLabelHidden = props.isLabelHidden | default(false) -%}
+{%- set _isRequired = props.isRequired | default(false) -%}
 {%- set _label = props.label | default(null) -%}
 {%- set _name = props.name | default(null) -%}
 {%- set _unsafeHelperText = props.UNSAFE_helperText | default(null) -%}

diff --git a/packages/web-twig/src/Resources/components/Collapse/Collapse.twig b/packages/web-twig/src/Resources/components/Collapse/Collapse.twig
@@ -3,7 +3,7 @@
 {%- set _breakpoint = props.breakpoint | default(null) -%}
 {%- set _elementType = props.elementType | default('div') -%}
 {%- set _id = props.id -%}
-{%- set _isOpen = props.isOpen | default(false) | boolprop -%}
+{%- set _isOpen = props.isOpen | default(false) -%}
 {%- set _parent = props.parent | default(null) -%}
 
 {# Class names #}

diff --git a/packages/web-twig/src/Resources/components/Link/Link.twig b/packages/web-twig/src/Resources/components/Link/Link.twig
@@ -2,8 +2,8 @@
 {%- set props = props | default([]) -%}
 {%- set _color = props.color | default('primary') -%}
 {%- set _href = props.href -%}
-{%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
-{%- set _isUnderlined = props.isUnderlined | default(false) | boolprop -%}
+{%- set _isDisabled = props.isDisabled | default(false) -%}
+{%- set _isUnderlined = props.isUnderlined | default(false) -%}
 
 {# Class names #}
 {%- set _colorClassName = _spiritClassPrefix ~ 'link-' ~ _color -%}

diff --git a/packages/web-twig/src/Resources/components/Radio/Radio.twig b/packages/web-twig/src/Resources/components/Radio/Radio.twig
@@ -2,10 +2,10 @@
 {%- set _autocomplete = props.autocomplete | default(null) -%}
 {%- set _id = props.id | default(null) -%}
 {%- set _inputProps = props.inputProps | default([]) -%}
-{%- set _isChecked = props.isChecked | default(false) | boolprop -%}
-{%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
-{%- set _isItem = props.isItem | default(false) | boolprop -%}
-{%- set _isLabelHidden = props.isLabelHidden | default(false) | boolprop -%}
+{%- set _isChecked = props.isChecked | default(false) -%}
+{%- set _isDisabled = props.isDisabled | default(false) -%}
+{%- set _isItem = props.isItem | default(false) -%}
+{%- set _isLabelHidden = props.isLabelHidden | default(false) -%}
 {%- set _label = props.label -%}
 {%- set _unsafeLabel = props.UNSAFE_label | default(null) -%}
 {%- set _name = props.name | default(null) -%}

diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.twig b/packages/web-twig/src/Resources/components/Stack/Stack.twig
@@ -1,10 +1,10 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _elementType = props.elementType | default('div') -%}
-{%- set _hasEndDivider = props.hasEndDivider | default(false) | boolprop -%}
-{%- set _hasIntermediateDividers = props.hasIntermediateDividers | default(false) | boolprop -%}
-{%- set _hasSpacing = props.hasSpacing | default(false) | boolprop -%}
-{%- set _hasStartDivider = props.hasStartDivider | default(false) | boolprop -%}
+{%- set _hasEndDivider = props.hasEndDivider | default(false) -%}
+{%- set _hasIntermediateDividers = props.hasIntermediateDividers | default(false) -%}
+{%- set _hasSpacing = props.hasSpacing | default(false) -%}
+{%- set _hasStartDivider = props.hasStartDivider | default(false) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Stack' -%}

diff --git a/packages/web-twig/src/Resources/components/Tabs/TabLink.twig b/packages/web-twig/src/Resources/components/Tabs/TabLink.twig
@@ -2,7 +2,7 @@
 {%- set props = props | default([]) -%}
 {%- set _ariaTarget = props.ariaTarget | default(null) -%}
 {%- set _href = props.href | default(null) -%}
-{%- set _isSelected = props.isSelected | default(false) | boolprop -%}
+{%- set _isSelected = props.isSelected | default(false) -%}
 {%- set _target = props.target | default(null) -%}
 
 {# Class names #}

diff --git a/packages/web-twig/src/Resources/components/Tabs/TabPane.twig b/packages/web-twig/src/Resources/components/Tabs/TabPane.twig
@@ -1,7 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _id = props.id | default(null) -%}
-{%- set _isSelected = props.isSelected | default(false) | boolprop -%}
+{%- set _isSelected = props.isSelected | default(false) -%}
 {%- set _label = props.label | default(null) -%}
 
 {# Class names #}

diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
@@ -3,11 +3,11 @@
 {%- set _helperText = props.helperText | default(null) -%}
 {%- set _id = props.id -%}
 {%- set _inputProps = props.inputProps | default([]) -%}
-{%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
-{%- set _isFluid = props.isFluid | default(false) | boolprop -%}
-{%- set _isLabelHidden = props.isLabelHidden | default(false) | boolprop -%}
-{%- set _isMultiline = props.isMultiline | default(false) | boolprop -%}
-{%- set _isRequired = props.isRequired | default(false) | boolprop -%}
+{%- set _isDisabled = props.isDisabled | default(false) -%}
+{%- set _isFluid = props.isFluid | default(false) -%}
+{%- set _isLabelHidden = props.isLabelHidden | default(false) -%}
+{%- set _isMultiline = props.isMultiline | default(false) -%}
+{%- set _isRequired = props.isRequired | default(false) -%}
 {%- set _label = props.label | default(null) -%}
 {%- set _name = props.name | default(null) -%}
 {%- set _type = props.type | default('text') -%}
@@ -19,10 +19,10 @@
 {%- set _value = props.value | default(null) -%}
 
 {# Extended API for TextArea #}
-{%- set _isAutoResizing = props.isAutoResizing | default(false) | boolprop -%}
+{%- set _isAutoResizing = props.isAutoResizing | default(false) -%}
 
 {# Extended API for TextField #}
-{%- set _hasPasswordToggle = props.hasPasswordToggle | default(false) | boolprop -%}
+{%- set _hasPasswordToggle = props.hasPasswordToggle | default(false) -%}
 {%- set _inputWidth = props.inputWidth | default(null) -%}
 
 {# Class names #}

diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig
@@ -2,7 +2,7 @@
 {%- set props = props | default([]) -%}
 {%- set _closeLabel = props.closeLabel | default('Close') -%}
 {%- set _id = props.id | default(null) -%}
-{%- set _isDismissible = props.isDismissible | default(false) | boolprop -%}
+{%- set _isDismissible = props.isDismissible | default(false) -%}
 {%- set _placement = props.placement | default('bottom') -%}
 
 {# Class names #}

diff --git a/...omponentsSnapshotTest__test with data set buttonWithDisabledFalsePropDefault.twig__1.html b/...omponentsSnapshotTest__test with data set buttonWithDisabledFalsePropDefault.twig__1.html
@@ -6,7 +6,7 @@
   </head>
   <body>
     <button class="Button Button--primary Button--medium" type="button">Not Disabled button with boolean false prop
-    value</button> <button class="Button Button--primary Button--medium" type="button">Not Disabled button with string
-    false prop value</button>
+    value</button> <button class="Button Button--primary Button--medium" type="button" disabled>Disabled
+    button with string false prop value, should still be disabled</button>
   </body>
 </html>
diff --git a/packages/web-twig/tests/components-fixtures/buttonWithDisabledFalsePropDefault.twig b/packages/web-twig/tests/components-fixtures/buttonWithDisabledFalsePropDefault.twig
@@ -1,2 +1,2 @@
 <Button color="primary" isDisabled={false}>Not Disabled button with boolean false prop value</Button>
-<Button color="primary" isDisabled="false">Not Disabled button with string false prop value</Button>
+<Button color="primary" isDisabled="false">Disabled button with string false prop value, should still be disabled</Button>