Skip to content

PD-1669 Add size variants to text input #1072

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

Merged
merged 16 commits into from
Dec 15, 2021
Merged

Conversation

shaneeza
Copy link
Collaborator

@shaneeza shaneeza commented Dec 3, 2021

✍️ Proposed changes

🎟 Jira ticket: PD-1669

🛠 Types of changes

  • Tooling (updates to workspace config or internal tooling)
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

✅ Checklist

  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)
  • I have run yarn changeset and documented my changes
  • I have added my new package to the global tsconfig
  • I have added my new package to the Table of Contents on the global README

🧪 How to test changes

💬 Further comments

@github-actions
Copy link
Contributor

github-actions bot commented Dec 3, 2021

Size Change: +339 B (0%)

Total Size: 394 kB

Filename Size Change
packages/text-input/dist/index.js 3.81 kB +339 B (8%) 🔍
ℹ️ View Unchanged
Filename Size Change
packages/a11y/dist/index.js 1.2 kB 0 B
packages/badge/dist/index.js 1.26 kB 0 B
packages/banner/dist/index.js 1.96 kB 0 B
packages/box/dist/index.js 700 B 0 B
packages/button/dist/index.js 4.46 kB 0 B
packages/callout/dist/index.js 1.77 kB 0 B
packages/card/dist/index.js 1.41 kB 0 B
packages/checkbox/dist/index.js 73.1 kB 0 B
packages/code/dist/index.js 8.98 kB 0 B
packages/confirmation-modal/dist/index.js 2.17 kB 0 B
packages/copyable/dist/index.js 2.52 kB 0 B
packages/emotion/dist/index.js 557 B 0 B
packages/expandable-card/dist/index.js 2.48 kB 0 B
packages/form-footer/dist/index.js 1.15 kB 0 B
packages/hooks/dist/index.js 2.27 kB 0 B
packages/icon-button/dist/index.js 2.35 kB 0 B
packages/icon/dist/ActivityFeed.js 1.81 kB 0 B
packages/icon/dist/AddFile.js 1.59 kB 0 B
packages/icon/dist/Apps.js 1.27 kB 0 B
packages/icon/dist/Array.js 1.39 kB 0 B
packages/icon/dist/ArrowDown.js 1.51 kB 0 B
packages/icon/dist/ArrowLeft.js 1.51 kB 0 B
packages/icon/dist/ArrowRight.js 1.51 kB 0 B
packages/icon/dist/ArrowUp.js 1.5 kB 0 B
packages/icon/dist/Beaker.js 1.93 kB 0 B
packages/icon/dist/Bell.js 1.48 kB 0 B
packages/icon/dist/Building.js 1.46 kB 0 B
packages/icon/dist/Bulb.js 1.5 kB 0 B
packages/icon/dist/Calendar.js 1.47 kB 0 B
packages/icon/dist/CaretDown.js 1.34 kB 0 B
packages/icon/dist/CaretLeft.js 1.34 kB 0 B
packages/icon/dist/CaretRight.js 1.34 kB 0 B
packages/icon/dist/CaretUp.js 1.34 kB 0 B
packages/icon/dist/Charts.js 1.41 kB 0 B
packages/icon/dist/Checkmark.js 1.47 kB 0 B
packages/icon/dist/CheckmarkWithCircle.js 1.53 kB 0 B
packages/icon/dist/ChevronDown.js 1.44 kB 0 B
packages/icon/dist/ChevronLeft.js 1.44 kB 0 B
packages/icon/dist/ChevronRight.js 1.45 kB 0 B
packages/icon/dist/ChevronUp.js 1.44 kB 0 B
packages/icon/dist/Clone.js 1.37 kB 0 B
packages/icon/dist/Cloud.js 1.54 kB 0 B
packages/icon/dist/Code.js 1.74 kB 0 B
packages/icon/dist/Connect.js 1.79 kB 0 B
packages/icon/dist/Copy.js 1.73 kB 0 B
packages/icon/dist/CreditCard.js 1.3 kB 0 B
packages/icon/dist/CurlyBraces.js 1.89 kB 0 B
packages/icon/dist/Database.js 1.84 kB 0 B
packages/icon/dist/Diagram.js 1.51 kB 0 B
packages/icon/dist/Disconnect.js 1.73 kB 0 B
packages/icon/dist/Download.js 1.52 kB 0 B
packages/icon/dist/Edit.js 1.46 kB 0 B
packages/icon/dist/Ellipsis.js 1.37 kB 0 B
packages/icon/dist/Export.js 1.64 kB 0 B
packages/icon/dist/Favorite.js 1.6 kB 0 B
packages/icon/dist/File.js 1.41 kB 0 B
packages/icon/dist/Filter.js 1.39 kB 0 B
packages/icon/dist/Folder.js 1.31 kB 0 B
packages/icon/dist/FullScreenEnter.js 1.56 kB 0 B
packages/icon/dist/FullScreenExit.js 1.57 kB 0 B
packages/icon/dist/GlobeAmericas.js 1.51 kB 0 B
packages/icon/dist/GovernmentBuilding.js 1.55 kB 0 B
packages/icon/dist/Home.js 1.62 kB 0 B
packages/icon/dist/ImportantWithCircle.js 1.41 kB 0 B
packages/icon/dist/index.js 14.6 kB 0 B
packages/icon/dist/InfoWithCircle.js 1.44 kB 0 B
packages/icon/dist/InviteUser.js 1.73 kB 0 B
packages/icon/dist/Laptop.js 1.52 kB 0 B
packages/icon/dist/Lock.js 1.5 kB 0 B
packages/icon/dist/MagnifyingGlass.js 1.48 kB 0 B
packages/icon/dist/Megaphone.js 1.45 kB 0 B
packages/icon/dist/Menu.js 1.36 kB 0 B
packages/icon/dist/Minus.js 1.32 kB 0 B
packages/icon/dist/NotAllowed.js 1.43 kB 0 B
packages/icon/dist/OpenNewTab.js 1.72 kB 0 B
packages/icon/dist/Pause.js 1.35 kB 0 B
packages/icon/dist/Person.js 1.51 kB 0 B
packages/icon/dist/PersonGroup.js 1.72 kB 0 B
packages/icon/dist/PersonWithLock.js 1.73 kB 0 B
packages/icon/dist/Play.js 1.35 kB 0 B
packages/icon/dist/Plus.js 1.37 kB 0 B
packages/icon/dist/PlusWithCircle.js 1.4 kB 0 B
packages/icon/dist/QuestionMarkWithCircle.js 1.76 kB 0 B
packages/icon/dist/Refresh.js 1.75 kB 0 B
packages/icon/dist/Save.js 1.95 kB 0 B
packages/icon/dist/Settings.js 2.03 kB 0 B
packages/icon/dist/Shell.js 1.52 kB 0 B
packages/icon/dist/SortAscending.js 1.56 kB 0 B
packages/icon/dist/SortDescending.js 1.55 kB 0 B
packages/icon/dist/Stitch.js 1.37 kB 0 B
packages/icon/dist/Support.js 1.56 kB 0 B
packages/icon/dist/Table.js 1.36 kB 0 B
packages/icon/dist/TimeSeries.js 1.71 kB 0 B
packages/icon/dist/Trash.js 1.39 kB 0 B
packages/icon/dist/University.js 1.88 kB 0 B
packages/icon/dist/Unlock.js 1.57 kB 0 B
packages/icon/dist/Unsorted.js 1.61 kB 0 B
packages/icon/dist/UpDownCarets.js 1.46 kB 0 B
packages/icon/dist/Upload.js 1.66 kB 0 B
packages/icon/dist/VerticalEllipsis.js 1.38 kB 0 B
packages/icon/dist/Visibility.js 1.69 kB 0 B
packages/icon/dist/VisibilityOff.js 2.08 kB 0 B
packages/icon/dist/Warning.js 1.46 kB 0 B
packages/icon/dist/X.js 1.49 kB 0 B
packages/icon/dist/XWithCircle.js 1.44 kB 0 B
packages/inline-definition/dist/index.js 1.05 kB 0 B
packages/interaction-ring/dist/index.js 2.21 kB 0 B
packages/leafygreen-provider/dist/index.js 1.36 kB 0 B
packages/lib/dist/index.js 862 B 0 B
packages/logo/dist/index.js 43.6 kB 0 B
packages/marketing-modal/dist/index.js 1.86 kB 0 B
packages/menu/dist/index.js 6.13 kB 0 B
packages/modal/dist/index.js 2.77 kB 0 B
packages/palette/dist/index.js 563 B 0 B
packages/pipeline/dist/index.js 5.56 kB 0 B
packages/popover/dist/index.js 4.67 kB 0 B
packages/portal/dist/index.js 1.06 kB 0 B
packages/radio-box-group/dist/index.js 3.02 kB 0 B
packages/radio-group/dist/index.js 3.4 kB 0 B
packages/ripple/dist/index.js 1.05 kB 0 B
packages/segmented-control/dist/index.js 4.9 kB 0 B
packages/select/dist/index.js 7.45 kB 0 B
packages/side-nav/dist/index.js 6.79 kB 0 B
packages/stepper/dist/index.js 3.94 kB 0 B
packages/table/dist/index.js 6.67 kB 0 B
packages/tabs/dist/index.js 4.1 kB 0 B
packages/testing-lib/dist/index.js 1.52 kB 0 B
packages/text-area/dist/index.js 2.53 kB 0 B
packages/theme/dist/index.js 550 B 0 B
packages/toast/dist/index.js 2.96 kB 0 B
packages/toggle/dist/index.js 3.38 kB 0 B
packages/tokens/dist/index.js 417 B 0 B
packages/tooltip/dist/index.js 3.85 kB 0 B
packages/typography/dist/index.js 3.93 kB 0 B

