IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Rename css class "gf-form-select2" to "gf-form-select-box" #13425

Browse Source
This commit is contained in:
Johannes Schill 2018-10-10 13:30:09 +02:00
parent 9afcef985c
commit ffae3e7a58
12 changed files with 41 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/PermissionList/AddPermission.tsx
View File

@ -121,7 +121,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
optionsWithDesc={dashboardPermissionLevels}
onSelected={this.onPermissionChanged}
disabled={false}
className={'gf-form-select2__control--menu-right'}
className={'gf-form-select-box__control--menu-right'}
/>
</div>

2
public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
View File

@ -27,7 +27,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
optionsWithDesc={dashboardPermissionLevels}
onSelected={() => {}}
disabled={true}
className={'gf-form-select2__control--menu-right'}
className={'gf-form-select-box__control--menu-right'}
/>
</div>
</td>

2
public/app/core/components/PermissionList/PermissionListItem.tsx
View File

@ -78,7 +78,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
optionsWithDesc={dashboardPermissionLevels}
onSelected={this.onPermissionChanged}
disabled={item.inherited}
className={'gf-form-select2__control--menu-right'}
className={'gf-form-select-box__control--menu-right'}
/>
</div>
</td>

2
public/app/core/components/Picker/DescriptionPicker.tsx
View File

@ -29,7 +29,7 @@ class DescriptionPicker extends Component<Props, any> {
<div className="permissions-picker">
<Select
placeholder="Choose"
classNamePrefix={`gf-form-select2`}
classNamePrefix={`gf-form-select-box`}
className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`}
options={optionsWithDesc}
components={{

4
public/app/core/components/Picker/IndicatorsContainer.tsx
View File

@ -5,7 +5,9 @@ export const IndicatorsContainer = props => {
const isOpen = props.selectProps.menuIsOpen;
return (
<components.IndicatorsContainer {...props}>
<span className={`gf-form-select2__select-arrow ${isOpen ? `gf-form-select2__select-arrow--reversed` : ''}`} />
<span
className={`gf-form-select-box__select-arrow ${isOpen ? `gf-form-select-box__select-arrow--reversed` : ''}`}
/>
</components.IndicatorsContainer>
);
};

2
public/app/core/components/Picker/TeamPicker.tsx
View File

@ -62,7 +62,7 @@ export class TeamPicker extends Component<Props, State> {
return (
<div className="user-picker">
<AsyncSelect
classNamePrefix={`gf-form-select2`}
classNamePrefix={`gf-form-select-box`}
isMulti={false}
isLoading={isLoading}
defaultOptions={true}

2
public/app/core/components/Picker/UserPicker.tsx
View File

@ -57,7 +57,7 @@ export class UserPicker extends Component<Props, State> {
return (
<div className="user-picker">
<AsyncSelect
classNamePrefix={`gf-form-select2`}
classNamePrefix={`gf-form-select-box`}
isMulti={false}
isLoading={isLoading}
defaultOptions={true}

12
public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
View File

@ -9,15 +9,15 @@ exports[`TeamPicker renders correctly 1`] = `
onKeyDown={[Function]}
>
<div
className="css-0 gf-form-select2__control"
className="css-0 gf-form-select-box__control"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
<div
className="css-0 gf-form-select2__value-container"
className="css-0 gf-form-select-box__value-container"
>
<div
className="css-0 gf-form-select2__placeholder"
className="css-0 gf-form-select-box__placeholder"
>
Select a team
</div>
@ -25,7 +25,7 @@ exports[`TeamPicker renders correctly 1`] = `
className="css-0"
>
<div
className="gf-form-select2__input"
className="gf-form-select-box__input"
style={
Object {
"display": "inline-block",
@ -108,10 +108,10 @@ exports[`TeamPicker renders correctly 1`] = `
</div>
</div>
<div
className="css-0 gf-form-select2__indicators"
className="css-0 gf-form-select-box__indicators"
>
<span
className="gf-form-select2__select-arrow "
className="gf-form-select-box__select-arrow "
/>
</div>
</div>

12
public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
View File

@ -9,15 +9,15 @@ exports[`UserPicker renders correctly 1`] = `
onKeyDown={[Function]}
>
<div
className="css-0 gf-form-select2__control"
className="css-0 gf-form-select-box__control"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
<div
className="css-0 gf-form-select2__value-container"
className="css-0 gf-form-select-box__value-container"
>
<div
className="css-0 gf-form-select2__placeholder"
className="css-0 gf-form-select-box__placeholder"
>
Select user
</div>
@ -25,7 +25,7 @@ exports[`UserPicker renders correctly 1`] = `
className="css-0"
>
<div
className="gf-form-select2__input"
className="gf-form-select-box__input"
style={
Object {
"display": "inline-block",
@ -108,10 +108,10 @@ exports[`UserPicker renders correctly 1`] = `
</div>
</div>
<div
className="css-0 gf-form-select2__indicators"
className="css-0 gf-form-select-box__indicators"
>
<span
className="gf-form-select2__select-arrow "
className="gf-form-select-box__select-arrow "
/>
</div>
</div>

2
public/app/core/components/TagFilter/TagFilter.tsx
View File

@ -39,7 +39,7 @@ export class TagFilter extends React.Component<Props, any> {
render() {
const selectOptions = {
classNamePrefix: 'gf-form-select2',
classNamePrefix: 'gf-form-select-box',
isMulti: true,
defaultOptions: true,
loadOptions: this.searchTags,

2
public/app/features/explore/Explore.tsx
View File

@ -544,7 +544,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
{!datasourceMissing ? (
<div className="navbar-buttons">
<Select
classNamePrefix={`gf-form-select2`}
classNamePrefix={`gf-form-select-box`}
isMulti={false}
isLoading={datasourceLoading}
isClearable={false}

36
public/sass/components/_form_select_box.scss
View File

@ -15,7 +15,7 @@ $select-input-bg-disabled: $input-bg-disabled;
@include box-shadow($shadow);
}
.gf-form-select2__control {
.gf-form-select-box__control {
@include select-control();
border: 1px solid $input-border-color;
color: $input-color;
@ -29,45 +29,45 @@ $select-input-bg-disabled: $input-bg-disabled;
position: relative;
}
.gf-form-select2__control--is-focused {
.gf-form-select-box__control--is-focused {
background-color: $input-bg;
@include select-control-focus();
}
.gf-form-select2__control--is-disabled {
.gf-form-select-box__control--is-disabled {
background-color: $select-input-bg-disabled;
}
.gf-form-select2__control--menu-right {
.gf-form-select2__menu {
.gf-form-select-box__control--menu-right {
.gf-form-select-box__menu {
right: 0;
left: unset;
}
}
.gf-form-select2__input {
.gf-form-select-box__input {
padding-left: 5px;
}
.gf-form-select2__menu {
.gf-form-select-box__menu {
background: $select-input-bg-disabled;
position: absolute;
z-index: 2;
}
.tag-filter .gf-form-select2__menu {
.tag-filter .gf-form-select-box__menu {
width: 100%;
}
.gf-form-select2__multi-value {
.gf-form-select-box__multi-value {
display: inline;
}
.gf-form-select2__option {
.gf-form-select-box__option {
border-left: 2px solid transparent;
&.gf-form-select2__option--is-focused,
&.gf-form-select2__option--is-selected {
&.gf-form-select-box__option--is-focused,
&.gf-form-select-box__option--is-selected {
background-color: $dropdownLinkBackgroundHover;
color: $dropdownLinkColorHover;
@include left-brand-border-gradient();
@ -77,11 +77,11 @@ $select-input-bg-disabled: $input-bg-disabled;
}
}
.gf-form-select2__control--is-focused .gf-form-select2__placeholder {
.gf-form-select-box__control--is-focused .gf-form-select-box__placeholder {
display: none;
}
.gf-form-select2__value-container {
.gf-form-select-box__value-container {
display: table-cell;
padding: 8px 10px;
> div {
@ -89,14 +89,14 @@ $select-input-bg-disabled: $input-bg-disabled;
}
}
.gf-form-select2__indicators {
.gf-form-select-box__indicators {
display: table-cell;
vertical-align: middle;
padding-right: 5px;
width: 25px;
}
.gf-form-select2__select-arrow {
.gf-form-select-box__select-arrow {
border-color: $input-color-select-arrow transparent transparent;
border-style: solid;
border-width: 5px 5px 2.5px;
@ -105,7 +105,7 @@ $select-input-bg-disabled: $input-bg-disabled;
width: 0;
position: relative;
&.gf-form-select2__select-arrow--reversed {
&.gf-form-select-box__select-arrow--reversed {
border-color: transparent transparent $input-color-select-arrow;
top: -2px;
border-width: 0 5px 5px;
@ -118,7 +118,7 @@ $select-input-bg-disabled: $input-bg-disabled;
}
.gf-form--has-input-icon {
.gf-form-select2__value-container {
.gf-form-select-box__value-container {
padding-left: 30px;
}
}