feat(buttons): Switch usages of button classes in the docs to use the…

… Button component
telus · Oct 12, 2017 · 73c8944 · 73c8944
1 parent b191abd
commit 73c8944
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/old-components/ExpandCollapse/Panel.md b/src/old-components/ExpandCollapse/Panel.md
@@ -65,10 +65,14 @@ const togglePanel = (panelKey) => {
 };
 
 <div>
-  <button className="button button--secondary button--link"
-    onClick={() => togglePanel('panel-1')}>Toggle panel #1</button>
-  <button className="button button--secondary button--link"
-    onClick={() => togglePanel('panel-2')}>Toggle panel #2</button>
+  <div style={{marginBottom: 10}}>
+    <Button variant="secondary" onClick={() => togglePanel('panel-1')}>
+      Toggle panel #1
+    </Button>
+    <Button variant="secondary" onClick={() => togglePanel('panel-2')}>
+      Toggle panel #2
+    </Button>
+  </div>
 
   <Group activeKeys={state.activeKeys}>
     <Panel header="Panel #1" panelKey="panel-1">

diff --git a/src/old-components/SelectorCounter/CounterButton.jsx b/src/old-components/SelectorCounter/CounterButton.jsx
@@ -10,14 +10,14 @@ const propTypes = {
   label: PropTypes.string,
   icon: PropTypes.string,
   onClick: PropTypes.func,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
 }
 
 const defaultProps = {
   label: 'Change value',
   icon: 'caret-up',
   onClick: () => {},
-  disabled: false
+  disabled: false,
 }
 
 const noop = () => {}
@@ -28,7 +28,7 @@ export default function counterButton(props) {
   return (
     <button
       aria-label={label}
-      className="button--plain selector-counter__button"
+      className="selector-counter__plain-button selector-counter__button"
       onClick={disabled ? noop : onClick}
       disabled={disabled}
       {...extraProps}

diff --git a/src/old-components/SelectorCounter/SelectorCounter.scss b/src/old-components/SelectorCounter/SelectorCounter.scss
@@ -14,6 +14,16 @@
     width: rem(158px);
   }
 
+  &__plain-button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background-image: none;
+    background-color: transparent;
+    box-shadow: none;
+    text-align: center;
+  }
+
   &__button {
     position: absolute;
     right: 15px;