Skip to content

Improve Select Menu spacing #844

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 23, 2019
Merged

Improve Select Menu spacing #844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f48d63f
Make (left) icons optional
simurai Jul 22, 2019
57178b8
Add icons to all buttons
simurai Jul 22, 2019
5a05ab5
Merge branch 'master' into select-menu-spacing
simurai Aug 22, 2019
7aa838b
Use flexbox for the items
simurai Aug 22, 2019
887b233
Update select-menu.md
simurai Aug 22, 2019
0577196
Use spacing variable
simurai Aug 23, 2019
ec86465
Add empty commit to re-run checks
simurai Aug 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 29 additions & 5 deletions docs/content/components/select-menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,8 +146,32 @@ Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-chec
</svg>
Selected state
</button>
<button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
<button class="SelectMenu-item" role="menuitemcheckbox">Default state</button>
<button class="SelectMenu-item" role="menuitemcheckbox">
<!-- <%= octicon "check", class: "SelectMenu-icon" %> -->
<svg
width="12"
height="16"
viewBox="0 0 12 16"
class="octicon octicon-check SelectMenu-icon"
aria-hidden="true"
>
<path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
</svg>
Default state
</button>
<button class="SelectMenu-item" role="menuitemcheckbox">
<!-- <%= octicon "check", class: "SelectMenu-icon" %> -->
<svg
width="12"
height="16"
viewBox="0 0 12 16"
class="octicon octicon-check SelectMenu-icon"
aria-hidden="true"
>
<path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
</svg>
Default state
</button>
</menu>
</div>
</div>
Expand Down Expand Up @@ -194,7 +218,7 @@ The list of items is arguably the most important subcomponent within the menu. B
/>
With an avatar
</button>
<button class="SelectMenu-item" role="menuitem">
<button class="SelectMenu-item flex-justify-between" role="menuitem">
With a status icon
<!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2" %> -->
<svg
Expand All @@ -207,13 +231,13 @@ The list of items is arguably the most important subcomponent within the menu. B
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
</svg>
</button>
<button class="SelectMenu-item" role="menuitem">
<button class="SelectMenu-item d-block" role="menuitem">
With a <span class="Label bg-blue" title="Label: label">label</span>
</button>
<button class="SelectMenu-item" role="menuitem">
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
</button>
<button class="SelectMenu-item" role="menuitem">
<button class="SelectMenu-item d-block" role="menuitem">
<h5>With a heading</h5>
<span>and some longer description</span>
</button>
Expand Down
17 changes: 7 additions & 10 deletions src/select-menu/select-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@
padding: $spacer-3;

@include breakpoint(sm) {
padding: $spacer-2;
padding-top: $spacer-2;
padding-bottom: $spacer-2;
}
}

Expand Down Expand Up @@ -173,9 +174,10 @@
// The interactive element used to make a selection

.SelectMenu-item {
display: block;
display: flex;
align-items: center;
width: 100%;
padding: $spacer-3 $spacer-5;
padding: $spacer-3;
overflow: hidden;
color: $text-gray;
text-align: left;
Expand All @@ -199,9 +201,8 @@
// The icon shown on the left of a list item. Typically a check icon.

.SelectMenu-icon {
position: absolute;
height: 1.5em; // Mimics line-height to vertically center the icon
margin-left: -20px;
width: $spacer-3; // fixed width to make sure following content aligns
margin-right: $spacer-2;
visibility: hidden;
transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
transform: scale(0);
Expand Down Expand Up @@ -296,10 +297,6 @@
&:last-child {
border-bottom: 0;
}

@include breakpoint(sm) {
padding: $spacer-1 $spacer-2;
}
}

// Footer
Expand Down