Needs docs for all the smart view components

Help me!
1

How am I supposed to make smart views if you all won’t even give me a list of all your components?

I’m trying to use BetaDropdown because I see it’s a thing you have in your UI library, but how the hell am I supposed to know what args it can even take?

Expected behavior

Please describe here the behavior you are expecting.

Actual behavior

What is the current behavior?

Failure Logs

Please include any relevant log snippets, if necessary.

Context

Please provide any relevant information about your setup.

  • Package Version:
  • Express Version:
  • Sequelize Version:
  • Database Dialect:
  • Database Version:
  • Project Name:
2

Hello @austinrupie,

The SmartViewEditor is still a recent feature and we don’t have an available components documentation for now.

If you want to use our internal BetaDropdown component, you will have to pass it these (optional) properties:

  • onShow (function)
  • onHide (function)
  • disabled (boolean)
1 Like
3

and how do I wrap it in Buttons?

4

Hello @austinrupie,

I’m not sure I understand what you want to do, add a button that triggers a dropdown? :slight_smile:

5

I’m asking how to implement this similar to what you have with your Actions dropdown.

Screen Shot 2021-02-22 at 10.41.33 AM
Screen Shot 2021-02-22 at 10.41.33 AM1088×732 27.3 KB

How do I implement a dropdown of actions like this using that component?

Can you paste me source code?

6

Helle @austinrupie,

Here is a code sample that would allow you to implement this view

<BetaDropdown
  class="c-dropdown-container"
  as |showDropdown|
>
  <Button::BetaButton
    @type="secondary"
    @text="Actions"
    @size="normal"
  />
  {{#if showDropdown}}
    <ul class="c-dropdown">
      <li class="c-dropdown__item">
        <span class="c-dropdown__item-text">
          Example
        </span>
      </li>
      {{yield}}
    </ul>
  {{/if}}
</BetaDropdown>

and here is the corresponding styling

.c-dropdown-container{
  position: relative;
}

.c-dropdown {
  position: absolute;
  z-index: 6;
  right: 0;
  top: calc(100% + 4px);
  font-family: "proximanova-regular", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  background-color: var(--color-beta-surface);
  color: var(--color-beta-on-surface_light);
  border-radius: 4px;
  border: 1px solid var(--color-beta-on-surface_border);
  box-shadow: var(--shadow-beta-elevation-3);
  padding: 16px;
  max-height: 65vh;
  min-width: 200px;
  max-width: 350px;
  overflow-y: auto;
}
  
.c-dropdown__item {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  color: inherit;
}
.c-dropdown__item:hover:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  opacity: 0.08;
  background-color: var(--color-primary-700);
}
.c-dropdown__item--disabled {
  color: var(--color-beta-on-surface_disabled);
  cursor: default; 
}
.c-dropdown__item--disabled:hover {
  background-color: var(--color-beta-surface); 
}
.c-dropdown__item--disabled:hover:before {
  background-color: var(--color-beta-surface); 
}

.c-dropdown__item-text {
  position: relative;
  z-index: 2; 
}

Let me know if it helps :slightly_smiling_face:

7

This helps a lot!

and how are you implementing showDropdown?

8

You don’t need to implement it, it’s already handled by the component we provide.

If you test the code snipped I provided to you, you will see that the dropdown is working fine :slightly_smiling_face:

1 Like