DEV: Styleguide fixes (#11836)

Includes:

* FIX: Don't override computed properties
* FIX: Prevent a set-after-destroy error
* FIX: Get rid of select-kit deprecations
* FIX: Replace removed admin-group-selector
* FIX: Provide onChange action to fix warnings
* FIX: Remove an element with an invalid id
* DEV: Remove topic-notifications-button from dropdowns
  It has its own styleguide section under "Molecules".
* UX: Styleguide tweaks
* DEV: Make the dropdowns useable

plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js.es6

@@ -1,4 +1,10 @@
 export default Ember.Component.extend({
   tagName: "section",
   classNames: ["styleguide-example"],
+  value: null,
+
+  init() {
+    this._super(...arguments);
+    this.value = this.initialValue;
+  },
 });

plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6

@@ -1,21 +1,20 @@
-import { later } from "@ember/runloop";
+import { afterRender } from "discourse-common/utils/decorators";
 
 export default Ember.Component.extend({
   tagName: "section",
   classNames: ["styleguide-icons"],
-  iconIDs: [],
+  iconIds: [],
 
-  didInsertElement() {
+  init() {
     this._super(...arguments);
+    this.setIconIds();
+  },
 
-    later(() => {
+  @afterRender
-      let IDs = $("#svg-sprites symbol")
+  setIconIds() {
-        .map(function () {
+    let symbols = document.querySelectorAll("#svg-sprites symbol");
-          return this.id;
+    let ids = Array.from(symbols).mapBy("id");
-        })
-        .get();
 
-      this.set("iconIDs", IDs);
+    this.set("iconIds", ids);
-    }, 2000);
   },
 });

plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6

@@ -1,4 +1,3 @@
-import EmberObject from "@ember/object";
 import NavItem from "discourse/models/nav-item";
 
 let topicId = 2000000;
@@ -48,7 +47,7 @@ export function createData(store) {
       website_name: "My Website is Discourse",
       location: "Toronto",
       suspend_reason: "Some reason",
-      displayGroups: [{ name: "Group 1" }, { name: "Group 2" }],
+      groups: [{ name: "Group 1" }, { name: "Group 2" }],
       created_at: moment().subtract(10, "days"),
       last_posted_at: moment().subtract(3, "days"),
       last_seen_at: moment().subtract(1, "days"),
@@ -56,7 +55,7 @@ export function createData(store) {
       invited_by: {
         username: "user_2",
       },
-      trustLevel: { name: "Dummy" },
+      trust_level: 1,
       publicUserFields: [
         {
           field: {
@@ -94,13 +93,13 @@ export function createData(store) {
         {
           id: topicId,
           title: `Example Topic Title ${topicId}`,
-          fancyTitle: `Example Topic Title ${topicId}`,
+          fancy_title: `Example Topic Title ${topicId}`,
           slug: `example-topic-title-${topicId}`,
           posts_count: ((topicId * 1234) % 100) + 1,
           views: ((topicId * 123) % 1000) + 1,
           like_count: topicId % 3,
           created_at: `2017-03-${topicId}`,
-          invisible: false,
+          visible: true,
           posters: [
             { extras: "latest", user },
             { user: createUser() },
@@ -115,25 +114,25 @@ export function createData(store) {
   };
 
   let topic = createTopic({ tags: ["example", "apple"] });
+  topic.details.updateFromJson({
+    can_create_post: true,
+    can_invite_to: false,
+    can_delete: false,
+    can_close_topic: false,
+  });
   topic.setProperties({
-    details: EmberObject.create({
+    category_id: categories[0].id,
-      can_create_post: true,
-      can_invite_to: false,
-      can_delete: false,
-      can_close_topic: false,
-    }),
-    category: categories[0],
     suggested_topics: [topic, topic, topic],
   });
 
-  let invisibleTopic = createTopic({ invisible: true });
+  let invisibleTopic = createTopic({ visible: false });
   let closedTopic = createTopic({ closed: true });
-  closedTopic.set("category", categories[1]);
+  closedTopic.set("category_id", categories[1].id);
   let archivedTopic = createTopic({ archived: true });
   let pinnedTopic = createTopic({ pinned: true });
   pinnedTopic.set("clearPin", () => pinnedTopic.set("pinned", "unpinned"));
   pinnedTopic.set("rePin", () => pinnedTopic.set("pinned", "pinned"));
-  pinnedTopic.set("category", categories[2]);
+  pinnedTopic.set("category_id", categories[2].id);
   let unpinnedTopic = createTopic({ unpinned: true });
   let warningTopic = createTopic({ is_warning: true });
 
@@ -220,7 +219,7 @@ export function createData(store) {
     navItems: ["latest", "categories", "top"].map((name) => {
       let item = NavItem.fromText(name);
 
-      item.set("href", "#");
+      // item.set("href", "#");
 
       if (name === "categories") {
         item.set("styleGuideActive", true);
@@ -256,8 +255,6 @@ export function createData(store) {
 
     topicTimerUpdateDate: "2017-10-18 18:00",
 
-    categoryNames: categories.map((c) => c.name),
-
     groups: [
       { name: "staff", id: 1, automatic: false },
       { name: "lounge", id: 2, automatic: true },

plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-example.hbs

@@ -1,3 +1,3 @@
 <div class="example-title">{{title}}</div>
-<section class="rendered">{{yield}}</section>
+<section class="rendered">{{yield this.value}}</section>
 <div class="clearfix"></div>

plugins/styleguide/assets/javascripts/discourse/templates/components/styleguide-icons.hbs

@@ -1,6 +1,6 @@
-{{#each iconIDs as |id|}}
+{{#each iconIds as |id|}}
   <div class="styleguide-icon">
-    {{ d-icon id }}
+    {{d-icon id}}
     <span>{{id}}</span>
   </div>
 {{/each}}

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs

@@ -1,35 +1,29 @@
-{{#styleguide-example title="combo-box"}}
+{{#styleguide-example title="combo-box" initialValue=dummy.options.[0].name as |value|}}
-  {{combo-box content=dummy.options}}
+  {{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
 {{/styleguide-example}}
 
-{{#styleguide-example title="filterable combo-box"}}
+{{#styleguide-example title="filterable combo-box" initialValue=dummy.categories.[0].name as |value|}}
-  {{combo-box content=dummy.categoryNames filterable=true}}
+  {{combo-box content=dummy.categories value=value options=(hash filterable=true) onChange=(fn (mut value))}}
 {{/styleguide-example}}
 
-{{#styleguide-example title="combo-box with a default state"}}
+{{#styleguide-example title="combo-box with a default state" initialValue=dummy.options.[0].name as |value|}}
-  {{combo-box content=dummy.options none="category.none"}}
+  {{combo-box content=dummy.options value=value options=(hash none="category.none") onChange=(fn (mut value))}}
 {{/styleguide-example}}
 
-{{#styleguide-example title="combo-box clearable"}}
+{{#styleguide-example title="combo-box clearable" initialValue=dummy.options.[0].name as |value|}}
-  {{combo-box content=dummy.options none="category.none" clearable=true}}
+  {{combo-box content=dummy.options clearable=true value=value options=(hash none="category.none") onChange=(fn (mut value))}}
 {{/styleguide-example}}
 
-{{#styleguide-example title="topic-notifications-options"}}
+{{#styleguide-example title="topic-notifications-options" initialValue=1 as |value|}}
-  {{topic-notifications-options topic=dummy.topic}}
+  {{topic-notifications-options topic=dummy.topic value=value onChange=(fn (mut value))}}
-{{/styleguide-example}}
-
-{{#styleguide-example title="topic-notifications-button"}}
-  <div id="#topic-footer-buttons">
-    {{topic-notifications-button topic=dummy.topic}}
-  </div>
 {{/styleguide-example}}
 
 {{#styleguide-example title="topic-footer-mobile-dropdown"}}
   {{topic-footer-mobile-dropdown topic=dummy.topic}}
 {{/styleguide-example}}
 
-{{#styleguide-example title="category-chooser"}}
+{{#styleguide-example title="category-chooser" initialValue=categories.[0].name as |value|}}
-  {{category-chooser}}
+  {{category-chooser value=value onChange=(fn (mut value))}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="pinned-button"}}
@@ -41,19 +35,19 @@
 {{/styleguide-example}}
 
 {{#styleguide-example title="categories-admin-dropdown"}}
-  {{categories-admin-dropdown}}
+  {{categories-admin-dropdown onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="category-notifications-button"}}
-  {{category-notifications-button category=dummy.categories.[0]}}
+  {{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="notifications-button"}}
-  {{notifications-button i18nPrefix="groups.notifications" value=1}}
+  {{notifications-button options=(hash i18nPrefix="groups.notifications") value=2 onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="dropdown-select-box"}}
-  {{dropdown-select-box content=dummy.options}}
+  {{dropdown-select-box content=dummy.options onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="future-date-input-selector"}}
@@ -63,22 +57,22 @@
     input=dummy.topicTimerUpdateDate
     includeWeekend=true
     includeForever=true
-    none="topic.auto_update_input.none"
+    options=(hash none="topic.auto_update_input.none")
   }}
 {{/styleguide-example}}
 
 {{#styleguide-example title="multi-select"}}
-  {{multi-select none="test.none" content=dummy.options}}
+  {{multi-select content=dummy.options options=(hash none="test.none") onChange=(action "dummy")}}
 {{/styleguide-example}}
 
-{{#styleguide-example title="admin-group-selector"}}
+{{#styleguide-example title="admin group-chooser"}}
-  {{admin-group-selector selected=dummy.selectedGroups content=dummy.groups}}
+  {{group-chooser selected=dummy.selectedGroups content=dummy.groups onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="list-setting"}}
-  {{list-setting settingValue=dummy.settings}}
+  {{list-setting settingValue=dummy.settings onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="list-setting with colors"}}
-  {{list-setting settingValue=dummy.colors nameProperty="color"}}
+  {{list-setting settingValue=dummy.colors nameProperty="color" onChange=(action "dummy")}}
 {{/styleguide-example}}

plugins/styleguide/assets/stylesheets/styleguide.scss

@@ -11,11 +11,13 @@
   }
 
   .styleguide-menu {
+    margin-top: 1em;
     flex: 1 0 0;
 
     ul {
       list-style: none;
-      margin-bottom: 2em;
+      margin-bottom: 1.5em;
+      margin-left: 0;
 
       li.styleguide-heading {
         color: var(--primary-medium, $primary-medium);
@@ -45,9 +47,9 @@
 
   .styleguide-section {
     .section-title {
-      font-size: $font-up-6;
+      font-size: $font-up-5;
       font-weight: normal;
-      margin-bottom: 1em;
+      margin-bottom: 0.5em;
     }
 
     .section-description {
@@ -65,14 +67,15 @@
     .styleguide-example {
       .example-title {
         color: var(--primary-medium, $primary-medium);
-        font-size: 0.8em;
+        font-size: $font-0;
         border-bottom: 1px solid var(--primary-low, $primary-low);
-        margin-bottom: 0.8em;
+        margin-bottom: 1em;
       }
 
       .rendered {
         width: 100%;
       }
+
       margin-bottom: 2em;
     }
   }