Allow styles to be passed through to components by including a styles: [] option. Change appropriate components to use them. This is mostly just the Button component

Author: boydm

guides/upgrading_to_v0.11.md

@@ -25,6 +25,7 @@ Version v0.11 is a MAJOR overhaul from the top to the bottom. For the first time
     * The SceneRef primitive is gone, and replaced with a combination of Component and Script primitives.
     * The `:font_blur` primitive is gone. Sorry. Didn't have a close enough analog in Canvas
     * The format of the input messages have changed - see the docs
+    * The optional styles on some of the standard components (Button) have changed to be more consistent with the standard styles. See documentation.
 
 __Important__
   * `:scenic_driver_local` is the new standard renderer for Scenic. Both `:scenic_driver_glfw` and `:scenic_drives_nerves_rpi` are retired as of v0.11.

lib/scenic/component/button.ex

@@ -1,4 +1,9 @@
 defmodule Scenic.Component.Button do
+  @default_radius 3
+  @default_font :roboto
+  @default_font_size 20
+  @default_alignment :center
+
   @moduledoc """
   Add a button to a graph
 
@@ -51,17 +56,30 @@ defmodule Scenic.Component.Button do
   The default is `false`.
   * `:theme` - The color set used to draw. See below. The default is `:primary`
 
-  ## Additional Styles
+  ## Sendable Styles
+  Styles can be sent directly to the Button Component by adding a :styles list.
 
-  Buttons honor the following list of additional styles.
+      graph
+      |> button(
+        "Example",
+        styles: [font_size: 32, text_align: :right]
+      )
+
+  The following standard styles are supported
+
+  * `:font` - The default is #{inspect(@default_font)}
+  * `:font_size` - The default is #{inspect(@default_font_size)}
+  * `:text_align` - The default is #{inspect(@default_alignment)}
+
+
+  ## Options
+
+  Buttons the following options.
 
   * `:width` - :auto (default) or pass in a number to set the width of the button
   * `:height` - :auto (default) or pass in a number to set the height of the button.
   * `:radius` - pass in a number to set the radius of the button's rounded
-  rectangle.
-  * `:alignment` - set the alignment of the text inside the button. Can be one
-  of `:left, :right, :center`. The default is `:center`.
-  * `:button_font_size` - the size of the font in the button
+  rectangle. The default is #{inspect(@default_radius)}
 
   Buttons do not use the inherited `:font_size` style as they should look
   consistent regardless of what size the surrounding text is.
@@ -96,6 +114,18 @@ defmodule Scenic.Component.Button do
 
       graph
       |> button("Example", id: :button_id, translate: {20, 20}, theme: :warning)
+
+  The final example changes the text size and alignment
+
+      graph
+      |> button(
+        "Example",
+        id: :button_id,
+        translate: {20, 20},
+        theme: :warning,
+        styles: [text_size: 32, text_align: :right]
+      )
+
   """
   use Scenic.Component, has_children: false
 
@@ -107,13 +137,6 @@ defmodule Scenic.Component.Button do
   import Scenic.Primitives, only: [{:rrect, 3}, {:text, 3}, {:update_opts, 2}]
 
   # import IEx
-
-  @default_radius 3
-
-  @default_font :roboto
-  @default_font_size 20
-  @default_alignment :center
-
   @impl Scenic.Component
   def validate(text) when is_bitstring(text) do
     {:ok, text}
@@ -135,6 +158,7 @@ defmodule Scenic.Component.Button do
   @doc false
   @impl Scenic.Scene
   def init(scene, text, opts) when is_bitstring(text) and is_list(opts) do
+    styles = Keyword.get(opts, :styles, [])
     id = opts[:id]
 
     # theme is passed in as an inherited style
@@ -148,9 +172,10 @@ defmodule Scenic.Component.Button do
       |> Theme.normalize()
 
     # font related info
-    font = @default_font
-    {:ok, {Static.Font, fm}} = Static.meta(@default_font)
-    font_size = opts[:button_font_size] || @default_font_size
+    font = Keyword.get(styles, :font, @default_font)
+    {:ok, {Static.Font, fm}} = Static.meta(font)
+    font_size = Keyword.get(styles, :font_size, @default_font_size)
+    alignment = Keyword.get(styles, :text_align, @default_alignment)
 
     ascent = FontMetrics.ascent(font_size, fm)
     descent = FontMetrics.descent(font_size, fm)
@@ -171,7 +196,6 @@ defmodule Scenic.Component.Button do
       end
 
     radius = opts[:radius] || @default_radius
-    alignment = opts[:alignment] || @default_alignment
 
     vpos = height / 2 + ascent / 2 + descent / 3
 

lib/scenic/component/input/text_field.ex

@@ -28,9 +28,9 @@ defmodule Scenic.Component.Input.TextField do
   The default is `false`.
   * `:theme` - The color set used to draw. See below. The default is `:dark`
 
-  ## Additional Styles
+  ## Additional Options
 
-  Text fields honor the following list of additional styles.
+  Text fields honor the following list of additional options.
 
   * `:filter` - Adding a filter option restricts which characters can be
   entered into the text_field component. The value of filter can be one of:

lib/scenic/component/input/toggle.ex

@@ -16,9 +16,9 @@ defmodule Scenic.Component.Input.Toggle do
     is `false`.
   * `:theme` - The color set used to draw. See below. The default is `:dark`
 
-  ## Additional Styles
+  ## Additional Options
 
-  Toggles also honor the following additional styles.
+  Toggles also honor the following additional options.
 
   * `:border_width` - the border width. Defaults to `2`.
   * `:padding` - the space between the border and the thumb. Defaults to `2`