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
this.namespace = config.api.namespace;
// 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
// 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
...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}}
>
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
$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>");
$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 {
--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;
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 {
@include type.type(s);
min-width: (sizing.rems(m)) * 20;
$line-height: math.div(36, 14);
line-height: $line-height;
$paddingY: math.div(
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);
--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);
background-color: var(--background-color);
&:hover {
--background-color: var(--ui-gray-subtler-5);
}
.rose-form-radio {
color: currentColor;
margin-bottom: 0;
.rose-form-radio-label {
display: block;
margin: -#{$paddingY} -#{$paddingX};
padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
padding-left: sizing.rems(s);
padding-right: sizing.rems(xl);
font-weight: normal;
// &::before,
// &::after {
// display: none;
// }
&:hover {
background-color: var(--ui-gray-subtler-5);
}
&::after {
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 {
color: var(--action);
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 {
margin-bottom: sizing.rems(m);
.rose-form-fieldset-title {
@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>
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<header.row as |row|>
<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 as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<h2>Condensed dropdown</h2>
<Rose::Dropdown
@style="condensed"
@text="Credential library details"
@showCaret={{true}}
as |dropdown|
>
<dropdown.section @title="ID">
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
</dropdown.section>
<h2>Condensed Table with Shrink Cells</h2>
<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>
<dropdown.separator />
<h2>Condensed Table with Right and Center aligned cells</h2>
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<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>
<dropdown.section @title="Name">
<dropdown.item>Key/Value</dropdown.item>
</dropdown.section>
<h2>Condensed Table Key/Value Lookalike (edit mode)</h2>
<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>
<dropdown.separator />
<h2>Condensed Table With Visually Hidden Header & Footer</h2>
<Rose::Table @style="condensed" as |table|>
<table.header as |header|>
<header.row @hidden={{true}} as |row|>
<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>
<dropdown.section @title="Description">
<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>
</dropdown.section>
</Rose::Dropdown>
<h2>Table</h2>
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<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 as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<h2>Normal Dropdown</h2>
<Rose::Dropdown
@text="Credential library details"
@showCaret={{true}}
as |dropdown|
>
<dropdown.section @title="ID">
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
</dropdown.section>
<dropdown.separator />
<dropdown.section @title="Name">
<dropdown.item>Key/Value</dropdown.item>
</dropdown.section>
<dropdown.separator />
<dropdown.section @title="Description">
<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>
</dropdown.section>
</Rose::Dropdown>
<h2>Normal Dropdown</h2>
<Rose::Dropdown
@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>