@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.
- package/CHANGELOG.md +25 -0
- package/__flow__/Button/{index.js → index.tsx} +20 -21
- package/__flow__/Button/{styles.js → styles.ts} +1 -1
- package/__flow__/Checkbox/index.stories.js +73 -56
- package/__flow__/Checkbox/styles.js +75 -75
- package/__flow__/Collapsible/index.js +3 -2
- package/__flow__/EnumIconNames.js +1 -1
- package/__flow__/Icon/index.stories.js +41 -36
- package/__flow__/IconViewBoxes.js +1 -1
- package/__flow__/Image/index.js +10 -2
- package/__flow__/Input/index.js +47 -23
- package/__flow__/Input/index.stories.js +59 -33
- package/__flow__/Input/index.test.js +20 -0
- package/__flow__/Input/styles.js +2 -2
- package/__flow__/Loader/index.stories.js +18 -14
- package/__flow__/Numeral/index.stories.js +109 -50
- package/__flow__/Radio/index.stories.js +41 -26
- package/__flow__/SegmentedControl/index.js +3 -2
- package/__flow__/Switch/index.stories.js +26 -18
- package/__flow__/TableCell/index.js +9 -2
- package/__flow__/ToggleHint/index.js +9 -2
- package/__flow__/systemProps/color.js +1 -2
- package/__flow__/utils/responsiveProps/index.test.js +10 -2
- package/commonjs/IconViewBoxes.js +2 -0
- package/commonjs/Input/index.js +42 -22
- package/commonjs/Input/styles.js +2 -2
- package/commonjs/include-icons.js +1 -1
- package/dist/iconList.js +1 -1
- package/dist/icons.svg +1 -1
- package/icons/help-alt.svg +3 -0
- package/icons/plug.svg +3 -0
- package/includeIcons.js +1 -1
- package/lib/IconViewBoxes.js +2 -0
- package/lib/Input/index.js +42 -22
- package/lib/Input/styles.js +2 -2
- package/lib/include-icons.js +1 -1
- package/package.json +6 -1
- package/commonjs/Button/index.js +0 -70
- package/commonjs/Button/styles.js +0 -66
- package/lib/Button/index.js +0 -57
- 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"};
|
package/__flow__/Image/index.js
CHANGED
|
@@ -80,8 +80,16 @@ export default class Image extends React.Component<TypeProps, TypeState> {
|
|
|
80
80
|
};
|
|
81
81
|
|
|
82
82
|
render() {
|
|
83
|
-
const {
|
|
84
|
-
|
|
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
|
package/__flow__/Input/index.js
CHANGED
|
@@ -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
|
|
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
|
|
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
|
|
177
|
-
|
|
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
|
|
268
|
+
// Do not add a ClearButton if an elemAfter prop was passed.
|
|
244
269
|
const elementAfter =
|
|
245
|
-
type === "search" &&
|
|
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:
|
|
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
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
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
|
-
|
|
158
|
+
SearchInput.story = {
|
|
156
159
|
name: "Search Input",
|
|
157
160
|
};
|
|
158
161
|
|
|
159
|
-
export const
|
|
160
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
188
|
-
name: "
|
|
211
|
+
uncontrolledSearchInput.story = {
|
|
212
|
+
name: "Uncontrolled Search Input",
|
|
189
213
|
};
|
|
190
214
|
|
|
191
|
-
export const
|
|
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={
|
|
197
|
-
|
|
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
|
-
|
|
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
|
package/__flow__/Input/styles.js
CHANGED
|
@@ -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[
|
|
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[
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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",
|