Commit 8b56a117 by Ari Rizzitano

local imports for button and dropdown

parent 6676a7cc
@import "~bootstrap/scss/_buttons";
.btn-borderless {
border: 0;
}
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import buttons from 'bootstrap/scss/_buttons.scss'; import styles from './Button.scss';
function Button(props) { function Button(props) {
const { const {
...@@ -20,19 +20,19 @@ function Button(props) { ...@@ -20,19 +20,19 @@ function Button(props) {
return ( return (
<button <button
className={classNames([ className={classNames([
buttons.btn, styles.btn,
...props.className, ...className.map(cn => styles[cn]),
], { ], {
[buttons[`btn-${props.buttonType}`]]: props.buttonType !== undefined, [styles[`btn-${buttonType}`]]: buttonType !== undefined,
})} })}
onBlur={props.onBlur} onBlur={onBlur}
onClick={props.onClick} onClick={onClick}
onKeyDown={props.onKeyDown} onKeyDown={onKeyDown}
type={props.type} type={type}
ref={props.inputRef} ref={inputRef}
{...other} {...other}
> >
{props.display} {display}
</button> </button>
); );
} }
......
@import "~bootstrap/scss/_dropdown";
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import dd from 'bootstrap/scss/_dropdown.scss';
import borders from 'bootstrap/scss/utilities/_borders.scss';
import styles from './Dropdown.scss';
import pc from '../utils/base-styles.scss'; import pc from '../utils/base-styles.scss';
import Button from '../Button'; import Button from '../Button';
...@@ -100,7 +99,7 @@ class Dropdown extends React.Component { ...@@ -100,7 +99,7 @@ class Dropdown extends React.Component {
generateMenuItems(menuItems) { generateMenuItems(menuItems) {
return menuItems.map((menuItem, i) => ( return menuItems.map((menuItem, i) => (
<li className={dd['dropdown-item']} key={i}> <li className={styles['dropdown-item']} key={i}>
<a <a
role="menuitem" role="menuitem"
href={menuItem.href} href={menuItem.href}
...@@ -122,8 +121,8 @@ class Dropdown extends React.Component { ...@@ -122,8 +121,8 @@ class Dropdown extends React.Component {
<div <div
className={classNames([ className={classNames([
pc['paragon-component'], pc['paragon-component'],
dd.dropdown, styles.dropdown,
{ [dd.show]: this.state.open }, { [styles.show]: this.state.open },
])} ])}
ref={(container) => { this.container = container; }} ref={(container) => { this.container = container; }}
> >
...@@ -135,8 +134,8 @@ class Dropdown extends React.Component { ...@@ -135,8 +134,8 @@ class Dropdown extends React.Component {
onClick={this.toggle} onClick={this.toggle}
onKeyDown={this.handleToggleKeyDown} onKeyDown={this.handleToggleKeyDown}
className={[ className={[
borders['border-0'], 'btn-borderless',
dd['dropdown-toggle'], styles['dropdown-toggle'],
]} ]}
type="button" type="button"
inputRef={(toggleElem) => { this.toggleElem = toggleElem; }} inputRef={(toggleElem) => { this.toggleElem = toggleElem; }}
...@@ -144,7 +143,7 @@ class Dropdown extends React.Component { ...@@ -144,7 +143,7 @@ class Dropdown extends React.Component {
<ul <ul
aria-label={this.props.title} aria-label={this.props.title}
aria-hidden={!this.state.open} aria-hidden={!this.state.open}
className={dd['dropdown-menu']} className={styles['dropdown-menu']}
role="menu" role="menu"
> >
{menuItems} {menuItems}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment