Skip to content

fast-text-area row, height, minlength and maxlength not working #3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
MarcSkovMadsen opened this issue Sep 10, 2020 · 4 comments
Closed

fast-text-area row, height, minlength and maxlength not working #3874

MarcSkovMadsen opened this issue Sep 10, 2020 · 4 comments
Labels
improvement A non-feature-adding improvement

Comments

@MarcSkovMadsen
Copy link

I'm trying to wrap the fast-text-area into Bokeh extensions for use in Python and data science. Right now I'm working on the fast-text-area and there are some bugs (I believe).

I cannot get the following working

  • minlength
  • row
  • height

A code example

<html>
    <head>
        <script type="module" src="https://unpkg.com/@microsoft/fast-components"></script>
    </head>
<body style="margin:0px">
    <fast-design-system-provider use-defaults style="height:100%;">
        <fast-text-area
            rows="6"
            minlength="2"
            class="outline"
            resize="none"
            appearance="outline"
            style="height:400px">
                My Text
        </fast-text-area>
    </fast-design-system-provider>
</body></html>

looks like

image

As you can see I can enter text with a length less than two and the height is fixed. It does not react to rows="6" or the style="height:400px" setting.

If you inspect the element you will find that the textarea control in the shadow dom has a fixed height.

image
@MarcSkovMadsen MarcSkovMadsen added the status:triage New Issue - needs triage label Sep 10, 2020
@MarcSkovMadsen
Copy link
Author

Furthermore the maxlength does not work as a property. But it works as an attribute.

image

From the component explorer I would assume it should work as a property also

image

(My understanding is that the Definition defines the attributes and the Schema defines the properties?).

@MarcSkovMadsen MarcSkovMadsen changed the title fast-text-area row, height and minlength not working fast-text-area row, height and minlength, maxlength not working Sep 10, 2020
@MarcSkovMadsen MarcSkovMadsen changed the title fast-text-area row, height and minlength, maxlength not working fast-text-area row, height, minlength and maxlength not working Sep 10, 2020
@EisenbergEffect EisenbergEffect added area:fast-components improvement A non-feature-adding improvement and removed status:triage New Issue - needs triage labels Sep 10, 2020
@EisenbergEffect EisenbergEffect added this to the Release 12 milestone Sep 10, 2020
@chrisdholt
Copy link
Member

This looks related to #3869 though the issue is more clearcut. I'd expect this to also apply to fast-text-field and other inputs with this type of support. The issue here is relating the application of the attribute to the stylesheet. I think the best course of action would be to implement #3748 to get this supported. I'm not sure inline styles would work well here as it would require changes to fast-foundation and the text size, letter spacing, etc all seem to correlate to how one might calculate and apply these. Ultimately I think this would need be added on a per-design-system basis as it relates to specific styling stories.

@EisenbergEffect EisenbergEffect added the bug A bug label Oct 12, 2020
@EisenbergEffect EisenbergEffect removed the bug A bug label Oct 19, 2020
@EisenbergEffect EisenbergEffect removed this from the Release 2020-10 milestone Oct 19, 2020
@stale
Copy link

stale bot commented Apr 16, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the warning:stale No recent activity within a reasonable amount of time label Apr 16, 2022
@chrisdholt
Copy link
Member

I think we should close this given #5853, but I wanted to put together an example of how this could be accomplished using the design tokens. It's not perfect, but it is an approach that can support the concept and tends to work with smaller number sets...

Attaching a stackblitz where I've extended TextField and added a custom change handler for the maxlength attribute. I've created a design token and I am assigning that when maxlength changes. The tricky bit here is that while we can get close using ch and accounting for padding, ch doesn't give us the average character width. It is defined essentially as being equal to the measure of the “0” (ZERO, U+0030) found in the font being used. Example here: https://stackblitz.com/edit/typescript-9wblnv

I think you could likely do similar with other attributes as well.

@stale stale bot removed the warning:stale No recent activity within a reasonable amount of time label Apr 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
improvement A non-feature-adding improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@EisenbergEffect @chrisdholt @MarcSkovMadsen