compressed-size-action

@@ -107,6 +117,8 @@ interface TextInputProps extends HTMLElementProps<'input', HTMLInputElement> {
handleValidation?: (value: string) => void;

['aria-labelledby']?: string;

sizeVariant?: SizeVariantType;
Copy link
Collaborator

@TheSonOfThomp TheSonOfThomp Dec 3, 2021

Choose a reason for hiding this comment

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

I think we should just call this prop size to keep in line with other components

Copy link
Collaborator Author

@shaneeza shaneeza Dec 3, 2021

Choose a reason for hiding this comment

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

I tried to use size but it looks like since we're using the HTMLInputElement interface, on line 52, that already has a property of size with a type of number so I was getting a TS error. To avoid that I changed it to sizeVariant.

@shaneeza shaneeza changed the title Pd 1669 Add size variants to text input PD-1669 Add size variants to text input Dec 14, 2021
Comment on lines +225 to +239
describe('when the "sizeVariant" is "large"', () => {
test('check if font-size is 18px', () => {
const { label } = renderTextInput({
value: validEmail,
sizeVariant: SizeVariant.Large,
optional: true,
...defaultProps,
});

expect(label).toHaveStyle({
fontSize: '18px',
});
});
});

Copy link
Collaborator

Choose a reason for hiding this comment

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

This works for now, but this type of test is better suited to something like Chromatic or Percy

Copy link
Collaborator

Choose a reason for hiding this comment

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

We could even consider using this package https://www.npmjs.com/package/jest-image-snapshot

@shaneeza shaneeza merged commit 6d7ae07 into main Dec 15, 2021
@shaneeza shaneeza deleted the PD-1669-text-input-sizes branch December 15, 2021 19:58
bruugey pushed a commit that referenced this pull request Aug 9, 2023
* update text input to include size variants

* prettier fixes

* updated website component

* update readme again

* prettier fixes

* added input text size

* changeset update

* changed size default to default

* add padding

* remove medium size, add baseFontSize

* naming updates, prettier fixes

* update error font size

* PD-1694 Upgrade `lib` dep in expandable card (#1073)

* Update package.json

* Create shiny-sloths-joke.md

* removed submodules and updated node version in readme (#1075)

Co-authored-by: Adam Thompson <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants