Port of SUI Popup module

Fixes #193

• [x] sizing
• [x] content / header
• [x] positioning
• [x] events
  • [x] hover
  • [x] click
  • [x] focus
• [x] hoverable (will be fixed by #590)
• [x] widths
  • [x] use SUI enums
• [x] sizes
  • [x] use SUI enums
• [x] inverted
• [x] basic
• [x] offset
• [x] hideOnScroll (quick solution to scrollable sub-content like a sidebar)
• [x] exclusive
• [x] custom class names
• [x] custom styles

To be done later:

• inline (popup as a sibling of trigger, will be implemented later)
• transition (animation will probably be for later)

Maybe a little ambitious, but I am SOOOO excited to use this library!

I also would love to use it (at least common elements) in my React Native app. Thoughts?

For details - #524

This PR might to do:

• [x] updates contributing guide;
• [x] updates getUnhandledProps function;
• [x] adds new sections for common tests.
• [x] updates ComponentProps component in docs (we can't rely on meta anymore).

@levithomason I've updated Rail component, waiting for review there.

I have a search component with a custom renderer and I keep getting the error Warning: Unknown props_id,url, ... on <div> tag. Remove these props from the element..

The array I pass to results has these extra props, mentioned in the error, but I am using a custom renderer, so it seems to me they should be ignored.

Here is my custom renderer

const resultRenderer = ({ _id, name, url, logo}) => {
    return (
        <div key={_id}>
            <Label content={name}  />
        </div>
    )
}

resultRenderer.propTypes = {
  name: PropTypes.string
}

My component is really simple

export default class CompanyForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            value: '',
            results: [],
            company: null
        };
    }

    handleResultSelect(e, result) {
        this.setState({
            value: result.name,
            company: result
        });
    }

    handleSearchChange(e, value) {
        this.setState({
            value: value
        });       
        client
            .service('/api/companies')
            .find({
                query: {
                    name: {'$search': value }
                }
            })
            .then(results => {
                this.setState({
                    isLoading: false,
                    results: results.data
                });
            })
            .catch(err => {
                console.error(err);
            })
        
    }

    render() {
        const {isLoading, value, results} = this.state;
                
        return (
            <Search
                loading={isLoading}
                onResultSelect={this.handleResultSelect.bind(this)}
                onSearchChange={ this.handleSearchChange.bind(this)}
                results={results}
                value={value}
                resultRenderer={resultRenderer}
            />
        );
    }
}

The above code is what's causing the warning.

Fixes #199. This PR adds the Tab component. There are a number of ways we could go with the API. I'll post an API proposal soon.

Considering a Tab component is simply a tabular menu followed by some tab segments, I think we may create very a simple Tab API. More complicated use of Tabs could use an actual Menu and Segments with manual wiring of the click handlers and active class.

Simple Tabs

<Tab>
  <Tab.Pane name='First'>
    First
  </Tab.Pane>
  <Tab.Pane name='Second'>
    Second
  </Tab.Pane>
  <Tab.Pane name='Third'>
    Third
  </Tab.Pane>
</Tab>

Custom Tabs

This type of customization requires a full definition of the Menu component (icons, right sub menu, etc). I think at this point, the user should just wire in their click handlers to render tab Segments manually. An API for doing this will make the simple use case obtuse.

Open to suggestions on how to accomplish both with a clean and concise API.

Considerations

This component doesn't lend itself well to an array shorthand prop such as panes since the content is bound to be much more than just text. Because of this children will be used often. It is difficult and unreliable to loop/filter children to add click handlers and props for auto controlling things like the active Segment (pane). We are also avoiding React context to do so if at all possible.

Given these points, I'm leaning toward something like the simple tabs markup shown above. Will come back to this later. Feedback is much welcomed.

Semantic-Org maintains a collection of official integrations with various libraries. There is a missing spot for React. Per this thread, Stardust will fill this hole and become the official Semantic UI React integration.

