public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions 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 14:15:28 +02:00
parent 9afcef985c
commit ffae3e7a58
12 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/components/PermissionList/AddPermission.tsx
+1 -1
View File
@@ -121,7 +121,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
optionsWithDesc={dashboardPermissionLevels} optionsWithDesc={dashboardPermissionLevels}
onSelected={this.onPermissionChanged} onSelected={this.onPermissionChanged}
disabled={false} disabled={false}
className={'gf-form-select2__control--menu-right'} className={'gf-form-select-box__control--menu-right'}
/> />
</div> </div>
public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
optionsWithDesc={dashboardPermissionLevels} optionsWithDesc={dashboardPermissionLevels}
onSelected={() => {}} onSelected={() => {}}
disabled={true} disabled={true}
className={'gf-form-select2__control--menu-right'} className={'gf-form-select-box__control--menu-right'}
/> />
</div> </div>
</td> </td>
public/app/core/components/PermissionList/PermissionListItem.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
optionsWithDesc={dashboardPermissionLevels} optionsWithDesc={dashboardPermissionLevels}
onSelected={this.onPermissionChanged} onSelected={this.onPermissionChanged}
disabled={item.inherited} disabled={item.inherited}
className={'gf-form-select2__control--menu-right'} className={'gf-form-select-box__control--menu-right'}
/> />
</div> </div>
</td> </td>
public/app/core/components/Picker/DescriptionPicker.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ class DescriptionPicker extends Component<Props, any> {
<div className="permissions-picker"> <div className="permissions-picker">
<Select <Select
placeholder="Choose" placeholder="Choose"
classNamePrefix={`gf-form-select2`} classNamePrefix={`gf-form-select-box`}
className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`} className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`}
options={optionsWithDesc} options={optionsWithDesc}
components={{ components={{
public/app/core/components/Picker/IndicatorsContainer.tsx
+3 -1
View File
@@ -5,7 +5,9 @@ export const IndicatorsContainer = props => {
const isOpen = props.selectProps.menuIsOpen; const isOpen = props.selectProps.menuIsOpen;
return ( return (
<components.IndicatorsContainer {...props}> <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> </components.IndicatorsContainer>
); );
}; };
public/app/core/components/Picker/TeamPicker.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export class TeamPicker extends Component<Props, State> {
return ( return (
<div className="user-picker"> <div className="user-picker">
<AsyncSelect <AsyncSelect
classNamePrefix={`gf-form-select2`} classNamePrefix={`gf-form-select-box`}
isMulti={false} isMulti={false}
isLoading={isLoading} isLoading={isLoading}
defaultOptions={true} defaultOptions={true}
public/app/core/components/Picker/UserPicker.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export class UserPicker extends Component<Props, State> {
return ( return (
<div className="user-picker"> <div className="user-picker">
<AsyncSelect <AsyncSelect
classNamePrefix={`gf-form-select2`} classNamePrefix={`gf-form-select-box`}
isMulti={false} isMulti={false}
isLoading={isLoading} isLoading={isLoading}
defaultOptions={true} defaultOptions={true}
public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
+6 -6
View File
@@ -9,15 +9,15 @@ exports[`TeamPicker renders correctly 1`] = `
onKeyDown={[Function]} onKeyDown={[Function]}
> >
<div <div
className="css-0 gf-form-select2__control" className="css-0 gf-form-select-box__control"
onMouseDown={[Function]} onMouseDown={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
> >
<div <div
className="css-0 gf-form-select2__value-container" className="css-0 gf-form-select-box__value-container"
> >
<div <div
className="css-0 gf-form-select2__placeholder" className="css-0 gf-form-select-box__placeholder"
> >
Select a team Select a team
</div> </div>
@@ -25,7 +25,7 @@ exports[`TeamPicker renders correctly 1`] = `
className="css-0" className="css-0"
> >
<div <div
className="gf-form-select2__input" className="gf-form-select-box__input"
style={ style={
Object { Object {
"display": "inline-block", "display": "inline-block",
@@ -108,10 +108,10 @@ exports[`TeamPicker renders correctly 1`] = `
</div> </div>
</div> </div>
<div <div
className="css-0 gf-form-select2__indicators" className="css-0 gf-form-select-box__indicators"
> >
<span <span
className="gf-form-select2__select-arrow " className="gf-form-select-box__select-arrow "
/> />
</div> </div>
</div> </div>
public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
+6 -6
View File
@@ -9,15 +9,15 @@ exports[`UserPicker renders correctly 1`] = `
onKeyDown={[Function]} onKeyDown={[Function]}
> >
<div <div
className="css-0 gf-form-select2__control" className="css-0 gf-form-select-box__control"
onMouseDown={[Function]} onMouseDown={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
> >
<div <div
className="css-0 gf-form-select2__value-container" className="css-0 gf-form-select-box__value-container"
> >
<div <div
className="css-0 gf-form-select2__placeholder" className="css-0 gf-form-select-box__placeholder"
> >
Select user Select user
</div> </div>
@@ -25,7 +25,7 @@ exports[`UserPicker renders correctly 1`] = `
className="css-0" className="css-0"
> >
<div <div
className="gf-form-select2__input" className="gf-form-select-box__input"
style={ style={
Object { Object {
"display": "inline-block", "display": "inline-block",
@@ -108,10 +108,10 @@ exports[`UserPicker renders correctly 1`] = `
</div> </div>
</div> </div>
<div <div
className="css-0 gf-form-select2__indicators" className="css-0 gf-form-select-box__indicators"
> >
<span <span
className="gf-form-select2__select-arrow " className="gf-form-select-box__select-arrow "
/> />
</div> </div>
</div> </div>
public/app/core/components/TagFilter/TagFilter.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export class TagFilter extends React.Component<Props, any> {
render() { render() {
const selectOptions = { const selectOptions = {
classNamePrefix: 'gf-form-select2', classNamePrefix: 'gf-form-select-box',
isMulti: true, isMulti: true,
defaultOptions: true, defaultOptions: true,
loadOptions: this.searchTags, loadOptions: this.searchTags,
public/app/features/explore/Explore.tsx
+1 -1
View File
@@ -544,7 +544,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
{!datasourceMissing ? ( {!datasourceMissing ? (
<div className="navbar-buttons"> <div className="navbar-buttons">
<Select <Select
classNamePrefix={`gf-form-select2`} classNamePrefix={`gf-form-select-box`}
isMulti={false} isMulti={false}
isLoading={datasourceLoading} isLoading={datasourceLoading}
isClearable={false} isClearable={false}
public/sass/components/_form_select_box.scss
+18 -18
View File
@@ -15,7 +15,7 @@ $select-input-bg-disabled: $input-bg-disabled;
@include box-shadow($shadow); @include box-shadow($shadow);
} }
.gf-form-select2__control { .gf-form-select-box__control {
@include select-control(); @include select-control();
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
color: $input-color; color: $input-color;
@@ -29,45 +29,45 @@ $select-input-bg-disabled: $input-bg-disabled;
position: relative; position: relative;
} }
.gf-form-select2__control--is-focused { .gf-form-select-box__control--is-focused {
background-color: $input-bg; background-color: $input-bg;
@include select-control-focus(); @include select-control-focus();
} }
.gf-form-select2__control--is-disabled { .gf-form-select-box__control--is-disabled {
background-color: $select-input-bg-disabled; background-color: $select-input-bg-disabled;
} }
.gf-form-select2__control--menu-right { .gf-form-select-box__control--menu-right {
.gf-form-select2__menu { .gf-form-select-box__menu {
right: 0; right: 0;
left: unset; left: unset;
} }
} }
.gf-form-select2__input { .gf-form-select-box__input {
padding-left: 5px; padding-left: 5px;
} }
.gf-form-select2__menu { .gf-form-select-box__menu {
background: $select-input-bg-disabled; background: $select-input-bg-disabled;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
.tag-filter .gf-form-select2__menu { .tag-filter .gf-form-select-box__menu {
width: 100%; width: 100%;
} }
.gf-form-select2__multi-value { .gf-form-select-box__multi-value {
display: inline; display: inline;
} }
.gf-form-select2__option { .gf-form-select-box__option {
border-left: 2px solid transparent; border-left: 2px solid transparent;
&.gf-form-select2__option--is-focused, &.gf-form-select-box__option--is-focused,
&.gf-form-select2__option--is-selected { &.gf-form-select-box__option--is-selected {
background-color: $dropdownLinkBackgroundHover; background-color: $dropdownLinkBackgroundHover;
color: $dropdownLinkColorHover; color: $dropdownLinkColorHover;
@include left-brand-border-gradient(); @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; display: none;
} }
.gf-form-select2__value-container { .gf-form-select-box__value-container {
display: table-cell; display: table-cell;
padding: 8px 10px; padding: 8px 10px;
> div { > div {
@@ -89,14 +89,14 @@ $select-input-bg-disabled: $input-bg-disabled;
} }
} }
.gf-form-select2__indicators { .gf-form-select-box__indicators {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding-right: 5px; padding-right: 5px;
width: 25px; width: 25px;
} }
.gf-form-select2__select-arrow { .gf-form-select-box__select-arrow {
border-color: $input-color-select-arrow transparent transparent; border-color: $input-color-select-arrow transparent transparent;
border-style: solid; border-style: solid;
border-width: 5px 5px 2.5px; border-width: 5px 5px 2.5px;
@@ -105,7 +105,7 @@ $select-input-bg-disabled: $input-bg-disabled;
width: 0; width: 0;
position: relative; position: relative;
&.gf-form-select2__select-arrow--reversed { &.gf-form-select-box__select-arrow--reversed {
border-color: transparent transparent $input-color-select-arrow; border-color: transparent transparent $input-color-select-arrow;
top: -2px; top: -2px;
border-width: 0 5px 5px; border-width: 0 5px 5px;
@@ -118,7 +118,7 @@ $select-input-bg-disabled: $input-bg-disabled;
} }
.gf-form--has-input-icon { .gf-form--has-input-icon {
.gf-form-select2__value-container { .gf-form-select-box__value-container {
padding-left: 30px; padding-left: 30px;
} }
} }