Skip to content
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

Menu #131

Merged
merged 26 commits into from
Mar 29, 2022
Merged

Menu #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
3dd735c
First stab at html / css menu
roblevintennis Mar 20, 2022
a7a0b5f
Active and selected menu item affordances
roblevintennis Mar 20, 2022
0427e7c
Continuing work on Menus CSS. And started React Menu wip component
roblevintennis Mar 22, 2022
333e084
Adds menu sizes (small, large)
roblevintennis Mar 22, 2022
c6688f0
Refactors to make MenuTrigger and MenuItems internal to the Menu comp…
roblevintennis Mar 22, 2022
eb932c5
WIP commit -- refactoring to make keyboard navigation work. But will …
roblevintennis Mar 23, 2022
80ee8d3
Gets the MenuTrigger forwardRef working. Puts focus back on the trigg…
roblevintennis Mar 24, 2022
06c7c9e
Adds clicked outside functionality
roblevintennis Mar 24, 2022
ff60176
Adds click outside onClose onOpen hooks. Fixes active styles.
roblevintennis Mar 24, 2022
7a0f9cb
React Menu examples start. Tab trap when menu is open. Updates React …
roblevintennis Mar 25, 2022
1a8a3d5
React Menu. Fixes issue when a button is both active and selected tex…
roblevintennis Mar 25, 2022
26a887c
Bump React. Regen dist
roblevintennis Mar 25, 2022
68b1410
Refactors the Menu CSS. Separates the core menu styles from the menu-…
roblevintennis Mar 28, 2022
400f98b
Fix typing
roblevintennis Mar 28, 2022
8023a3b
Svelte menu keyboard navigation starting to "sort of" work.
roblevintennis Mar 28, 2022
7ad859c
Menu focus styles. Fixed at CSS package and propogated to React and S…
roblevintennis Mar 28, 2022
c247740
Adds storybook examples for closeOnSelect and closeOnClickOutside
roblevintennis Mar 28, 2022
88d0b70
Adds the Menu to Svelte package_test example app. Bumps Svelte.
roblevintennis Mar 29, 2022
0af8b89
Cleans up some of the Svelte Menu and MenuItem components codes. Prun…
roblevintennis Mar 29, 2022
d4014d2
Starting out on Vue Menu (not yet working)
roblevintennis Mar 29, 2022
887d3f3
Gets Vue Storybook working again (gotdammit)
roblevintennis Mar 29, 2022
5bc6ff9
Vue Menu component appearing to work
roblevintennis Mar 29, 2022
c623087
Vue Menu examples
roblevintennis Mar 29, 2022
37f7c60
Provides means of disabling entire Vue Menu. Regenerates Vue build.
roblevintennis Mar 29, 2022
904183a
Updates Site docs with Menu component
roblevintennis Mar 29, 2022
a8b38dd
Checks in latest npm package bumps and build
roblevintennis Mar 29, 2022
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
2 changes: 1 addition & 1 deletion agnostic-css/css-dist/components.prefixed.min.css
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions agnostic-css/public/css-dist/common.concat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:42 GMT
* Generated on Mon, 28 Mar 2022 23:26:18 GMT
*/

