@flourish/controls - npm Package Compare versions

Comparing version 7.0.0 to 8.0.0

package.json

 {
   "name": "@flourish/controls",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Switchable dropdown/buttons/slider control",
@@ -5,0 +5,0 @@ "main": "controls.js",

README.md

@@ -60,4 +60,29 @@ # Flourish controls
 
-In `update` you typically want to update the set of `options` and then call the controls own `update` method: `buttons_control.options(options).update();`. If you're using this module alongside `@flourish/ui-styles` you should call the update method from the ui-styles object first (this will ensure the dropdown icon correctly matches the size and color styles set in the ui-styles panel).
+In `update` you typically want to update the set of `options` and then call `update` method on the container and control(s):
 
+```
+controls_container.update();
+
+buttons_control
+    .options(button_options)
+    .update();
+
+dropdown_control
+    .options(dropdown_options)
+    .update();
+```
+
+If you're using this module alongside `@flourish/ui-styles` you should call the update method from the ui-styles object first (this will ensure the dropdown icon correctly matches the size and color styles set in the ui-styles panel). For example:
+
+```
+function updateControlStyles() {
+	controls_style.update();
+	button_style.update();
+	dropdown_style.update();
+	slider_style.update();
+}
+
+updateControlStyles();
+```
+
 ## Controls container methods
@@ -64,0 +89,0 @@

RELEASE_NOTES.md

@@ -0,1 +1,8 @@
+# 8.0.0
+* Move slider width settings from @flourish/ui-styles to @flourish/controls [BREAKING]
+* Adds slider max label width setting with auto-detection of longest label
+
+# 7.0.1
+* Fix broken dropdown border radius setting
+
 # 7.0.0
@@ -2,0 +9,0 @@ * Use browsers' native `input` element for slider [BREAKING]

src/controls/slider.js

 import { select, event as d3_event } from "d3-selection";
+import { remToPx } from "../lib/remToPx";
+import { getTextWidth } from "@flourish/pocket-knife";
 
@@ -106,4 +108,13 @@ function createPlayButton() {
 
-	var showControl = function() {
+	var showControl = function(longest_text_width) {
+		const label_width = Math.min(Math.ceil(longest_text_width), remToPx(state.slider_max_label_width)) + "px";
+		slider_label
+			.style("width", label_width)
+			.style("flex-shrink", 0);
+
 		slider_holder.style("display", "inline-flex");
+
+		slider_range
+			.style("width", remToPx(state.slider_width) + "px");
+
 		setHandles();
@@ -133,3 +144,13 @@ return slider_obj;
 
-		if (visible) showControl();
+		var slider_font_size = window.getComputedStyle(slider_label.node()).fontSize;
+		let longest_text_width = 0;
+		const font = slider_font_size + " sans-serif";
+
+		sorted_options
+			.forEach(function(d) {
+				const text_width = getTextWidth(d.display, font);
+				longest_text_width = Math.max(longest_text_width, text_width);
+			});
+
+		if (visible) showControl(longest_text_width);
 		else hideControl();
@@ -136,0 +157,0 @@

src/index.js

@@ -27,2 +27,3 @@ import { select } from "d3-selection";
 	slider_width: 15,
+	slider_max_label_width: 20,
 	slider_handle_height: 1,
@@ -29,0 +30,0 @@ slider_track_height: 0.2,

src/lib/css.js

@@ -97,3 +97,2 @@ import createStylesheet from "@flourish/js2css";
 		.style("-webkit-appearance", "none")
-		.style("-webkit-border-radius", "0px")
 		.style("width", "100%");
@@ -100,0 +99,0 @@

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186396

1.33%

Lines of code

4720

0.64%

Number of lines in readme file

167

17.61%

Number of medium supply chain risk alerts

0

-100%

No dependency changes