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

feat: 🎸 Delete key-value row and other tweaks

Browse Source 
Delete the recently introduced key-value class for rows, for they
key-value lookalike, when editing we want to use 3 colums on the table
rather than 2. Some style's tweaks to simplify
This commit is contained in:
Carlos Alcaide committed 2021-05-19 11:16:30 -07:00
1 parent 06f00ac8f6
commit ab668d74eb
3 files changed
+99 -110
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/table/index.stories.mdx
+49 -28
View File
@@ -6,9 +6,7 @@ import { boolean, select } from '@storybook/addon-knobs';
# Table
A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, styled for a key/value visualization, cells can be shrinked to its content with, and center/right cell alignment is supported.
Row `key/value` style should be applied per row.
A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element. Rows can be visually hidden, and cells can be shrinked to its content with, and center/right cell alignment is supported.
Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row.
@@ -108,48 +106,71 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce
<Preview>
<Story name="Basic Key/Value Table">{{
template: hbs`
<Rose::Table @style="condensed" as |table|>
<Rose::Table @style={{style}} as |table|>
<table.header as |header|>
<header.row @hidden=true as |row|>
<row.headerCell>Key</row.headerCell>
<row.headerCell>Value</row.headerCell>
<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 @style={{style}} as |row|>
<row.cell>Key</row.cell>
<row.cell>Value</row.cell>
</body.row>
<body.row @style={{style}} as |row|>
<row.cell>Key</row.cell>
<row.cell>Value</row.cell>
</body.row>
<body.row @style={{style}} as |row|>
<row.cell>Key</row.cell>
<row.cell>Value</row.cell>
</body.row>
<body.row @style={{style}} as |row|>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Input @contextual={{true}} as |input|>
<input.field />
<Rose::Button @style="secondary">Add</Rose::Button>
</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 @style={{style}} as |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::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
</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 as |footer|>
<footer.row @hidden=true as |row|>
<row.cell>Footer</row.cell>
<table.footer @hidden={{true}} as |footer|>
<footer.row as |row|>
<row.cell colspan="3">Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
@@ -158,8 +179,8 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce
style: select(
'style',
{
'default': '',
'key-value': 'key-value'
'condensed': 'condensed',
'default': ''
}
)
}
addons/rose/addon/styles/rose/components/table/_table.scss
+6 -17
View File
@@ -10,15 +10,12 @@
text-align: left;
}
.rose-table-row-key-value {
td:nth-child(2) {
display: flex;
input {
width: 100%;
margin-right: sizing.rems(s);
}
button { margin-right: 0; }
}
// This styles are add to stop the input to apply extra margin (default on forms)
.rose-form-input-field,
.rose-form-select,
.rose-form-input {
margin: 0;
width: 100%;
}
.rose-table-cell,
@@ -58,14 +55,6 @@
margin-bottom: 0;
}
.rose-table-cell {
.rose-form-input-field {
margin: 0;
width: inherit;
vertical-align: inherit;
}
}
&.rose-table-condensed {
.rose-table-cell {
@include type.type(s);
addons/rose/tests/dummy/app/templates/index.hbs
+44 -65
View File
@@ -75,49 +75,72 @@
</table.footer>
</Rose::Table>
<h2>Condensed Table Key/Value Lookalike</h2>
<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>Value</row.headerCell>
<row.headerCell colspan="2">Value</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row @style="key-value" as |row|>
<row.cell>Key</row.cell>
<row.cell>Value</row.cell>
</body.row>
<body.row @style="key-value" as |row|>
<row.cell>Key</row.cell>
<row.cell>Value</row.cell>
</body.row>
<body.row @style="key-value" as |row|>
<row.cell>Key</row.cell>
<row.cell>Value</row.cell>
</body.row>
<body.row @style="key-value" as |row|>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Input @contextual={{true}} as |input|>
<input.field />
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
<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 @style="key-value" as |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::Button @style="secondary">Add</Rose::Button>
<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>Footer</row.cell>
<row.cell colspan="3">Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
@@ -147,50 +170,6 @@
</table.footer>
</Rose::Table>
<h2>Key/Value</h2>
<Rose::List::KeyValue as |list|>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
<Rose::Form::Input @contextual={{true}} as |input|>
<list.item as |item|>
<item.key>
<input.label>Key</input.label>
</item.key>
<item.cell>
<input.field />
</item.cell>
<item.cell>
<Rose::Button @style="secondary">Add</Rose::Button>
</item.cell>
</list.item>
</Rose::Form::Input>
<Rose::Form::Input @contextual={{true}} as |input|>
<list.item as |item|>
<item.key>
<input.label>Key</input.label>
</item.key>
<item.cell>
<input.field />
</item.cell>
<item.cell>
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
</item.cell>
</list.item>
</Rose::Form::Input>
</Rose::List::KeyValue>
<h2>Table</h2>
<Rose::Table as |table|>
<table.header as |header|>