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

Use base font for settings
2024-11-23 16:32:11 +03:00 · 2022-07-19 16:24:07 -07:00 · 2022-07-19 16:24:07 -07:00 · e372bcbc13
commit e372bcbc13
parent 279cb27863 f3fcf8c177
8 changed files with 309 additions and 202 deletions
--- a/script/puppeteer-tests-no-percy.sh
+++ b/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
--- a/script/puppeteer-tests.js
+++ b/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,
--- a/styleguide-app/Debug/Control/View.elm
+++ b/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
        )
--- a/styleguide-app/Examples/Modal.elm
+++ b/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 )

--- a/styleguide-app/Examples/Page.elm
+++ b/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
--- a/styleguide-app/Examples/RadioButton.elm
+++ b/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
--- a/styleguide-app/Examples/Select.elm
+++ b/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 )
--- a/styleguide-app/Examples/TextInput.elm
+++ b/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"