This issue will serve as the place to hash out all the moving parts of making the migration. As concerns and solutions are raised, I'll keep an updated list of TODOs for migration here. Once complete, we'll point everything to the new location.

There is great mutual benefit to both TechnologyAdvice and Semantic-Org in this merge. Big thanks to @jlukic for the idea.

TODOs

This is an organic list, based on the comments in this issue:

• [x] Transfer the repo
• [x] Update all links to point to the new repo address
• [x] Deprecate stardust and publish under semantic-ui-react
• [x] Update codepen script href and global variable
• [x] remove current semantic-ui-react owner and add TA owners
• [x] ~~#244 Complete the migration to enzyme for testing~~
• [x] ~~#245 Setup coverage~~
• [x] ~~README~~
  • [x] ~~SUI branding~~
  • [x] ~~#377 Why SUI-React? https://github.com/Semantic-Org/Semantic-UI-React/issues/1~~
  • [x] ~~Coverage badge~~
  • [x] ~~Highlight project features & philosophy~~
    • complete component library, no html markup required
    • expressive component APIs (compare & contrast className buildup)
    • powerful and consistent prop handlers (see propUtils icon, image, etc)
    • keyboard shortcuts
    • full feature support (in progress)
  • [x] ~~#377 Show side-by-side comparisons of SUI mark up to Component APIs~~
  • [x] ~~Add TA attribution~~
