from suir.

Once done, TOC can stop depending upon suir directly.

Applying a data-hook property to a component should lead to a data-hook being reflected in the generated html. For some components this isn't the case.

e.g.

                <LargeCard.Title
                  data-hook='title'
                  title={this.props.console.name}
                  description={this.props.console.friendlyName}
                />

Lato-fonts has dropped support for legacy EOT and TTF font types.

Version 3.00 only supports the WOFF2 and WOFF formats, both of which are much more efficient for web pages.

Looks like browser support should be good enough though I've not tested this yet.

see: https://github.com/betsol/lato-font/blob/master/changelog.md

It seems like they should remain at similiar heights regardless of y-value.

Increasing the y-value further makes it worse:

The palette used by Octagon differs from current TW UX guidelines, we should upgrade it.

Specifically, twgrey is no longer to be used, we've generally replaced this with #28324E except where we've used one of #A6A8AB or #28324E.

This will need some review by TOC as well as UX teams.

It appears that the externalAttributeFilter is not working correctly, and ends up passing more attributes than intended.

the diameter is juuuuuussst a few pixels off, even though the node size is equivalent

rather than being 55,55, at https://github.com/Tripwire/octagon/blob/master/src/components/charts/CircleChart/Circle.jsx#L28

This should be (radius+padding),(radius+padding).

If you start changing the chart to be anything other than 110 px then the chart quickly breaks.

Support for the microcard component to enable at a glance information about a particular data set.

Fragments include
Gutter - indicate status
Action - on click handler with arrow icon
Favorite - indicates favorite status
Count - stylized display of some count
Content.Status - icon indication of status
Content.Message - text indication of status

semantic is a dependency, yet we have it embedded in our source. determine if we can do a build against their source as a dep, then apply our custom styles over it

In my app, I have the following:

import NotificationItem from 'react-octagon/lib/components/NotificationItem'

export default class Thingy extends Component {
  render () {
    return (
      <NotificationItem notification={someNotifications[0]} data={[]} />
    )
  }
}

But it appears that NotificationItem's css is in a relative path that works for the storybook, but not when using octagon as a library. I'm not sure if this is related to our discussion for #23, so I'm filing it as a separate issue.

Failed to compile.

Error in /data/src/octagon/lib/components/NotificationItem.js
Module not found: ../styles/components/notification-item.css in /data/src/octagon/lib/components

 @ /data/src/octagon/lib/components/NotificationItem.js 17:0-53

problem statement

styleguidist conventions are required for:

• component src
• component tests/examples

solution

• update README, and Contributing as appropriate w/ x-refs

You can see this at:

https://tripwire.github.io/octagon/#button

problem

• components need documentation. an API reference would be great

discussion

#6 already has the action for proxying all imported SUIR component docs into the storybook for those components that we import (s.t. we dont provide two sources of truth for what components we export). hence, i am of the opinion that ya, lets put docs into storybook.

im super open to static analyzers that take doc blocks from the components & create docs too. IIRC, there may be a plugin for this. i need to jump on my bike, but lets discuss!

problem statements

when mousing over the AreaChart, the tooltip jumps to awkward places based on where your mouse is relative to the data lines

research

• 1 & 2 conditions are the same.
  • i think 1 is supposed to be > ?
• i think the experience should be
  • if the mouse is below the MAX value of the chart, show in corner
  • otherwise, track with the cursor

After upgrading from 7.2.0 I get:

./node_modules/react-octagon/lib/components/LargeCard/LargeCard.js
Module not found: Can't resolve './large-card.css' in 'node_modules/react-octagon/lib/components/LargeCard'

I think fontawesome was removed from the vendored bits, but was not replaced with the package dependency. Should it be?

When trying to use octagon as a component library, I'm getting the following errors in my project's webpack build:

Failed to compile.

Error in ./~/react-octagon/lib/styles/semantic.min.css
Module not found: ../../src/styles/fonts/ElegantIcons.woff in ~/myproject/ui/node_modules/react-octagon/lib/styles

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!./~/react-octagon/lib/styles/semantic.min.css 6:117255-117306

