Merge pull request #984 from NoRedInk/tessa/style-debug-controls-font

Use base font for settings

script/puppeteer-tests-no-percy.sh

@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 set -euo pipefail
-env ONLYDOODAD=${1-default} npx mocha script/puppeteer-tests.js --timeout 20000 --exit
+env ONLYDOODAD=${1-default} npx mocha script/puppeteer-tests.js --timeout 25000 --exit

script/puppeteer-tests.js

@@ -62,6 +62,24 @@ describe("UI tests", function () {
     handleAxeResults(name, results);
   };
 
+  const forAllOptions = async (labelName, callback) => {
+    await page.waitForXPath(
+      `//label[contains(., '${labelName}')]//select`,
+      200
+    );
+    const [select] = await page.$x(
+      `//label[contains(., '${labelName}')]//select`
+    );
+    const options = await select.$x(
+      `//label[contains(., '${labelName}')]//option`
+    );
+    for (const optionEl of options) {
+      const option = await page.evaluate((el) => el.innerText, optionEl);
+      await page.select("select", option);
+      callback(option);
+    }
+  };
+
   const messageProcessing = async (name, location) => {
     await goTo(name, location);
     await percySnapshot(page, name);
@@ -74,19 +92,44 @@ describe("UI tests", function () {
     const [theme] = await page.$x("//label[contains(., 'theme')]");
     await theme.click();
 
-    await page.waitForXPath("//label[contains(., 'theme')]//select", 200);
-    const [select] = await page.$x("//label[contains(., 'theme')]//select");
-    const options = await page.$x("//label[contains(., 'theme')]//option");
-    for (const optionEl of options) {
-      const option = await page.evaluate((el) => el.innerText, optionEl);
-      select.select(option);
-
+    await forAllOptions("theme", async (option) => {
       await percySnapshot(page, `${name} - ${option}`);
       axe = await new AxePuppeteer(page)
         .withRules(["color-contrast"])
         .analyze();
       handleAxeResults(`${name} - ${option}`, axe);
-    }
+    });
+  };
+
+  const modalProcessing = async (name, location) => {
+    await goTo(name, location);
+
+    await forAllOptions("Theme", async (option) => {
+      await page.click("#launch-modal");
+      await page.waitForSelector('[role="dialog"]');
+      await percySnapshot(page, `${name} - ${option}`);
+
+      axe = await new AxePuppeteer(page).analyze();
+
+      await page.click('[aria-label="Close modal"]');
+
+      handleAxeResults(`${name} - ${option}`, axe);
+    });
+  };
+
+  const pageProcessing = async (name, location) => {
+    await goTo(name, location);
+
+    var axe = await new AxePuppeteer(page)
+      .disableRules(skippedRules[name] || [])
+      .analyze();
+    handleAxeResults(name, axe);
+
+    await forAllOptions("page", async (option) => {
+      await percySnapshot(page, `${name} - ${option}`, {
+        scope: "[data-page-container='']",
+      });
+    });
   };
 
   const iconProcessing = async (name, location) => {
@@ -113,24 +156,8 @@ describe("UI tests", function () {
 
   const specialProcessing = {
     Message: messageProcessing,
-    Modal: async (name, location) => {
-      await goTo(name, location);
-      await page.click("#launch-modal");
-      await page.waitForSelector('[role="dialog"]');
-      await percySnapshot(page, "Full Info Modal");
-
-      const results = await new AxePuppeteer(page)
-        .disableRules(skippedRules[name] || [])
-        .analyze();
-      handleAxeResults(name, results);
-
-      await page.click('[aria-label="Close modal"]');
-      await page.select("select", "warning");
-      await page.click("#launch-modal");
-      await page.waitForSelector('[role="dialog"]');
-      await percySnapshot(page, "Full Warning Modal");
-      await page.click('[aria-label="Close modal"]');
-    },
+    Modal: modalProcessing,
+    Page: pageProcessing,
     AssignmentIcon: iconProcessing,
     UiIcon: iconProcessing,
     Logo: iconProcessing,

styleguide-app/Debug/Control/View.elm

@@ -18,13 +18,16 @@ module Debug.Control.View exposing
 -}
 
 import Css exposing (..)
+import Css.Global
 import Css.Media exposing (withMedia)
 import Debug.Control as Control exposing (Control)
 import EllieLink
 import Example
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
+import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Html.V3 exposing (viewIf)
 import Nri.Ui.MediaQuery.V1 exposing (mobile)
 import Nri.Ui.Text.V6 as Text
 
@@ -48,6 +51,9 @@ view config =
 
         ellieLink =
             EllieLink.view config.ellieLinkConfig
+
+        exampleCodes =
+            config.toExampleCode value
     in
     div
         [ css
@@ -57,9 +63,12 @@ view config =
             , withMedia [ mobile ] [ flexDirection column, alignItems stretch ]
             ]
         ]
-        [ viewSection "Settings" <|
+        [ viewSection "Settings"
+            [ Css.Global.descendants [ Css.Global.everything [ Fonts.baseFont ] ] ]
             [ fromUnstyled (Control.view config.update config.settings) ]
-        , viewExampleCode ellieLink config (config.toExampleCode value)
+        , viewIf
+            (\_ -> viewExampleCode ellieLink config exampleCodes)
+            (not (List.isEmpty exampleCodes))
         ]
 
 
@@ -69,7 +78,7 @@ viewExampleCode :
     -> List { sectionName : String, code : String }
     -> Html msg
 viewExampleCode ellieLink component values =
-    viewSection "Code Sample" <|
+    viewSection "Code Sample" [] <|
         Text.smallBodyGray
             [ Text.plaintext "😎 Configure the \"Settings\" on this page to update the code sample, then paste it into your editor!"
             ]
@@ -106,9 +115,9 @@ viewExampleCode ellieLink component values =
                 values
 
 
-viewSection : String -> List (Html msg) -> Html msg
-viewSection name children =
-    section [ css [ flex (int 1) ] ]
+viewSection : String -> List Css.Style -> List (Html msg) -> Html msg
+viewSection name styles children =
+    section [ css (flex (int 1) :: styles) ]
         (Heading.h2 [ Heading.style Heading.Subhead ] [ text name ]
             :: children
         )

styleguide-app/Examples/Modal.elm

@@ -6,13 +6,13 @@ module Examples.Modal exposing (Msg, State, example)
 
 -}
 
-import Accessibility.Styled as Html exposing (Html, div, text)
+import Accessibility.Styled exposing (Html, div, text)
 import Accessibility.Styled.Key as Key
 import Browser.Dom as Dom
 import Category exposing (Category(..))
 import Css exposing (..)
 import Debug.Control as Control exposing (Control)
-import Debug.Control.Extra as ControlExtra
+import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled.Attributes as Attributes exposing (css)
 import KeyboardSupport
@@ -31,7 +31,6 @@ import Task
 {-| -}
 type alias State =
     { state : Modal.Model
-    , attributes : Control (List Modal.Attribute)
     , settings : Control ViewSettings
     }
 
@@ -40,21 +39,15 @@ type alias State =
 init : State
 init =
     { state = Modal.init
-    , attributes = controlAttributes
     , settings = initViewSettings
     }
 
 
-controlAttributes : Control (List Modal.Attribute)
-controlAttributes =
-    ControlExtra.list
-        |> ControlExtra.listItem "Theme" controlTheme
-        |> ControlExtra.listItem "Title visibility" controlTitleVisibility
-        |> ControlExtra.listItem "Custom css" controlCss
-
-
 type alias ViewSettings =
     { title : String
+    , titleVisibility : Modal.Attribute
+    , theme : Modal.Attribute
+    , customCss : Modal.Attribute
     , showX : Bool
     , showContinue : Bool
     , showSecondary : Bool
@@ -67,6 +60,9 @@ initViewSettings : Control ViewSettings
 initViewSettings =
     Control.record ViewSettings
         |> Control.field "Modal title" (Control.string "Modal Title")
+        |> Control.field "Title visibility" controlTitleVisibility
+        |> Control.field "Theme" controlTheme
+        |> Control.field "Custom css" controlCss
         |> Control.field "X button" (Control.bool True)
         |> Control.field "Continue button" (Control.bool True)
         |> Control.field "Close button" (Control.bool True)
@@ -107,11 +103,21 @@ controlCss =
             ]
 
 
+moduleName : String
+moduleName =
+    "Modal"
+
+
+version : Int
+version =
+    11
+
+
 {-| -}
 example : Example State Msg
 example =
-    { name = "Modal"
-    , version = 11
+    { name = moduleName
+    , version = version
     , categories = [ Layout, Messaging ]
     , keyboardSupport =
         [ { keys = [ KeyboardSupport.Tab ]
@@ -178,12 +184,16 @@ example =
                 settings =
                     Control.currentValue state.settings
             in
-            [ div [ css [ Css.displayFlex, Css.justifyContent Css.spaceAround ] ]
-                [ Control.view UpdateAttributes state.attributes
-                    |> Html.fromUnstyled
-                , Control.view UpdateSettings state.settings
-                    |> Html.fromUnstyled
-                ]
+            [ ControlView.view
+                { ellieLinkConfig = ellieLinkConfig
+                , name = moduleName
+                , version = version
+                , update = UpdateSettings
+                , settings = state.settings
+                , mainType = "RootHtml.Html ModalMsg"
+                , extraImports = []
+                , toExampleCode = \_ -> []
+                }
             , launchModalButton settings
             , Modal.view
                 { title = settings.title
@@ -224,13 +234,17 @@ example =
                             Modal.closeButtonId
                     }
                 }
-                (List.concat
-                    [ if settings.showX then
-                        [ Modal.closeButton ]
+                (if settings.showX then
+                    [ Modal.closeButton
+                    , settings.titleVisibility
+                    , settings.theme
+                    , settings.customCss
+                    ]
 
-                      else
-                        []
-                    , Control.currentValue state.attributes
+                 else
+                    [ settings.titleVisibility
+                    , settings.theme
+                    , settings.customCss
                     ]
                 )
                 state.state
@@ -315,7 +329,6 @@ type Msg
     = OpenModal { startFocusOn : String, returnFocusTo : String }
     | ModalMsg Modal.Msg
     | CloseModal
-    | UpdateAttributes (Control (List Modal.Attribute))
     | UpdateSettings (Control ViewSettings)
     | Focus String
     | Focused (Result Dom.Error ())
@@ -359,9 +372,6 @@ update msg state =
             , Cmd.map ModalMsg cmd
             )
 
-        UpdateAttributes value ->
-            ( { state | attributes = value }, Cmd.none )
-
         UpdateSettings value ->
             ( { state | settings = value }, Cmd.none )
 

styleguide-app/Examples/Page.elm

@@ -7,61 +7,59 @@ module Examples.Page exposing (example, State, Msg)
 -}
 
 import Category exposing (Category(..))
+import Code
 import CommonControls
 import Css
 import Debug.Control as Control exposing (Control)
+import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
-import Http
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
-import Nri.Ui.Page.V3 as Page exposing (RecoveryText(..))
+import Nri.Ui.Page.V3 as Page exposing (DefaultPage, RecoveryText(..))
 
 
 {-| -}
 type alias State =
-    { httpError : Control Http.Error
-    , recoveryText : Control RecoveryText
-    }
+    Control Settings
 
 
 {-| -}
 type Msg
-    = ShowItWorked String
-    | SetHttpError (Control Http.Error)
-    | SetRecoveryText (Control RecoveryText)
+    = ShowItWorked
+    | UpdateSettings (Control Settings)
 
 
 update : Msg -> State -> ( State, Cmd Msg )
 update msg model =
     case msg of
-        ShowItWorked message ->
-            ( Debug.log "Clicked: " message |> always model, Cmd.none )
+        ShowItWorked ->
+            ( Debug.log "Clicked!" |> always model, Cmd.none )
 
-        SetHttpError controls ->
-            ( { model | httpError = controls }, Cmd.none )
+        UpdateSettings settings ->
+            ( settings, Cmd.none )
 
-        SetRecoveryText controls ->
-            ( { model | recoveryText = controls }, Cmd.none )
+
+moduleName : String
+moduleName =
+    "Page"
+
+
+version : Int
+version =
+    3
 
 
 {-| -}
 example : Example State Msg
 example =
-    { name = "Page"
-    , version = 3
+    { name = moduleName
+    , version = version
     , categories = [ Messaging ]
     , keyboardSupport = []
-    , state =
-        { httpError =
-            Control.record identity
-                |> Control.field "httpError" CommonControls.httpError
-        , recoveryText =
-            Control.record identity
-                |> Control.field "recoveryText" initRecoveryText
-        }
+    , state = controlSettings
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
@@ -93,48 +91,79 @@ example =
     , view =
         \ellieLinkConfig model ->
             let
-                recoveryText =
-                    Control.currentValue model.recoveryText
+                settings =
+                    Control.currentValue model
             in
-            [ Html.fromUnstyled (Control.view SetRecoveryText model.recoveryText)
-            , viewExample "Page.httpError error" (Page.httpError (Control.currentValue model.httpError)) recoveryText [ Html.fromUnstyled (Control.view SetHttpError model.httpError) ]
-            , viewExample "Page.broken" Page.broken recoveryText []
-            , viewExample "Page.blockedV4" (Page.blockedV4 "Error message details") recoveryText []
-            , viewExample "Page.notFound" Page.notFound recoveryText []
-            , viewExample "Page.noPermission" Page.noPermission recoveryText []
-            , viewExample "Page.loggedOut" Page.loggedOut recoveryText []
-            , viewExample "Page.timeOut" Page.timeOut recoveryText []
-            , viewExample "Page.networkError" Page.networkError recoveryText []
+            [ ControlView.view
+                { ellieLinkConfig = ellieLinkConfig
+                , name = moduleName
+                , version = version
+                , update = UpdateSettings
+                , settings = model
+                , mainType = "RootHtml.Html ()"
+                , extraImports = [ "import Http" ]
+                , toExampleCode =
+                    \{ page, recoveryText } ->
+                        [ { sectionName = "Example"
+                          , code =
+                                Tuple.first page
+                                    ++ "\n\t{ link = ()\n\t, recoveryText = "
+                                    ++ Debug.toString recoveryText
+                                    ++ "\n\t}"
+                          }
+                        ]
+                }
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Example" ]
+            , Tuple.second settings.page
+                { link = ShowItWorked
+                , recoveryText = settings.recoveryText
+                }
             ]
     }
 
 
-viewExample :
-    String
-    -> (Page.DefaultPage Msg -> Html Msg)
-    -> RecoveryText
-    -> List (Html Msg)
-    -> Html Msg
-viewExample viewName view recoveryText extras =
-    Html.div
-        [ css
-            [ Css.marginTop (Css.px 20)
-            , Css.borderTop3 (Css.px 2) Css.solid Colors.gray96
-            , Css.paddingTop (Css.px 20)
-            , Css.marginBottom (Css.px 20)
-            ]
-        ]
-        [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text viewName ]
-        , Html.div [] extras
-        , Html.code []
-            [ Html.text <|
-                viewName
-                    ++ " {  link = msg, recoveryText = "
-                    ++ Debug.toString recoveryText
-                    ++ " }"
-            ]
-        , view { link = ShowItWorked viewName, recoveryText = recoveryText }
-        ]
+type alias Settings =
+    { page : ( String, DefaultPage Msg -> Html Msg )
+    , recoveryText : RecoveryText
+    }
+
+
+controlSettings : Control Settings
+controlSettings =
+    Control.record Settings
+        |> Control.field "page" controlPageType
+        |> Control.field "recoveryText" initRecoveryText
+
+
+controlPageType : Control ( String, DefaultPage Msg -> Html Msg )
+controlPageType =
+    let
+        choiceWithModuleName name value =
+            ( name, Control.value ( moduleName ++ "." ++ name, value ) )
+    in
+    [ ( "httpError"
+      , Control.map
+            (\err ->
+                ( moduleName ++ ".httpError httpError"
+                , Page.httpError err
+                )
+            )
+            CommonControls.httpError
+      )
+    , choiceWithModuleName "broken" Page.broken
+    , ( "blockedV4"
+      , Control.value
+            ( "Page.blockedV4 " ++ Code.string "Error message details"
+            , Page.blockedV4 "Error message details"
+            )
+      )
+    , choiceWithModuleName "notFound" Page.notFound
+    , choiceWithModuleName "noPermission" Page.noPermission
+    , choiceWithModuleName "loggedOut" Page.loggedOut
+    , choiceWithModuleName "timeOut" Page.timeOut
+    , choiceWithModuleName "networkError" Page.networkError
+    ]
+        |> Control.choice
 
 
 initRecoveryText : Control RecoveryText

styleguide-app/Examples/RadioButton.elm

@@ -17,6 +17,7 @@ import CommonControls exposing (premiumDisplay)
 import Css
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
+import Debug.Control.View as ControlView
 import EllieLink
 import Example exposing (Example)
 import Html.Styled as Html exposing (..)
@@ -25,17 +26,28 @@ import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay
+import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Modal.V11 as Modal
 import Nri.Ui.RadioButton.V4 as RadioButton
 import Nri.Ui.Text.V6 as Text
 import Task
 
 
+moduleName : String
+moduleName =
+    "RadioButton"
+
+
+version : Int
+version =
+    4
+
+
 {-| -}
 example : Example State Msg
 example =
-    { name = "RadioButton"
-    , version = 4
+    { name = moduleName
+    , version = version
     , state = init
     , update = update
     , subscriptions = subscriptions
@@ -98,12 +110,23 @@ view ellieLinkConfig state =
         selectionSettings =
             Control.currentValue state.selectionSettings
     in
-    [ div
-        [ css [ Css.displayFlex, Css.justifyContent Css.spaceBetween ] ]
-        [ Control.view SetSelectionSettings state.selectionSettings |> fromUnstyled
-        , viewExamples selectionSettings state.selectedValue
-        , viewExamplesCode selectionSettings state.selectedValue
-        ]
+    [ ControlView.view
+        { ellieLinkConfig = ellieLinkConfig
+        , name = moduleName
+        , version = version
+        , update = SetSelectionSettings
+        , settings = state.selectionSettings
+        , mainType = "Html msg"
+        , extraImports = []
+        , toExampleCode =
+            \_ ->
+                [ { sectionName = "Example"
+                  , code = viewExamplesCode selectionSettings state.selectedValue
+                  }
+                ]
+        }
+    , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Example" ]
+    , viewExamples selectionSettings state.selectedValue
     , Modal.view
         { title = "Go Premium!"
         , wrapMsg = ModalMsg
@@ -126,7 +149,7 @@ view ellieLinkConfig state =
     ]
 
 
-viewExamplesCode : SelectionSettings -> Maybe Selection -> Html Msg
+viewExamplesCode : SelectionSettings -> Maybe Selection -> String
 viewExamplesCode selectionSettings selectedValue =
     let
         selectedValueString =
@@ -148,19 +171,7 @@ viewExamplesCode selectionSettings selectedValue =
                 ++ String.join "\n\t, " (List.map Tuple.first settings)
                 ++ "\n\t] "
     in
-    Html.code
-        [ css
-            [ Css.display Css.block
-            , Css.marginLeft (Css.px 20)
-            , Css.flexBasis (Css.px 300)
-            , Css.flexGrow Css.zero
-            ]
-        ]
-        [ Html.pre [ css [ Css.whiteSpace Css.preWrap ] ]
-            [ text
-                ("  " ++ String.join "\n, " (List.map toExampleCode (examples selectionSettings)))
-            ]
-        ]
+    "  " ++ String.join "\n, " (List.map toExampleCode (examples selectionSettings))
 
 
 viewExamples : SelectionSettings -> Maybe Selection -> Html Msg

styleguide-app/Examples/Select.elm

@@ -11,18 +11,29 @@ import Category exposing (Category(..))
 import Css
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
+import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled
-import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Select.V8 as Select exposing (Choice)
 
 
+moduleName : String
+moduleName =
+    "Select"
+
+
+version : Int
+version =
+    8
+
+
 {-| -}
 example : Example State Msg
 example =
-    { name = "Select"
-    , version = 8
+    { name = moduleName
+    , version = version
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
@@ -40,61 +51,59 @@ example =
         \ellieLinkConfig state ->
             let
                 label =
-                    Control.currentValue state.label
+                    (Control.currentValue state).label
 
                 ( attributesCode, attributes ) =
-                    List.unzip (Control.currentValue state.attributes)
+                    List.unzip (Control.currentValue state).attributes
             in
-            [ Control.view UpdateLabel state.label
-                |> Html.Styled.fromUnstyled
-            , Control.view UpdateAttributes state.attributes
-                |> Html.Styled.fromUnstyled
-            , Html.Styled.div
-                [ css [ Css.displayFlex, Css.alignItems Css.flexStart ]
-                ]
-                [ Html.Styled.code
-                    [ css
-                        [ Css.display Css.block
-                        , Css.margin2 (Css.px 20) Css.zero
-                        , Css.whiteSpace Css.preWrap
-                        , Css.flexBasis (Css.px 500)
+            [ ControlView.view
+                { ellieLinkConfig = ellieLinkConfig
+                , name = moduleName
+                , version = version
+                , update = UpdateSettings
+                , settings = state
+                , mainType = "Html msg"
+                , extraImports = []
+                , toExampleCode =
+                    \_ ->
+                        [ { sectionName = "Example"
+                          , code =
+                                "Select.view \""
+                                    ++ label
+                                    ++ "\""
+                                    ++ "\n    [ "
+                                    ++ String.join "\n    , " attributesCode
+                                    ++ "\n    ] "
+                          }
                         ]
-                    ]
-                    [ Html.Styled.text <|
-                        "Select.view \""
-                            ++ label
-                            ++ "\""
-                            ++ "\n    [ "
-                            ++ String.join "\n    , " attributesCode
-                            ++ "\n    ] "
-                    ]
-                , Select.view label attributes
-                    |> Html.Styled.map ConsoleLog
-                ]
+                }
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.Styled.text "Example" ]
+            , Select.view label attributes
+                |> Html.Styled.map ConsoleLog
             ]
     }
 
 
 {-| -}
 type alias State =
-    { label : Control String
-    , attributes : Control Settings
-    }
+    Control Settings
 
 
 {-| -}
 init : State
 init =
-    { label = Control.record identity |> Control.field "label" (Control.string "Tortilla Selector")
-    , attributes = initControls
-    }
+    Control.record Settings
+        |> Control.field "label" (Control.string "Tortilla Selector")
+        |> Control.field "attributes" initControls
 
 
 type alias Settings =
-    List ( String, Select.Attribute String )
+    { label : String
+    , attributes : List ( String, Select.Attribute String )
+    }
 
 
-initControls : Control Settings
+initControls : Control (List ( String, Select.Attribute String ))
 initControls =
     ControlExtra.list
         |> ControlExtra.listItem "choices"
@@ -119,10 +128,10 @@ initControls =
             )
         |> ControlExtra.optionalListItem "containerCss"
             (Control.choice
-                [ ( "flex-basis: 300px"
+                [ ( "max-width: 300px"
                   , Control.value
-                        ( "Select.containerCss [ Css.flexBasis (Css.px 300) ]"
-                        , Select.containerCss [ Css.flexBasis (Css.px 300) ]
+                        ( "Select.containerCss [ Css.maxWidth (Css.px 300) ]"
+                        , Select.containerCss [ Css.maxWidth (Css.px 300) ]
                         )
                   )
                 , ( "background-color: lichen"
@@ -203,8 +212,7 @@ initChoices =
 {-| -}
 type Msg
     = ConsoleLog String
-    | UpdateLabel (Control String)
-    | UpdateAttributes (Control Settings)
+    | UpdateSettings (Control Settings)
 
 
 {-| -}
@@ -214,12 +222,5 @@ update msg state =
         ConsoleLog message ->
             ( Debug.log "SelectExample" message |> always state, Cmd.none )
 
-        UpdateLabel label ->
-            ( { state | label = label }
-            , Cmd.none
-            )
-
-        UpdateAttributes attributes ->
-            ( { state | attributes = attributes }
-            , Cmd.none
-            )
+        UpdateSettings settings ->
+            ( settings, Cmd.none )

styleguide-app/Examples/TextInput.elm

@@ -12,18 +12,29 @@ import Category exposing (Category(..))
 import Css
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
+import Debug.Control.View as ControlView
 import Dict exposing (Dict)
 import Example exposing (Example)
 import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.TextInput.V7 as TextInput
 import ViewHelpers exposing (viewExamples)
 
 
+moduleName : String
+moduleName =
+    "TextInput"
+
+
+version =
+    7
+
+
 {-| -}
 example : Example State Msg
 example =
-    { name = "TextInput"
-    , version = 7
+    { name = moduleName
+    , version = version
     , categories = [ Inputs ]
     , keyboardSupport = []
     , state = init
@@ -41,8 +52,17 @@ example =
         ]
     , view =
         \ellieLinkConfig state ->
-            [ Control.view UpdateControl state.control
-                |> Html.fromUnstyled
+            [ ControlView.view
+                { ellieLinkConfig = ellieLinkConfig
+                , name = moduleName
+                , version = version
+                , update = UpdateControl
+                , settings = state.control
+                , mainType = "Html msg"
+                , extraImports = []
+                , toExampleCode = \_ -> []
+                }
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Example" ]
             , viewExamples <|
                 ( "readOnlyText"
                 , TextInput.view "Shareable Assignment Link"