@woosmap/ui 2.41.0 → 2.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/Button/Button.stories.js +1 -1
  3. package/src/components/Button/ButtonWithDropdown.js +6 -4
  4. package/src/components/Dropdown/Dropdown.js +4 -0
  5. package/src/styles/console/button.styl +69 -43
  6. package/src/styles/console/mixins.styl +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "2.41.0",
3
+ "version": "2.42.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
package/src/components/Button/Button.stories.js CHANGED
@@ -209,7 +209,7 @@ const TemplateBtnWithDropdown = () => {
209
209
  ],
210
210
  dropdownDirection: 'se',
211
211
  };
212
- return <ButtonWithDropdown {...args} />;
212
+ return <ButtonWithDropdown disabled {...args} />;
213
213
  };
214
214
  export const WithDropdown = TemplateBtnWithDropdown.bind({});
215
215
 
package/src/components/Button/ButtonWithDropdown.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { Component } from 'react';
2
- import PropTypes from 'prop-types';
2
+ import PropTypes, { bool } from 'prop-types';
3
3
  import uniqueid from '../uniqueid';
4
4
  import Dropdown from '../Dropdown/Dropdown';
5
5
  import Button from './Button';
@@ -27,11 +27,11 @@ class ButtonWithDropdown extends Component {
27
27
  };
28
28
 