Error in ./~/react-octagon/lib/styles/semantic.min.css
Module not found: ../../src/styles/fonts/ElegantIcons.eot in ~/myproject/ui/node_modules/react-octagon/lib/styles

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!./~/react-octagon/lib/styles/semantic.min.css 6:117335-117385

Error in ./~/react-octagon/lib/styles/semantic.min.css
Module not found: ../../src/styles/fonts/ElegantIcons.ttf in ~/myproject/ui/node_modules/react-octagon/lib/styles

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!./~/react-octagon/lib/styles/semantic.min.css 6:117427-117477

Error in ./~/react-octagon/lib/styles/semantic.min.css
Module not found: ../../src/styles/fonts/ElegantIcons.svg in ~/myproject/ui/node_modules/react-octagon/lib/styles

 @ ./~/css-loader?importLoaders=1!./~/postcss-loader!./~/react-octagon/lib/styles/semantic.min.css 6:117510-117560

In fact, I don't see the ElegantIcons files anywhere in the octagon published npm module. Should they be set as a package dependency?

problem

• we need a test strategy for inbound components

discussion

• some test config is already defined. we can do some assertions on some input sets there, or, visualize those same inputs & just use automated snapshotting. https://github.com/storybooks/storyshots

This step is incorrect and gives an error:

run yarn run build from the /semantic directory

$ yarn run build
yarn run v0.20.3
error Couldn't find a package.json file in "/data/src/octagon/semantic"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Instead, running yarn run build from the base directory builds the expected stuff.

$ yarn run build
yarn run v0.20.3
$ node scripts/build.js 
src/components/FavoriteButton.jsx -> /data/src/octagon/lib/components/FavoriteButton.js
src/components/NotificationItem.jsx -> /data/src/octagon/lib/components/NotificationItem.js
... snip ...
[09:38:00] Finished 'build' after 18 s

dist build successfully
Done in 21.14s.

I wanted to add x-axis data labels to my usage of BarChart, but it doesn't appear to be implemented. Is it possible to add that?

For example, I want a bar chart where each x-value is a text label of a day (Mon, Tue, Wed, etc), and the y-value is some number.

problem statement

SUIR components & incoming custom components create an implicit divide for where devs go for reference content & docs.

solution

• add stories which proxy SUIR docs

// e.g.
.add('suir.menu', () => (
  <iframe src='http://react.semantic-ui.com/elements/menu' style={{width: '100%', height: '100%', position: 'absolute'}} />
))

• namespace suir components differently than custom. both story names & exports

If I add the icon property to this button:

              <Button
                icon
                className='tripwire'>
                Example
                <Icon name='plus' style={{paddingLeft: '0.5em'}} />
              </Button>

then the :active css style is no longer applied. Removing it re-actives the :active style but lays the icon out incorrectly.

problem

we shouldnt ship react

solution

• make react a devDep and a peerDep

https://nodejs.org/en/blog/npm/peer-dependencies/

If I change the y-axis value for a particular data point in the BarChart, the tooltip is rendered off-screen. For example, in the styleguide open up BarChart, show the code, and then change the y-value for the single warning state to 150, then mouseover the yellow/orange warning bar. The tooltip looks like this:

If you increase the y-value to 500, the tooltip is invisible (presumably far off-screen).

Given that the height of the BarChart is fixed (in the demo it's set to 120), I don't think the tooltip placement should be based on the y-value (if that's what is causing the issue).

Card should be able to hold various content and enable an expand collapse. Card itself has no state but expects the implementing component to control the open/closed status of the drawer.

Proposed fragments:
Primary Action - generally a start / stop feature
Title
Secondary Action - generally a management or settings feature
Widget with Label and Value - holds styled label and value
Drawer - enables the expand / collapse functionality of the drawer.

problem statement

this doesn't appear to look right

discussion

• are we sure we want active borders? i've never seen this before

Large card which enables a multiple column view of data. Fragments included:

Action Button - jump to some other view potentially
Close Button
Gutter - color to indicate status
Recent Operations - unordered list of history or some other data
Content - container
Key/Value - formatted key value data and label

let's de-tripwire namespace styles. ui button already indicates that we want to use the loaded SUI theme. ui button tripwire shouldn't be reqd

Fragments TBD

Should handle router active state for n number of menu items

Is there a way to change the font size of the bar chart labels?

using

<BarChart
                    barPadding={0.2}
                    borderRadius={0}
                    data={dataBarChart}
                    height={100}
                    width={this.state.chartWidth}
                    xDataType='date'
                    showXLabel
                    showIcon
                  />

I'm getting:

I'd like to make the font size a bit smaller.

Am I missing something?

I noticed that the mouse icon when hovering over the menu tabs is the text entry cursor rather than the hand pointer.

The BarChartToolTip seems limited in what can be presented in it. We need to display different text and icons, and right now we can only adjust the title of the tooltip. For example, we want to put some icons and different counts inside the tooltip, so even if a bar is presented with the error color, we can describe to a user the counts for normal/warning/error. For example, if the error is just a count of 1, but 50 are normal, that's important to know in the tooltip.

problem statement

• higher-order components currently designed in octagons' consumer packages (i.e. dependents) are context-rich, which:
  • makes great content non-portable between octagon consumers
  • requires custom builds for the consumer

objective

• maximize the unified octagon/TW experience by minimizing context specific DOM. we can achieve a large level of this objective by attempting to import as many higher order as possible.

the primary "risk" is excess octagon components that may have low usage.

the benefits are:

• simple consumer build requirements
• reduced context-rich component size
• reduced context-rich styles

When mousing over the BarChart, it seems that the BarChartToolTip is only displayed when I mouseover the individual bars. If the bar is very small, for example a y-value of 1 compared to other y-values of 80, it's really difficult to mouseover the y-value 1 bar and get the tooltip to show up.

It seems like the total possible area for the bar should be tied to the mouseover, rather than the current filled area for the bar, if that makes sense.

Top navigation bar

Fragments tbd

problem statements

• the semantic-ui npm dependency is unconventional, wherein on update, it modifies our source code in semantic/* paths.
  • this leads to unexpected updates the source while you are working with deps (yah, we could pin it, but we shouldn't have to)
• the semantic-ui npm dependency ships a full build toolchain in semantic/* in the form of gulp and gulp tasks
  • we have to use these gulp tasks to build our CSS, fonts, and small images, as well as watch and build when in dev mode
  • these are heavy, slow, and have to be executed in a separate process

solution path

https://github.com/Semantic-Org/Semantic-UI-LESS

• update our build process to just call less to build a static copy of our theme
• update our styleguide (which is not part of our formal build) to use [less-loader](https://www.npmjs.com/package/less-loader) to build/watch our theme for the styleguide.

problem statement

buttons w/ icons are taller than those without. ref

discussion

is this OK/per-expectation?

When linking to the react-octagon source from a create-react-app generated project, I end out having to add url-loader as a dev dependency to react-octagon. I don't really understand the loading behavior here. :)

see issue here, jestjs/jest#433 (comment)

When examining the size of this bundle in a CRA app that uses octagon it appears that all of SUIR gets included regardless of just how much we end out calling.

This is based on using source-map-explorer. I'd like to know if there's some way to minimize just how much of SUIR we include.

e.g. dont write your own DOM!

@joshuasleeper

ref: https://github.com/Tripwire/octagon/pull/3/files#r101411672

The thin card expand and collapse buttons should have hover colors that match those used in the primary button.

This will entail changing how the draw color to the right of the collapse button is handled since it is separate and captures it's own hover events and we don't want there to be a split between the two segments in that panel.

In both FireFox and Chrome, when I mouseover the BarChart it breaks by collapsing down into one wide column.

Before mouseover:

After mouseover:

Hello, it seems like the button vertical sizes for negative and positive buttons are not the same. So when they are on the same line they look funky.

<Flexbox>
	<Form.Button
	  negative
	  data-hook={`cancel-generate-supervisor-button`}
	  onClick={this.handleClose}>Generate Supervisor
	</Form.Button>
	<Form.Button primary
	  type='submit'
	  disabled={!valid || submitting}
	  data-hook={`generate-supervisor-button`}>Generate Supervisor</Form.Button>
</Flexbox>