Skip to content
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.

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

Fix possibly mis-measured text width in DatePicker #320

Merged
merged 2 commits into from
Dec 7, 2016

Conversation

cmslewis
Copy link
Contributor

@cmslewis cmslewis commented Dec 6, 2016

Fixes #316

Changes proposed in this pull request:

  • Add an optional third containerElement parameter to Utils.measureTextWidth (defaults to document.body)
  • Leverage this in DatePicker to ensure we're measuring text as sized within that component

Reviewers should focus on:

  • FYI: I added *Element suffixes to each of the elements for clarity and consistency. The type handles that, but this makes things easier to read quickly at a glance.
  • FYI: Verified that this works by changing body text size to 100px and observing that the <DatePicker> dropdown arrows still appeared in the expected place.

@blueprint-bot
Copy link

Create a ref handler for the container element, and pass the element in

Preview: docs
Coverage: core | datetime

private yearArrowRefHandler = (r: HTMLElement) => this.yearArrow = r;
private containerRefHandler = (r: HTMLElement) => this.containerElement = r;
private monthArrowRefHandler = (r: HTMLElement) => this.monthArrowElement = r;
private yearArrowRefHandler = (r: HTMLElement) => this.yearArrowElement = r;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unrelated: I would like to move to the following pattern for ref handlers:

private refHandlers = {
    container: (r: HTMLElement) => this.containerElement = r,
    monthArrow: ...,
    yearArrow: ...,
};

Copy link
Contributor

@giladgray giladgray Dec 6, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm accumulating a list of major refactors to datetime code, for the new year...
will add this!

private yearArrow: HTMLElement;
private containerElement: HTMLElement;
private monthArrowElement: HTMLElement;
private yearArrowElement: HTMLElement;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 great renames

@paulpooch
Copy link
Contributor

This looks great. Thank you. I also like the refHandler pattern you're using. I was doing the gross

<div ref={ (el) => (this.fooRef = el) } /> style.

PS You guys above Hill Country?

@adidahiya adidahiya merged commit 28a9d4b into master Dec 7, 2016
@adidahiya adidahiya deleted the cl/utils-measure-text-width branch December 7, 2016 01:57
@giladgray
Copy link
Contributor

@paulpooch yes the refHandlers property is great! our TSLint config disallows lambdas in JSX cuz functions interfere with React's diffing, so we had to look for other answers.

what's this Hill Country?

@paulpooch
Copy link
Contributor

Hill Country was in reference to one of your NYC offices.

greglo pushed a commit to greglo/blueprint that referenced this pull request Dec 12, 2016
* Add containerElement to measureTextWidth function signature

* Create a ref handler for the container element, and pass the element in
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants