@sproutsocial/racine 11.7.0 → 11.9.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 +35 -0
- package/__flow__/Checkbox/index.stories.js +73 -56
- package/__flow__/EnumIconNames.js +1 -1
- package/__flow__/Icon/index.stories.js +41 -36
- package/__flow__/IconViewBoxes.js +1 -1
- 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__/Switch/index.stories.js +26 -18
- package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +9 -0
- package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +9 -0
- package/__flow__/types/theme.flow.js +2 -0
- 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/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +11 -2
- package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +11 -2
- package/dist/iconList.js +1 -1
- package/dist/icons.svg +1 -1
- package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss +14 -0
- package/dist/themes/extendedThemes/sproutTheme/light/theme.scss +14 -0
- 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/lib/themes/extendedThemes/sproutTheme/dark/theme.js +9 -1
- package/lib/themes/extendedThemes/sproutTheme/light/theme.js +9 -1
- package/lib/types/theme.flow.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,40 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 11.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 6c3e703: Extend the sprout theme to add colors for trend arrows
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 1c10a77: Fix args
|
|
12
|
+
|
|
13
|
+
## 11.8.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- 1b66f38: Input.ClearButton no longer requires onClear prop
|
|
18
|
+
- Input has been updated to be able to clear itself for both controlled and uncontrolled Inputs
|
|
19
|
+
- The onChange function will be called upon clearing the input.
|
|
20
|
+
- Due to this change, Inputs with type "search" will now automatically include a ClearButton, whereas previously a ClearButton would not be rendered unless an onClear prop was provided.
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- 1b66f38: Adjust Input elemBefore and elemAfter positioning
|
|
25
|
+
- These elements were previously positioned 12px from the side of the Input
|
|
26
|
+
- They are now positioned 8px from the side of the Input, for better alignment with Input.ClearButton.
|
|
27
|
+
- 1b66f38: Expose Input.ClearButton for uncontrolled Inputs
|
|
28
|
+
- Previously, Input.ClearButton would not be usable for uncontrolled Inputs due to checking whether a value was in the input to clear only via the "value" prop.
|
|
29
|
+
- Now, Input.ClearButton is usable for uncontrolled Inputs because it is checking for updates to the value in its handleChange function.
|
|
30
|
+
|
|
31
|
+
## 11.7.1
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- d7b2b1f: - Plug icon
|
|
36
|
+
- Alternate help icon
|
|
37
|
+
|
|
3
38
|
## 11.7.0
|
|
4
39
|
|
|
5
40
|
### Minor Changes
|
|
@@ -1,114 +1,131 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { boolean } from "@storybook/addon-knobs";
|
|
3
2
|
import { action } from "@storybook/addon-actions";
|
|
4
3
|
|
|
5
4
|
import Checkbox from "./";
|
|
6
5
|
|
|
7
6
|
export default {
|
|
8
7
|
title: "Checkbox",
|
|
8
|
+
component: Checkbox,
|
|
9
9
|
};
|
|
10
10
|
|
|
11
|
-
export const Checked = () => <Checkbox
|
|
12
|
-
export const Unchecked = () => <Checkbox checked={boolean("checked", false)} />;
|
|
11
|
+
export const Checked = (args) => <Checkbox {...args} />;
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
)
|
|
13
|
+
Checked.args = { checked: true };
|
|
14
|
+
|
|
15
|
+
export const Unchecked = (args) => <Checkbox {...args} />;
|
|
16
|
+
|
|
17
|
+
Unchecked.args = { checked: false };
|
|
18
|
+
|
|
19
|
+
export const PillChecked = (args) => <Checkbox {...args} />;
|
|
20
|
+
|
|
21
|
+
PillChecked.args = {
|
|
22
|
+
checked: true,
|
|
23
|
+
appearance: "pill",
|
|
24
|
+
};
|
|
17
25
|
|
|
18
26
|
PillChecked.story = {
|
|
19
27
|
name: "Pill/Checked",
|
|
20
28
|
};
|
|
21
29
|
|
|
22
|
-
export const PillUnchecked = () =>
|
|
23
|
-
|
|
24
|
-
|
|
30
|
+
export const PillUnchecked = (args) => <Checkbox {...args} />;
|
|
31
|
+
|
|
32
|
+
PillUnchecked.args = {
|
|
33
|
+
checked: false,
|
|
34
|
+
appearance: "pill",
|
|
35
|
+
};
|
|
25
36
|
|
|
26
37
|
PillUnchecked.story = {
|
|
27
38
|
name: "Pill/Unchecked",
|
|
28
39
|
};
|
|
29
40
|
|
|
30
|
-
export const DisabledChecked = () =>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
41
|
+
export const DisabledChecked = (args) => <Checkbox {...args} />;
|
|
42
|
+
|
|
43
|
+
DisabledChecked.args = {
|
|
44
|
+
checked: true,
|
|
45
|
+
disabled: true,
|
|
46
|
+
};
|
|
36
47
|
|
|
37
48
|
DisabledChecked.story = {
|
|
38
49
|
name: "Disabled/Checked",
|
|
39
50
|
};
|
|
40
51
|
|
|
41
|
-
export const DisabledUnchecked = () =>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
52
|
+
export const DisabledUnchecked = (args) => <Checkbox {...args} />;
|
|
53
|
+
|
|
54
|
+
DisabledUnchecked.args = {
|
|
55
|
+
checked: false,
|
|
56
|
+
disabled: true,
|
|
57
|
+
};
|
|
47
58
|
|
|
48
59
|
DisabledUnchecked.story = {
|
|
49
60
|
name: "Disabled/Unchecked",
|
|
50
61
|
};
|
|
51
62
|
|
|
52
|
-
export const IndeterminateChecked = () =>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
63
|
+
export const IndeterminateChecked = (args) => <Checkbox {...args} />;
|
|
64
|
+
|
|
65
|
+
IndeterminateChecked.args = {
|
|
66
|
+
checked: true,
|
|
67
|
+
indeterminate: true,
|
|
68
|
+
};
|
|
58
69
|
|
|
59
70
|
IndeterminateChecked.story = {
|
|
60
71
|
name: "Indeterminate/Checked",
|
|
61
72
|
};
|
|
62
73
|
|
|
63
|
-
export const IndeterminateUnchecked = () =>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
74
|
+
export const IndeterminateUnchecked = (args) => <Checkbox {...args} />;
|
|
75
|
+
|
|
76
|
+
IndeterminateUnchecked.args = {
|
|
77
|
+
checked: false,
|
|
78
|
+
indeterminate: true,
|
|
79
|
+
};
|
|
69
80
|
|
|
70
81
|
IndeterminateUnchecked.story = {
|
|
71
82
|
name: "Indeterminate/Unchecked",
|
|
72
83
|
};
|
|
73
84
|
|
|
74
|
-
export const LabelledChecked = () =>
|
|
75
|
-
|
|
76
|
-
|
|
85
|
+
export const LabelledChecked = (args) => <Checkbox {...args} />;
|
|
86
|
+
|
|
87
|
+
LabelledChecked.args = {
|
|
88
|
+
checked: true,
|
|
89
|
+
label: "Labelled checkbox",
|
|
90
|
+
};
|
|
77
91
|
|
|
78
92
|
LabelledChecked.story = {
|
|
79
93
|
name: "Labelled/Checked",
|
|
80
94
|
};
|
|
81
95
|
|
|
82
|
-
export const LabelledUnchecked = () =>
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
export const LabelledUnchecked = (args) => <Checkbox {...args} />;
|
|
97
|
+
|
|
98
|
+
LabelledUnchecked.args = {
|
|
99
|
+
checked: false,
|
|
100
|
+
label: "Labelled checkbox",
|
|
101
|
+
};
|
|
85
102
|
|
|
86
103
|
LabelledUnchecked.story = {
|
|
87
104
|
name: "Labelled/Unchecked",
|
|
88
105
|
};
|
|
89
106
|
|
|
90
|
-
export const LabelledDisabled = () =>
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
107
|
+
export const LabelledDisabled = (args) => <Checkbox {...args} />;
|
|
108
|
+
|
|
109
|
+
LabelledDisabled.args = {
|
|
110
|
+
checked: true,
|
|
111
|
+
disabled: true,
|
|
112
|
+
label: "Labelled checkbox",
|
|
113
|
+
};
|
|
97
114
|
|
|
98
115
|
LabelledDisabled.story = {
|
|
99
116
|
name: "Labelled/Disabled",
|
|
100
117
|
};
|
|
101
118
|
|
|
102
|
-
export const InputPropsOnMouseOver = () =>
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
119
|
+
export const InputPropsOnMouseOver = (args) => <Checkbox {...args} />;
|
|
120
|
+
|
|
121
|
+
InputPropsOnMouseOver.args = {
|
|
122
|
+
checked: true,
|
|
123
|
+
label: "Labelled checkbox",
|
|
124
|
+
inputProps: {
|
|
125
|
+
onMouseOver: action("checkbox-mouseOver"),
|
|
126
|
+
onClick: action("checkbox-click"),
|
|
127
|
+
},
|
|
128
|
+
};
|
|
112
129
|
|
|
113
130
|
InputPropsOnMouseOver.story = {
|
|
114
131
|
name: "InputProps/OnMouseOver",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// @flow
|
|
2
|
-
export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "tiktok" | "times" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
|
|
2
|
+
export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-outline" | "address-card-solid" | "adobe-experience-manager" | "ads" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bigcommerce" | "bitly" | "bold" | "book" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "deconstructed-negative-sentiment" | "deconstructed-neutral-sentiment" | "deconstructed-positive-sentiment" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "flat-negative-sentiment-outline" | "flat-negative-sentiment" | "flat-neutral-sentiment-outline" | "flat-neutral-sentiment" | "flat-positive-sentiment-outline" | "flat-positive-sentiment" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help-alt" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "magic-wand" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plug" | "plus" | "positive-sentiment" | "power-up-outline" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "tiktok" | "times" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
|
-
import { text } from "@storybook/addon-knobs";
|
|
3
|
-
|
|
4
2
|
import Icon from "./";
|
|
5
3
|
import Button from "../Button";
|
|
6
4
|
import Box from "../Box";
|
|
@@ -10,65 +8,72 @@ export default {
|
|
|
10
8
|
title: "Icon",
|
|
11
9
|
};
|
|
12
10
|
|
|
13
|
-
export const mini12X12 = () =>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
11
|
+
export const mini12X12 = (args) => <Icon {...args} />;
|
|
12
|
+
|
|
13
|
+
mini12X12.args = {
|
|
14
|
+
color: "icon.base",
|
|
15
|
+
name: "dashboard",
|
|
16
|
+
size: "mini",
|
|
17
|
+
};
|
|
20
18
|
|
|
21
19
|
mini12X12.story = {
|
|
22
20
|
name: "Mini (12 x 12)",
|
|
23
21
|
};
|
|
24
22
|
|
|
25
|
-
export const default16X16 = () =>
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
export const default16X16 = (args) => <Icon {...args} />;
|
|
24
|
+
|
|
25
|
+
default16X16.args = {
|
|
26
|
+
color: "icon.base",
|
|
27
|
+
name: "dashboard",
|
|
28
|
+
};
|
|
28
29
|
|
|
29
30
|
default16X16.story = {
|
|
30
31
|
name: "Default (16 x 16)",
|
|
31
32
|
};
|
|
32
33
|
|
|
33
|
-
export const medium24X24 = () =>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
export const medium24X24 = (args) => <Icon {...args} />;
|
|
35
|
+
|
|
36
|
+
medium24X24.args = {
|
|
37
|
+
color: "icon.base",
|
|
38
|
+
name: "dashboard",
|
|
39
|
+
size: "medium",
|
|
40
|
+
};
|
|
40
41
|
|
|
41
42
|
medium24X24.story = {
|
|
42
43
|
name: "Medium (24 x 24)",
|
|
43
44
|
};
|
|
44
45
|
|
|
45
|
-
export const large32X32 = () =>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
export const large32X32 = (args) => <Icon {...args} />;
|
|
47
|
+
|
|
48
|
+
large32X32.args = {
|
|
49
|
+
color: "icon.base",
|
|
50
|
+
name: "dashboard",
|
|
51
|
+
size: "large",
|
|
52
|
+
};
|
|
52
53
|
|
|
53
54
|
large32X32.story = {
|
|
54
55
|
name: "Large (32 x 32)",
|
|
55
56
|
};
|
|
56
57
|
|
|
57
|
-
export const jumbo64X64 = () =>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
58
|
+
export const jumbo64X64 = (args) => <Icon {...args} />;
|
|
59
|
+
|
|
60
|
+
jumbo64X64.args = {
|
|
61
|
+
color: "icon.base",
|
|
62
|
+
name: "dashboard",
|
|
63
|
+
size: "jumbo",
|
|
64
|
+
};
|
|
64
65
|
|
|
65
66
|
jumbo64X64.story = {
|
|
66
67
|
name: "Jumbo (64 x 64)",
|
|
67
68
|
};
|
|
68
69
|
|
|
69
|
-
export const defaultFixedWidth = () =>
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
export const defaultFixedWidth = (args) => <Icon {...args} />;
|
|
71
|
+
|
|
72
|
+
defaultFixedWidth.args = {
|
|
73
|
+
color: "icon.success",
|
|
74
|
+
name: "dashboard",
|
|
75
|
+
fixedWidth: true,
|
|
76
|
+
};
|
|
72
77
|
|
|
73
78
|
defaultFixedWidth.story = {
|
|
74
79
|
name: "Fixed Width (16 x 16)",
|
|
@@ -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__/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
|
>
|