Skip to content
This repository has been archived by the owner on Oct 7, 2020. It is now read-only.

disabled tabs #147

Closed
rapropos opened this issue Sep 8, 2017 · 5 comments
Closed

disabled tabs #147

rapropos opened this issue Sep 8, 2017 · 5 comments
Assignees

Comments

@rapropos
Copy link
Contributor

rapropos commented Sep 8, 2017

I am not sure whether this needs to be proposed upstream at mdc-web, or could be handled here. Frankly, upstream's feature request policy is rather intimidating, and if their tab component has no disabled attribute, perhaps it is considered "out of guidelines". I couldn't find one.

In any event, I often find it useful for certain tabs to become unselectable due to certain conditions. For example, say we have a user management screen that ordinarily has a tab for deleting users. The system would become unusable if all users are deleted, so in the situation that there is only one user in the system, I would want this tab to become disabled. I don't want to nuke it out of the tab bar entirely due to users getting kinetically adjusted to the position of various tabs, just make it unresponsive and visually indicated that it is not available.

For reference, angular/material2 did it this way.

@trimox
Copy link
Owner

trimox commented Sep 9, 2017

Hey @rapropos

Good points. Since MD guidelines do not include specs for disabled tabs, lemme reach out to MCW team for guidance.

@trimox
Copy link
Owner

trimox commented Sep 11, 2017

Hey @rapropos, MCW team is gathering info from the teams. Will update soon as I hear back.

@trimox
Copy link
Owner

trimox commented Sep 14, 2017

I heard back from MCW team, and no other teams have design details for disabled tabs. So, we'll design a disabled tab in Angular MDC. I still plan to go through the lengthy process and submit a formal feature request.

@trimox trimox added this to the Tracker milestone Oct 19, 2017
@trimox trimox modified the milestones: Tracker, Milestone v0.6.0 Nov 9, 2017
@trimox
Copy link
Owner

trimox commented Nov 9, 2017

@rapropos Disabled tab will be available shortly; including the change with a few other Tab commits.

trimox added a commit that referenced this issue Nov 9, 2017
@trimox trimox removed the research label Nov 9, 2017
@trimox trimox self-assigned this Nov 9, 2017
@trimox
Copy link
Owner

trimox commented Nov 13, 2017

All set. Once PR #369 is merged, I'll close issue.

trimox added a commit that referenced this issue Nov 13, 2017
- [x] Add `disabled` tab
- [x] Fix `[active]` property changes not propagating #349
- [x] Fix `mdc-tab-bar-scroller__indicator` misplaced issue #281
- [x] Remove `mdc-tab-bar-scroll-button` directive

#### mdc-tab
* Add `disabled: boolean` property to `mdc-tab`
* Refactor `active` property
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `getComputedWidth(): number`; return the computed width for tab.
* Add `getComputedLeft(): number`; return the computed left offset for tab.
* Add `isActive()` return true if tab is active.
* Add `setActive(boolean)`; set tab active property to value passed.
* Add `getPreventDefaultOnClick(): boolean`; return true if the tab prevents the default click action.
* Add `setPreventDefaultOnClick(boolean)`; sets tabs `preventDefaultOnClick` property to the value passed.
* Add `measureSelf()`; sets computedWidth and computedLeft for a tab.

#### mdc-tab-bar
* Add `getComputedWidth(): number`
* Add `layout(): void`
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `getActiveTabIndex(): number`
* Add `switchToTabAtIndex(index: number, shouldNotify: boolean = true)`
* Add `MdcTabBarIndicator` directive
* Add `setPreventDefaultOnClickForTabAtIndex(index: number, preventDefaultOnClick: boolean)` 
* Add `isDefaultPreventedOnClickForTabAtIndex(index: number): boolean`

#### mdc-tab-bar-scroller
* Add `layout()`
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `scrollBack(event?: Event)`
* Add `scrollForward(event?: Event)`
* Remove `mdc-tab-bar-scroll-button` directive

BREAKING CHANGE: Removed `mdc-tab-bar-scroll-button` directive. Use `mdc-icon` instead. Please update your code accordingly.
Example:
```html
<mdc-tab-bar-scroll-back>
  <mdc-icon>navigate_before</mdc-icon>
</mdc-tab-bar-scroll-back>
```

Closes #349 Closes #147 Closes #281
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants