empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Renaming button classes to be modifiers instead of elements (#449)

Browse Source
This commit is contained in:
Kyle Knight 2016-11-08 08:20:35 -06:00 committed by GitHub
parent 01e7ac2b6c
commit cd68b27715
11 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/FlashMessage/FlashMessage.jsx
View File

@ -30,13 +30,13 @@ const FlashMessage = ({ notification, dispatch }) => {
</div>
<div className={`${baseClass}__action`}>
<button
className={`${baseClass}__undo button button__unstyled`}
className={`${baseClass}__undo button button--unstyled`}
onClick={submitUndoAction}
>
{undoAction && 'undo'}
</button>
<button
className={`${baseClass}__remove ${baseClass}__remove--${alertType} button button__unstyled`}
className={`${baseClass}__remove ${baseClass}__remove--${alertType} button button--unstyled`}
onClick={removeFlashMessage}
>
&times;

4
frontend/components/buttons/Button/Button.tsx
View File

@ -36,9 +36,9 @@ class Button extends React.Component<IButtonProps, IButtonState> {
render () {
const { handleClick } = this;
const { className, disabled, text, type, variant } = this.props;
const fullClassName = classnames(`${baseClass}__${variant}`, className, {
const fullClassName = classnames(`${baseClass}--${variant}`, className, {
[baseClass]: variant !== 'unstyled',
[`${baseClass}__${variant}--disabled`]: disabled,
[`${baseClass}--disabled`]: disabled,
});
return (

16
frontend/components/buttons/Button/_styles.scss
View File

@ -1,7 +1,9 @@
$gradient-start: #7166d9;
$gradient-end: #c86dd7;
.button {
$base-class: 'button';
.#{$base-class} {
border-radius: 2px;
box-shadow: 0 3px 0 $button-shadow;
box-sizing: border-box;
@ -21,32 +23,32 @@ $gradient-end: #c86dd7;
outline: none;
}
&__default {
&--default {
background-color: $brand;
border: 1px solid $brand;
box-shadow: 0 3px 0 $brand-light;
color: $white;
&--disabled {
&.#{$base-class}--disabled {
background-color: $brand-light;
border-color: $brand-light;
cursor: not-allowed;
}
}
&__inverse {
&--inverse {
background-color: $white;
border: 1px solid $brand-light;
box-shadow: 0 3px 0 $brand-dark;
color: $brand-dark;
&--disabled {
&.#{$base-class}--disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
&__gradient {
&--gradient {
background-color: transparent;
background-image: linear-gradient(134deg, $gradient-start 0%, $gradient-end 100%);
border: 0;
@ -58,7 +60,7 @@ $gradient-end: #c86dd7;
width: 100%;
}
&__unstyled {
&--unstyled {
background-color: transparent;
border: 0;
box-shadow: none;

2
frontend/components/buttons/EllipsisMenu/EllipsisMenu.jsx
View File

@ -87,7 +87,7 @@ export class EllipsisMenu extends Component {
>
<button
onClick={onToggleChildren}
className={`${baseClass}__btn button button__unstyled`}
className={`${baseClass}__btn button button--unstyled`}
>
&bull; &bull; &bull;
</button>

2
frontend/components/buttons/Slider/Slider.jsx
View File

@ -15,7 +15,7 @@ const Slider = ({ onClick, engaged }) => {
);
return (
<button className={`button button__unstyled ${sliderBtnClass}`} onClick={onClick}>
<button className={`button button--unstyled ${sliderBtnClass}`} onClick={onClick}>
<div className={sliderDotClass} />
</button>
);

4
frontend/components/hosts/HostDetails/HostDetails.jsx
View File

@ -28,12 +28,12 @@ const HostDetails = ({ host, onQueryClick = noop, onDisableClick = noop }) => {
<div className={`${baseClass} ${baseClass}--${status}`}>
<EllipsisMenu positionStyles={{ top: '-3px', right: '10px' }}>
<div className={`${baseClass}__ellipsis-children`}>
<button className={`${baseClass}__ellipsis-child-item button button__unstyled`} onClick={onQueryClick(host)}>
<button className={`${baseClass}__ellipsis-child-item button button--unstyled`} onClick={onQueryClick(host)}>
<i className={`${baseClass}__query-icon kolidecon-query`} />
<div>Query</div>
</button>
<div className={`${baseClass}__vertical-separator`} />
<button className={`${baseClass}__ellipsis-child-item button button__unstyled`} onClick={onDisableClick(host)}>
<button className={`${baseClass}__ellipsis-child-item button button--unstyled`} onClick={onDisableClick(host)}>
<i className={`${baseClass}__disabled-icon kolidecon-ex`} />
<div>Disable</div>
</button>

2
frontend/components/modals/Modal/Modal.jsx
View File

@ -20,7 +20,7 @@ class Modal extends Component {
<div className={modalContainerClassName}>
<div className={`${baseClass}__header`}>
<span>{title}</span>
<button className={`btn--unstyled ${baseClass}__ex`} onClick={onExit}>x</button>
<button className={`button--unstyled ${baseClass}__ex`} onClick={onExit}>x</button>
</div>
<div className={`${baseClass}__content`}>
{children}

2
frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx
View File

@ -93,7 +93,7 @@ class QuerySidePanel extends Component {
return (
<div className={`${baseClass}__column-wrapper`}>
<span className={`${baseClass}__more-columns`}>{numAdditionalColumns(selectedOsqueryTable)} MORE COLUMNS</span>
<button className={`btn--unstyled ${baseClass}__show-columns`} onClick={onShowAllColumns}>SHOW</button>
<button className={`button--unstyled ${baseClass}__show-columns`} onClick={onShowAllColumns}>SHOW</button>
</div>
);
}

6
frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx
View File

@ -143,7 +143,7 @@ class SiteNavSidePanel extends Component {
return (
<div className={navItemBaseClass} key={`nav-item-${name}`}>
<button
className="button button__unstyled"
className="button button--unstyled"
onClick={setActiveTab(navItem)}
style={{ width: '100%' }}
>
@ -199,7 +199,7 @@ class SiteNavSidePanel extends Component {
<button
key={`sub-item-${name}`}
onClick={setActiveSubItem(subItem)}
className={`${baseSubItemClass} button button__unstyled`}
className={`${baseSubItemClass} button button--unstyled`}
>
{active && <div className={`${baseSubItemClass}__before`} />}
<li
@ -244,7 +244,7 @@ class SiteNavSidePanel extends Component {
return (
<button
className="button button__unstyled collapse-sub-item"
className="button button--unstyled collapse-sub-item"
onClick={toggleShowSubItems(!showSubItems)}
>
<i className={iconName} />

2
frontend/pages/hosts/NewHostPage/NewHostPage.jsx
View File

@ -115,7 +115,7 @@ export class NewHostPage extends Component {
{ [`${baseClass}__tab-header--selected`]: selected }
);
return <button className={`button button__unstyled ${hostTabHeaderClass}`} onClick={onSetActiveTab(tab)} key={tab}>{tab}</button>;
return <button className={`button button--unstyled ${hostTabHeaderClass}`} onClick={onSetActiveTab(tab)} key={tab}>{tab}</button>;
});
}

11
frontend/styles/_styles.scss
View File

@ -63,14 +63,3 @@
}
}
}
.btn--unstyled {
background-color: transparent;
border: 0;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
}