Styled TextFieldIconButton #196

guilean · 2020-11-04T09:41:07Z

Checklist

New feature (non-breaking change which adds functionality)

Please check if the PR fulfills these requirements

Tests for the changes have been added (for bug fixes / features)
Storybook or docs have been added / updated (for bug fixes / features)

What is the ticket / issue associated with this change? (Link to the ticket or issue)
https://trello.com/c/95Nr1LgN/94-migrate-composer-forms-to-styled-components

changeset-bot · 2020-11-04T09:41:09Z

⚠️ No Changeset found

Latest commit: 94a740b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

codecov · 2020-11-04T09:45:19Z

Codecov Report

Merging #196 into styled-components will increase coverage by 0.03%.
The diff coverage is 100.00%.

@@                  Coverage Diff                  @@
##           styled-components     #196      +/-   ##
=====================================================
+ Coverage              92.60%   92.64%   +0.03%     
=====================================================
  Files                    243      245       +2     
  Lines                   2542     2555      +13     
  Branches                 750      756       +6     
=====================================================
+ Hits                    2354     2367      +13     
  Misses                   187      187              
  Partials                   1        1

Flag	Coverage Δ
components	`92.64% <100.00%> (+0.03%)`	⬆️
unittest	`92.64% <100.00%> (+0.03%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...xpandableTextFieldIcon/ExpandableTextFieldIcon.tsx	`100.00% <ø> (ø)`
...onents/primitives/Form/SearchField/SearchField.tsx	`100.00% <ø> (ø)`
...ts/primitives/Form/TextFieldIcon/TextFieldIcon.tsx	`100.00% <ø> (ø)`
...mitives/Form/TextFieldIcon/TextFieldIcon.styled.ts	`100.00% <100.00%> (ø)`
.../TextFieldIconButton/TextFieldIconButton.styled.ts	`100.00% <100.00%> (ø)`
...s/Form/TextFieldIconButton/TextFieldIconButton.tsx	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a68fe4c...94a740b. Read the comment docs.

tkanzakic · 2020-11-04T09:43:11Z

packages/styled-components/src/components/primitives/Form/TextFieldIcon/TextFieldIcon.tsx

@@ -43,7 +45,7 @@ export const TextFieldIcon = ({
  }, []);

  return (
-    <StyledWrapper>
+    <StyledWrapper css={wrapperCustomCss}>


no className?

Added type and test

tkanzakic · 2020-11-04T09:45:33Z

...d-components/src/components/primitives/Form/TextFieldIconButton/TextFieldIconButton.types.ts

+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onClick?: () => void;
+  buttonContent?: React.ReactNode;
+  icon?: React.ReactNode;


use React.ChangeEvent and remove the import or import ReactNode

…into styled-dropdownfieldmulti * 'styled-components' of https://github.com/cmpsr/composer: Styled DropdownNativeSelect (#197) Styled Conversation MessageError (#198) Styled chat message (#183) Styled TextFieldIconButton (#196) # Conflicts: # packages/styled-components/src/components/primitives/Form/DropdownField/DropdownField.stories.tsx

* install styled-components dependencies * initial commit - initial package configuration - add button primitive component * update storybook to latest version * create getTheme method to return default one if none provided * extract types to a file * unit tests Button component * create Button stories * remove unused dependencies * temporary rename packages to styled-components to avoid conflicts with the current one * fix ts config paths * feat: remove unused styles (#151) * Styled icon (#152) * add alias for the styles folder to babel * migrate Icon to styled-components * add exports * fix Icon stories to use the type instead of a string * remove unnecessary expectation * use appropriate assertion method Co-authored-by: Pau Teruel <[email protected]> * use appropriate assertion method Co-authored-by: Pau Teruel <[email protected]> Co-authored-by: Pau Teruel <[email protected]> * Styled Typography (#153) * feat: create typography * feat: move props top level Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]> * Styled Link (#154) * migrate Link to styled-components * remove empty class * use color from theme * use appropriate assertion method * migrate Video to styled-components (#157) * Styled NumericBadge (#158) * migrate NumericBadge to styled-components * add size to storybook playground * migrate Image to styled-components (#156) * Styled IconicBadge (#160) * move Color to Badges folder - this type is shared by all badges * migrate IconicBadge to styled-components * Styled AvatarText (#155) * feat: create AvatarText * feat: remove default case * feat: add avatar text to common export * feat: order alphabetically Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]> * Styled Pill (#159) * feat: create pill * feat: add to cmmon export * feat: reorder exports alphabetically Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]> * migrate Asset to styled-components (#161) * feat: create list (#164) * allow CSS overriding (#166) * Styled StepIndicator (#162) * feat: create stepindicator * feat: update stepindicator to stepper * feat: apply feedback * Styled Spinner (#163) * feat: create spinner * feat: apply feedback * migrate ConversationSummary to styled-components (#168) * Styled List Items (#165) * feat: create ButtonItem * feat: create LinkItem * feat: apply feedback * fix: build due to target * feat: create conversation list (#171) * feat: create box container (#172) * Styled Modal (#173) * remove react-modal dependency * move Shapes to a shared file * add Modal theme config * migrate Modal to styled-components * Styled Dropdown (#167) * feat: drpdown * feat: dropdown * feat: apply changes * feat: add story * feat: apply feedback * Styled Modal Improvements (#176) * rename prop to showCloseButton * add missing stories * Styled Tooltip (#169) * feat: create tooltip * feat: apply feedback * feat: update storybook to latest version * feat: revert changes * Styled Snackbar (#170) * feat: create snackbar * test: add test for snackbar * feat: apply feedback * feat: move props type t types file * feat: update sb * Styled Grid (#177) * migrate Grid to styled-components * use appropriate assertion method * Styled SectionChild (#179) * migrate SectionChild to styled-components * define BaseProps type with the common properties of all components * define base props types with the common props for styled components * use common types and test className * use common types and test className in Grid * Styled Section (#178) * feat: create section * feat: add custom css to section and box * feat: use new types * Styled ErrorField (#180) * feat: errorfield * feat: apply new types * feat: add css custom props * Styled radio button (#181) * feat: errorfield * feat: apply new types * feat: create radio button * feat: add custom css * Styled use types (#182) * use common types and test className in Asset * use common types and test className in AvatarText * use common types and test className in IconBadge * use common types and test className in NumericBadge * use common types and test className in Button * use common types and test className in ConversationList * use common types and test className in ConversationSummary * use common types and test className in Dropdown * use common types and test className in Icon * use common types and test className in Image * use common types and test className in Link * use common types and test className in ButtonItem - fix types file name * use common types and test className in LinkItem * use common types and test className in List * use common types and test className in Modal - add support for class name * use common types and test className in Pill * use common types and test className in Snackbar * use common types and test className in Spinner * use common types and test className in Stepper * use common types and test className in Tooltip * use common types and test className in Typography * use common types and test className in Video * Styled TextArea (#184) * feat: create textarea * feat: add global export * feat: add key to items * chore: remove unused import * Wrap customCss call (#187) * extract customCss call to a function * added withCustomCSS HOC * add appropriate types for RadioButton StyledInput * migrate TextArea to withCustomCss HOC * Styled TextField (#185) * feat: create textfield * define type TextField Type - support forwardRef and custom attributes for Shapes and Modes * feat: update textfield to use hoc * feat: add proper types to styled Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]> * Image customCss Implementation (#186) * adding customcss implementation * aplying suggested changes * Remove unnecessary type, adding custome style for storybook * Implement withCustomCss * Use typescript config in tests and stories too (#191) * enable typescript configuration in tests and stories - this will fix the issue we have right now with the IDE not auto completing the code in the tests and stories files and not detecting missing required properties * fix types errors in tests and stories * Styled ExpandableTextfieldIcon (#189) * feat: create expandable * feat: create expandabletextfield icon * feat: update customCss to expandabletextfield * feat: add onChange prop to stories * feat: update customCss * feat: add required props to stories * remove HOC and custom class Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]> * Styled SearchField (#192) * feat: create SearchField * feat: remove hoc * feat: add missing type * Styled TextFieldButton (#193) * feat: create TextFieldButton * feat: add customcss * test: add test for custom css * feat: add missing import * Styled CurrencyField (#190) * currencyField component, style, storybook * implement withCustomCss * Adding stories * adding unit test * apply format * adding CurrencyField component to index file * change fragment for div on currency story, remove unnecessary cn. * update styles with customCss * refactor currencyField test * Styled TextFieldWithLabel (#194) * feat: create TextFieldWithLabel * feat: add customCss to typography * test: add coverage * Styled TextFieldIcon (#195) * feat: create textfieldicon * feat: add box sizing * test: add test for custom css * Styled TextFieldIconButton (#196) * feat: reuse IconPositions enum * feat: create textfieldiconbutton * feat: apply feedback * Styled chat message (#183) * adding styled-components styles * moving code to styled-component folder * adding types, use theme for colors * adding MediaLoader styles * migrate Progress Circular component to styled-components * merge Circular component * adding Circular component to index primitive folder file * change styled file to suggested changes. * adding Spiner component * Remove unecessary Circular component * removing unnecessary variabled * using media query breakpoints from theme * adjust text padding to dsm * format with prettier * revert tailwind message file format * adding typescript Props * adding Message component to the index file * aplying suggested changes * implement customCss * adding customcss implementation * aplying suggested changes * implement Image customCss, fix merge issues * change prop color to backgroundColor * change key color to backgroundColor * adding customCss * implement customCss * update story and test * apply suggested changes * feat: improve styling for image Co-authored-by: Pau Teruel <[email protected]> * Styled Conversation MessageError (#198) * adding styled-components styles * moving code to styled-component folder * adding types, use theme for colors * adding MediaLoader styles * migrate Progress Circular component to styled-components * merge Circular component * adding Circular component to index primitive folder file * change styled file to suggested changes. * adding Spiner component * Remove unecessary Circular component * removing unnecessary variabled * using media query breakpoints from theme * adjust text padding to dsm * format with prettier * revert tailwind message file format * adding typescript Props * adding Message component to the index file * chat MessageError styled-components * unit test, storybook, implement customCss * format with prettier, adding MessageError to index file * adding customCss test * Styled DropdownNativeSelect (#197) * feat: create dropdownnativeselect * feat: create dropdownfield * feat: apply feedback * Styled DropdownFieldMulti (#200) * feat: create dropdownnativeselect * feat: create dropdownfield * feat: dropdownmulti * feat: apply feedback * feat: create dropdownfield multi * feat: apply feedback * add children to CurrencyField (#202) * Replace components with styled-components (#204) * replace components with styled-components * generate changeset * remove unused dependencies Co-authored-by: Pau Teruel <[email protected]> Co-authored-by: Dawin Valenzuela <[email protected]>

guilean added 2 commits November 4, 2020 09:41

feat: reuse IconPositions enum

cde904d

feat: create textfieldiconbutton

0d44c07

guilean added the ready for review This pull request is ready to be reviewed label Nov 4, 2020

guilean requested review from ryanhefner, stevejcox and tkanzakic as code owners November 4, 2020 09:41

tkanzakic requested changes Nov 4, 2020

View reviewed changes

feat: apply feedback

94a740b

guilean requested a review from tkanzakic November 4, 2020 10:13

tkanzakic approved these changes Nov 4, 2020

View reviewed changes

tkanzakic merged commit f303205 into styled-components Nov 4, 2020

tkanzakic deleted the styled-textfieldiconbutton branch November 4, 2020 11:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Styled TextFieldIconButton #196

Styled TextFieldIconButton #196

guilean commented Nov 4, 2020

changeset-bot bot commented Nov 4, 2020 •

edited

Loading

codecov bot commented Nov 4, 2020 •

edited

Loading

tkanzakic Nov 4, 2020

guilean Nov 4, 2020

tkanzakic Nov 4, 2020

guilean Nov 4, 2020

Styled TextFieldIconButton #196

Styled TextFieldIconButton #196

Conversation

guilean commented Nov 4, 2020

changeset-bot bot commented Nov 4, 2020 • edited Loading

⚠️ No Changeset found

codecov bot commented Nov 4, 2020 • edited Loading

Codecov Report

tkanzakic Nov 4, 2020

Choose a reason for hiding this comment

guilean Nov 4, 2020

Choose a reason for hiding this comment

tkanzakic Nov 4, 2020

Choose a reason for hiding this comment

guilean Nov 4, 2020

Choose a reason for hiding this comment

changeset-bot bot commented Nov 4, 2020 •

edited

Loading

codecov bot commented Nov 4, 2020 •

edited

Loading