feat(select): basic selection and animations #1647

kara · 2016-10-29T01:12:32Z

This is the first PR of several to get the select component up and running. It only adds basic selection and animations. More coming.

r: @jelbourn

jelbourn · 2016-10-29T16:45:46Z

src/lib/select/option.ts

+    'role': 'option',
+    '[class.md-selected]': 'selected',
+    '[attr.aria-selected]': 'selected.toString()',
+    '[attr.tabindex]': '0',


Can you set tabIndex without it being a binding?

Yes, but I'll need to bind it again as soon as I add disabled support (in the next PR probably)

jelbourn · 2016-10-29T16:50:29Z

src/lib/select/option.ts

+  }
+
+  /**
+   * The displayed value of the option.


I'd expand this comment to mention something like
"Used to show the selected value in the select's trigger.

jelbourn · 2016-10-29T16:51:11Z

src/lib/select/option.ts

+  }
+
+  /** Unselects the option. */
+  unselect() {


Thank you! I knew it sounded wrong!

jelbourn · 2016-10-29T16:54:28Z

src/lib/select/option.ts

+    '[attr.aria-selected]': 'selected.toString()',
+    '[attr.tabindex]': '0',
+    '(click)': 'select()',
+    '(keydown)': '_selectOnActivate($event)'


Just _handleKeydown? (ince this is specially handling keyboard input)

jelbourn · 2016-10-29T16:57:52Z

src/lib/select/select-animations.ts

+  trigger,
+} from '@angular/core';
+
+export class SelectAnimations {


Add class/method descriptions. Include a high-level explanation of what the animations do. Also mention where the values come from (lots of magic values in here).

jelbourn · 2016-10-29T19:13:27Z

src/lib/select/select.ts

+   * TODO: internal
+   */
+  _getPanelState(): string {
+    return this._isRtl() ? 'in-rtl' : 'in';


in-rtl and in?

maybe in-rtl and in-ltr? or showing-rtl and showing-ltr?

jelbourn · 2016-10-29T19:24:08Z

src/lib/select/option.ts

+
+  /**
+   * Ensures the option is selected when activated from the keyboard.
+   * TODO: internal


Let's stop adding new instances of TODO: internal. At this point we're mostly settled into the convention of underscore without private as meaning internal.
(we can remove the old ones in a cleanup pass)

Okay, that's fair. Will do.

jelbourn · 2016-10-29T19:25:55Z

src/lib/select/option.ts

+  Renderer,
+  ViewEncapsulation
+} from '@angular/core';
+import {ENTER, SPACE} from '../core/keyboard/keycodes';

 @Component({
  moduleId: module.id,
  selector: 'md-option',


Add md-option to style-compatibility.ts

jelbourn · 2016-10-29T19:26:31Z

src/lib/select/option.ts

+  template: `
+    <ng-content></ng-content>
+    <div class="md-option-ripple" md-ripple md-ripple-background-color="rgba(0,0,0,0)" 
+      [md-ripple-trigger]="_getHostElement()"></div>


I think this is long enough for its own file.

jelbourn · 2016-10-29T19:29:15Z

src/lib/select/select.ts

+    return this.trigger.nativeElement.getBoundingClientRect().width;
+  }
+
+  /** The animation state of the placeholder.


Unit tests for animation states?

kara · 2016-10-30T23:51:06Z

@jelbourn Comments should be addressed

hansl · 2016-11-01T18:20:05Z

@kara: This broke a bunch of targets in Google with the following error:

Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MdSelect in third_party/javascript/angular2_material/src/lib/select/select.ts, resolving symbol MdSelect in third_party/javascript/angular2_material/src/lib/select/select.ts
    at simplifyInContext (@angular/compiler-cli/src/static_reflector.es5.js:465:23)
    at StaticReflector.simplify (@angular/compiler-cli/src/static_reflector.es5.js:468:22)
    at StaticReflector.annotations (@angular/compiler-cli/src/static_reflector.es5.js:55:36)
    at NgModuleResolver.resolve (@angular/compiler/src/ng_module_resolver.es5.js:25:44)
    at CompileMetadataResolver.getNgModuleMetadata (@angular/compiler/src/metadata_resolver.es5.js:193:47)
    at @angular/compiler/src/offline_compiler.es5.js:274:41
    at Array.forEach (native)
    at _extractModulesAndPipesOrDirectives (@angular/compiler/src/offline_compiler.es5.js:273:26)
    at analyzeNgModules (@angular/compiler/src/offline_compiler.es5.js:27:14)
    at OfflineCompiler.compileModules (@angular/compiler/src/offline_compiler.es5.js:104:18)

kara · 2016-11-01T19:09:31Z

@hansl Should be fixed

angular-automatic-lock-bot · 2019-09-06T03:01:47Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

kara added the pr: needs review label Oct 29, 2016

kara assigned jelbourn Oct 29, 2016

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 29, 2016

kara force-pushed the select-pr branch 5 times, most recently from e145dc3 to e3c0af6 Compare October 29, 2016 03:34

jelbourn reviewed Oct 29, 2016

View reviewed changes

kara added the in progress This issue is currently in progress label Oct 30, 2016

kara force-pushed the select-pr branch from e3c0af6 to 5a781a0 Compare October 30, 2016 23:49

kara removed the in progress This issue is currently in progress label Oct 30, 2016

kara mentioned this pull request Oct 31, 2016

feat(select): integrate with Angular forms #1655

Merged

jelbourn added pr: lgtm and removed pr: needs review labels Oct 31, 2016

kara added the action: merge The PR is ready for merge by the caretaker label Oct 31, 2016

hansl removed pr: lgtm action: merge The PR is ready for merge by the caretaker labels Nov 1, 2016

feat(select): basic selection and animations

85913d9

kara force-pushed the select-pr branch from 5a781a0 to 85913d9 Compare November 1, 2016 19:09

kara added the pr: lgtm label Nov 1, 2016

hansl added the action: merge The PR is ready for merge by the caretaker label Nov 1, 2016

hansl merged commit b14bb72 into angular:master Nov 1, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

feat(select): basic selection and animations #1647

feat(select): basic selection and animations #1647

Uh oh!

Conversation

kara commented Oct 29, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kara Oct 30, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kara commented Oct 30, 2016

Uh oh!

hansl commented Nov 1, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kara commented Nov 1, 2016

Uh oh!

angular-automatic-lock-bot bot commented Sep 6, 2019

Uh oh!

Uh oh!

kara Oct 30, 2016 •

edited

Loading

hansl commented Nov 1, 2016 •

edited

Loading