Console polish #1379

benjaminleonard · 2023-03-01T12:59:37Z

Knocking a few polish issues down.

This fixes:

Some table border issues, on the mini table and the larger tables without a more actions cell.
Updates the instance disk mini table with the size and gives the type a more readable name
Fixes issue with more actions cell centering and improves that in general, whole cell is now clickable and no longer need the negative margin padding hack
Fixes pagination visual issues
Removes overall table cell hover
Updating badges to match designs, adding extra colours and updating status badge component to use these
Fixes open link SVG alignment in a couple of spots

Fixes #1326
Fixes #1287
Fixes #1082
Fixes #1078
Fixes #1332
Fixes #1079
Fixes #1077

- More consistency, previously the widths changed - The button now fills the entire cell and doesn't rely on the negative padding and margin hack - Vertically centered - Remove defunct wrapper

Fixes #1326 Fixes #1287 Fixes #1082

Fixes #1078

- Update to latest designs (Fixes #1332) - Remove ghost variant, is defunct - Rename component to better reflect usage (non-solid version is default) - Add extra theme colours and apply to `StatusBadge.tsx`

vercel · 2023-03-01T12:59:42Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
console-ui-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 2, 2023 at 9:16PM (UTC)

benjaminleonard · 2023-03-01T14:22:43Z

On status badge colours, I tried to use the dim badge at the default and the solid version when it'd be useful to draw attention to the status of something. Will be interesting to test out in practice. For example runnning is a normal idle state, but repairing is a significant action so we might want to highlight that.

I'm also happy to be convinced otherwise in the name of consistency.

david-crespo · 2023-03-01T17:46:10Z

libs/ui/lib/badge/Badge.tsx


+const defaultStyles = 'ring-1 ring-inset'
+
 export const badgeColors: Record<BadgeVariant, Partial<Record<BadgeColor, string>>> = {


now that we're defining styles for every color, we can remove the Partial here

And then you can remove the invariant check because every combination is guaranteed to be valid

david-crespo · 2023-03-01T17:55:21Z

libs/table/columns/action-col.tsx

+          {/* TODO: This name should not suck; future us, make it so! */}
+          {/* stopPropagation prevents clicks from toggling row select in a single select table */}
+          <MenuButton
+            className="flex h-full w-10 items-center justify-center"


This is to make the whole cell clickable, right? Nice.

Yep, was previously padded out with a large clickable area but it wasn't edge-to-edge.

david-crespo · 2023-03-01T18:08:36Z

app/components/form/fields/DisksTableField.tsx

+                        <span className="ml-1 inline-block text-accent-secondary">GiB</span>
+                      </>
+                    )}
+                  </MiniTable.Cell>


I like the size column, don't really like Source: New, though I admit Type: Attach/Create is definitely weird. How about Type: Existing/New? There's not a good word for this. Maybe there's some more subtle way of indicating existing vs. new, like a column giving some other attribute of the disk that indicates concretely that it exists. Like a created at column showing the create time but obviously only the existing disks have one.

I still find the green active styling with nested outlines kind of busy.

I think language consistency here is important. When working with disks across different product interfaces the InstanceDiskAttachment language of attach/create should be a consistent touch point. We don't want to use different language here than we would in the docs, API, CLI, etc. I would keep the Type: Attach/Create nomenclature but potentially add a tooltip on the header if further clarification were needed.

Yeah, I do find that convincing. When in doubt, stick close to the API and don't dress it up.

I changed it back to create/attach but I put it in a badge because it looked weird:

Before

After

david-crespo · 2023-03-01T18:11:35Z

libs/table/columns/action-col.tsx

-    meta: { thClassName: 'w-12 action-col', tdClassName: 'action-col' },
+    meta: {
+      thClassName: 'action-col',
+      tdClassName: 'action-col children:p-0 w-[0.1%]',


This seems to work just as well with w-0. However since we know the cell is w-10, any problem with using that?

Happy to use either. For whatever reason it felt like if I chose the small value and let the table constrain the width I'd only have to define the width once, and therefore only change it in one place if it was changed later.

Yeah, that's a good point. In that case I think I like w-0 + a comment.

david-crespo

Pending bikeshedding on the disks table, this is great.

david-crespo · 2023-03-02T21:30:35Z

We can figure out the disk stuff later.

benjaminleonard · 2023-03-06T09:47:49Z

Cool — I'll revisit that later.

Thanks for mergin'

benjaminleonard added 8 commits February 28, 2023 12:41

Fix broken border and border radius on mini table

0310203

Improve border when there isn't a more actions cell

93a2058

Add size and more human label to disk create/attach

6dd6e5d

Improved action-col

ed96388

- More consistency, previously the widths changed - The button now fills the entire cell and doesn't rely on the negative padding and margin hack - Vertically centered - Remove defunct wrapper

Update pagination

d2ed167

Fixes #1326 Fixes #1287 Fixes #1082

Remove hover across entire table row

6db92f0

Fixes #1078

Badge improvements

77e14ec

- Update to latest designs (Fixes #1332) - Remove ghost variant, is defunct - Rename component to better reflect usage (non-solid version is default) - Add extra theme colours and apply to `StatusBadge.tsx`

Fixes #1079 - SVG alignment

00a1fe2

david-crespo reviewed Mar 1, 2023

View reviewed changes

don't need the invariant anymore since we're defining every combo

1dc6b65

vercel bot deployed to Preview March 1, 2023 18:17 View deployment

david-crespo approved these changes Mar 1, 2023

View reviewed changes

change source: existing/new back to type: attach/create

6f075a1

vercel bot deployed to Preview March 2, 2023 21:05 View deployment

put the disk type in a badge

c0a6486

vercel bot deployed to Preview March 2, 2023 21:16 View deployment

david-crespo merged commit cc08529 into main Mar 2, 2023

david-crespo deleted the polish-202302 branch March 2, 2023 21:30


		const defaultStyles = 'ring-1 ring-inset'

		export const badgeColors: Record<BadgeVariant, Partial<Record<BadgeColor, string>>> = {

Console polish #1379

Console polish #1379

Uh oh!

Conversation

benjaminleonard commented Mar 1, 2023

Uh oh!

vercel bot commented Mar 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjaminleonard commented Mar 1, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

david-crespo Mar 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Before

After

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

david-crespo left a comment

Choose a reason for hiding this comment

Uh oh!

david-crespo commented Mar 2, 2023

Uh oh!

benjaminleonard commented Mar 6, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel bot commented Mar 1, 2023 •

edited

Loading

david-crespo Mar 1, 2023 •

edited

Loading