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

Merge pull request #366 from hashicorp/chore-dropdown-radio-styles

Browse Source 
chore: 🤖 style dropdown radios with selection bg and checkmark
This commit is contained in:
Susmitha Girumala authored and GitHub committed 2020-11-04 17:39:09 -05:00
2 parents 999fbb6720 1e920eb28b
commit ab352a9a32
5 files changed
+99 -60
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/form/radio/radio/index.hbs
+1 -1
View File
@@ -22,7 +22,7 @@
{{/if}}
{{@label}}
</label>
{{yield}}
addons/rose/addon/styles/rose/components/dropdown/_item.scss
+29 -12
View File
@@ -1,21 +1,17 @@
@use '../../variables/sizing';
@use '../../utilities/type';
$checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'></path></svg>");
.rose-dropdown-item {
@include type.type(s);
display: block;
box-sizing: border-box;
width: 100%;
min-width: (sizing.rems(m)) * 20;
border: 0;
padding: 0 sizing.rems(s);
text-decoration: none;
text-align: left;
min-width: (sizing.rems(m)) * 16;
$line-height: 36 / 14;
line-height: $line-height;
--background-color: transparent;
--color: var(--stark);
--background-color: transparent;
color: var(--color);
background-color: var(--background-color);
@@ -31,12 +27,33 @@
display: block;
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;
// Now that the target height is 36, the radio image needs to be
// repositioned
&::before,
&::after {
top: calc(50% - #{sizing.rems(s)});
display: none;
}
}
.rose-form-radio-field {
&:checked {
~ .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);
}
}
&:disabled {
~ .rose-form-radio-label {
opacity: 0.5;
}
}
}
}
addons/rose/tests/dummy/app/templates/index.hbs
+28 -20
View File
@@ -36,7 +36,7 @@
<dropdown.button>Button menu item</dropdown.button>
<dropdown.button @style="danger">Button - danger</dropdown.button>
<dropdown.separator />
<dropdown.section @title="Dropdown Section Title">
<dropdown.link @route="index">Menu item</dropdown.link>
</dropdown.section>
@@ -48,26 +48,34 @@
</Rose::Dropdown>
<Rose::Form as |form|>
<form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
<form.radioGroup tagName="ul" @name="color" @selectedValue="red" as |radioGroup|>
<Rose::Dropdown @text="Color" as |dropdown|>
<dropdown.item>
<radioGroup.radio
@label="Red"
@value="red"
/>
</dropdown.item>
<dropdown.item>
<radioGroup.radio
@label="Green"
@value="green"
/>
</dropdown.item>
<dropdown.item>
<radioGroup.radio
@label="Blue"
@value="blue"
/>
</dropdown.item>
<ul>
<li>
<dropdown.item>
<radioGroup.radio
@label="Red"
@value="red"
@icon="user-organization" />
</dropdown.item>
</li>
<li>
<dropdown.item>
<radioGroup.radio
@label="Green"
@value="green"
/>
</dropdown.item>
</li>
<li>
<dropdown.item>
<radioGroup.radio
@label="Blue"
@value="blue"
/>
</dropdown.item>
</li>
</ul>
</Rose::Dropdown>
</form.radioGroup>
</Rose::Form>
ui/core/app/components/form/role/index.hbs
+34 -22
View File
@@ -57,32 +57,44 @@
@text={{this.selectedGrantScope.displayName}}
@icon={{if this.selectedGrantScope.isProject "app-icons/project" "app-icons/org"}}
as |dropdown|>
{{#each @grantScopes as |grantScope|}}
<dropdown.item>
<radioGroup.radio
@label={{grantScope.model.displayName}}
@value={{grantScope.model.id}}
@icon={{unless grantScope.model.isProject "app-icons/org"}}
/>
</dropdown.item>
{{#each grantScope.subScopes as |subScope|}}
<dropdown.item class="indent-1">
<radioGroup.radio
@label={{subScope.model.displayName}}
@value={{subScope.model.id}}
@icon={{unless subScope.model.isProject "app-icons/org"}}
/>
</dropdown.item>
{{#each subScope.subScopes as |subSubScope|}}
<dropdown.item class="indent-2">
<ul>
{{#each @grantScopes as |grantScope|}}
<li>
<dropdown.item>
<radioGroup.radio
@label={{subSubScope.displayName}}
@value={{subSubScope.id}}
@label={{grantScope.model.displayName}}
@value={{grantScope.model.id}}
@icon={{unless grantScope.model.isProject "app-icons/org"}}
/>
</dropdown.item>
{{/each}}
<ul class="indent-label-1">
{{#each grantScope.subScopes as |subScope|}}
<li>
<dropdown.item>
<radioGroup.radio
@label={{subScope.model.displayName}}
@value={{subScope.model.id}}
@icon={{unless subScope.model.isProject "app-icons/org"}}
/>
</dropdown.item>
<ul class="indent-label-2">
{{#each subScope.subScopes as |subSubScope|}}
<li>
<dropdown.item>
<radioGroup.radio
@label={{subSubScope.displayName}}
@value={{subSubScope.id}}
/>
</dropdown.item>
</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</li>
{{/each}}
{{/each}}
</ul>
</Rose::Dropdown>
</form.radioGroup>
</fieldset>
ui/core/app/styles/app.scss
+7 -5
View File
@@ -44,13 +44,15 @@
}
.rose-dropdown {
.rose-dropdown-item {
&.indent-1 {
padding-left: sizing.rems(s) * 2;
.indent-label-1 {
.rose-form-radio-label {
padding-left: sizing.rems(l) * 1.5;
}
}
&.indent-2 {
padding-left: sizing.rems(l) + sizing.rems(m);
.indent-label-2 {
.rose-form-radio-label {
padding-left: sizing.rems(l) * 3;
}
}
}