Mixed texts missing right align versions, documentation conflicted

[darkphoenics]

Hi,

The following page (https://dev.fitbit.com/build/guides/design-guidelines/ui-components/) describe 9 possible postion for a mixed text yes this other reference only mention 6 (https://dev.fitbit.com/build/guides/user-interface/svg-components/text/#mixed-text).

I can confirm all the mixed-text-right-XXX are not working

Can you either update the doc to reflect there are only 6 avaialble or, even better, implement the missing right ones ?

Thanks 🙂

[darkphoenics]

I made the following pollyfill made from the existing left and center vertion to use while the SDK is updated or the documentation corrected :

<defs>
  <link rel='stylesheet' href='/mnt/sysassets/widgets/mixed_text_widget.css'/>

  <!-- Left and top aligned mixed text widget -->
  <symbol id="mixed-text-right-top" type='mixed-text' focusable='false' pointer-events='none' system-events='all'>

    <var id="ufs_header"/>
    <var id="dfs_header"/>
    <var id="ufs_copy"/>
    <var id="dfs_copy"/>

    <!-- Top padding -->
    <svg id="top-padding" class='top-align-top-padding'/>

    <!-- Header -->
    <use id="header" href='#dynamic-textarea' class='mixed-text-textarea mixed-text-header' overflow='visible'>
      <set href='#text' attributeName='text-anchor' to='end'/>
    </use>

    <!-- Space in between -->
    <svg id="space" class='mixed-text-space'/>

    <!-- Paragraph Copy -->
    <use id="copy" href='#dynamic-textarea' class='mixed-text-textarea mixed-text-copy' overflow='visible'>
      <set href='#text' attributeName='text-anchor' to='end'/>
    </use>

    <!-- Bottom padding -->
    <svg id="bottom-padding" class='top-align-bottom-padding'/>

  </symbol>


  <!-- Left and middle aligned mixed text widget -->
  <symbol id="mixed-text-right-mid" type='mixed-text' value='1' focusable='false' pointer-events='none' system-events='all'>

    <var id="ufs_header"/>
    <var id="dfs_header"/>
    <var id="ufs_copy"/>
    <var id="dfs_copy"/>

    <!-- Top padding -->
    <svg id="top-padding" class='mid-align-top-padding'/>

    <!-- Header -->
    <use id="header" href='#dynamic-textarea' class='mixed-text-textarea mixed-text-header' overflow='visible'>
      <set href='#text' attributeName='text-anchor' to='end'/>
    </use>

    <!-- Space in between -->
    <svg id="space" class='mixed-text-space'/>

    <!-- Paragraph Copy -->
    <use id="copy" href='#dynamic-textarea' class='mixed-text-textarea mixed-text-copy' overflow='visible'>
      <set href='#text' attributeName='text-anchor' to='end'/>
    </use>

    <!-- Bottom padding -->
    <svg id="bottom-padding" class='mid-align-bottom-padding'/>

  </symbol>

  <!-- Left and bottom aligned mixed text widget -->
  <symbol id="mixed-text-right-bottom" type='mixed-text' value='2' focusable='false' pointer-events='none' system-events='all'>

    <var id="ufs_header"/>
    <var id="dfs_header"/>
    <var id="ufs_copy"/>
    <var id="dfs_copy"/>

    <!-- Header -->
    <use id="header" href='#dynamic-textarea' class='mixed-text-textarea mixed-text-header' overflow='visible'>
      <set href='#text' attributeName='text-anchor' to='end'/>
    </use>

    <!-- Space in between -->
    <svg id="space" class='mixed-text-space'/>

    <!-- Paragraph Copy -->
    <use id="copy" href='#dynamic-textarea' class='mixed-text-textarea mixed-text-copy' overflow='visible'>
      <set href='#text' attributeName='text-anchor' to='end'/>
    </use>

    <!-- Bottom padding -->
    <svg id="bottom-padding" class='bottom-align-bottom-padding'/>

  </symbol>
</defs>

It add the mixed-text-right-top, mixed-text-right-mid and mixed-text-right-bottom variation.

[JonFitbit]

Thanks for the feedback, this was indeed missed from the implementation.