@sproutsocial/racine 11.7.0 → 11.9.0-typescript.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/__flow__/Button/{index.js → index.tsx} +20 -21
  3. package/__flow__/Button/{styles.js → styles.ts} +1 -1
  4. package/__flow__/Checkbox/index.stories.js +73 -56
  5. package/__flow__/Checkbox/styles.js +75 -75
  6. package/__flow__/Collapsible/index.js +3 -2
  7. package/__flow__/EnumIconNames.js +1 -1
  8. package/__flow__/Icon/index.stories.js +41 -36
  9. package/__flow__/IconViewBoxes.js +1 -1
  10. package/__flow__/Image/index.js +10 -2
  11. package/__flow__/Input/index.js +47 -23
  12. package/__flow__/Input/index.stories.js +59 -33
  13. package/__flow__/Input/index.test.js +20 -0
  14. package/__flow__/Input/styles.js +2 -2
  15. package/__flow__/Loader/index.stories.js +18 -14
  16. package/__flow__/Numeral/index.stories.js +109 -50
  17. package/__flow__/Radio/index.stories.js +41 -26
  18. package/__flow__/SegmentedControl/index.js +3 -2
  19. package/__flow__/Switch/index.stories.js +26 -18
  20. package/__flow__/TableCell/index.js +9 -2
  21. package/__flow__/ToggleHint/index.js +9 -2
  22. package/__flow__/systemProps/color.js +1 -2
  23. package/__flow__/utils/responsiveProps/index.test.js +10 -2
  24. package/commonjs/IconViewBoxes.js +2 -0
  25. package/commonjs/Input/index.js +42 -22
  26. package/commonjs/Input/styles.js +2 -2
  27. package/commonjs/include-icons.js +1 -1
  28. package/dist/iconList.js +1 -1
  29. package/dist/icons.svg +1 -1
  30. package/icons/help-alt.svg +3 -0
  31. package/icons/plug.svg +3 -0
  32. package/includeIcons.js +1 -1
  33. package/lib/IconViewBoxes.js +2 -0
  34. package/lib/Input/index.js +42 -22
  35. package/lib/Input/styles.js +2 -2
  36. package/lib/include-icons.js +1 -1
  37. package/package.json +6 -1
  38. package/commonjs/Button/index.js +0 -70
  39. package/commonjs/Button/styles.js +0 -66
  40. package/lib/Button/index.js +0 -57
  41. package/lib/Button/styles.js +0 -48
