From ac3393125c3040ab330683901dabfacfd95eddb1 Mon Sep 17 00:00:00 2001
From: Juan Edi <juan@noredink.com>
Date: Tue, 11 Sep 2018 15:14:07 -0300
Subject: [PATCH] Use Nri.Ui.styled to add debugging into to tabs container

---
 src/Nri/Ui/SegmentedControl/V6.elm | 72 ++++++++++++++++--------------
 1 file changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/Nri/Ui/SegmentedControl/V6.elm b/src/Nri/Ui/SegmentedControl/V6.elm
index 6bfa7ee4..562590cb 100644
--- a/src/Nri/Ui/SegmentedControl/V6.elm
+++ b/src/Nri/Ui/SegmentedControl/V6.elm
@@ -9,10 +9,10 @@ module Nri.Ui.SegmentedControl.V6 exposing (Config, Icon, Option, Width(..), vie
 import Accessibility.Styled exposing (..)
 import Accessibility.Styled.Role as Role
 import Css exposing (..)
-import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attr exposing (css)
 import Html.Styled.Events as Events
+import Nri.Ui
 import Nri.Ui.Colors.Extra exposing (withAlpha)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.CssFlexBoxWithVendorPrefix as FlexBox
@@ -54,40 +54,46 @@ type alias Icon =
 {-| -}
 view : Config a msg -> Html.Html msg
 view config =
-    config.options
-        |> List.map
-            (\option ->
-                Html.div
-                    [ Attr.id option.id
-                    , Role.tab
-                    , Events.onClick (config.onClick option.value)
-                    , css sharedTabStyles
-                    , css <|
-                        if option.value == config.selected then
-                            focusedTabStyles
-                        else
-                            unFocusedTabStyles
-                    , css <|
-                        case config.width of
-                            FitContent ->
-                                []
+    tabList <|
+        List.map (viewTab config) config.options
 
-                            FillContainer ->
-                                expandingTabStyles
-                    ]
-                    [ case option.icon of
-                        Nothing ->
-                            Html.text ""
 
-                        Just icon ->
-                            viewIcon icon
-                    , Html.text option.label
-                    ]
-            )
-        |> div
-            [ Role.tabList
-            , css [ FlexBox.displayFlex, cursor pointer ]
-            ]
+tabList : List (Html.Html msg) -> Html.Html msg
+tabList =
+    Nri.Ui.styled div
+        "Nri-Ui-SegmentedControl-tabList"
+        [ FlexBox.displayFlex, cursor pointer ]
+        [ Role.tabList ]
+
+
+viewTab : Config a msg -> Option a -> Html.Html msg
+viewTab config option =
+    Html.div
+        [ Attr.id option.id
+        , Role.tab
+        , Events.onClick (config.onClick option.value)
+        , css sharedTabStyles
+        , css <|
+            if option.value == config.selected then
+                focusedTabStyles
+            else
+                unFocusedTabStyles
+        , css <|
+            case config.width of
+                FitContent ->
+                    []
+
+                FillContainer ->
+                    expandingTabStyles
+        ]
+        [ case option.icon of
+            Nothing ->
+                Html.text ""
+
+            Just icon ->
+                viewIcon icon
+        , Html.text option.label
+        ]
 
 
 viewIcon : Icon -> Html.Html msg