Merge pull request #37 from teamshares/SLH/fix-checkbox-group-spacing

Fix checkbox group spacing for Simple Form

docs/pages/teamshares/changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.2
+
+- Fix to fix spacing for `sl-checkbox` when nested in `sl-checkbox-group` with Simple Form (`ts_form_for`)
+
 ## 2.1.1
 
 - Minor updates to `sl-checkbox-group`

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@teamshares/shoelace",
  "description": "The Teamshares flavor of a forward-thinking library of web components.",
- "version": "2.1.1",
+ "version": "2.1.2",
  "upstreamVersion": "2.14.0",
  "homepage": "https://github.com/teamshares/shoelace",
  "author": "Cory LaViska",

src/components/checkbox-group/checkbox-group.component.ts

@@ -162,6 +162,9 @@ export default class SlCheckboxGroup extends ShoelaceElement implements Shoelace
  checkbox.size = this.size;
  checkbox.horizontal = this.horizontal;
 
+ // Add class to checkboxes in a Checkbox Group so that we can style them without using :slotted
+ checkbox.classList.add('groupedCheckbox');
+
  // If one checkbox in a group is 'contained' make sure they're all contained
  const isAnyContained = checkboxes.some(containedCheckbox => containedCheckbox.contained);
  if (isAnyContained) {

src/components/checkbox/checkbox.styles.ts

@@ -136,6 +136,21 @@ export default css`
  outline-offset: var(--sl-focus-ring-offset);
  }
 
+ /* Handle spacing for checkbox groups rendered with Simple Form */
+ :host(.groupedCheckbox) {
+ margin-top: var(--sl-spacing-medium);
+ }
+
+ :host(.groupedCheckbox[horizontal]),
+ :host(.groupedCheckbox[contained]) {
+ margin-top: var(--sl-spacing-small);
+ }
+
+ :host(.groupedCheckbox[horizontal][contained]) {
+ margin-top: 0;
+ height: 100%;
+ }
+
  .checkbox__label {
  display: inline-block;
  color: var(--sl-input-label-color);