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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

[Labelled] Add text-breakword to styling #3156

Merged
merged 1 commit into from Aug 10, 2020
Merged

[Labelled] Add text-breakword to styling #3156

merged 1 commit into from Aug 10, 2020

Conversation

marytal
Copy link
Contributor

@marytal marytal commented Aug 6, 2020 •
edited

WHY are these changes introduced?

When using the TextField component and passing helpText, we noticed it did not wrap properly if there were no spaces or dashes to break up the text.

WHAT is this pull request doing?

Before:
HelpText does not wrap properly when there are no spaces or dashes to break up the words
Screen Shot 2020-08-06 at 10 56 07 AM

After:
HelpText wraps even though there are no spaces in the text
Screen Shot 2020-08-06 at 10 56 21 AM

How to 馃帺

馃枼 Local development instructions
馃棐 General tophatting guidelines
馃搫 Changelog guidelines

Copy-paste this code in playground/Playground.tsx: 
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <TextField
      label="Account email"
      type="email"
      value={textFieldValue}
      onChange={handleTextFieldChange}
      helpText="jdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjfjdaklsdfjslkdfjalsdjfklsdjf"
    />
  );
}

馃帺 checklist

  • Tested on mobile
  • Tested on multiple browsers
  • [not necessary?] Tested for accessibility
  • [no necessary] Updated the component's README.md with documentation changes
  • Tophatted documentation changes in the style guide
  • For visual design changes, pinged one of @鈥奌YPD, @鈥妋irualves, @鈥妔arahill, or @鈥妑y5n to update the Polaris UI kit

@ghost
Copy link

ghost commented Aug 6, 2020

馃憢 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven鈥檛 already, please check out the contributing guidelines.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 6, 2020 •
edited

馃煛 This pull request modifies 2 files and might impact 17 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:
All files potentially affected (total: 17)
馃搫 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

馃帹 src/components/Labelled/Labelled.scss (total: 17)

Files potentially affected (total: 17)

@marytal marytal force-pushed the textfield-helptext-wrapping branch from 49e4c51 to 59d76f8 Compare August 6, 2020 14:17
@marytal marytal changed the title [WIP][Labelled] Add text-breakword to styling [Labelled] Add text-breakword to styling Aug 6, 2020
@marytal marytal requested a review from HYPD August 6, 2020 14:20
kyledurand
kyledurand approved these changes Aug 6, 2020
View reviewed changes
Copy link
Contributor

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

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

Makes sense to me. 馃殺

alexandcote
alexandcote approved these changes Aug 6, 2020
View reviewed changes
Copy link
Contributor

@alexandcote alexandcote left a comment

Choose a reason for hiding this comment

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

Nice 馃憤

@marytal marytal merged commit c5663e7 into master Aug 10, 2020
@marytal marytal deleted the textfield-helptext-wrapping branch August 10, 2020 12:28
@ghost
Copy link

ghost commented Aug 10, 2020

馃帀 Thanks for your contribution to Polaris React!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alexandcote alexandcote alexandcote approved these changes

@kyledurand kyledurand kyledurand approved these changes

@HYPD HYPD Awaiting requested review from HYPD

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@marytal @alexandcote @kyledurand