Skip to content

Commit

Permalink
Merge pull request #662 from pat270/clay-654
Browse files Browse the repository at this point in the history 
#654 Create a pattern to space `.btn` 1rem
  • Loading branch information
@marcoscv-work
marcoscv-work authored Feb 28, 2018
2 parents ec6281c + b0e0099 commit 05d8e70
Show file tree
Hide file tree
Showing 9 changed files with 177 additions and 33 deletions.
25 changes: 25 additions & 0 deletions packages/clay/src/content/button_group.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,31 @@
section: Components
---

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Button Group Item</h3>

<blockquote class="blockquote">
<p>A component for spacing buttons without having to worry about white space added by browsers.</p>
</blockquote>

<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<div class="btn-group-item">
<button class="btn btn-secondary" type="button">Cancel</button>
</div>
<div class="btn-group-item">
<button class="btn btn-outline-secondary btn-outline-borderless" type="button">Back</button>
</div>
<div class="btn-group-item">
<a href="#1" role="button">Link</a>
</div>
</div>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Button Group</h3>
Expand Down
2 changes: 1 addition & 1 deletion packages/clay/src/content/form_custom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ <h3>Form File</h3>
</div>
<div class="form-group">
<div class="form-group-autofit">
<div class="form-group-item form-group-item-shrink">
<div class="form-group-item form-group-item-label form-group-item-shrink">
<label for="customFile4">Attach File</label>
</div>
<div class="form-group-item form-group-item-shrink">
Expand Down
20 changes: 16 additions & 4 deletions packages/clay/src/content/form_elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -501,8 +501,14 @@ <h3>Form Group Autofit</h3>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Submit</button>
<a class="btn btn-secondary" href="#1" role="button">Clear</a>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<div class="btn-group-item">
<a class="btn btn-secondary" href="#1" role="button">Clear</a>
</div>
</div>
</div>
</div>

Expand Down Expand Up @@ -563,8 +569,14 @@ <h3>Form Group Autofit (Horizontal Form)</h3>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Submit</button>
<a class="btn btn-secondary" href="#1" role="button">Clear</a>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<div class="btn-group-item">
<a class="btn btn-secondary" href="#1" role="button">Clear</a>
</div>
</div>
</div>
</form>
</div>
Expand Down
110 changes: 88 additions & 22 deletions packages/clay/src/content/modals.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,14 @@ <h3>Small Modal</h3>
<h4>Modal Body</h4>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Primary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -61,8 +67,14 @@ <h3>Default Modal</h3>
<h4>Modal Body</h4>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Primary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -97,8 +109,14 @@ <h3>Large Modal</h3>
<h4><a href="#1">Modal Body</a></h4>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Primary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -151,8 +169,14 @@ <h4>Modal Body</h4>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Primary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -265,8 +289,14 @@ <h4>Modal Body</h4>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Cancel</button>
<button class="btn btn-primary" type="button">Add</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Cancel</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Add</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -316,8 +346,14 @@ <h4>Modal Body</h4>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Cancel</button>
<button class="btn btn-primary" type="button">Add</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Cancel</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Add</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -352,8 +388,14 @@ <h3>Modal Body Iframe</h3>
<iframe src="{{rootPath}}/content/test-users-and-organizations/"></iframe>
</div>
<div class="modal-footer">
<a class="btn btn-secondary" data-dismiss="modal" href="#1" role="button">Cancel</a>
<button class="btn btn-primary" type="button">Add</button>
<div class="btn-group">
<div class="btn-group-item">
<a class="btn btn-secondary" data-dismiss="modal" href="#1" role="button">Cancel</a>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Add</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -398,8 +440,14 @@ <h4>Modal Body</h4>
</div>
<div class="modal-item">Some other content</div>
<div class="modal-item-last">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Primary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -428,8 +476,14 @@ <h4>Modal Body</h4>
<h4>Modal Body</h4>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Primary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -461,8 +515,14 @@ <h4>Modal Body</h4>
<button class="btn btn-primary" type="button">Primary</button>
</div>
<div class="modal-item-last">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Primary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -491,8 +551,14 @@ <h4>Modal Body</h4>
<h4>Modal Body</h4>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Primary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down
20 changes: 16 additions & 4 deletions packages/clay/src/content/sheet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,14 @@ <h4 class="sheet-tertiary-title">Sheet Tertiary Title</h4>
<div class="sheet-text">Sheet Subtitle and Sheet Tertiary Title are contained inside a sheet-section.</div>
</div>
<div class="sheet-footer">
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
<div class="btn-group-item">
<button class="btn btn-secondary" type="button">Secondary</button>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -83,8 +89,14 @@ <h4 class="sheet-tertiary-title">Sheet Tertiary Title</h4>
<div class="sheet-text">Sheet Subtitle and Sheet Tertiary Title are contained inside a sheet-section.</div>
</div>
<div class="sheet-footer">
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<div class="btn-group-item">
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
<div class="btn-group-item">
<button class="btn btn-secondary" type="button">Secondary</button>
</div>
</div>
</div>
</div>
</div>
Expand Down
10 changes: 8 additions & 2 deletions packages/clay/src/content/test_form_hierarchy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,8 +392,14 @@ <h3 class="sheet-subtitle">Sheet Section Nested in Fieldset</h3>
</div>
</fieldset>
<div class="sheet-footer">
<button class="btn btn-primary" type="submit">Save changes</button>
<button class="btn btn-secondary" type="button">Cancel</button>
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="submit">Save changes</button>
</div>
<div class="btn-group-item">
<button class="btn btn-secondary" type="button">Cancel</button>
</div>
</div>
</div>
</div>
</form>
Expand Down
4 changes: 4 additions & 0 deletions packages/clay/src/scss/atlas/variables/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ $btn-inline-item-font-size-sm: 0.875rem !default; // 14px
$btn-monospaced-size: 2.5rem !default; // 40px
$btn-monospaced-size-sm: 2rem !default; // 32px

// Button Group

$btn-group-item-margin-right: 1rem !default;

// Button Variants

$btn-primary: (
Expand Down
15 changes: 15 additions & 0 deletions packages/clay/src/scss/components/_button-groups.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,21 @@
}
}

.btn-group {
flex-wrap: wrap;
}

.btn-group-item {
align-items: center;
display: inline-flex;
margin-right: $btn-group-item-margin-right;
}

.btn-group-item:last-child,
.btn-group-item-last {
margin-right: 0;
}

.btn-toolbar {
.btn-group,
.input-group {
Expand Down
4 changes: 4 additions & 0 deletions packages/clay/src/scss/variables/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ $btn-monospaced-size-mobile: null !default;
$btn-monospaced-size-lg-mobile: null !default;
$btn-monospaced-size-sm-mobile: null !default;

// Button Group

$btn-group-item-margin-right: map-get($spacers, 2) !default;

// Button Toolbar

$btn-toolbar-spacer-x: 0.5rem !default; // 8px
Expand Down

0 comments on commit 05d8e70

Please sign in to comment.