@flourish/ui-styles 6.0.2 → 7.0.1

package/RELEASE_NOTES.md

@@ -1,3 +1,9 @@
+# 7.0.1
+* Fix vertical alignment of text in SVG downloads
+
+# 7.0.0
+* Add shared searchbox styling support
+
 # 6.0.2
 * Bump @flourish/pocket-knife to v2.3.1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "6.0.2",
+  "version": "7.0.1",
   "private": false,
   "description": "Flourish module for styling UI elements",
   "main": "ui-styles.js",
@@ -9,7 +9,8 @@
   "license": "LicenseRef-LICENSE",
   "dependencies": {
     "d3-selection": "^1.4.0",
-    "@flourish/pocket-knife": "^2.3.1"
+    "@flourish/utils-color": "^2.0.0",
+    "@flourish/pocket-knife": "^2.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.23.6",
@@ -18,10 +19,10 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "eslint": "^8.35.0",
+    "mocha": "^10.2.0",
     "only-allow": "^1.2.1",
     "rollup": "^4.6.1",
     "uglify-js": "^3.17.4",
-    "mocha": "^10.2.0",
     "@flourish/mocha-env": "^1.0.0"
   },
   "exports": "./src/index.js",

package/searchbox-style/settings.yml

@@ -0,0 +1,82 @@
+- property: searchbox_input_expanded
+  name: Always expand searchbox
+  type: boolean
+  width: full
+  description: If enabled, the search input will be expanded
+
+- property: searchbox_styles_display
+  name: Customize searchbox styles
+  type: boolean
+  width: full
+
+- property: searchbox_size
+  show_if:
+    searchbox_styles_display: true
+  name: Height
+  type: number
+  min: 0
+  max: 5
+  step: 0.1
+  width: half
+  description: Width and height of the search icon (in rem units)
+
+- property: searchbox_width
+  show_if:
+    searchbox_styles_display: true
+  name: Width
+  type: number
+  min: 1
+  step: 1
+  width: half
+  description: Width of the search input when expanded (in rem units)
+
+- property: search_bg_color
+  show_if:
+    searchbox_styles_display: true
+  name: Background
+  type: color
+  width: half
+  optional: true
+  description: Background color of the search input and dropdown
+
+- property: search_bg_opacity
+  show_if:
+    searchbox_styles_display: true
+  name: Background opacity
+  type: number
+  step: 0.1
+  min: 0
+  max: 1
+  width: half
+  description: A number from 0 to 1 representing the background opacity of the search input and dropdown
+
+- property: searchbox_stroke
+  show_if:
+    searchbox_styles_display: true
+  name: Stroke opacity
+  type: number
+  step: 0.1
+  min: 0
+  max: 1
+  width: half
+  description: A number from 0 to 1 representing the opacity of the searchbox stroke
+
+- property: searchbox_color
+  show_if:
+    searchbox_styles_display: true
+  name: Color
+  type: color
+  width: half
+  optional: true
+  description: Color of the search icon, searchbox stroke, placeholder text and dropdown text
+
+- property: searchbox_radius
+  show_if:
+    searchbox_styles_display: true
+  name: Roundness
+  type: number
+  step: 1
+  min: 0
+  max: 50
+  width: quarter
+  description: Roundness of the searchbox (in px)

package/src/index.js

@@ -2,6 +2,11 @@ import GeneralControlsStyle from "./general-controls-style/index.js";
 import ButtonStyle from "./button-style/index.js";
 import DropdownStyle from "./dropdown-style/index.js";
 import SliderStyle from "./slider-style/index.js";