29
29
  render() {
30
- const { btnProps, dropdownProps, dropdownDirection } = this.props;
30
+ const { btnProps, dropdownProps, dropdownDirection, disabled } = this.props;
31
31
  return (
32
32
  <div className="btn--multi-options">
33
- <Button {...btnProps} />
34
- <Dropdown {...dropdownProps}>
33
+ <Button disabled={disabled} {...btnProps} />
34
+ <Dropdown disabled={disabled} {...dropdownProps}>
35
35
  <Dropdown.Menu direction={dropdownDirection}>{this.renderDropdown()}</Dropdown.Menu>
36
36
  </Dropdown>
37
37
  </div>
@@ -44,6 +44,7 @@ ButtonWithDropdown.propTypes = {
44
44
  dropdownProps: PropTypes.object,
45
45
  dropdownDirection: PropTypes.string,
46
46
  dropdownItems: PropTypes.array,
47
+ disabled: bool,
47
48
  };
48
49
 
49
50
  ButtonWithDropdown.defaultProps = {
@@ -51,6 +52,7 @@ ButtonWithDropdown.defaultProps = {
51
52
  dropdownProps: {},
52
53
  dropdownItems: [],
53
54
  dropdownDirection: 'se',
55
+ disabled: false,
54
56
  };
55
57
 
56
58
  export default ButtonWithDropdown;
package/src/components/Dropdown/Dropdown.js CHANGED
@@ -246,6 +246,7 @@ class Dropdown extends Component {
246
246
  const {
247
247
  children,
248
248
  size,
249
+ disabled,
249
250
  className,
250
251
  label,
251
252
  btnFace,
@@ -266,6 +267,7 @@ class Dropdown extends Component {
266
267
  {...rest}
267
268
  >
268
269
  <Button
270
+ disabled={disabled}
269
271
  type={btnFace}
270
272
  onClick={this.onClick}
271
273
  onDoubleClick={this.onDoubleClick}
@@ -284,6 +286,7 @@ Dropdown.defaultProps = {
284
286
  size: 'normal',
285
287
  btnSize: null,
286
288
  onClick: null,
289
+ disabled: false,
287
290
  disableCloseOutside: false,
288
291
  onDoubleClick: null,
289
292
  label: null,
@@ -298,6 +301,7 @@ Dropdown.propTypes = {
298
301
  onClick: PropTypes.func,
299
302
  closeCb: PropTypes.func,
300
303
  onDoubleClick: PropTypes.func,
304
+ disabled: PropTypes.bool,
301
305
  disableCloseOutside: PropTypes.bool,
302
306
  label: PropTypes.string,
303
307
  children: PropTypes.node.isRequired,
package/src/styles/console/button.styl CHANGED
@@ -5,6 +5,13 @@
5
5
  flex-shrink 0
6
6
  &.active
7
7
  cursor default
8
+ &:disabled
9
+ &:not(.btn--group)
10
+ cursor default
11
+ opacity .3
12
+ box-shadow none
13
+ &:hover
14
+ opacity .3
8
15
  &--icon
9
16
  &:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group):not(.btn--sidebar-link)
10
17
  sq()
@@ -27,14 +34,15 @@
27
34
  &.btn--primary
28
35
  &:disabled
29
36
  &:hover
30
- color $primary
31
37
  background-color $primary
32
38
  .icon
33
39
  fill $light
40
+ &.btn--loading
41
+ &:hover
42
+ background-color $primary
34
43
  &.btn--secondary
35
44
  &:disabled
36
45
  &:hover
37
- color $secondary
38
46
  background-color transparent
39
47
  border-color $inputBorderColor
40
48
  .icon
@@ -42,7 +50,6 @@
42
50
  &.btn--important
43
51
  &:disabled
44
52
  &:hover
45
- color $light
46
53
  background-color $error
47
54
  .icon
48
55
  fill $light
@@ -73,22 +80,18 @@
73
80
  flex-shrink 0
74
81
  .icon
75
82
  flex-shrink 0
76
- &:disabled
77
- cursor default
78
- opacity .3
79
- box-shadow none
80
- &:hover
81
- opacity .3
82
83
  &--primary
83
84
  background-color $primary
84
- &:disabled
85
- &:hover
86
- background-color $primary
85
+ &:not(.btn--group):not(.btn--switch)
86
+ &:disabled
87
+ &:hover
88
+ background-color $primary
87
89
  &--important
88
90
  background-color $error
89
- &:disabled
90
- &:hover
91
- background-color $error
91
+ &:not(.btn--group):not(.btn--switch)
92
+ &:disabled
93
+ &:hover
94
+ background-color $error
92
95
  &--secondary
93
96
  btn()
94
97
  color $secondary
@@ -106,23 +109,27 @@
106
109
  flex-shrink 0
107
110
  &:hover
108
111
  border-color $success
109
- &.btn--loading
110
- background-color transparent
111
- color $secondary
112
- cursor default
113
- border-color $inputBorderColor
114
- .icon
115
- fill $secondary
112
+ &.btn--loading
113
+ &:not(.btn--group):not(.btn--switch)
114
+ &:hover
115
+ background-color transparent
116
+ color $secondary
117
+ cursor default
118
+ border-color $inputBorderColor
119
+ .icon
120
+ fill $secondary
116
121
  &:disabled
117
122
  opacity .4
118
123
  cursor default
119
- &:hover
120
- opacity .4
121
- background-color transparent
122
- color $secondary
123
- border-color $inputBorderColor
124
- .icon
125
- fill $secondary
124
+ &:not(.btn--group):not(.btn--switch)
125
+ &:disabled
126
+ &:hover
127
+ opacity .4
128
+ background-color transparent
129
+ color $secondary
130
+ border-color $inputBorderColor
131
+ .icon
132
+ fill $secondary
126
133
  &--transparent
127
134
  btn()
128
135
  background-color transparent
@@ -339,8 +346,8 @@
339
346
  &:not(.btn--icon):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
340
347
  padding-left $padding - .4
341
348
  &:hover
342
- &.btn--important
343
- background-color $error
349
+ &.btn--important
350
+ background-color $error
344
351
  .icon
345
352
  sq(2.2)
346
353
  &--switch
@@ -378,6 +385,34 @@
378
385
  flex-shrink 0
379
386
  .icon
380
387
  flex-shrink 0
388
+ &:hover
389
+ color $secondary
390
+ background-color $primary10
391
+ &.active
392
+ color $light
393
+ border-color $secondary
394
+ background-color $secondary
395
+ .icon
396
+ fill $light
397
+ &:hover
398
+ background-color $secondary
399
+ &:disabled
400
+ background-color $secondary60
401
+ border-color $secondary-medium15
402
+ color $light70
403
+ .icon
404
+ fill $light70
405
+ &:disabled:not(.active)
406
+ color $secondary30
407
+ cursor default
408
+ .icon
409
+ fill $secondary30
410
+ &:hover
411
+ border-color $inputBorderColor
412
+ color $secondary30
413
+ background-color transparent
414
+ .icon
415
+ fill $secondary30
381
416
  &-container
382
417
  flexMiddle()
383
418
  .btn
@@ -390,17 +425,6 @@
390
425
  &:last-child
391
426
  border-radius 0 $borderRadius $borderRadius 0
392
427
  border-width .1rem
393
- &:hover
394
- color $secondary
395
- background-color $primary10
396
- &.active
397
- color $light
398
- border-color $secondary
399
- background-color $secondary
400
- .icon
401
- fill $light
402
- &:hover
403
- background-color $secondary
404
428
  &--light
405
429
  .btn
406
430
  &.active
@@ -422,6 +446,8 @@
422
446
  .btn
423
447
  border-radius 0 $borderRadius $borderRadius 0
424
448
  border-width .1rem .1rem .1rem 0
449
+
450
+
425
451
  &--tab
426
452
  fullw()
427
453
  display inline-flex
@@ -487,7 +513,7 @@
487
513
  &--pills
488
514
  br()
489
515
  flexBtn()
490
- button()
516
+ buttonFont()
491
517
  focus()
492
518
  trans()
493
519
  fullw()
package/src/styles/console/mixins.styl CHANGED
@@ -62,7 +62,7 @@ btn()
62
62
  br()
63
63
  flexBtn()
64
64
  trans()
65
- button()
65
+ buttonFont()
66
66
  hover()
67
67
  focus()
68
68
  white-space nowrap
@@ -73,7 +73,7 @@ flexBtn()
73
73
  align-items center
74
74
  justify-content flex-start
75
75
 
76
- button()
76
+ buttonFont()
77
77
  height $buttonHeight
78
78
  font-size $buttonFontSize
79
79
  line-height $buttonLineHeight