@@ -1 +1 @@
1
- module.exports = {"active-listener":"0 0 16 16","add-item":"0 0 16 16","add-keyword":"0 0 16 16","add-team-member":"0 0 18 13","add-variable":"0 0 18 14","address-card-outline":"0 0 16 16","address-card-solid":"0 0 18 16","adobe-experience-manager":"0 0 16 18","ads":"0 0 9 16","android":"0 0 14 16","apple":"0 0 14 16","approval-indicator-outline":"0 0 14 16","approval-indicator":"0 0 14 16","archive":"0 0 16 16","arrow-down-line":"0 0 14 16","arrow-down":"0 0 16 16","arrow-left-line":"0 0 16 18","arrow-left":"0 0 16 16","arrow-right-line":"0 0 16 18","arrow-right":"0 0 16 16","arrow-up-line":"0 0 14 16","arrow-up":"0 0 16 16","arrows":"0 0 16 16","asset-library-outline":"0 0 16 16","asset-library":"0 0 16 16","assign":"0 0 18 15","atom":"0 0 14 16","audio":"0 0 16 14","back-to-top":"0 0 15 16","bambu-icon-outline":"0 0 16 16","bambu-icon":"0 0 16 16","barcode":"0 0 18 16","basketball":"0 0 16 16","bell-outline":"0 0 14 16","bigcommerce":"0 0 16 16","bitly":"0 0 16 16","bold":"0 0 16 16","book":"0 0 14 16","bot":"0 0 16 16","browser":"0 0 16 16","business":"0 0 16 16","calendar-outline":"0 0 14 16","calendar":"0 0 14 16","camera-outline":"0 0 18 16","camera-story":"0 0 18 16","camera":"0 0 18 16","campaign":"0 0 16 14","canva":"0 0 16 18","carousel":"0 0 16 18","cart-plus-outline":"0 0 17 15","cart-plus":"0 0 17 15","check":"0 0 16 16","chevron-down-filled":"0 0 16 21","chevron-down":"0 0 16 18","chevron-left":"0 0 10 16","chevron-right":"0 0 10 17","chevron-up-down-filled":"0 0 12 20","chevron-up-filled":"0 0 16 21","chevron-up":"0 0 16 18","circle-check-outline":"0 0 16 16","circle-check":"0 0 16 16","circle":"0 0 16 16","circle+":"0 0 16 16","circles":"0 0 16 16","circlex":"0 0 16 16","click-to-view":"0 0 12 16","clicks":"0 0 10 16","clipboard-outline":"0 0 12 16","clipboard":"0 0 12 16","clock":"0 0 16 16","closed-captioning":"0 0 16 16","cloud":"0 0 16 13","code":"0 0 18 16","columns":"0 0 16 16","comment-alt-outline":"0 0 16 15","comment-alt":"0 0 16 15","comment-lines-alt-outline":"0 0 16 16","comment":"0 0 16 13","compact-density":"0 0 16 16","compact-indicator":"0 0 16 16","comparison":"0 0 16 14","competitor":"0 0 14 16","compose":"0 0 16 16","content-suggestions":"0 0 16 16","credit-card":"0 0 16 14","crop":"0 0 16 16","crown":"0 0 16 16","dashboard":"0 0 16 14","deconstructed-negative-sentiment":"0 0 18 18","deconstructed-neutral-sentiment":"0 0 18 18","deconstructed-positive-sentiment":"0 0 18 18","discovery":"0 0 16 16","dislike-outline":"0 0 15 16","dislike":"0 0 16 16","dm-link-outline":"0 0 16 16","dm-link":"0 0 16 16","dotdotdot":"0 0 16 16","download":"0 0 16 16","drafts-outline":"0 0 12 16","drafts":"0 0 12 16","dropbox":"0 0 18 16","duplicate-outline":"0 0 14 16","duplicate":"0 0 14 16","emoji-outline":"0 0 16 16","emoji":"0 0 16 16","empty-image":"0 0 16 18","engagement-per-post":"0 0 16 16","engagements":"0 0 16 15","error":"0 0 16 16","exchange-alt":"0 0 16 16","expanded-indicator":"0 0 16 16","export":"0 0 14 17","extended-circles":"0 0 16 16","external-link-alt":"0 0 16 16","external-link":"0 0 16 16","extreme-negative-sentiment":"0 0 16 16","eye-outline":"0 0 18 16","eye-slash-outline":"0 0 20 16","eye-slash":"0 0 20 16","eye":"0 0 18 16","facebook-audience-network":"0 0 16 16","facebook-branded-content-outline":"0 0 18 15","facebook-branded-content":"0 0 18 15","facebook-groups":"0 0 16 16","facebook":"0 0 16 16","fb-reactions-angry":"0 0 16 16","fb-reactions-haha":"0 0 16 16","fb-reactions-like":"0 0 16 16","fb-reactions-love":"0 0 16 16","fb-reactions-sad":"0 0 16 16","fb-reactions-wow":"0 0 16 16","feedly":"0 0 16 15","feeds":"0 0 16 15","female":"0 0 11 18","file-chart-line":"0 0 12 16","file-edit":"0 0 12 16","file-times-solid":"0 0 12 16","filter":"0 0 16 16","flag-outline":"0 0 16 16","flag":"0 0 16 16","flat-negative-sentiment-outline":"0 0 18 18","flat-negative-sentiment":"0 0 18 18","flat-neutral-sentiment-outline":"0 0 18 18","flat-neutral-sentiment":"0 0 18 18","flat-positive-sentiment-outline":"0 0 18 18","flat-positive-sentiment":"0 0 18 18","folder-open":"0 0 16 15","folder":"0 0 16 16","follow-outline":"0 0 20 16","follow":"0 0 20 16","follower-increase":"0 0 19 16","following":"0 0 20 16","font":"0 0 18 16","full-access":"0 0 16 16","gear":"0 0 16 16","gears":"0 0 16 16","glassdoor":"0 0 16 16","glasses":"0 0 18 14","globe":"0 0 16 16","google-analytics-color":"0 0 14 18","google-business-messages":"0 0 16 16","google-drive":"0 0 16 14","google-my-business":"0 0 16 14","grip":"0 0 8 18","h1":"0 0 16 16","h2":"0 0 16 16","hamburger":"0 0 16 18","hashtag":"0 0 16 16","headset":"0 0 16 16","heart-outline":"0 0 16 16","heart":"0 0 16 16","heartbeat":"0 0 18 16","help":"0 0 16 16","hiking":"0 0 16 16","history":"0 0 16 16","home":"0 0 16 15","hourglass":"0 0 12 16","hubspot":"0 0 16 16","image-caption":"0 0 16 14","image":"0 0 16 16","images":"0 0 16 15","impressions-per-post":"0 0 16 16","impressions":"0 0 18 16","inactive-listener":"0 0 16 12","inbox-action":"0 0 16 16","inbox-views":"0 0 16 13","inbox":"0 0 16 14","indicator":"0 0 16 16","industry":"0 0 14 16","info":"0 0 16 16","instagram":"0 0 16 16","internal-activity-outline":"0 0 16 16","internal-activity":"0 0 16 16","italic":"0 0 16 16","key":"0 0 16 16","keyboard":"0 0 18 16","laptop-phone":"0 0 16 16","large-density":"0 0 16 16","lift":"0 0 23 16","like-outline":"0 0 15 16","like":"0 0 16 16","link":"0 0 16 16","linkedin-audience-network":"0 0 16 16","linkedin":"0 0 16 16","list-ol":"0 0 16 16","listening":"0 0 14 16","lists":"0 0 16 16","location-outline":"0 0 12 16","location":"0 0 12 16","lock":"0 0 14 16","magic-wand":"0 0 17 16","male":"0 0 16 20","marketo":"0 0 16 18","mention":"0 0 16 16","message-preview-outline":"0 0 18 16","message-preview":"0 0 18 16","message":"0 0 16 16","messages-outline":"0 0 16 16","messages":"0 0 16 16","messenger":"0 0 16 16","metric-table":"0 0 16 16","microsoft-dynamics":"0 0 16 16","minus":"0 0 16 16","mobile":"0 0 10 16","monitor":"0 0 12 16","moon":"0 0 15 16","negative-sentiment":"0 0 16 16","neutral-positive-sentiment":"0 0 16 16","neutral-sentiment":"0 0 16 16","new-trend":"0 0 12 16","newspaper":"0 0 16 16","no-access":"0 0 16 16","notepad":"0 0 12 16","notifications-publishing-outline":"0 0 16 16","notifications-publishing":"0 0 16 16","notifications":"0 0 14 16","offline":"0 0 18 15","online":"0 0 18 15","paid-promotion-outline":"0 0 16 16","paid-promotion":"0 0 16 16","paid":"0 0 14 16","paint":"0 0 18 16","palette":"0 0 16 16","paperclip":"0 0 14 16","pause":"0 0 16 18","pencil-outline":"0 0 16 16","pencil":"0 0 16 16","person":"0 0 14 16","phone":"0 0 16 16","pinterest-boards-outline":"0 0 14 16","pinterest-boards":"0 0 14 16","pinterest":"0 0 16 16","play-circle":"0 0 16 16","play":"0 0 14 16","plus":"0 0 16 18","positive-sentiment":"0 0 16 16","power-up-outline":"0 0 12 16","power-up":"0 0 10 16","profile-connect":"0 0 16 16","profile-disconnect":"0 0 16 16","publishing-outline":"0 0 16 16","publishing":"0 0 16 16","puzzle-piece":"0 0 18 16","qr-code":"0 0 16 16","queue":"0 0 16 16","recommendation":"0 0 16 16","reddit-alien":"0 0 16 16","reddit":"0 0 16 16","referrals":"0 0 16 16","refresh":"0 0 16 16","rejected":"0 0 16 16","reply-outline":"0 0 16 16","reply":"0 0 16 16","reporting-period":"0 0 14 16","reporting":"0 0 16 16","reports-home":"0 0 16 16","reports":"0 0 16 15","retweet":"0 0 18 16","rss":"0 0 16 16","sales":"0 0 9 16","salesforce":"0 0 20 16","save-assets":"0 0 16 16","saved-messages":"0 0 16 16","saved-reply-outline":"0 0 16 12","saved-reply":"0 0 16 12","search":"0 0 16 16","sent-message-outline":"0 0 16 14","sent-message":"0 0 16 14","share":"0 0 16 14","shopify":"0 0 16 18","show-navigation":"0 0 18 14","slack":"0 0 16 16","small-density":"0 0 16 16","smiley":"0 0 16 16","some-access":"0 0 16 16","sparkles":"0 0 16 16","spike-alert":"0 0 16 16","star-half-alt-solid":"0 0 18 16","star-of-life":"0 0 16 16","star-outline":"0 0 18 16","star":"0 0 18 16","sticky-note-outline":"0 0 16 16","sticky-note":"0 0 16 16","stories":"0 0 16 17","story":"0 0 16 16","suggestions":"0 0 11 16","sun":"0 0 16 16","tag-outline":"0 0 16 16","tag":"0 0 16 16","targeting-outline":"0 0 16 16","targeting":"0 0 16 16","tasks-outline":"0 0 12 16","tasks":"0 0 12 16","team-conversation-outline":"0 0 16 18","team-conversation":"0 0 16 18","team":"0 0 18 16","text-asset":"0 0 16 16","text":"0 0 8 16","tiktok":"0 0 16 18","times":"0 0 16 22","trash-can-outline":"0 0 14 16","trash-can":"0 0 14 16","trend-down":"0 0 18 18","trend-neutral":"0 0 20 18","trend-up":"0 0 18 18","trends":"0 0 16 17","triangle-black":"0 0 16 16","triangle":"0 0 16 16","tripadvisor-circle-outline":"0 0 16 16","tripadvisor-circle":"0 0 16 16","tripadvisor":"0 0 16 16","trophy-outline":"0 0 18 16","tumblr":"0 0 16 16","twitter-audience-network":"0 0 17 16","twitter":"0 0 17 16","unfollow-outline":"0 0 20 16","unfollow":"0 0 20 16","unlink":"0 0 16 16","unlock":"0 0 14 16","upload":"0 0 16 17","user-circle":"0 0 16 16","users":"0 0 18 16","verified":"0 0 16 16","video-camera-story":"0 0 18 15","video-camera":"0 0 18 16","vip":"0 0 16 16","weight":"0 0 16 16","whatsapp":"0 0 16 16","window-maximize":"0 0 16 16","window-minimize":"0 0 16 16","window-regular":"0 0 16 16","window-restore":"0 0 16 16","woocommerce":"0 0 18 16","x":"0 0 16 18","yelp-full-star":"0 0 16 16","yelp-half-star":"0 0 16 16","yelp":"0 0 14 16","youtube":"0 0 16 15","zendesk":"0 0 16 16"};
1
+ module.exports = {"active-listener":"0 0 16 16","add-item":"0 0 16 16","add-keyword":"0 0 16 16","add-team-member":"0 0 18 13","add-variable":"0 0 18 14","address-card-outline":"0 0 16 16","address-card-solid":"0 0 18 16","adobe-experience-manager":"0 0 16 18","ads":"0 0 9 16","android":"0 0 14 16","apple":"0 0 14 16","approval-indicator-outline":"0 0 14 16","approval-indicator":"0 0 14 16","archive":"0 0 16 16","arrow-down-line":"0 0 14 16","arrow-down":"0 0 16 16","arrow-left-line":"0 0 16 18","arrow-left":"0 0 16 16","arrow-right-line":"0 0 16 18","arrow-right":"0 0 16 16","arrow-up-line":"0 0 14 16","arrow-up":"0 0 16 16","arrows":"0 0 16 16","asset-library-outline":"0 0 16 16","asset-library":"0 0 16 16","assign":"0 0 18 15","atom":"0 0 14 16","audio":"0 0 16 14","back-to-top":"0 0 15 16","bambu-icon-outline":"0 0 16 16","bambu-icon":"0 0 16 16","barcode":"0 0 18 16","basketball":"0 0 16 16","bell-outline":"0 0 14 16","bigcommerce":"0 0 16 16","bitly":"0 0 16 16","bold":"0 0 16 16","book":"0 0 14 16","bot":"0 0 16 16","browser":"0 0 16 16","business":"0 0 16 16","calendar-outline":"0 0 14 16","calendar":"0 0 14 16","camera-outline":"0 0 18 16","camera-story":"0 0 18 16","camera":"0 0 18 16","campaign":"0 0 16 14","canva":"0 0 16 18","carousel":"0 0 16 18","cart-plus-outline":"0 0 17 15","cart-plus":"0 0 17 15","check":"0 0 16 16","chevron-down-filled":"0 0 16 21","chevron-down":"0 0 16 18","chevron-left":"0 0 10 16","chevron-right":"0 0 10 17","chevron-up-down-filled":"0 0 12 20","chevron-up-filled":"0 0 16 21","chevron-up":"0 0 16 18","circle-check-outline":"0 0 16 16","circle-check":"0 0 16 16","circle":"0 0 16 16","circle+":"0 0 16 16","circles":"0 0 16 16","circlex":"0 0 16 16","click-to-view":"0 0 12 16","clicks":"0 0 10 16","clipboard-outline":"0 0 12 16","clipboard":"0 0 12 16","clock":"0 0 16 16","closed-captioning":"0 0 16 16","cloud":"0 0 16 13","code":"0 0 18 16","columns":"0 0 16 16","comment-alt-outline":"0 0 16 15","comment-alt":"0 0 16 15","comment-lines-alt-outline":"0 0 16 16","comment":"0 0 16 13","compact-density":"0 0 16 16","compact-indicator":"0 0 16 16","comparison":"0 0 16 14","competitor":"0 0 14 16","compose":"0 0 16 16","content-suggestions":"0 0 16 16","credit-card":"0 0 16 14","crop":"0 0 16 16","crown":"0 0 16 16","dashboard":"0 0 16 14","deconstructed-negative-sentiment":"0 0 18 18","deconstructed-neutral-sentiment":"0 0 18 18","deconstructed-positive-sentiment":"0 0 18 18","discovery":"0 0 16 16","dislike-outline":"0 0 15 16","dislike":"0 0 16 16","dm-link-outline":"0 0 16 16","dm-link":"0 0 16 16","dotdotdot":"0 0 16 16","download":"0 0 16 16","drafts-outline":"0 0 12 16","drafts":"0 0 12 16","dropbox":"0 0 18 16","duplicate-outline":"0 0 14 16","duplicate":"0 0 14 16","emoji-outline":"0 0 16 16","emoji":"0 0 16 16","empty-image":"0 0 16 18","engagement-per-post":"0 0 16 16","engagements":"0 0 16 15","error":"0 0 16 16","exchange-alt":"0 0 16 16","expanded-indicator":"0 0 16 16","export":"0 0 14 17","extended-circles":"0 0 16 16","external-link-alt":"0 0 16 16","external-link":"0 0 16 16","extreme-negative-sentiment":"0 0 16 16","eye-outline":"0 0 18 16","eye-slash-outline":"0 0 20 16","eye-slash":"0 0 20 16","eye":"0 0 18 16","facebook-audience-network":"0 0 16 16","facebook-branded-content-outline":"0 0 18 15","facebook-branded-content":"0 0 18 15","facebook-groups":"0 0 16 16","facebook":"0 0 16 16","fb-reactions-angry":"0 0 16 16","fb-reactions-haha":"0 0 16 16","fb-reactions-like":"0 0 16 16","fb-reactions-love":"0 0 16 16","fb-reactions-sad":"0 0 16 16","fb-reactions-wow":"0 0 16 16","feedly":"0 0 16 15","feeds":"0 0 16 15","female":"0 0 11 18","file-chart-line":"0 0 12 16","file-edit":"0 0 12 16","file-times-solid":"0 0 12 16","filter":"0 0 16 16","flag-outline":"0 0 16 16","flag":"0 0 16 16","flat-negative-sentiment-outline":"0 0 18 18","flat-negative-sentiment":"0 0 18 18","flat-neutral-sentiment-outline":"0 0 18 18","flat-neutral-sentiment":"0 0 18 18","flat-positive-sentiment-outline":"0 0 18 18","flat-positive-sentiment":"0 0 18 18","folder-open":"0 0 16 15","folder":"0 0 16 16","follow-outline":"0 0 20 16","follow":"0 0 20 16","follower-increase":"0 0 19 16","following":"0 0 20 16","font":"0 0 18 16","full-access":"0 0 16 16","gear":"0 0 16 16","gears":"0 0 16 16","glassdoor":"0 0 16 16","glasses":"0 0 18 14","globe":"0 0 16 16","google-analytics-color":"0 0 14 18","google-business-messages":"0 0 16 16","google-drive":"0 0 16 14","google-my-business":"0 0 16 14","grip":"0 0 8 18","h1":"0 0 16 16","h2":"0 0 16 16","hamburger":"0 0 16 18","hashtag":"0 0 16 16","headset":"0 0 16 16","heart-outline":"0 0 16 16","heart":"0 0 16 16","heartbeat":"0 0 18 16","help-alt":"0 0 12 16","help":"0 0 16 16","hiking":"0 0 16 16","history":"0 0 16 16","home":"0 0 16 15","hourglass":"0 0 12 16","hubspot":"0 0 16 16","image-caption":"0 0 16 14","image":"0 0 16 16","images":"0 0 16 15","impressions-per-post":"0 0 16 16","impressions":"0 0 18 16","inactive-listener":"0 0 16 12","inbox-action":"0 0 16 16","inbox-views":"0 0 16 13","inbox":"0 0 16 14","indicator":"0 0 16 16","industry":"0 0 14 16","info":"0 0 16 16","instagram":"0 0 16 16","internal-activity-outline":"0 0 16 16","internal-activity":"0 0 16 16","italic":"0 0 16 16","key":"0 0 16 16","keyboard":"0 0 18 16","laptop-phone":"0 0 16 16","large-density":"0 0 16 16","lift":"0 0 23 16","like-outline":"0 0 15 16","like":"0 0 16 16","link":"0 0 16 16","linkedin-audience-network":"0 0 16 16","linkedin":"0 0 16 16","list-ol":"0 0 16 16","listening":"0 0 14 16","lists":"0 0 16 16","location-outline":"0 0 12 16","location":"0 0 12 16","lock":"0 0 14 16","magic-wand":"0 0 17 16","male":"0 0 16 20","marketo":"0 0 16 18","mention":"0 0 16 16","message-preview-outline":"0 0 18 16","message-preview":"0 0 18 16","message":"0 0 16 16","messages-outline":"0 0 16 16","messages":"0 0 16 16","messenger":"0 0 16 16","metric-table":"0 0 16 16","microsoft-dynamics":"0 0 16 16","minus":"0 0 16 16","mobile":"0 0 10 16","monitor":"0 0 12 16","moon":"0 0 15 16","negative-sentiment":"0 0 16 16","neutral-positive-sentiment":"0 0 16 16","neutral-sentiment":"0 0 16 16","new-trend":"0 0 12 16","newspaper":"0 0 16 16","no-access":"0 0 16 16","notepad":"0 0 12 16","notifications-publishing-outline":"0 0 16 16","notifications-publishing":"0 0 16 16","notifications":"0 0 14 16","offline":"0 0 18 15","online":"0 0 18 15","paid-promotion-outline":"0 0 16 16","paid-promotion":"0 0 16 16","paid":"0 0 14 16","paint":"0 0 18 16","palette":"0 0 16 16","paperclip":"0 0 14 16","pause":"0 0 16 18","pencil-outline":"0 0 16 16","pencil":"0 0 16 16","person":"0 0 14 16","phone":"0 0 16 16","pinterest-boards-outline":"0 0 14 16","pinterest-boards":"0 0 14 16","pinterest":"0 0 16 16","play-circle":"0 0 16 16","play":"0 0 14 16","plug":"0 0 12 16","plus":"0 0 16 18","positive-sentiment":"0 0 16 16","power-up-outline":"0 0 12 16","power-up":"0 0 10 16","profile-connect":"0 0 16 16","profile-disconnect":"0 0 16 16","publishing-outline":"0 0 16 16","publishing":"0 0 16 16","puzzle-piece":"0 0 18 16","qr-code":"0 0 16 16","queue":"0 0 16 16","recommendation":"0 0 16 16","reddit-alien":"0 0 16 16","reddit":"0 0 16 16","referrals":"0 0 16 16","refresh":"0 0 16 16","rejected":"0 0 16 16","reply-outline":"0 0 16 16","reply":"0 0 16 16","reporting-period":"0 0 14 16","reporting":"0 0 16 16","reports-home":"0 0 16 16","reports":"0 0 16 15","retweet":"0 0 18 16","rss":"0 0 16 16","sales":"0 0 9 16","salesforce":"0 0 20 16","save-assets":"0 0 16 16","saved-messages":"0 0 16 16","saved-reply-outline":"0 0 16 12","saved-reply":"0 0 16 12","search":"0 0 16 16","sent-message-outline":"0 0 16 14","sent-message":"0 0 16 14","share":"0 0 16 14","shopify":"0 0 16 18","show-navigation":"0 0 18 14","slack":"0 0 16 16","small-density":"0 0 16 16","smiley":"0 0 16 16","some-access":"0 0 16 16","sparkles":"0 0 16 16","spike-alert":"0 0 16 16","star-half-alt-solid":"0 0 18 16","star-of-life":"0 0 16 16","star-outline":"0 0 18 16","star":"0 0 18 16","sticky-note-outline":"0 0 16 16","sticky-note":"0 0 16 16","stories":"0 0 16 17","story":"0 0 16 16","suggestions":"0 0 11 16","sun":"0 0 16 16","tag-outline":"0 0 16 16","tag":"0 0 16 16","targeting-outline":"0 0 16 16","targeting":"0 0 16 16","tasks-outline":"0 0 12 16","tasks":"0 0 12 16","team-conversation-outline":"0 0 16 18","team-conversation":"0 0 16 18","team":"0 0 18 16","text-asset":"0 0 16 16","text":"0 0 8 16","tiktok":"0 0 16 18","times":"0 0 16 22","trash-can-outline":"0 0 14 16","trash-can":"0 0 14 16","trend-down":"0 0 18 18","trend-neutral":"0 0 20 18","trend-up":"0 0 18 18","trends":"0 0 16 17","triangle-black":"0 0 16 16","triangle":"0 0 16 16","tripadvisor-circle-outline":"0 0 16 16","tripadvisor-circle":"0 0 16 16","tripadvisor":"0 0 16 16","trophy-outline":"0 0 18 16","tumblr":"0 0 16 16","twitter-audience-network":"0 0 17 16","twitter":"0 0 17 16","unfollow-outline":"0 0 20 16","unfollow":"0 0 20 16","unlink":"0 0 16 16","unlock":"0 0 14 16","upload":"0 0 16 17","user-circle":"0 0 16 16","users":"0 0 18 16","verified":"0 0 16 16","video-camera-story":"0 0 18 15","video-camera":"0 0 18 16","vip":"0 0 16 16","weight":"0 0 16 16","whatsapp":"0 0 16 16","window-maximize":"0 0 16 16","window-minimize":"0 0 16 16","window-regular":"0 0 16 16","window-restore":"0 0 16 16","woocommerce":"0 0 18 16","x":"0 0 16 18","yelp-full-star":"0 0 16 16","yelp-half-star":"0 0 16 16","yelp":"0 0 14 16","youtube":"0 0 16 15","zendesk":"0 0 16 16"};
@@ -80,8 +80,16 @@ export default class Image extends React.Component<TypeProps, TypeState> {
80
80
  };
