Toggleable fields

[cristineguadelupe]

This PR is a preparation for us to support advanced fields with nested options and introduces the following changes:

• New columnar layout
• Toggleable fields
• Bin option

https://user-images.githubusercontent.com/5660941/197373302-84acd5e8-ede5-406c-9dd3-d104a704a670.mp4

[josevalim]

Functionality wise, it looks great to me, I only have concerns about the layout since we have too many boxes now.

I think we should probably use a different design inside the box. Today we have this:

x-axis
[                       v]
--------------------------
| Type                   |
| [ quantitative      v] |
|            |
| Aggregate        Bin   |
| [            v]  [   ] |
|            |
--------------------------

and I would go with something like this:

x-axis
[                           v]
------------------------------
| Type        quantitative v |
| Aggregate                v |
| Bin                  [   ] |
------------------------------

I will try to submit a mockup soon.

[josevalim]

Here is a mockup:

But I would consider removing the select border altogether:

Here is the CSS I used but I was doing those changes in the browser, perhaps some of those deserve to be new classes altogether:

.field-settings-container {
  padding: 4px 10px;
  border-radius: 0.5rem;
  margin-bottom: 4px;
  border: 1px solid var(--gray-200);
}

.field-settings-container .field {
  margin-bottom: 4px;
}

.field-settings-container .field:last-child {
  margin-bottom: 0;
}

.field-settings-container .input-label {
  margin-bottom: 0;
}

.field-settings-container select {
  border: 0;
  padding-right: 16px;
  background-color: transparent;
  background-position: center right;
}

.field-settings-container select:focus {
  border: 0;
}