:where(html) {
Expand Down Expand Up @@ -42,7 +42,7 @@

/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:43 GMT
* Generated on Mon, 28 Mar 2022 23:26:19 GMT
*/

:where(html) {
Expand All @@ -54,7 +54,7 @@

/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:45 GMT
* Generated on Mon, 28 Mar 2022 23:26:20 GMT
*/

:where(html) {
Expand Down Expand Up @@ -85,7 +85,7 @@

/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:46 GMT
* Generated on Mon, 28 Mar 2022 23:26:21 GMT
*/

:where(html) {
Expand All @@ -107,7 +107,7 @@

/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:44 GMT
* Generated on Mon, 28 Mar 2022 23:26:19 GMT
*/

:where(html) {
Expand Down
12 changes: 6 additions & 6 deletions agnostic-css/public/css-dist/common.prefixed.css
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions agnostic-css/public/css-dist/common.properties.concat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:42 GMT
* Generated on Mon, 28 Mar 2022 23:26:18 GMT
*/

:where(html) {
Expand Down Expand Up @@ -42,7 +42,7 @@

/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:43 GMT
* Generated on Mon, 28 Mar 2022 23:26:19 GMT
*/

:where(html) {
Expand All @@ -54,7 +54,7 @@

/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:45 GMT
* Generated on Mon, 28 Mar 2022 23:26:20 GMT
*/

:where(html) {
Expand Down Expand Up @@ -85,7 +85,7 @@

/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:46 GMT
* Generated on Mon, 28 Mar 2022 23:26:21 GMT
*/

:where(html) {
Expand All @@ -107,7 +107,7 @@

/**
* Do not edit directly
* Generated on Wed, 16 Mar 2022 13:56:44 GMT
* Generated on Mon, 28 Mar 2022 23:26:19 GMT
*/

:where(html) {
Expand Down
153 changes: 153 additions & 0 deletions agnostic-css/public/css-dist/components.concat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2372,6 +2372,159 @@ borders that visually conflict. */
}
}

.menu-item {
text-align: left;

/* TODO -- can we compose some of this from the button styles? */
border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
border-style: solid;
border-width: var(--agnostic-btn-border-size, 1px);
font-size: inherit;

/* this can be overriden, but it might mess with the balance of the button heights across variants */
line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
padding-inline-start: var(--agnostic-side-padding, 0.75rem);
padding-inline-end: var(--agnostic-side-padding, 0.75rem);
background-color: transparent;
display: block;
min-width: 100%;
white-space: nowrap;
cursor: default;
}

.menu-item:focus {
box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

/* Needed for High Contrast mode */
outline:
var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
var(--agnostic-focus-ring-outline-color);
transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.menu-item:not(:first-of-type) {
border-top: 0;
}

.menu-item-selected {
color: white;
background-color: var(--agnostic-primary);
}

.menu-item:active:not(.menu-item-selected) {
color: var(--agnostic-primary);
}

.menu-item [aria-checked="true"]::before {
/* TODO make this more flexible eventually */
content: "\2713\0020";
}

/* Sizes */
.menu-item-large {
font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
height: 3rem;
line-height: 2rem;
}

.menu-item-small {
font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
height: 2rem;
line-height: 1rem;
}

.menu-item-rounded:first-of-type {
border-top-left-radius: var(--agnostic-radius);
border-top-right-radius: var(--agnostic-radius);
}

.menu-item-rounded:last-of-type {
border-bottom-left-radius: var(--agnostic-radius);
border-bottom-right-radius: var(--agnostic-radius);
}

.menu-item:hover:not([disabled]):not(.menu-item-selected) {
background-color: var(--agnostic-gray-extra-light);
cursor: pointer;
}

.menu {
display: inline-block;
position: relative;
}

.menu-trigger {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
cursor: pointer;
text-align: left;

/* TODO -- can we compose some of this from the button styles? */
border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
border-style: solid;
border-width: var(--agnostic-btn-border-size, 1px);
font-size: inherit;

/* this can be overriden, but it might mess with the balance of the button heights across variants */
line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
padding-inline-start: var(--agnostic-side-padding, 0.75rem);
padding-inline-end: var(--agnostic-side-padding, 0.75rem);
}

.menu-trigger:focus {
box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

/* Needed for High Contrast mode */
outline:
var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
var(--agnostic-focus-ring-outline-color);
transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.menu-items {
position: absolute;
left: 0;
margin-block-start: var(--fluid-6);
background-color: white;
z-index: 10;
}

/* TODO make this more flexible eventually */
.menu-icon {
font-family: sans-serif;
font-size: var(--fluid-18);
margin-inline-start: var(--fluid-8);
line-height: 1;
}

/* Sizes */
.menu-trigger-large {
font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
height: 3rem;
line-height: 2rem;
}

.menu-trigger-small {
font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
height: 2rem;
line-height: 1rem;
}

.menu-trigger-bordered {
background-color: transparent;
}

.menu-trigger-rounded {
border-radius: var(--agnostic-radius);
}

.pagination-container {
display: flex;
}
Expand Down
2 changes: 1 addition & 1 deletion agnostic-css/public/css-dist/components.min.css
View file
Open in desktop

Large diffs are not rendered by default.

Loading