Versions Compared

Old Version 11

changes.mady.by.user Soledad Valero

Saved on

compared with

New Version 12

changes.mady.by.user Soledad Valero

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

In progress...

Procedure

  1. Install the package Semantic-UI-React. The Semantic UI stylesheet reference will be use as now.
  2. Import the elements you need from the semantic-ui-react package:
    1. Search the current UI Element/Collection/View/... used in the Semantic UI Documentation from the className value.
    2. Search in the Sermantic UI React Documentation the corresponding Element/Collection/View/...

    3. Take into account that some style attributes of the components should be pass as props to the new react component. Searching among the examples in the documentation can help you to detect which ones. For example:

      Code Block
      languagexml
      titlecode
      
{/*semantic ui element*/}
<div className="ui inverted blue menu"><div>

-->

{/*Equivalent Semantic-UI-REact element*/}
import {Menu} from 'semantic-ui-react';

<Menu inverted="true" color="blue" secondary>



    4. Add the aria-labels and data tooltip attributes to the elements. For example, for a button: 

      Code Block
      languagexml
      {/*semantic ui element*/}
<button class="ui button" type="button" aria-label='Click Here' data-tooltp='Click Here'> Click Here</button>


{/*Equivalent Semantic-UI-React element*/}
import React from 'react';
import { Button } from 'semantic-ui-react';

<Button aria-label='Click Here' data-tooltp='Click Here'> Click Here </Button>


    5.  Check the final rendered HTML. Some times is a little diferent, and perhaps you should retouch it a litte. For example:
       
    6. Use attribute "ref" as a callback (see Problems 2 for further explanation)

Possible Strategies

  1. Use Semantic-UI and Semantic-UI-React elements together

    I've checked it is possible to use both types of components together.  So, it could be possible create new elements using Semantic-UI-React elements, and recode previous elements step by step when we have enough time.


  2. Use only Semantic-UI-React elements

...

  1. It is possible we have some problems due to our lack of consistency using semantic-ui and html elements, for example:
    • Some buttons added as <button>
    • Some buttons added as <div>
    • Some buttons added as <NavLink>
      Thus

...

    • , perhaps will be difficult to us select the

...

    • most appropriate element in order to get the same final layout

...

    • .

  2. Another possible problem is the use of the attribute “ref” in our react components. The documentation  (https://facebook.github.io/react/docs/refs-and-the-dom.html) explains that is needed to use it as a callback, and sometimes it is not used in that way in our platform. Seems that new react-semantic-ui doesn’t support the old way. For example:

    Code Block
    languagexml
    {/*Old way*/}
<div className=”ui inverted menu ” ref=”header”>


{/* New way*/}
<div className=”ui inverted menu ” ref={(header)=>{this.headerMenu=header}}>