will there be glimmer support for this project?

[ahemed-haneen]

No description provided.

[hilljh82]

Yes. I have been following this issues related to glimmer components in ember.

emberjs/ember.js#16301

When they get further along, we will consider adding support.

[ahemed-haneen]

and is there something similar to onChange found in ember paper?
and while using i found it hard to resize the components to my specific dimensions . is it because im doing it the wrong way? if its possible whats the right way to do this @hilljh82

[hilljh82]

@AhemedHan Can you please be more specific as to what you are trying to accomplish? If you could provide an example or let me know what component you are trying to use, I could then be of more assistance.

[ahemed-haneen]

we are trying to add text inputs to forms. the first challenge is that the input text fields, selects and icon buttons are too large for our design concepts and trying to size it down makes all the elements go crazy...especially the ripple.

the other thing is im not able to bind a variable with the elements. adding value=this.something doesn't bring the input into something. and i was also hoping there would be an onchange function attribute which would run a function when the bound variable goes through any change. like to constantly check whether two password fields match or not. maybe im doing it wrong. i went through your codes and could not find any example regarding this too. thanks in advance

[hilljh82]

@AhemedHan To make the size of the input fields smaller, try adding style="dense"

{{mdc-textfield style="dense"}}

Let me know if this makes the input fields smaller. In the next version, dense will be a boolean attribute on corresponding components to allow you to have dense version of the different styled inputs. Until then, you can just add the appropriate style/dense class combo to the component:

{{mdc-textfield style="outlined" class="mdc-text-field--dense" }}

You write:

adding value=this.something doesn't bring the input into something.

I am not sure what you mean by this statement. For example:

{{mdc-textfield style="outlined" class="mdc-text-field--dense" value=someValue}}

this will store the value in someValue and if someValue has an initial value, the text field will be initialized with the value in someValue.

In your password example, I have done this many times, but you do not want to do an onchange function. Instead, you want to use computed values. For example, given the following template code in say form.hbs:

{{mdc-form submit=(action "submit") validity=(action (mut valid)) as |form|}}
  {{!-- Access the form's validity in variable form, if needed :-) --}}

  {{mdc-textfield label="Password" value=password required=true}}
  {{mdc-textfield label="Confirm password" value=confirmPassword required=true}}

  {{mdc-button type="submit" label="Submit" disabled=disabled}}
{{/mdc-form}}

I would have the following controller code in form.js

import Controller from `@ember/controller`;

import { computed } from '@ember/object';
import { not } from '@ember/object/computed';

export default Controller.extend ({
  invalid: not ('valid'),

  unconfirmed: computed ('{password,confirmPassword}', function () {
    const { password, confirmPassword } = this.getProperties (['password', 'confirmPassword']);
    return password !== confirmPassword;
  }),

  disabled: or ('{invalid,unconfirmed}'),   // can add other reasons to disable button

  // You can also use events 
  
  actions: {
    submit () {
       // handle form submission when permitted (i.e., the submit button is no longer disabled)
    }
  }
});

Let me know if this approach helps you with your problem.

[ahemed-haneen]

thanks man. the dense thing helped. and also since im working on ember octane i think instead of computed i should be looking into tracking. but anyway thanks for that too

[hilljh82]

Great. I'm going to close this issue then.