ButtonBar and latest nightly build - disable FocusRect

Question

I just updated to SDK 11566.  I have a ButtonBar w/custom skin in my app.  After updating to the latest nightly I now am getting the FocusRectangle around the button in focus, whether I mouse click or keyboard arrow,  didn't have this before.  In MXML properties for ButtonBar I tried focusRect="false", in the custom skin ButtonBarButtonSkin MXML property I set showCaret="false" and focusRect="false" - I still get the focusRect.  In ButtonBar I do not see the drawFocus() method anymore.
My question would be, what changed with ButtonBar and how can I either disable the Focus Rectangle or customize it?
I noticed this change in the nightly's - [svn:fx-trunk] 11467: Corrected ButtonBarBase drawFocus() method, set the depth of the ItemRenderer at caretIndex, not just the showsCaret flag.
What happened to putting visuals in a skin?
Thanks in advance,
John

Answer 1

Errors uploading my files, I took out all references that I tried for focusRect or caret.
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21"
alpha.disabledStates="0.5" xmlns:mx="library://ns.adobe.com/flex/halo">
<!-- host component -->
<fx:Metadata>
<![CDATA[
* @copy spark.skins.spark.ApplicationSkin#hostComponent
[HostComponent("spark.components.ToggleButton")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
/* Define the skin elements that should not be colorized.
For toggle button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];
* @copy spark.skins.SparkSkin#colorizeExclusions
override public function get colorizeExclusions():Array {return exclusions;}
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<s:Group left="-1" right="0" top="-1" bottom="-1"
scaleGridLeft="4" scaleGridTop="11" scaleGridRight="67" scaleGridBottom="17">
<!-- layer 2: fill -->
<s:Path left="2" right="1" top="2" bottom="-2"
data="M 67 0 l 0 18 l -65.2 0 C 0.8 18 0 17.2 0 16.2 L 0 1.8 C 0.8 0 0 0.8 1.8 0 L 67 0 z">
<s:fill>
<s:BitmapFill source="@Embed('assets/images/buttonBarBack.gif')"/>
</s:fill>
</s:Path>
</s:Group>
<!-- layer 8: text -->
<!--- The defines the appearance of the label for the first button in the ButtonBar component. -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2"
color.overStates="#FF1111"
color.selectedStates="#0000CC">
</s:Label>
</s:SparkSkin>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    alpha.disabled="0.5" blendMode.disabled="layer">
    <fx:Metadata>
    <![CDATA[
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.ButtonBar")]
    ]]>
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <fx:Declarations>
        <!---
            Specifies the skin class for the first button on the ButtonBar.
            @default spark.skins.spark.ButtonBarFirstButtonSkin
        -->
        <fx:Component id="firstButton">
            <s:ButtonBarButton skinClass="skins.components.MenuButtonBarButtonSkin" mouseOver="toolTip=data.label"/>
        </fx:Component>
        <!---
            Specifies the skin class for the middle button(s) on the ButtonBar.
            @default spark.skins.spark.ButtonBarMiddleButtonSkin
        -->
        <fx:Component id="middleButton">
            <s:ButtonBarButton  skinClass="skins.components.MenuButtonBarButtonSkin" mouseOver="toolTip=data.label"/>
        </fx:Component>
        <!---
            Specifies the skin class for the last button on the ButtonBar.
            @default spark.skins.spark.ButtonBarLastButtonSkin
        -->
        <fx:Component id="lastButton" >
            <s:ButtonBarButton skinClass="skins.components.MenuButtonBarButtonSkin" mouseOver="toolTip=data.label"/>
        </fx:Component>
    </fx:Declarations>
    <!---
        @copy spark.components.SkinnableDataContainer#dataGroup
    -->
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
    </s:DataGroup>
</s:Skin>