ciena-frost / ember-frost-tabs

An Ember tab addon

[DEPRECATED] ember-frost-tabs

This repository is deprecated. We do not recommend using the content of this repository please use the following: frost-core (internal)

ember-frost-tabs's Issues

Upgrade ember-frost-test dependency

Upgrade to the version release due to the resolution of ciena-frost/ember-frost-test#38

Add support for vertical tabs

Currently only horizontal tabs are supported.

Update the lint functionality

Update the lint functionality to come from ember-test-utils

Bind context to call of this._super.included() in index.js

or just remove all together

Components Re-render when used with frost-modal on same page

Frost-tab components get re-rendered multiple times when frost-modal on the same application page are activated/deactivated. This issue is probably related to the fact that they both use ember-elsewhere.

Dynamic Tabs

Hey, how would i go about dynamically adding or removing tabs in this component?

Update border style to make it more legible in crappy screen/projector

Change border-right in .frost-tab .frost-button.tab .text to L_grey2 (#ddd)

Change border-bottom in .frost-tab to L_grey2 (#ddd)

Update blueprints to use ember-frost-core 1.x

https://github.com/ciena-frost/ember-frost-tabs/blob/master/blueprints/ember-frost-tabs/index.js#L14

Allow `frost-tabs`component's `targetOutlet` to be overridden and have consumer provide their own `from-elsewhere`

How do you use targetOutlet to put the components used wherever I want in my own app, not where the current frost-tabs.hbs puts it with from-elsewhere ?

Update usage of deprecated ember-mocha describeComponent()

ember-mocha has deprecated the usage of describeComponent()

Update the describeComponent() usage in our integration and unit tests to use our test helper that uses the new setupComponentTest() method.

This PR can be referenced as an example of the update: ciena-frost/ember-frost-core#390

Integrate sub-tabs work from https://github.com/sglanzer/ember-frost-tabs#detail-tabs

https://github.com/sglanzer/ember-frost-tabs#detail-tabs

Build Failing

Hi, I just did a fresh install of ember-frost-tabs and its throwing the following error.

Build failed. The Broccoli Plugin: [SvgProcessor: SVGStore Processor] failed with: Error: Path must be absolute: "C:\my-project\tmp\svg_processor-output_path-eZimw3du.tmp" at Object.assertAbsolutePaths (C:\my-project\node_modules\broccoli-kitchen-sink-helpers\in dex.js:174:13)

Pin ember-cli-notifications to 4.2.1 to prevent broken demo app

Update to the new pr-bumper

Don't render tabs until clicked on

I've run into an issue where I render two tabs, with the second tab containing a graph of nodes and edges connection said nodes. The component that renders the nodes/edges renders the graph based on the size of it's parent container and in the case of being in a hidden tab when it initially renders the container doesn't have proper dimensions. As of now I my hack is to bind click events to the tabs and when a tab is selected trigger a window resize to make the graph readjust it's size. It seems like the better solution is to not even render the second tab's content until the tab has been selected. One thing I'd call out in this solution is when switching tabs we shouldn't remove the DOM of the previously selected tab(s), otherwise switching back may be slow (especially if those tabs fetch data for there content).

Support more node versions

 /home/ubuntu/project_name/node_modules/ember-frost-core/index.js:5 
 const pkg = require('./package.json')
  ^^^^^
  Use of const in strict mode.

I have this issue when trying to build

Updating properties of a tab isn't passed to the component

When properties are updated the component doesn't update until a switching of tabs occur. It doesn't cause a didUpdateAttrs(), and computed properties aren't recomputed.

Address dependency management issues

ciena-frost/ember-frost-info-bar#85 MUST be resolved before this issue can be addressed. Some of the individual tasks may be able to be worked on before the completion of the dependent issue. If doing so indicate which tasks have been completed by checking them off in the list below, as well as adding a comment to this issue indicating the name of the branch you have pushed to this repo so that work can completed once the dependent task has been addressed.

• Tasks that have the text "(verified)" after them are ones that have either already been tested or are known to work. This does not mean that you should not still be cautious but you likely don't have to do as much research as you might initially be inclinded to.
• None of the tasks make a determination of whether a dependency should be a dependency or devDependency UNLESS otherwise stated. Even then it is prudent to confirm this indicator.
• All dependencies should float to ^ unless the directions in the tasks indicate otherwise. The following entries are known items that should REMAIN pinned:
  • ember-element-resize-detector

NPM

• ember install ember-frost-test (verified)
  • ember-cli-chai will be updated to 0.4.3 so may encounter issues
  • ember-cli-mocha will be updated to 0.14.4 so may encounter issues
  • ember-sinon will be updated to ^0.7.0 so may encounter issues
  • ember-test-utils will be updated to ^7.0.2 so will encounter issues
• remove ember-cli-template-lint (verified)
• pin ember-cli-code-coverage to 0.3.12
• verify ember-cli-code-coverage is tied into "npm run test" script
• keep ember-code-snippet at current version
• pin ember-cli-htmlbars-inline-precompile to 0.3.12
• upgrade ember-cli-sass to pinned 7.1.1 (verified)
• update ember-hook to 1.4.2
• determine whether ember-hook needs to be a dependency
• downgrade ember-math-helpers to pinned 2.06
  • may experience issues with the removal of this functionality:
    • RobbieTheWagner/ember-math-helpers@9a2c3e2
    • RobbieTheWagner/ember-math-helpers@5e04f4a
• update or install ember-cli-frost-blueprints to ^5.0.0 (or whatever the latest release is) as devDependency
• remove from blueprints and make dependency
  • ember-frost-core
  • ember-frost-info-bar
  • ember-prop-types
  • ember-spread
• delete blueprint
• update ember-frost-info-bar to latest release
• update ember-prop-types to ^6.0.0 (or whatever the latest release is)
• update ember-spread to ^4.0.0 (or whatever the latest release is)
• update ember-frost-core to ^5.0.0 (or whatever the latest release is)
• determine dependencies vs devDependencies
• check whether these are specifically needed or not and remove if not, otherwise move to dependencies
  • ember-computed-decorators
  • ember-concurrency
  • ember-elsewhere
  • ember-truth-helpers
• remove useLintTree from ember-cli-mocha configuration in ember-cli-build.js
• see if #53 is addressed by these efforts or can be
• see if #57 is addressed by these efforts or can be

BOWER

• move Faker to devDependencies of bower.json
• move pretender to devDependencies of bower.json

Update CSS please

Use the CSS below to create this:

.addon-demo-component {
display: block;
height: 250px;
margin: 20px;
/* padding: 10px; */
background: #f8f8f8;
overflow-x: auto;
}

.frost-tab .tab.active {
border-bottom: 2px solid #404041;
}

vendor-e0beeb5….css:1
.frost-button.tab {
height: 35px;
box-shadow: none;
cursor: default;
}

vendor-e0beeb5….css:1
.frost-tabs .tab-nav {
padding-left: 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
background-color: #fff;
margin-bottom: 0px;
}

vendor-e0beeb5….css:1
.frost-button.tab .text {
color: #929497;
font-size: 14px;
margin-bottom: 2px;
border-right: 1px solid #E8E8E8;
padding: 2px 20px;
}

.frost-tab {
/* padding-bottom: 2px; /
/ border-bottom: 5px solid transparent; */
}

.content {
padding: 20px;
border-top: 1px solid #e8e8ef;
}

styling is different in block format mode vs. normal mode

This is due to the inclusion of an extra div, classed 'tab-wrapper' in the non-block format mode. The styles targeted this div explicitly (unnecessarily specific, IMO), so I've removed it in this PR:

#68

Of course, a much larger effort to clean up and modernize the CSS here, and probably re-evaluate the DOM structure is called for. There are levels of unnecessary divs here, making the styling overly complex.

Enhance frost-detail-tab-actions to display actions labels in popover.

Are you opening a BUG REPORT or a FEATURE REQUEST / CODE CHANGE?

There is a section for each below. Please complete the appropriate section and remove the other one.

We realize there is a lot of data requested here. We ask only that you do your best to provide as much information as possible so we can better help you.

FEATURE REQUEST / CODE CHANGE

• I have deleted the BUG REPORT section

Summary

Enhance frost-detail-tab-actions to display action label in popover.
Currently, actions labels are displayed below the each action icon that makes action bar look cluttered in case of many actions on action bar as the icon as well as labels take space on action bar for an action. Displaying only actions icons on the action bar will provide more real estate for other icons. The tooltip will display the corresponding actin label on mouseover on each action.

Motivation

Enhance frost-detail-tab-actions to display action label in popover.
Currently, actions labels are displayed below the each action icon that makes action bar look cluttered in case of many actions on action bar as the icon as well as labels take space on action bar for an action. Displaying only actions icons on the action bar will provide more real estate for other icons. The tooltip will display the corresponding actin label on mouseover on each action.

Detailed design

This is the bulk of the Feature Request / Code Change.

Explain the design in enough detail for somebody familiar with this addon, the UI Platform ecosystem, and Ember.js to understand, and for somebody familiar with the implementation to implement. This should get into specifics and corner-cases, and include examples of how the feature is used. Any new terminology should be defined here.

How we teach this

frost-detail-tab-actions bar enhancement to display action labels in tooltip

Drawbacks

None

Alternatives

User will be limited to use only a few actions on action bar as he needs space to display both icons and label. However, with the new design use can utilise the maximum real estate of action bar to display action icons and their labels can be seen in popover on mouse over event.

Unresolved questions

Create custom tab button with selected property

Initial proposal to use button design concept applies only if no additional properties are required.
In tab case, we require additional property selected to apply visual treatment when the tab is selected.

Install ember-frost-test

Update README with API table

See the example set by the Ember Frost List project https://github.com/ciena-frost/ember-frost-list

A helper named 'frost-tabs' could not be found

After installation, receiving an error that the helper is not found: A helper named 'frost-tabs' could not be found . Is there a manual step missing?

svg4everybody undefined

After a fresh install I am getting the following error:

Uncaught ReferenceError: svg4everybody is not defined

ember-frost-tabs: 5.2.6
ember: 2.8.1

node 6.10.3

Tab alias property does not observe changes

The UI does not update when the value passed to a tab's alias property is changed.