From 89a70502e6321c67b08474648936c12c9e9a4dfe Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 2 Dec 2020 15:48:06 +0000 Subject: [PATCH] ui: Reorganize Tabs CSS (#9313) --- .../tabs => components/tab-nav}/index.scss | 11 ++++++++ .../tabs => components/tab-nav}/layout.scss | 1 + .../tabs => components/tab-nav}/skin.scss | 0 .../app/components/tab-section/index.hbs | 4 --- .../app/components/tab-section/index.js | 11 -------- .../app/styles/base/components/index.scss | 1 - .../consul-ui/app/styles/components.scss | 2 +- .../consul-ui/app/styles/components/tabs.scss | 11 -------- .../templates/dc/services/show/topology.hbs | 2 +- .../components/tab-section-test.js | 26 ------------------- 10 files changed, 14 insertions(+), 55 deletions(-) rename ui/packages/consul-ui/app/{styles/base/components/tabs => components/tab-nav}/index.scss (70%) rename ui/packages/consul-ui/app/{styles/base/components/tabs => components/tab-nav}/layout.scss (96%) rename ui/packages/consul-ui/app/{styles/base/components/tabs => components/tab-nav}/skin.scss (100%) delete mode 100644 ui/packages/consul-ui/app/components/tab-section/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/tab-section/index.js delete mode 100644 ui/packages/consul-ui/app/styles/components/tabs.scss delete mode 100644 ui/packages/consul-ui/tests/integration/components/tab-section-test.js diff --git a/ui/packages/consul-ui/app/styles/base/components/tabs/index.scss b/ui/packages/consul-ui/app/components/tab-nav/index.scss similarity index 70% rename from ui/packages/consul-ui/app/styles/base/components/tabs/index.scss rename to ui/packages/consul-ui/app/components/tab-nav/index.scss index 72aad691d..7364fe4dc 100644 --- a/ui/packages/consul-ui/app/styles/base/components/tabs/index.scss +++ b/ui/packages/consul-ui/app/components/tab-nav/index.scss @@ -1,5 +1,16 @@ @import './skin'; @import './layout'; +.tab-nav { + @extend %tab-nav; +} +%tab-nav.animatable { + @extend %with-animated-tab-selection; +} +.tab-section { + @extend %tab-section; + /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */ + margin-top: 0 !important; +} %with-animated-tab-selection ul::after, %tab-button-selected { @extend %frame-brand-300; diff --git a/ui/packages/consul-ui/app/styles/base/components/tabs/layout.scss b/ui/packages/consul-ui/app/components/tab-nav/layout.scss similarity index 96% rename from ui/packages/consul-ui/app/styles/base/components/tabs/layout.scss rename to ui/packages/consul-ui/app/components/tab-nav/layout.scss index 8a8096efc..e0d1938f3 100644 --- a/ui/packages/consul-ui/app/styles/base/components/tabs/layout.scss +++ b/ui/packages/consul-ui/app/components/tab-nav/layout.scss @@ -1,5 +1,6 @@ %tab-nav { clear: both; + overflow: scroll; } %tab-nav ul { display: inline-flex; diff --git a/ui/packages/consul-ui/app/styles/base/components/tabs/skin.scss b/ui/packages/consul-ui/app/components/tab-nav/skin.scss similarity index 100% rename from ui/packages/consul-ui/app/styles/base/components/tabs/skin.scss rename to ui/packages/consul-ui/app/components/tab-nav/skin.scss diff --git a/ui/packages/consul-ui/app/components/tab-section/index.hbs b/ui/packages/consul-ui/app/components/tab-section/index.hbs deleted file mode 100644 index 2313b7673..000000000 --- a/ui/packages/consul-ui/app/components/tab-section/index.hbs +++ /dev/null @@ -1,4 +0,0 @@ - -
- {{yield}} -
\ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/tab-section/index.js b/ui/packages/consul-ui/app/components/tab-section/index.js deleted file mode 100644 index 5c022689a..000000000 --- a/ui/packages/consul-ui/app/components/tab-section/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Component from '@ember/component'; -import { computed } from '@ember/object'; - -export default Component.extend({ - classNames: ['tab-section'], - 'data-test-radiobutton': computed('name,id', function() { - return `${this.name}_${this.id}`; - }), - name: 'tab', - onchange: function() {}, -}); diff --git a/ui/packages/consul-ui/app/styles/base/components/index.scss b/ui/packages/consul-ui/app/styles/base/components/index.scss index 4b9905d68..61474d718 100644 --- a/ui/packages/consul-ui/app/styles/base/components/index.scss +++ b/ui/packages/consul-ui/app/styles/base/components/index.scss @@ -11,5 +11,4 @@ @import './radio-group/index'; @import './sliding-toggle/index'; @import './table/index'; -@import './tabs/index'; @import './toggle-button/index'; diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index 2dc01e99f..73c303718 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -14,7 +14,6 @@ @import './components/buttons'; @import './components/composite-row'; @import './components/secret-button'; -@import './components/tabs'; @import './components/pill'; @import './components/table'; @import './components/tag-list'; @@ -53,6 +52,7 @@ @import 'consul-ui/components/filter-bar'; @import 'consul-ui/components/freetext-filter'; @import 'consul-ui/components/informed-action'; +@import 'consul-ui/components/tab-nav'; @import 'consul-ui/components/consul/tomography/graph'; @import 'consul-ui/components/consul/discovery-chain'; diff --git a/ui/packages/consul-ui/app/styles/components/tabs.scss b/ui/packages/consul-ui/app/styles/components/tabs.scss deleted file mode 100644 index 608a1dfa8..000000000 --- a/ui/packages/consul-ui/app/styles/components/tabs.scss +++ /dev/null @@ -1,11 +0,0 @@ -.tab-nav { - @extend %tab-nav; -} -%tab-nav.animatable { - @extend %with-animated-tab-selection; -} -.tab-section { - @extend %tab-section; - /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */ - margin-top: 0 !important; -} diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs index 99eb63a47..e44d6d812 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs +++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs @@ -1,4 +1,4 @@ -
+
{{#if topology.FilteredByACLs}} diff --git a/ui/packages/consul-ui/tests/integration/components/tab-section-test.js b/ui/packages/consul-ui/tests/integration/components/tab-section-test.js deleted file mode 100644 index d244780c5..000000000 --- a/ui/packages/consul-ui/tests/integration/components/tab-section-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | tab section', function(hooks) { - setupRenderingTest(hooks); - - test('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.on('myAction', function(val) { ... }); - - await render(hbs`{{tab-section}}`); - - assert.dom('*').hasText(''); - - // Template block usage: - await render(hbs` - {{#tab-section}} - template block text - {{/tab-section}} - `); - - assert.dom('*').hasText('template block text'); - }); -});