Missing Elements

[RobertBColton]

I've noticed that not all of Atom's UI controls are present in the styleguide. For example, there is no demonstration of how to create a scrollable area with scrollbars.

I believe the styleguide could be a little more comprehensive because these are useful features that could be used in packages.

[simurai]

@RobertBColton Do you have a specific example in mind?

To make the content of an element scrollable, you can add the following CSS:

.your-element {
  overflow: auto;
}

But that only works if that element (container) has a certain height/width. So you can define that too, but it also depends a bit where/how it gets used. For example sometimes the height should automatically change depending how much space is available.

Maybe we could create some generic container/content components? Or extend the current "Panels" to support scrolling of content inside?

[RobertBColton]

Thanks that seems to work out perfectly for my editors. I suppose I should have actually looked up the HTML equivalent first. It still might be nice just to show it off in the styleguide anyway. I had assumed before even Googling that there would have been something Atom specific that would be necessary.

More specifically than the scrollbars, I think there should also be an example about the div element with pane-item class. I had to do some digging around with the Chrome debugging tools to discover this is what is used for the root of every tab in all of Atom's internal views. For that matter, it's also not clear to me the intended purpose of the custom atom-panel element.

<div class="pane-item">
    Some content
</div>

Another one I would like to see is an example of using the section elements to create collapsible sections as in the styleguide and settings views.

[simurai]

The custom elements and classes for Panel and Panes get added automatically when using the API. Your package can just be a <div> and will get added inside a panel or pane.

The pane-item class isn't really needed. I think it's just a left-over that adds background and text color:

But that should get inherited anyways.

Another one I would like to see is an example of using the section elements to create collapsible sections as in the styleguide and settings views.

I once started with this accordion component. I'll should look into merging that.

[RobertBColton]

It seems that if none of these are used, or at least an element with a background-color at the root, then the background is usually the focused color. This makes the tab flash when you click on and off of it. I just think a note about that would make it clear. I went with using the pane-item class for all of my custom editors because it has a consistent background color with the settings view and styleguide view. The background color for atom-panel seems to be much darker but not as dark as inset-panel.

That said, I still don't think I understand the purpose of atom-panel. But also, I do like the proposed accordion component and feel it would be useful. I actually need something like that for this current project, which is a game editor developed as an Atom package.

This is a very early preview, but it should give you the general idea:

While I have someone familiar with the internals, could you tell me if Spacepen supports more robust data binding that just template interpolation?

Thanks for all your feedback and I hope I helped out a little bit too.

[simurai]

The background color for atom-panel seems to be much darker but not as dark as inset-panel.

That could be, basically themes are free to define these colors and sometimes it might not be clear how they are used.

atom-panels are mostly used for permanent "bars", like the status-bar at the bottom or the custom title-bar. Find-and-replace panel also uses it. And some community packages. But since the Docks got introduced, most packages are using them, because they can be collapsed and re-arranged.

While I have someone familiar with the internals

Errr.. actually, I'm more a designer, but from what I heard, Spacepen got replaced by https://github.com/atom/etch and is now used in most bundled packages.

[simurai]

game editor developed as an Atom package

Ohh.. neat! :yum:

[RobertBColton]

Thanks so much! It looks a lot like Vue, I still think I am going to stick with Vue because of its robustness and single-file component philosophy, but I don't know how well it will work in future Atom releases.

One other issue I found in the styleguide so far is that you can't see the text on the selected item for one example: