Reduce specificity of checked Pill selector, and... (#122)

* Fixes #100 * Fix issue with Avatar test by making size optional, also makes button inline-flex by default to improve initial behavior of Addons.
cision · Oct 21, 2019 · 1f7752d · 1f7752d
1 parent d4f9eac
commit 1f7752d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/components/Button/Addon/index.js b/src/components/Button/Addon/index.js
@@ -13,11 +13,12 @@ const Addon = ({ className, size, ...passedProps }) => (
 
 Addon.propTypes = {
   className: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']).isRequired,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 };
 
 Addon.defaultProps = {
   className: '',
+  size: 'md',
 };
 
 Addon.displayName = 'ButtonAddon';

diff --git a/src/components/Button/style.css b/src/components/Button/style.css
@@ -5,6 +5,8 @@
   font-size: var(--rvr-font-size-md);
   line-height: var(--rvr-line-height-sm);
   transition: 0.2s linear background-color, 0.2s linear border-color, 0.2s linear color;
+  display: inline-flex;
+  flex-flow: row nowrap;
   align-content: center;
 }
 

diff --git a/src/components/Pill/style.css b/src/components/Pill/style.css
@@ -25,14 +25,14 @@
   color: var(--rvr-white);
 }
 
-.Pill.checked {
+.checked {
   background-color: #ebfffe;
   border-color: var(--rvr-light-teal);
   color: var(--rvr-gray-80);
   box-shadow: none;
 }
 
-.Pill.checked:hover {
+.checked:hover {
   background-color: #d5f5f3;
   border-color: var(--rvr-light-teal-hover);
   color: var(--rvr-gray-90);
@@ -62,14 +62,14 @@
   margin-inline-start: 0;
 }
 
-.Pill:hover .actionInline {
-  color: var(--rvr-white);
+.checked .actionInline {
+  color: var(--rvr-light-teal);
 }
 
-.Pill.checked .actionInline {
-  color: var(--rvr-light-teal);
+.Pill:hover .actionInline {
+  color: var(--rvr-white);
 }
 
-.Pill.checked:hover .actionInline {
+.checked:hover .actionInline {
   color: var(--rvr-light-teal-hover);
 }