+import SearchboxStyle from "./searchbox-style/index.js";
+
+/**
+ * @typedef {import('./searchbox-style/index.js').SearchboxStyleState} SearchboxStyleState
+ */
 
 function createGeneralControlsStyle(state, selector, layout) {
 	return new GeneralControlsStyle(state, selector, layout);
@@ -19,9 +24,14 @@ function createSliderStyle(state, selector, layout) {
 	return new SliderStyle(state, selector, layout);
 }
 
+function createSearchboxStyle(state, selector, layout) {
+	return new SearchboxStyle(state, selector, layout);
+}
+
 export {
 	createGeneralControlsStyle,
 	createButtonStyle,
 	createDropdownStyle,
 	createSliderStyle,
+	createSearchboxStyle,
 };

package/src/searchbox-style/index.js

@@ -0,0 +1,256 @@
+import { select } from "d3-selection";
+import { isPaleBackground } from "@flourish/utils-color";
+import { hexToRgba } from "@flourish/pocket-knife";
+import Stylesheet from "../lib/js2css.js";
+
+const DEFAULTS = Object.freeze({
+	searchbox_input_expanded: false,
+	searchbox_size: 2,
+	searchbox_width: 12,
+	search_bg_color: null,
+	search_bg_opacity: 0.9,
+	searchbox_stroke: 0.1,
+	searchbox_color: null,
+	searchbox_radius: 4,
+});
+
+function SearchboxStyle(state_, selector_, layout_) {
+	this._state = state_;
+	for (const key in DEFAULTS) {
+		if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
+	}
+
+	this._layout = layout_ || {};
+
+	this._styles = new Stylesheet();
+	this._selector = selector_;
+	this._createStylesheet();
+
+	return this;
+}
+
+SearchboxStyle.prototype._createStylesheet = function () {
+	this._stylesheet = document.createElement("style");
+	this._stylesheet.className = "fl-ui-styles-searchbox";
+	document.head.appendChild(this._stylesheet);
+};
+
+SearchboxStyle.prototype.update = function () {
+	this._styles.clear();
+	const prefers_reduced_motion =
+		window.matchMedia &&
+		window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+	const bg_color = this._state.search_bg_color || this._layout.background_color;
+	const background_color = bg_color
+		? hexToRgba(bg_color, this._state.search_bg_opacity)
+		: "transparent";
+
+	const user_defined_searchbox_color =
+		this._state.searchbox_color || this._layout.font_color;
+	const searchbox_color = user_defined_searchbox_color || "inherit";
+	const searchbox_color_paler = user_defined_searchbox_color
+		? hexToRgba(
+				user_defined_searchbox_color,
+				(this._state.searchbox_stroke + 1) / 2,
+			)
+		: "currentColor";
+	const searchbox_color_palest = user_defined_searchbox_color
+		? hexToRgba(user_defined_searchbox_color, this._state.searchbox_stroke)
+		: "currentColor";
+
+	const TEXT_SIZE = 0.55; // Relative to the search box height
+	const ICON_SIZE = 0.45; // Relative to the search box height
+
+	// Main container
+	this._styles
+		.select(this._selector)
+		.style("display", "inline-block")
+		.style(
+			"width",
+			this._state.searchbox_size + this._state.searchbox_width + "rem",
+		)
+		.style("max-width", "calc(100% - 2px)")
+		.style("box-sizing", "border-box");
+
+	select(this._selector).attr(
+		"data-pale-background",
+		isPaleBackground(background_color),
+	);
+
+	// Input field
+	this._styles
+		.select(this._selector + " input")
+		.style("border", "2px solid " + searchbox_color_palest)
+		.style("border-radius", this._state.searchbox_radius + "px")
+		.style("background-color", background_color)
+		.style("color", searchbox_color)
+		.style("font-family", "inherit")
+		.style("cursor", this._state.searchbox_input_expanded ? "text" : "pointer")
+		.style("position", "relative")
+		.style("opacity", this._state.search_bg_opacity)
+		.style("transition", prefers_reduced_motion ? "none" : "200ms width")
+		.style("display", "block")
+		.style("box-sizing", "border-box")
+		.style("padding", "0 0 0 calc(" + this._state.searchbox_size + "rem - 4px)")
+		.style("font-size", this._state.searchbox_size * TEXT_SIZE + "rem");
+
+	this._styles
+		.select(this._selector + ".expanded input")
+		.style("cursor", "text");
+
+	if (this._state.searchbox_input_expanded) {
+		this._styles
+			.select(this._selector + " input")
+			.style("width", "100%")
+			.style("height", this._state.searchbox_size + "rem");
+	} else {
+		this._styles
+			.select(this._selector + " input")
+			.style("width", this._state.searchbox_size + "rem")
+			.style("height", this._state.searchbox_size + "rem");
+	}
+
+	// Search icon
+	this._styles
+		.select(this._selector + " .search-icon")
+		.style("position", "absolute")
+		.style("pointer-events", "none")
+		.style("width", this._state.searchbox_size * ICON_SIZE + "rem")
+		.style("height", this._state.searchbox_size * ICON_SIZE + "rem")
+		.style(
+			"left",
+			this._state.searchbox_size * Math.pow(1 - ICON_SIZE, 2) + "rem",
+		)
+		.style(
+			"top",
+			this._state.searchbox_size * Math.pow(1 - ICON_SIZE, 2) + "rem",
+		);
+
+	// Search icon SVG
+	this._styles
+		.select(this._selector + " .search-icon svg")
+		.style("width", "100%")
+		.style("height", "100%")
+		.select("path")
+		.style("fill", searchbox_color);
+
+	// Search list (dropdown)
+	const list_bg_color =
+		this._state.search_bg_color || this._layout.background_color;
+	this._styles
+		.select(this._selector + " .search-list")
+		.style("display", "none")
+		.style("opacity", "0")
+		.style("margin-top", "1px")
+		.style("min-width", "100%")
+		.style("max-height", "50vh")
+		.style("overflow", "auto")
+		.style("position", "absolute")
+		.style("box-shadow", "0 1px 3px rgba(0,0,0,0.2)")
+		.style("color", searchbox_color)
+		.style("border-radius", "3px")
+		.style("font-size", this._state.searchbox_size * TEXT_SIZE + "rem")
+		.style("z-index", "1000");
+
+	this._styles
+		.select(this._selector + " .search-list.visible")
+		.style("opacity", 1)
+		.style("visibility", "visible")
+		.style("pointer-events", "auto");
+
+	// Apply data-pale-background to the search-list for accessibility styles
+	select(this._selector + " .search-list").attr(
+		"data-pale-background",
+		isPaleBackground(list_bg_color || background_color),
+	);
+
+	// Search list items
+	this._styles
+		.select(this._selector + " .search-list .search-item")
+		.style("height", this._state.searchbox_size * TEXT_SIZE + 1 + "rem")
+		.style("background-color", list_bg_color || "transparent")
+		.style("opacity", this._state.search_bg_opacity)
+		.style("padding", "0.5rem")
+		.style("cursor", "pointer")
+		.style("position", "relative")
+		.select("p")
+		.style("margin", "0")
+		.style("line-height", "1.2em")
+		.style("display", "block")
+		.style("white-space", "nowrap")
+		.style("font-weight", "normal")
+		.style("overflow", "hidden")
+		.style("text-overflow", "ellipsis")
+		.style("pointer-events", "none");
+
+	// Search list item hover and selected states for pale backgrounds
+	this._styles
+		.select(
+			this._selector +
+				" .search-list[data-pale-background='true'] .search-item:hover",
+		)
+		.style("outline", "2px solid black")
+		.style("outline-offset", "-2px");
+
+	this._styles
+		.select(
+			this._selector +
+				" .search-list[data-pale-background='true'] .search-item.selected",
+		)
+		.style("outline", "2px solid black")
+		.style("outline-offset", "-2px")
+		.style("cursor", "default");
+
+	this._styles
+		.select(
+			this._selector +
+				" .search-list[data-pale-background='true'] .search-item:focus-visible",
+		)
+		.style("outline", "2px solid black")
+		.style("outline-offset", "-2px");
+
+	// Search list item hover and selected states for dark backgrounds
+	this._styles
+		.select(
+			this._selector +
+				" .search-list[data-pale-background='false'] .search-item:hover",
+		)
+		.style("outline", "2px solid white")
+		.style("outline-offset", "-2px");
+
+	this._styles
+		.select(
+			this._selector +
+				" .search-list[data-pale-background='false'] .search-item.selected",
+		)
+		.style("outline", "2px solid white")
+		.style("outline-offset", "-2px")
+		.style("cursor", "default");
+
+	this._styles
+		.select(
+			this._selector +
+				" .search-list[data-pale-background='false'] .search-item:focus-visible",
+		)
+		.style("outline", "2px solid white")
+		.style("outline-offset", "-2px");
+
+	// Active state (when search is focused)
+	this._styles
+		.select(this._selector + ".active .search-list")
+		.style("display", "block");
+
+	// Expanded state
+	this._styles
+		.select(this._selector + ".expanded input")
+		.style("width", "100% !important");
+
+	this._styles
+		.select(this._selector + " input::placeholder")
+		.style("color", searchbox_color_paler);
+
+	this._stylesheet.innerHTML = this._styles.print();
+};
+
+export default SearchboxStyle;