81
81
 
82
82
  render() {
83
- const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
84
- this.props;
83
+ const {
84
+ alt,
85
+ title,
86
+ onClick,
87
+ onError,
88
+ onLoad,
89
+ src,
90
+ qa,
91
+ ...rest
92
+ } = this.props;
85
93
 
86
94
  return (
87
95
  <ImageContainer
@@ -16,7 +16,7 @@ type TypeProps = {
16
16
  ariaLabel?: string,
17
17
  /** Attribute used to associate other elements that describe the Input, like an error */
18
18
  ariaDescribedby?: string,
19
- /** Label for Input.ClearButton. Required when using <Input type="search"/> or <Input.ClearButton/>. */
19
+ /** Label for Input.ClearButton. Required when using Input.ClearButton. */
20
20
  clearButtonLabel?: string,
21
21
  /** Placeholder text for when value is undefined or empty */
22
22
  placeholder?: string,
@@ -52,8 +52,6 @@ type TypeProps = {
52
52
  | ((React.ElementRef<any> | HTMLElement) => void),
53
53
  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
54
54
  onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
55
- /** Input.ClearButton onClick callback. Required when using <Input type="search"/> or <Input.ClearButton/>.
56
- The component handles returning focus to Input after onClear is called only. You must reset "value" yourself.*/
57
55
  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
58
56
  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
59
57
  onKeyDown?: (
@@ -74,10 +72,13 @@ type TypeProps = {
74
72
  appearance?: "primary" | "secondary",
75
73
  };
76
74
 
75
+ type TypeState = {
76
+ hasValue: boolean,
77
+ };
78
+
77
79
  // Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,
78
80
  // regardless of whether it is manually included as elemAfter or automatically included for type="search" Inputs.
79
81
  type TypeInputContext = $Shape<{
80
- onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
81
82
  handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
82
83
  clearButtonLabel: string,
83
84
  hasValue: boolean,
@@ -96,7 +97,6 @@ const StyledButton: StyledComponent<any, TypeTheme, *> = styled(Button)`
96
97
 
97
98
  const ClearButton = () => {
98
99
  const {
99
- onClear,
100
100
  handleClear,
101
101
  clearButtonLabel,
102
102
  hasValue,
@@ -108,15 +108,6 @@ const ClearButton = () => {
108
108
  return null;
109
109
  }
110
110
 
111
- // Log a warning and hide the button when no onClear callback is provided.
112
- // If we called handleClear with no onClear prop, all the button would do is focus the Input.
113
- if (!onClear) {
114
- console.warn(
115
- "Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton."
116
- );
117
- return null;
118
- }
119
-
120
111
  // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
121
112
  if (!clearButtonLabel) {
122
113
  console.warn(
@@ -154,7 +145,16 @@ const isClearButton = (elem: any) => {
154
145
  return false;
155
146
  };
156
147
 
157
- class Input extends React.Component<TypeProps> {
148
+ class Input extends React.Component<TypeProps, TypeState> {
149
+ constructor(props: TypeProps) {
150
+ super(props);
151
+ this.state = {
152
+ // Tracking hasValue in state allows us to hide ClearButton when there is no value to clear
153
+ // for both controlled and uncontrolled inputs.
154
+ hasValue: !!props.value,
155
+ };
156
+ }
157
+
158
158
  static defaultProps = {
159
159
  autoFocus: false,
160
160
  disabled: false,
@@ -165,7 +165,7 @@ class Input extends React.Component<TypeProps> {
165
165
 
166
166
  static ClearButton = ClearButton;
167
167
 
168
- // Define our own ref for focus management.
168
+ // Define our own ref for use in handleClear.
169
169
  // We use mergeRefs to pass both this.inputRef and this.props.innerRef to input.
170
170
  inputRef = React.createRef<HTMLInputElement>();
171
171
 
@@ -173,12 +173,28 @@ class Input extends React.Component<TypeProps> {
173
173
  this.props.onBlur?.(e);
174
174
 
175
175
  handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
176
- this.inputRef?.current?.focus();
177
- this.props.onClear?.(e);
176
+ const input = this.inputRef.current;
177
+ if (input) {
178
+ // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
179
+ const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
180
+ window.HTMLInputElement.prototype,
181
+ "value"
182
+ )?.set;
183
+ nativeInputValueSetter?.call(input, "");
184
+ const inputEvent = new Event("input", { bubbles: true });
185
+ input.dispatchEvent(inputEvent);
186
+
187
+ // Focus the input, update hasValue, and call any onClear callback
188
+ input.focus();
189
+ this.updateState("");
190
+ this.props.onClear?.(e);
191
+ }
178
192
  };
179
193
 
180
- handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
194
+ handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
181
195
  this.props.onChange?.(e, e.currentTarget.value);
196
+ this.updateState(e.currentTarget.value);
197
+ };
182
198
 
183
199
  handleFocus = (e: SyntheticFocusEvent<HTMLInputElement>) =>
184
200
  this.props.onFocus?.(e);
@@ -192,6 +208,15 @@ class Input extends React.Component<TypeProps> {
192
208
  handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) =>
193
209
  this.props.onPaste?.(e, e.currentTarget.value);
194
210
 
211
+ updateState = (inputValue: string) => {
212
+ const hasValue = inputValue !== "";
213
+ const previousHasValue = this.state.hasValue;
214
+ // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
215
+ if (hasValue !== previousHasValue) {
216
+ this.setState({ hasValue });
217
+ }
218
+ };
219
+
195
220
  render() {
196
221
  const {
197
222
  autoComplete,
@@ -240,9 +265,9 @@ class Input extends React.Component<TypeProps> {
240
265
  ) : (
241
266
  elemBefore
242
267
  );
243
- // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
268
+ // Do not add a ClearButton if an elemAfter prop was passed.
244
269
  const elementAfter =
245
- type === "search" && onClear && !elemAfter ? <ClearButton /> : elemAfter;
270
+ type === "search" && !elemAfter ? <ClearButton /> : elemAfter;
246
271
 
247
272
  return (
248
273
  <Container
@@ -259,9 +284,8 @@ class Input extends React.Component<TypeProps> {
259
284
  <InputContext.Provider
260
285
  value={{
261
286
  handleClear: this.handleClear,
262
- hasValue: !!value,
287
+ hasValue: this.state.hasValue,
263
288
  clearButtonLabel,
264
- onClear,
265
289
  size,
266
290
  }}
267
291
  >
@@ -141,60 +141,86 @@ leftAndRightIcons.story = {
141
141
  name: "Left and right icons",
142
142
  };
143
143
 
144
- export const searchInput = () => (
145
- <Input
146
- type="search"
147
- placeholder={text("placeholder", "Please enter a value...")}
148
- value={text("value", "val")}
149
- onClear={() => window.alert("Cleared!")}
150
- clearButtonLabel={text("clearButtonLabel", "Clear search")}
151
- ariaLabel={text("ariaLabel", "Descriptive label goes here")}
152
- />
153
- );
144
+ export const SearchInput = () => {
145
+ const [value, setValue] = React.useState("");
146
+ return (
147
+ <Input
148
+ type="search"
149
+ placeholder={text("placeholder", "Please enter a value...")}
150
+ value={value}
151
+ onChange={(e, value) => setValue(value)}
152
+ clearButtonLabel={text("clearButtonLabel", "Clear search")}
153
+ ariaLabel={text("ariaLabel", "Descriptive label goes here")}
154
+ />
155
+ );
156
+ };
154
157
 
155
- searchInput.story = {
158
+ SearchInput.story = {
156
159
  name: "Search Input",
157
160
  };
158
161
 
159
- export const smallSearchInput = () => (
160
- <Input
161
- type="search"
162
- size="small"
163
- placeholder={text("placeholder", "Please enter a value...")}
164
- value={text("value", "val")}
165
- onClear={() => window.alert("Cleared!")}
166
- clearButtonLabel={text("clearButtonLabel", "Clear search")}
167
- ariaLabel={text("ariaLabel", "Descriptive label goes here")}
168
- />
169
- );
162
+ export const SmallSearchInput = () => {
163
+ const [value, setValue] = React.useState("");
170
164
 
171
- smallSearchInput.story = {
165
+ return (
166
+ <Input
167
+ type="search"
168
+ size="small"
169
+ placeholder={text("placeholder", "Please enter a value...")}
170
+ value={value}
171
+ onChange={(e, value) => setValue(value)}
172
+ clearButtonLabel={text("clearButtonLabel", "Clear search")}
173
+ ariaLabel={text("ariaLabel", "Descriptive label goes here")}
174
+ />
175
+ );
176
+ };
177
+
178
+ SmallSearchInput.story = {
172
179
  name: "Small Search Input",
173
180
  };
174
181
 
175
- export const largeSearchInput = () => (
182
+ export const LargeSearchInput = () => {
183
+ const [value, setValue] = React.useState("");
184
+
185
+ return (
186
+ <Input
187
+ type="search"
188
+ size="large"
189
+ placeholder={text("placeholder", "Please enter a value...")}
190
+ value={value}
191
+ onChange={(e, value) => setValue(value)}
192
+ clearButtonLabel={text("clearButtonLabel", "Clear search")}
193
+ ariaLabel={text("ariaLabel", "Descriptive label goes here")}
194
+ />
195
+ );
196
+ };
197
+
198
+ LargeSearchInput.story = {
199
+ name: "Large Search Input",
200
+ };
201
+
202
+ export const uncontrolledSearchInput = () => (
176
203
  <Input
177
204
  type="search"
178
- size="large"
179
205
  placeholder={text("placeholder", "Please enter a value...")}
180
- value={text("value", "val")}
181
- onClear={() => window.alert("Cleared!")}
182
206
  clearButtonLabel={text("clearButtonLabel", "Clear search")}
183
207
  ariaLabel={text("ariaLabel", "Descriptive label goes here")}
184
208
  />
185
209
  );
186
210
 
187
- largeSearchInput.story = {
188
- name: "Large Search Input",
211
+ uncontrolledSearchInput.story = {
212
+ name: "Uncontrolled Search Input",
189
213
  };
190
214
 
191
- export const nonSearchClearButtonInput = () => {
215
+ export const NonSearchClearButtonInput = () => {
216
+ const [value, setValue] = React.useState("");
217
+
192
218
  return (
193
219
  <Input
194
220
  type="text"
195
221
  placeholder={text("placeholder", "Please enter a value...")}
196
- value={text("value", "val")}
197
- onClear={() => window.alert("Cleared!")}
222
+ value={value}
223
+ onChange={(e, value) => setValue(value)}
198
224
  ariaLabel={text("ariaLabel", "Descriptive label goes here")}
199
225
  clearButtonLabel={text("clearButtonLabel", "Clear text")}
200
226
  elemAfter={<Input.ClearButton />}
@@ -202,7 +228,7 @@ export const nonSearchClearButtonInput = () => {
202
228
  );
203
229
  };
204
230
 
205
- nonSearchClearButtonInput.story = {
231
+ NonSearchClearButtonInput.story = {
206
232
  name: "Manual Input.ClearButton usage",
207
233
  };
208
234
 
@@ -85,6 +85,26 @@ describe("Input", () => {
85
85
  expect(getByRole("button")).toBeTruthy();
86
86
  });
87
87
 
88
+ it("should render a clear button for an uncontrolled search Input only when it has text", () => {
89
+ const { getByRole, queryByRole } = render(
90
+ <Input
91
+ id="name"
92
+ name="name"
93
+ type="search"
94
+ clearButtonLabel="Clear search"
95
+ />
96
+ );
97
+ expect(queryByRole("button")).toBeFalsy();
98
+ const input = getByRole("searchbox");
99
+ userEvent.tab();
100
+ expect(input).toHaveFocus();
101
+ userEvent.keyboard("some text");
102
+ expect(getByRole("button")).toBeTruthy();
103
+ userEvent.tab();
104
+ userEvent.keyboard("{enter}");
105
+ expect(queryByRole("button")).toBeFalsy();
106
+ });
107
+
88
108
  it("should not render a clear button for search Inputs if there is no text", () => {
89
109
  const { queryByRole } = render(
90
110
  <Input
@@ -134,13 +134,13 @@ export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
134
134
  ${(props) =>
135
135
  props.before &&
136
136
  css`
137
- left: ${props.theme.space[350]};
137
+ left: ${props.theme.space[300]};
138
138
  `};
139
139
 
140
140
  ${(props) =>
141
141
  props.after &&
142
142
  css`
143
- right: ${props.isClearButton ? 0 : props.theme.space[350]};
143
+ right: ${props.isClearButton ? 0 : props.theme.space[300]};
144
144
  `};
145
145
  `;
146
146
 
@@ -1,34 +1,38 @@
1
1
  import React from "react";
2
- import { boolean, text } from "@storybook/addon-knobs";
3
-
4
2
  import Loader from "./";
5
3
 
6
4
  export default {
7
5
  title: "Loader",
6
+ component: Loader,
8
7
  };
9
8
 
10
- export const defaultStory = () => (
11
- <Loader text={text("text", "Content loading")} />
12
- );
9
+ export const defaultStory = (args) => <Loader {...args} />;
10
+
11
+ defaultStory.args = {
12
+ text: "Content loading",
13
+ };
13
14
 
14
15
  defaultStory.story = {
15
16
  name: "Default",
16
17
  };
17
18
 
18
- export const small = () => (
19
- <Loader text={text("text", "Content loading")} size={text("size", "small")} />
20
- );
19
+ export const small = (args) => <Loader {...args} />;
20
+
21
+ small.args = {
22
+ text: "Content loading",
23
+ size: "small",
24
+ };
21
25
 
22
26
  small.story = {
23
27
  name: "Small",
24
28
  };
25
29
 
26
- export const noDelay = () => (
27
- <Loader
28
- text={text("text", "Content loading")}
29
- delay={boolean("delay", false)}
30
- />
31
- );
30
+ export const noDelay = (args) => <Loader {...args} />;
31
+
32
+ noDelay.args = {
33
+ text: "Content loading",
34
+ delay: false,
35
+ };
32
36
 
33
37
  noDelay.story = {
34
38
  name: "No delay",