• [x] ~~semantic-ui-react npm package (https://github.com/aldanor/semantic-ui-react/issues/7)~~
• [x] ~~Remove deweybot staging deployments~~
• [x] ~~Update ROADMAP.md with milestones~~
  • [x] #269 ~~Label legacy components for v1.0 upgrade high priority help wanted~~
  • [x] ~~Label missing components enhancement help wanted~~
• [x] Doc Site
  • [x] ~~"How to write a component" (should replace / encompass ComponentGuidelines.md)~~
  • [x] ~~#337 Replicate SUI doc site routes~~
  • [x] ~~Include "contribute" links for missing docs~~
  • [x] ~~#395 Add TA attribution~~

Needs Resolution

TA Credit

TechnologyAdvice has put a large amount of time and money into Stardust. We'd like to retain attribution through the merge. We're open to ideas on how this is accomplished. Our initial thoughts were along the lines of an unobtrusive link in the footer of the README and/or doc site.

Permissions

TA must retain admin permissions to the repo. We use Stardust in production and need full rights to the source at all times. This also applies to repo settings. We have bot users and other integrations that we'd need to maintain.

Project Direction

Though the project will continue to be developed as a community effort, a @TechnologyAdvice representative will continue to lead the project. Currently, that is @levithomason.

First Steps!

Since @jlukic has been through this a few times, love to hear your thoughts on the first steps to moving things over to Semantic-Org.

cc @athurman @davezuko @Fluidbyte @kyleturco @stephen-ta @TomFrost @thomasruns

Please let me know if I've overlooked anything.

API

Types

Step

A single step

<div class="ui steps">
  <div class="step">
    Shipping
  </div>
</div>

<Step.Group>
  <Step>Shipping</Step>
</Step.Group>
// or
const items = [
  {text: 'Shipping'}
];

<Step.Group steps={items}>

Groups

Steps

A set of steps

<div class="ui steps">
  <div class="step">
    <i class="truck icon"></i>
    <div class="content">
      <div class="title">Shipping</div>
      <div class="description">Choose your shipping options</div>
    </div>
  </div>
  <div class="active step">
    <i class="payment icon"></i>
    <div class="content">
      <div class="title">Billing</div>
      <div class="description">Enter billing information</div>
    </div>
  </div>
  <div class="disabled step">
    <i class="info icon"></i>
    <div class="content">
      <div class="title">Confirm Order</div>
    </div>
  </div>
</div>

<Step.Group>
  <Step icon='truck'>
    <Step.Title>Shipping</Step.Title>
    <Step.Description>Shipping</Step.Description>
  </Step>
  <Step active icon='payment'>
    <Step.Title>Billing</Step.Title>
    <Step.Description>Confirm Order</Step.Description>
  </Step>
  <Step disabled icon='info' title='Confirm Order' />
</Step.Group>
// or
const items = [
  {icon: 'truck', title: 'Shipping', description: 'Shipping'},
  {active: true, icon: 'payment', title: 'Billing', description: 'Confirm Order'},
  {disabled: true, icon: 'info', title: 'Confirm Order'},
];

<Step.Group steps={items}>

Ordered

A step can show a ordered sequence of steps

<div class="ui ordered steps">
  <div class="completed step">
    <div class="content">
      <div class="title">Shipping</div>
      <div class="description">Choose your shipping options</div>
    </div>
  </div>
...
</div>

<Step.Group ordered>
  <Step completed>
    <Step.Title>Shipping</Step.Title>
    <Step.Description>Shipping</Step.Description>
  </Step>
</Step.Group>
// or
const items = [
  {completed: true, title: 'Billing', description: 'Confirm Order'},
];

<Step.Group ordered steps={items}>

Vertical

A step can be displayed stacked vertically

<div class="ui vertical steps">...</div>

<Step.Group vertical>...</Step.Group>
<Step.Group vertical steps={items}>

Content

Description

A step can contain a description

Already described

Icon

A step can contain an icon

Already described

Link

A step can link

// Case 1
<div class="link step"></div>
// Case 2
<a class="active step">...</a>

// Case 1
<Step link>...</Step>

// Case 2
<Step active href='http://google.com'>...</Step>
<Step active onClick={handler}>...</Step>

States

Active

A step can be highlighted as active

Already described

Completed

A step can show that a user has completed it

Already described

Disabled

A step can show that it cannot be selected

<div class="disabled step"></div>

<Step disabled>...</Step>

Variations

Stackable

A step can stack vertically only on smaller screens

Vertical

A step can be displayed stacked vertically

<div class="ui tablet stackable steps">...</div>

<Step.Group stackable='tablet'>...</Step.Group>
<Step.Group stackable='tablet' steps={items}>

Fluid

A fluid step takes up the width of its container

<div class="ui fluid steps">...</div>

<Step.Group fluid>...</Step.Group>

Attached

Steps can be attached to other elements

<div class="ui top attached steps">...</div>

<Step.Group attached='top'>...</Step.Group>

Evenly Divided

Steps can be divided evenly inside their parent

<div class="ui two steps"></div>

Equal Width

<Step.Group widths='equal'>
  <Step />
  <Step />
</Step.Group>
<div class="ui two steps">
  <div class="step"></div>
  <div class="step"></div>
</div>

Explicit Widths

<Step.Group widths={2}> // or widths='two'
  <Step />
  <Step />
</Step.Group>
<div class="ui two steps">
  <div class="step"></div>
  <div class="step"></div>
</div>

Size

Steps can have different sizes

<div class="ui mini steps">...</div>

<Step.Group size='mini'>...</Step.Group>

Fixes #183

I've builded stardust with webpack in my project.

There are two problems:

• [x] unused components in bundle that increases bundle size;
• [x] PropTypes are in production bundle, too.

bundlers TODO

• [x] #1452 test that webpack 1 removes propTypes from production build, also check SUI.js usage
• [ ] #1497 test that webpack 2 treeshaking works
• [ ] test that rollup works

propTypes update

• [x] #1216 Button
• [x] #1159 Container
• [x] #1159 Divider
• [x] #1155 Flag
• [x] #1159 Header
• [x] #1159 Icon
• [x] #1155 Image
• [x] #1167 Input
• [x] #1265 Label
• [x] #1270 List
• [x] #1165 Loader
• [x] #731 Rail
• [x] #1165 Reveal
• [x] #1165 Segment
• [x] #1203 Step
• [x] #1209 Breadcrumb
• [x] #1320 Form
• [x] #1231 Grid
• [x] #1264 Menu
• [x] #1254 Message
• [x] #1200 Table
• [x] #1284 Card
• [x] #1293 Comment
• [x] #1285 Feed
• [x] #1294 Item
• [x] #1232 Statistic
• [x] Accordion
• [x] #1155 Checkbox
• [x] Dimmer
• [x] #1334 Dropdown
• [x] #1217 Embed
• [x] #1331 Modal
• [x] #1322 Popup
• [x] #1269 Progress
• [x] #1253 Rating
• [x] #1150 Search
• [x] #1296 Sidebar
• [x] #1282 Confirm
• [x] #1300 Portal
• [x] #1155 Radio
• [x] Select
• [x] Text Area

This is a work in progress mainly focused on exploring the possiblity of adding a datetime component which supports date ranges, time and localisation.

TODO

Bugs and Features

• [ ] allow typing/pasting dates into the input field
• [x] do not show completely disabled weeks in month view
• [ ] Menu needs some work, buttons don't make sense in all states
• [ ] Expose ways to customize the menu and table as well
• [ ] Add some more props for configuring the view and doc examples
  • [ ] showWeekends
  • [ ] showDaysOfWeek
• [ ] if at all possible, remove inline styles. required styles should be configurable.
• [ ] move to 5 button CalendarMenu: << < Mo, Yr > >>. double chevrons change year, single change month, mo
• [ ] don't allow selecting invalid ranges: start > end
• [ ] use 12hr time grid with AM/PM option
• [ ] provide onChange callbacks with (e, { value }) where value is the proposed new value.
• [ ] Add dateSeparator prop to DateRange to control the separator string between the two dates

Docs

• [ ] document function prop signatures
• [x] change Week starts Sunday example to First Day Of Week show two examples, start on Sun, another on Monday.
• [x] fix disabled days example, do not import date utils

Cleanup

• [x] move component to /addons
• [x] remove cruft propTypes that do not exist
• [ ] sort propTypes alphabetically
• [ ] update Month.js to use DateTimeGrid, https://github.com/Semantic-Org/Semantic-UI-React/pull/1240#issuecomment-289264758
• [ ] complete all code TODOs in /Datetime
• [x] reverse onDateSelect args to match other callbacks, with event first.
• [ ] remove unused methods in classes

Bug Report

Steps

Originally we have a Popup inside a Modal. On hover the Popup will not show up.

Expected Result

Should behave as in 1.3.1.

Actual Result

Popup is behind the Modal.

Version

2.0.0

Testcase => Reason

The

Suggestion: begin migration to new react lifecycles while retaining backwards compatibility via react-lifecycles-compat

Example: https://www.youtube.com/watch?v=G9S1IghlkCI

Steps

• Use new lifecycle methods introduced in react 16.3 in a component that renders react-semantic-ui components.

Expected Result

• React does not log errors/warning about upcoming deprecations to the console.

Actual Result

• React IS logging errors/warning about upcoming deprecations to the console.

Version

0.79.1

Testcase

Bug Report

Steps

I had been looking to upgrade react-scripts to v5 and craco has released a compatible version (v7).
I updated everything to the latest including semantic-ui-react/craco-less to 3.0.0 and it no longer builds.
There's some compatibility information in a comment here https://github.com/Semantic-Org/Semantic-UI-React/issues/4301#issuecomment-1021663941. This doesn't cover craco v7 but the build also failed with the suggested craco v6 setup.

Expected Result

The build to succeed.

Actual Result

• The build no longer understands exports from my colors.module.less file so all imports fail
• The build throws a lengthy error about not being able to handle a data: uri when attempting to load semantic.less

Version

craco 7.0.0 @semantic-ui-react/craco-less 3.0.0 react-scripts 5.0.0 semantic-ui-less 2.4.1 semantic-ui-react 2.0.3

Sample build errors

ERROR in ./src/components/Accordion.tsx 37:317-331
export 'mpmActionColor' (imported as 'mpmActionColor') was not found in 'semantic-ui/colors' (module has no exports)

ERROR in data:application/x-font-ttf;charset=utf-8;;base64,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
Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,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" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "data:" URIs.
...
...
@ ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/semantic-ui-less/semantic.less 22:37-5903
 @ ./node_modules/semantic-ui-less/semantic.less 8:6-258 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-228 83:0-228 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/index.tsx 21:0-40

This PR tracks work for Semantic UI React v3 🎉

Pre beta-1

• [x] chore: replace ta-scripts with release-it

For beta-1

• [x] All components support native ref forwarding #4233
• [x] BREAKING CHANGE remove Ref component #4286
• [x] BREAKING CHANGE remove Visibility component #4257
• [x] BREAKING CHANGE Input, Button & TextArea are forwarding refs to native elements
• [x] BREAKING CHANGE Transition static props #4266

Post beta-1

• [ ] Document breaking changes

For beta-2

• [ ] test: update typings, ensure that they support ref forwarding

For beta-3

• [ ] BREAKING CHANGE Event handling: remove eventStack
• [ ] test: validateTrigger should handle forwardRef
• [ ] chore: remove .displayName in production
• [ ] docs: update contributing guide
• [ ] docs: update Github templates
• [ ] docs: update introduction to remove AutoControlledComponent mentions
• [ ] docs: rename classname generators (currently they violate rules of hooks as their names start with use)
• [ ] chore: enable ESLint plugin for rules of hooks

For RC

• [ ] chore: integrate monosize
• [ ] chore: add bundle size fixtures for all components
• [ ] chore: remove dependency on lodash

After release

• [ ] docs: update CodeSandbox templates

Bug Report

I see a merge many years back for this issue #1380 but it is still an issue for me. Was it rolled back at some point? If using JSX templating for the Dropdown items it doesn't seem to indicate values at all for multiple selection. Kinda tricky to handle onChange as well but at least that's addressable.

Steps

<Dropdown
  className="selection"
  placeholder="Select options..."
  name="myDropdown"
  search
  fluid
  multiple
  value={data.myDropdown || []}
>
  <Dropdown.Menu>
    {options.map((option, key) => (
    <Dropdown.Item key={key} value={option.value} onClick={(e, control) => handleOptionChange(e, control)}>
      <table className="selected">
        <tbody>
          <tr>
            <td><Icon name={option.icon} size='big' /></td>
	    <td>
              <div className="text">{option.text}</div>
              <div className="description">{option.description}</div>
            </td>
            </tr>
          </tbody>
        </table>
      </Dropdown.Item>
      ))}
  </Dropdown.Menu>
</Dropdown>

Expected Result

Chosen/existing values should be displayed

Actual Result

No selected values are displayed

Version

2.1.3

Testcase

JSX Dropdown Test Sandbox

Bug Report

Steps

The Checkbox control is hardcoded to always set readOnly on its Input, even if you don't pass the readOnly prop.

This means the element is always in the readonly state, which causes HTML validation to always pass, even if the element is actually in an invalid state (e.g. being required).

Expected Result

It should be possible to use required with a Checkbox component and have form validation and methods such as checkValidity() work correctly.

Actual Result

Expected form validation does not occur because the element is in the readonly state. This allows a user to submit a form without checking a required value, even when you've set the required prop.

Version

2.1.3

Testcase

https://codesandbox.io/s/semantic-ui-react-checkbox-is-always-readonly-oyeow5

Feature Request

Problem description

There is an option to set a colour for various elements, including the card element. Currently, the visual display is quite subtle and minimalistic. It is controlled by a box-shadow CSS property where the thickness is set to 2. I would like the ability to set this thickness, giving the option to customise it and emphasise it. From my understanding, doing this with overriding CSS would break the ability to select the colour via the API.

<Card color='yellow'>

https://codesandbox.io/s/q6l916?module=/example.js

Proposed solution

Add the option to specify the border thickness via the API.

<Card color='yellow' colourThickness='5'>