@flourish/ui-styles 1.0.0 → 2.0.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 (8) hide show
  1. package/README.md +9 -4
  2. package/RELEASE_NOTES.md +9 -0
  3. package/controls-style/settings.yml +1 -2
  4. package/package.json +2 -2
  5. package/src/button-style/index.js +0 -1
  6. package/src/dropdown-style/index.js +4 -5
  7. package/src/general-controls-style/index.js +14 -8
  8. package/ui-styles.js +18 -14
package/README.md CHANGED
@@ -18,9 +18,14 @@ export var state = {
18
18
 
19
19
  Import settings for controls styling in your `template.yml` settings.
20
20
 
21
- - For generic controls styling: `@flourish/ui-styles/controls-style`
22
- - For button styling: `@flourish/ui-styles/button-style`
23
- - For dropdown styling: `@flourish/ui-styles/dropdown-style`
21
+ ```yaml
22
+ - property: controls_style
23
+ import: "@flourish/ui-styles/controls-style"
24
+ - property: dropdown_style
25
+ import: "@flourish/ui-styles/dropdown-style"
26
+ - property: button_style
27
+ import: "@flourish/ui-styles/button-style"
28
+ ```
24
29
 
25
30
  ## Basics
26
31
 
@@ -50,4 +55,4 @@ There is an optional feature that allows you to inherit text and background colo
50
55
  ``` js
51
56
  import { createButtonStyle } from "@flourish/ui-styles";
52
57
  var buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons", state.layout);
53
- ```
58
+ ```
package/RELEASE_NOTES.md CHANGED
@@ -1,2 +1,11 @@
1
+ # 2.0.0
2
+ * BREAKING: Change styles to reflect use of a `select` element for the dropdown. For use with version 3.0.0+ of @flourish/controls
3
+
4
+ # 1.1.1
5
+ * Update module license
6
+
7
+ # 1.1.0
8
+ * Apply font size and weight to control title
9
+
1
10
  # 1.0.0
2
11
  * First release
package/controls-style/settings.yml CHANGED
@@ -17,9 +17,8 @@
17
17
  choices:
18
18
  - [ Bold, bold ]
19
19
  - [ Normal, normal ]
20
- - property: padding
20
+ - property: height
21
21
  name: Height
22
- description: Space below and above controls text
23
22
  type: number
24
23
  width: quarter
25
24
  min: 0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flourish/ui-styles",
3
- "version": "1.0.0",
3
+ "version": "2.0.0",
4
4
  "description": "Flourish module for styling UI elements",
5
5
  "main": "ui-styles.js",
6
6
  "module": "src/index.js",
@@ -12,7 +12,7 @@
12
12
  "precommit": "lint-staged"
13
13
  },
14
14
  "author": "Kiln Enterprises Ltd",
15
- "license": "UNLICENSED",
15
+ "license": "https://flourish.studio/terms/fcl/",
16
16
  "dependencies": {
17
17
  "@flourish/pocket-knife": "^0.5.0",
18
18
  "d3-selection": "^1.4.0"
package/src/button-style/index.js CHANGED
@@ -49,7 +49,6 @@ ButtonStyle.prototype.update = function() {
49
49
  this._styles.select(this._selector + ".fl-control .button")
50
50
  .style("overflow", "hidden")
51
51
  .style("white-space", "nowrap")
52
- .style("box-sizing", "content-box")
53
52
  .style("margin", "0 2px 0 0 !important")
54
53
  .style("background-color", background_color)
55
54
  .style("color", text_color)
package/src/dropdown-style/index.js CHANGED
@@ -44,22 +44,21 @@ DropdownStyle.prototype.update = function() {
44
44
  this._styles.select(this._selector)
45
45
  .style("pointer-events", "all");
46
46
 
47
- this._styles.select(this._selector + " .main")
47
+ this._styles.select(this._selector + " select")
48
48
  .style("display", "inline-block")
49
49
  .style("cursor", "pointer")
50
50
  .style("overflow", "hidden")
51
51
  .style("white-space", "nowrap")
52
52
  .style("position", "relative")
53
+ .style("font-family", "inherit")
53
54
  .style("background-color", background_color)
54
55
  .style("color", text_color)
55
56
  .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
56
57
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
57
58
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
58
59
 
59
- this._styles.select(this._selector + " .main .symbol")
60
- .style("float", "right")
61
- .select("div")
62
- .style("border-top-color", text_color + " !important");
60
+ this._styles.select(this._selector + ":after")
61
+ .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
63
62
 
64
63
  this._styles.select(this._selector + " .main .current")
65
64
  .style("line-height", "1em")
package/src/general-controls-style/index.js CHANGED
@@ -3,7 +3,7 @@ import Stylesheet from "../lib/js2css";
3
3
  var DEFAULTS = Object.freeze({
4
4
  font_size: 1,
5
5
  font_weight: "bold",
6
- padding: 0.4,
6
+ height: 2
7
7
  });
8
8
 
9
9
  function GeneralControlsStyle(state_, selector_, layout_) {
@@ -37,21 +37,27 @@ GeneralControlsStyle.prototype.update = function() {
37
37
  .style("font-size", this._state.font_size + "rem")
38
38
  .style("font-weight", this._state.font_weight);
39
39
 
40
- this._styles.select(this._selector + ".fl-control .button")
41
- .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
40
+ this._styles.select(".fl-controls-title")
41
+ .style("font-size", this._state.font_size + "rem")
42
+ .style("font-weight", this._state.font_weight)
43
+ .style("vertical-align", "middle");
42
44
 
43
- this._styles.select(this._selector + " .list-item")
44
- .style("padding", Math.max(this._state.padding, 0.5) + "rem");
45
+ this._styles.select(this._selector + ".fl-control .button")
46
+ .style("height", this._state.height + "rem")
47
+ .style("padding", "0 0.5em");
45
48
 
46
- this._styles.select(this._selector + "-dropdown .main")
47
- .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
49
+ this._styles.select(this._selector + "-dropdown select")
50
+ .style("height", this._state.height + "rem")
51
+ .style("font-size", this._state.font_size + "rem")
52
+ .style("font-weight", this._state.font_weight)
53
+ .style("padding", 0 + " " + this._state.height * 0.1 + "rem");
48
54
 
49
55
  this._styles.select(this._selector + "-slider .slider-end-labels")
50
56
  .style("font-size", this._state.font_size + "rem")
51
57
  .style("font-weight", this._state.font_weight);
52
58
 
53
59
  this._styles.select(this._selector + "-slider")
54
- .style("padding", this._state.padding + "rem 0");
60
+ .style("height", this._state.height + "rem");
55
61
 
56
62
  // Some additional styling for slider controls
57
63
  // TODO: should move this somewhere else at some point
package/ui-styles.js CHANGED
@@ -59,7 +59,7 @@
59
59
  var DEFAULTS = Object.freeze({
60
60
  font_size: 1,
61
61
  font_weight: "bold",
62
- padding: 0.4,
62
+ height: 2
63
63
  });
64
64
 
65
65
  function GeneralControlsStyle(state_, selector_, layout_) {
@@ -93,21 +93,27 @@
93
93
  .style("font-size", this._state.font_size + "rem")
94
94
  .style("font-weight", this._state.font_weight);
95
95
 
96
- this._styles.select(this._selector + ".fl-control .button")
97
- .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
96
+ this._styles.select(".fl-controls-title")
97
+ .style("font-size", this._state.font_size + "rem")
98
+ .style("font-weight", this._state.font_weight)
99
+ .style("vertical-align", "middle");
98
100
 
99
- this._styles.select(this._selector + " .list-item")
100
- .style("padding", Math.max(this._state.padding, 0.5) + "rem");
101
+ this._styles.select(this._selector + ".fl-control .button")
102
+ .style("height", this._state.height + "rem")
103
+ .style("padding", "0 0.5em");
101
104
 
102
- this._styles.select(this._selector + "-dropdown .main")
103
- .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
105
+ this._styles.select(this._selector + "-dropdown select")
106
+ .style("height", this._state.height + "rem")
107
+ .style("font-size", this._state.font_size + "rem")
108
+ .style("font-weight", this._state.font_weight)
109
+ .style("padding", 0 + " " + this._state.height * 0.1 + "rem");
104
110
 
105
111
  this._styles.select(this._selector + "-slider .slider-end-labels")
106
112
  .style("font-size", this._state.font_size + "rem")
107
113
  .style("font-weight", this._state.font_weight);
108
114
 
109
115
  this._styles.select(this._selector + "-slider")
110
- .style("padding", this._state.padding + "rem 0");
116
+ .style("height", this._state.height + "rem");
111
117
 
112
118
  // Some additional styling for slider controls
113
119
  // TODO: should move this somewhere else at some point
@@ -739,7 +745,6 @@
739
745
  this._styles.select(this._selector + ".fl-control .button")
740
746
  .style("overflow", "hidden")
741
747
  .style("white-space", "nowrap")
742
- .style("box-sizing", "content-box")
743
748
  .style("margin", "0 2px 0 0 !important")
744
749
  .style("background-color", background_color)
745
750
  .style("color", text_color)
@@ -815,22 +820,21 @@
815
820
  this._styles.select(this._selector)
816
821
  .style("pointer-events", "all");
817
822
 
818
- this._styles.select(this._selector + " .main")
823
+ this._styles.select(this._selector + " select")
819
824
  .style("display", "inline-block")
820
825
  .style("cursor", "pointer")
821
826
  .style("overflow", "hidden")
822
827
  .style("white-space", "nowrap")
823
828
  .style("position", "relative")
829
+ .style("font-family", "inherit")
824
830
  .style("background-color", background_color)
825
831
  .style("color", text_color)
826
832
  .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
827
833
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
828
834
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
829
835
 
830
- this._styles.select(this._selector + " .main .symbol")
831
- .style("float", "right")
832
- .select("div")
833
- .style("border-top-color", text_color + " !important");
836
+ this._styles.select(this._selector + ":after")
837
+ .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
834
838
 
835
839
  this._styles.select(this._selector + " .main .current")
836
840
  .style("line-height", "1em")