CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #610 from hashicorp/feat-condensed-dropdown

Browse Source 
feat: 🎸 Add condensed style for dropdown
This commit is contained in:
Randall Morey authored and GitHub committed 2021-06-21 10:54:27 -04:00
2 parents 5659df3336 b946917ad8
commit 3f3ac19628
6 files changed
+87 -209
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/api/mirage/config.js
+1 -1
View File
@@ -13,7 +13,7 @@ export default function () {
// make this `/api`, for example, if your API is namespaced // make this `/api`, for example, if your API is namespaced
this.namespace = config.api.namespace; this.namespace = config.api.namespace;
// delay for each request, automatically set to 0 during testing // delay for each request, automatically set to 0 during testing
this.timing = 350; this.timing = 1;
// Allow any configured API host to passthrough, which is useful in // Allow any configured API host to passthrough, which is useful in
// development for testing against a locally running backend. // development for testing against a locally running backend.
addons/rose/addon/components/rose/dropdown/index.hbs
+1 -1
View File
@@ -1,6 +1,6 @@
<details <details
...attributes ...attributes
class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}}" class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}} {{if @style (concat "rose-dropdown-" @style)}}"
{{on-click-outside this.close}} {{on-click-outside this.close}}
> >
addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+23
View File
@@ -5,6 +5,7 @@ $xs: sizing.rems(xs); // 8
$xxs: sizing.rems(xxs); // 4 $xxs: sizing.rems(xxs); // 4
$chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>"); $chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
$chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>"); $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
$chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23626873' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
.rose-dropdown { .rose-dropdown {
--background-image-light: #{$chevron}; --background-image-light: #{$chevron};
@@ -121,4 +122,26 @@ $chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23f
border: none; border: none;
margin: $xxs 0; margin: $xxs 0;
} }
// Styles for condensed verion. Some are overrides
&.rose-dropdown-condensed {
--background-image: #{$chevronGrey};
border: sizing.rems(xxxxs) solid var(--ui-border);
border-radius: sizing.rems(xxs);
.rose-dropdown-trigger {
color: var(--ui-gray-starker-1);
padding: 0 sizing.rems(s); // To clear the inherit padding.
&.show-caret {
padding-right: sizing.rems(l) + sizing.rems(xs); // 32
background-position: right sizing.rems(xs) center;
}
}
.rose-dropdown-content {
border: none;
border: sizing.rems(xxxxs) solid var(--ui-border);
}
}
} }
addons/rose/addon/styles/rose/components/dropdown/_item.scss
+12 -15
View File
@@ -7,8 +7,14 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
.rose-dropdown-item { .rose-dropdown-item {
@include type.type(s); @include type.type(s);
min-width: (sizing.rems(m)) * 20; min-width: (sizing.rems(m)) * 20;
$line-height: math.div(36, 14); $paddingY: math.div(
line-height: $line-height; sizing.rems(xl) - (sizing.rems(m) + sizing.rems(xxxs)),
2
);
$paddingX: sizing.rems(s);
padding: $paddingY $paddingX;
//$line-height: math.div(36, 14);
//line-height: $line-height;
--color: var(--stark); --color: var(--stark);
--background-color: transparent; --background-color: transparent;
@@ -16,26 +22,22 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
color: var(--color); color: var(--color);
background-color: var(--background-color); background-color: var(--background-color);
&:hover {
--background-color: var(--ui-gray-subtler-5);
}
.rose-form-radio { .rose-form-radio {
color: currentColor; color: currentColor;
margin-bottom: 0; margin-bottom: 0;
.rose-form-radio-label { .rose-form-radio-label {
display: block; display: block;
margin: -#{$paddingY} -#{$paddingX};
padding-top: sizing.rems(xs) + sizing.rems(xxxxs); padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs); padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
padding-left: sizing.rems(s); padding-left: sizing.rems(s);
padding-right: sizing.rems(xl); padding-right: sizing.rems(xl);
font-weight: normal; font-weight: normal;
// &::before, &:hover {
// &::after { background-color: var(--ui-gray-subtler-5);
// display: none; }
// }
&::after { &::after {
top: sizing.rems(xxs) + sizing.rems(xxxs); top: sizing.rems(xxs) + sizing.rems(xxxs);
@@ -57,11 +59,6 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
~ .rose-form-radio-label { ~ .rose-form-radio-label {
color: var(--action); color: var(--action);
background-color: var(--action-subtler-1h); background-color: var(--action-subtler-1h);
// background-image: #{$checkmark};
// background-repeat: no-repeat;
// background-position: right sizing.rems(m) center;
// background-size: sizing.rems(m);
} }
} }
addons/rose/addon/styles/rose/components/form/_fieldset.scss
+1 -1
View File
@@ -3,7 +3,7 @@
.rose-form-fieldset { .rose-form-fieldset {
margin-bottom: sizing.rems(m); margin-bottom: sizing.rems(m);
.rose-form-fieldset-title { .rose-form-fieldset-title {
@include type.type(l, bold); @include type.type(l, bold);
} }
addons/rose/tests/dummy/app/templates/index.hbs
+49 -191
View File
@@ -1,196 +1,54 @@
<h2>Condensed Table</h2> <h2>Condensed dropdown</h2>
<Rose::Table @style="condensed" as |table|> <Rose::Dropdown
<table.header as |header|> @style="condensed"
<header.row as |row|> @text="Credential library details"
<row.headerCell >Address</row.headerCell> @showCaret={{true}}
<row.headerCell>Host Set</row.headerCell> as |dropdown|
<row.headerCell>Name</row.headerCell> >
<row.headerCell>Description</row.headerCell> <dropdown.section @title="ID">
</header.row> <dropdown.item>cl_nbv9375hLHs</dropdown.item>
</table.header> </dropdown.section>
<table.body as |body|>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell>host-set-1, host-set-2</row.cell>
<row.cell>optional name</row.cell>
<row.cell>description</row.cell>
</body.row>
</table.body>
<table.footer as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<h2>Condensed Table with Shrink Cells</h2> <dropdown.separator />
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell>Address</row.headerCell>
<row.headerCell @shrink={{true}}>Host Set</row.headerCell>
<row.headerCell @shrink={{true}}>Name</row.headerCell>
<row.headerCell>Description</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell @shrink={{true}}>host-set-1, host-set-2</row.cell>
<row.cell @shrink={{true}}>
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
</row.cell>
<row.cell>description</row.cell>
</body.row>
</table.body>
<table.footer @hidden={{true}} as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<h2>Condensed Table with Right and Center aligned cells</h2> <dropdown.section @title="Name">
<Rose::Table @style="condensed" as |table|> <dropdown.item>Key/Value</dropdown.item>
<table.header as |header|> </dropdown.section>
<header.row as |row|>
<row.headerCell>Address</row.headerCell>
<row.headerCell @alignCenter={{true}}>Host Set</row.headerCell>
<row.headerCell>Name</row.headerCell>
<row.headerCell>Description</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell @alignCenter={{true}}>host-set-1, host-set-2</row.cell>
<row.cell @alignRight={{true}}>optional name</row.cell>
<row.cell @alignCenter={{true}}>description</row.cell>
</body.row>
</table.body>
<table.footer as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<h2>Condensed Table Key/Value Lookalike (edit mode)</h2> <dropdown.separator />
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell @shrink={{true}}>Key</row.headerCell>
<row.headerCell colspan="2">Value</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Input @contextual={{true}} as |input|>
<input.field />
</Rose::Form::Input>
</row.cell>
<row.cell @shrink={{true}} @alignRight={{true}}>
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Select
@name="Test select"
as |field|
>
<field.field as |select|>
<select.option>Choose an option</select.option>
<select.option @value="value-1">Value 1</select.option>
<select.option @value="value-2">Value 2</select.option>
<select.option @value="value-3">Value 3</select.option>
</field.field>
</Rose::Form::Select>
</row.cell>
<row.cell @shrink={{true}} @alignRight={{true}}>
<Rose::Button @style="secondary">Add</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Input @contextual={{true}} as |input|>
<input.field />
</Rose::Form::Input>
</row.cell>
<row.cell @alignRight={{true}}>
<Rose::Button @style="secondary">Add</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Textarea
@name="field"
readonly={{false}}
/>
</row.cell>
<row.cell @alignRight={{true}}>
<Rose::Button @style="secondary">Add</Rose::Button>
</row.cell>
</body.row>
</table.body>
<table.footer @hidden={{true}} as |footer|>
<footer.row as |row|>
<row.cell colspan="3">Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<h2>Condensed Table With Visually Hidden Header & Footer</h2> <dropdown.section @title="Description">
<Rose::Table @style="condensed" as |table|> <dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
<table.header as |header|> </dropdown.section>
<header.row @hidden={{true}} as |row|> </Rose::Dropdown>
<row.headerCell >Address</row.headerCell>
<row.headerCell>Host Set</row.headerCell>
<row.headerCell>Name</row.headerCell>
<row.headerCell>Description</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell>host-set-1, host-set-2</row.cell>
<row.cell>optional name</row.cell>
<row.cell>description</row.cell>
</body.row>
</table.body>
<table.footer as |footer|>
<footer.row @hidden={{true}} as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<h2>Table</h2> <h2>Normal Dropdown</h2>
<Rose::Table as |table|> <Rose::Dropdown
<table.header as |header|> @text="Credential library details"
<header.row as |row|> @showCaret={{true}}
<row.headerCell>Address</row.headerCell> as |dropdown|
<row.headerCell>Host Set</row.headerCell> >
<row.headerCell>Name</row.headerCell> <dropdown.section @title="ID">
<row.headerCell>Description</row.headerCell> <dropdown.item>cl_nbv9375hLHs</dropdown.item>
</header.row> </dropdown.section>
</table.header> <dropdown.separator />
<table.body as |body|>
<body.row as |row|> <dropdown.section @title="Name">
<row.cell>1.1.1.1</row.cell> <dropdown.item>Key/Value</dropdown.item>
<row.cell>host-set-1, host-set-2</row.cell> </dropdown.section>
<row.cell>optional name</row.cell> <dropdown.separator />
<row.cell>description</row.cell>
</body.row> <dropdown.section @title="Description">
</table.body> <dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
<table.footer as |footer|> </dropdown.section>
<footer.row as |row|> </Rose::Dropdown>
<row.cell>Footer</row.cell>
</footer.row> <h2>Normal Dropdown</h2>
</table.footer> <Rose::Dropdown
</Rose::Table> @text="Credential library details"
@showCaret={{true}}
as |dropdown|
>
<dropdown.link @route="about">Menu item</dropdown.link>
<dropdown.link @route="about">Menu item 2</dropdown.link>
</Rose::Dropdown>