@sproutsocial/racine 11.3.1-beta-deps.3 → 11.4.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 11.4.0
+
+### Minor Changes
+
+- d888fa0: Add search icon to type "search" Input
+  - "<Icon name="search" />" is added to Inputs with type "search" unless an elemBefore prop is passed to override it.
+- d888fa0: Add Input.ClearButton
+  - This button is automatically included when Input has type "search" and no "elemAfter" prop is passed
+  - This button can be manually included with the "elemAfter" prop for non-search inputs
+  - In either case, the button will only be rendered if an "onClear" callback is passed to the Input component
+  - A "clearButtonLabel" prop should also be passed to the Input component
+
+## 11.3.0
+
+### Minor Changes
+
+- e8a9df6: Add text highlight style to theme
+
+### Patch Changes
+
+- 9e66592: Pass TokenInput autocomplete prop to input as autoComplete to suppress JSX console warnings
+
+## 11.2.5
+
+### Patch Changes
+
+- a73cdfb: remove weird characters from props descriptions
+
+## 11.2.4
+
+### Patch Changes
+
+- 206bd32: copy updates to the TypeProps comments that power Seeds prop tables
+
 ## 11.2.3
 
 ### Patch Changes

package/__flow__/Button/__snapshots__/index.test.js.snap

@@ -0,0 +1,511 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Racine Button should render in active state 1`] = `
+.c0 {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  border: 1px solid #364141;
+  border-radius: 6px;
+  border-style: solid;
+  background: transparent;
+  color: #364141;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: 16px;
+  white-space: nowrap;
+  font-weight: 700;
+  -webkit-transition: all .15s linear;
+  transition: all .15s linear;
+  margin: 0;
+  padding: 8px;
+  font-size: 13px;
+  color: #FFFFFF !important;
+  background: #273333 !important;
+}
+
+.c0:visited {
+  color: #364141;
+}
+
+.c0:hover {
+  color: #FFFFFF;
+  background: #364141;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  box-shadow: none;
+}
+
+.c0:active {
+  color: #FFFFFF;
+  background: #273333;
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
+  outline: none;
+}
+
+.c0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c0:focus:active {
+  box-shadow: none;
+}
+
+.c0 .styles__Container-x0vwa5-0 {
+  vertical-align: text-bottom;
+}
+
+<div>
+  <button
+    class="c0"
+    data-qa-button=""
+    data-qa-button-isdisabled="false"
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Racine Button should render in an anchor tag with external target 1`] = `
+.c0 {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  border-style: solid;
+  background: transparent;
+  color: #515e5f;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: 16px;
+  white-space: nowrap;
+  font-weight: 700;
+  -webkit-transition: all .15s linear;
+  transition: all .15s linear;
+  margin: 0;
+  padding: 8px;
+  font-size: 13px;
+}
+
+.c0:visited {
+  color: #515e5f;
+}
+
+.c0:hover {
+  color: #273333;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  box-shadow: none;
+}
+
+.c0:active {
+  color: #273333;
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
+  outline: none;
+}
+
+.c0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c0:focus:active {
+  box-shadow: none;
+}
+
+.c0 .styles__Container-x0vwa5-0 {
+  vertical-align: text-bottom;
+}
+
+<div>
+  <a
+    class="c0"
+    data-qa-button=""
+    data-qa-button-isdisabled="false"
+    href="http://sproutsocial.style"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    Button
+  </a>
+</div>
+`;
+
+exports[`Racine Button should render in default style 1`] = `
+.c0 {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  border-style: solid;
+  background: transparent;
+  color: #515e5f;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: 16px;
+  white-space: nowrap;
+  font-weight: 700;
+  -webkit-transition: all .15s linear;
+  transition: all .15s linear;
+  margin: 0;
+  padding: 8px;
+  font-size: 13px;
+}
+
+.c0:visited {
+  color: #515e5f;
+}
+
+.c0:hover {
+  color: #273333;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  box-shadow: none;
+}
+
+.c0:active {
+  color: #273333;
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
+  outline: none;
+}
+
+.c0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c0:focus:active {
+  box-shadow: none;
+}
+
+.c0 .styles__Container-x0vwa5-0 {
+  vertical-align: text-bottom;
+}
+
+<div>
+  <button
+    class="c0"
+    data-qa-button=""
+    data-qa-button-isdisabled="false"
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Racine Button should render in large size 1`] = `
+.c0 {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  border: 1px solid #364141;
+  border-radius: 6px;
+  border-style: solid;
+  background: transparent;
+  color: #364141;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: 16px;
+  white-space: nowrap;
+  font-weight: 700;
+  -webkit-transition: all .15s linear;
+  transition: all .15s linear;
+  margin: 0;
+  padding: 12px;
+  font-size: 16px;
+}
+
+.c0:visited {
+  color: #364141;
+}
+
+.c0:hover {
+  color: #FFFFFF;
+  background: #364141;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  box-shadow: none;
+}
+
+.c0:active {
+  color: #FFFFFF;
+  background: #273333;
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
+  outline: none;
+}
+
+.c0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c0:focus:active {
+  box-shadow: none;
+}
+
+.c0 .styles__Container-x0vwa5-0 {
+  vertical-align: text-bottom;
+}
+
+<div>
+  <button
+    class="c0"
+    data-qa-button=""
+    data-qa-button-isdisabled="false"
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Racine Button should render in pill style 1`] = `
+.c0 {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  border-style: solid;
+  background: transparent;
+  color: #515e5f;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: 16px;
+  white-space: nowrap;
+  font-weight: 700;
+  -webkit-transition: all .15s linear;
+  transition: all .15s linear;
+  margin: 0;
+  padding: 8px;
+  font-size: 13px;
+}
+
+.c0:visited {
+  color: #515e5f;
+}
+
+.c0:hover {
+  color: #273333;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  box-shadow: none;
+}
+
+.c0:active {
+  color: #273333;
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
+  outline: none;
+}
+
+.c0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c0:focus:active {
+  box-shadow: none;
+}
+
+.c0 .styles__Container-x0vwa5-0 {
+  vertical-align: text-bottom;
+}
+
+<div>
+  <button
+    class="c0"
+    data-qa-button=""
+    data-qa-button-isdisabled="false"
+    shape="pill"
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Racine Button should render in primary style 1`] = `
+.c0 {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  border-style: solid;
+  background: #2079c3;
+  color: #FFFFFF;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: 16px;
+  white-space: nowrap;
+  font-weight: 700;
+  -webkit-transition: all .15s linear;
+  transition: all .15s linear;
+  margin: 0;
+  padding: 8px;
+  font-size: 13px;
+}
+
+.c0:visited {
+  color: #FFFFFF;
+}
+
+.c0:hover {
+  color: #FFFFFF;
+  background: #116daa;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  box-shadow: none;
+}
+
+.c0:active {
+  color: #FFFFFF;
+  background: #0c5689;
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
+  outline: none;
+}
+
+.c0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c0:focus:active {
+  box-shadow: none;
+}
+
+.c0 .styles__Container-x0vwa5-0 {
+  vertical-align: text-bottom;
+}
+
+<div>
+  <button
+    class="c0"
+    data-qa-button=""
+    data-qa-button-isdisabled="false"
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`Racine Button should render in secondary style 1`] = `
+.c0 {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+  border: 1px solid #364141;
+  border-radius: 6px;
+  border-style: solid;
+  background: transparent;
+  color: #364141;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  line-height: 16px;
+  white-space: nowrap;
+  font-weight: 700;
+  -webkit-transition: all .15s linear;
+  transition: all .15s linear;
+  margin: 0;
+  padding: 8px;
+  font-size: 13px;
+}
+
+.c0:visited {
+  color: #364141;
+}
+
+.c0:hover {
+  color: #FFFFFF;
+  background: #364141;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  box-shadow: none;
+}
+
+.c0:active {
+  color: #FFFFFF;
+  background: #273333;
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 1px #2079c3,0 0px 0px 4px rgba(32,121,195,0.3);
+  outline: none;
+}
+
+.c0:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c0:focus:active {
+  box-shadow: none;
+}
+
+.c0 .styles__Container-x0vwa5-0 {
+  vertical-align: text-bottom;
+}
+
+<div>
+  <button
+    class="c0"
+    data-qa-button=""
+    data-qa-button-isdisabled="false"
+    type="button"
+  >
+    Button
+  </button>
+</div>
+`;

package/__flow__/Button/index.js

@@ -84,6 +84,4 @@ const Button = ({
   );
 };
 
-Button.displayName = "Button";
-
 export default Button;