Commit Graph

204 Commits

Author SHA1 Message Date
Robert Elliott 74514a2b48 Merge pull request woocommerce/woocommerce-admin#350 from woocommerce/fix/chart-design-feedback
Merging this.

@LevinMedia please continue to post additional issues or comments on the master thread woocommerce/woocommerce-admin#164
2018-09-07 14:54:58 +02:00
Robert Elliott 91a8a9eec3 improve jsdoc and remove Math.round() 2018-09-07 14:48:07 +02:00
Robert Elliott 1ed72ede25 colour -> color 2018-09-07 14:45:29 +02:00
Robert Elliott 8829498466 set d3 local and update number format 2018-09-07 14:39:35 +02:00
Robert Elliott 9e4062c51f set d3 local and update number format 2018-09-07 14:39:31 +02:00
Robert Elliott 90cb4ba6c8 fix vertical line on hover 2018-09-07 12:41:40 +02:00
Robert Elliott a8449b08c0 left align y-axis text 2018-09-07 12:28:02 +02:00
Albert Juhé Lluveras f12f431a2b Fix Date filters grid not displaying correctly in IE11 (https://github.com/woocommerce/woocommerce-admin/pull/366) 2018-09-07 11:43:52 +02:00
Robert Elliott 233c7755f7 hover confusion 2018-09-07 11:21:52 +02:00
Robert Elliott 58efdd90c0 massaging y ticks and updating tests 2018-09-06 18:21:33 +02:00
Robert Elliott 709e5a2896 header legend hover styling 2018-09-06 18:21:33 +02:00
Robert Elliott 7dd2883f56 tooltip formatting 2018-09-06 18:21:31 +02:00
Robert Elliott 93aae38b8a pipes, months, formatting 2018-09-06 18:15:08 +02:00
Robert Elliott c11da940e2 if legend item unchecked no hover status
modified:   client/components/chart/legend.js
	modified:   client/components/chart/style.scss
	modified:   package-lock.json
2018-09-06 18:15:08 +02:00
Robert Elliott 2df9b05b5f Merge pull request woocommerce/woocommerce-admin#360 from woocommerce/add/chart-intervals
Chart Component: Add/chart intervals
2018-09-06 18:10:37 +02:00
Robert Elliott 0f66375b88 updated from feedback 2018-09-06 17:58:24 +02:00
Albert Juhé Lluveras 090ecf3a8a IE11: fix CSS grid in Summary (https://github.com/woocommerce/woocommerce-admin/pull/353)
* Fix Summary values not visible with IE11

* Fix Summary grid for IE11

* Move grid position mixin to _mixins file, so it can be used for other elements

* Remove set-grid-positions mixin and improve code understandability
2018-09-06 17:11:34 +02:00
Robert Elliott fddeb2502c exmple-hour update 2018-09-06 11:40:29 +02:00
Robert Elliott 0ad4b9a312 updated tests with latest date format 2018-09-06 11:12:03 +02:00
Robert Elliott b73f2ba47d updated README 2018-09-05 23:22:34 +02:00
Robert Elliott 964a43b674 x, y and tooltip formatting 2018-09-05 23:02:13 +02:00
Justin Shreve f5479e1c18 Add loading indicators, error state, and EmptyContent to the revenue report. (#347, woocommerce/woocommerce-admin#348)
* Add loading indiciators for the revenue report.

* Improve accessibility, and fix up some documentation comments.

* Fix top border on mobile

* Add EmptyContent Component and revenue error/empty states. (https://github.com/woocommerce/woocommerce-admin/pull/348)

* Add EmptyContent Component and revenue error/empty states.

* Move relative image handling to ImageAsset, combine secondary and primary action rendering, add some missing isRequired proptypes, add empty error handling.

* Handle PR Feedback: Clean up button css, set a default for illustration, fix deprecation typo, some code cleanup.
2018-09-05 12:45:49 -04:00
Paul Sealock ab97ed02c7 Search: move selected from state to props 2018-09-04 12:02:40 +12:00
Justin Shreve 4e2661f3f1 Connect the revenue report to the api (https://github.com/woocommerce/woocommerce-admin/pull/316) 2018-09-03 11:25:38 -04:00
Albert Juhé Lluveras e94ae40d4d Use native Array.isArray() instead of lodash function (https://github.com/woocommerce/woocommerce-admin/pull/346) 2018-09-03 17:09:09 +02:00
Kelly Dwan d36511479e Docs Project: Add documentation parser + inline documentation (https://github.com/woocommerce/woocommerce-admin/pull/336)
* Switch all components to default exports

This ensures we can read all components for documentation generation (plus, standardizing is good)

* Add documentation to component file

* Fix table exports

* Move readme docs into inline docs

Includes updating new props, adding prop shapes

* Add doc-generation scripts to pull exported component docs into folder

* Remove key propType, causing react special-keys warning

* Fix proptype

* Update incorrect comment

* Remove template import, we can just use string concat

* Fix typo, update docs
2018-08-31 13:27:21 -04:00
Kelly Dwan 7711da472a Docs Project: Component cleanup (https://github.com/woocommerce/woocommerce-admin/pull/334)
* Validate component with helper function

Fixes compat issue with react-docgen

* Switch all components to default exports

This ensures we can read all components for documentation generation (plus, standardizing is good)

* inValidDays -> invalidDays

Invalid is a single word, so by capitalization rules the V should be lowercase

* Export child-components of Chart

* Fix table exports
2018-08-31 13:19:13 -04:00
David Levin 4ee6becb6d Merge pull request woocommerce/woocommerce-admin#335 from woocommerce/update/mobile-card-styles
Update Card Component Styles on Mobile
2018-08-31 07:55:35 -07:00
Albert Juhé Lluveras 3dcb1339b3 Create TablePlaceholder component to be used when table contents are loading (https://github.com/woocommerce/woocommerce-admin/pull/338) 2018-08-31 16:43:25 +02:00
David Levin 808c49fd4e Merge pull request woocommerce/woocommerce-admin#332 from woocommerce/update/319-datepicker-design-details
updating datepicker styles
2018-08-30 16:33:07 -07:00
David Levin ea672cdedb update mobile card styles 2018-08-30 16:02:12 -07:00
Paul Sealock 89f5057d58 Hide react-dates container 1px 2018-08-31 09:53:25 +12:00
Paul Sealock dea96a02c5 Merge pull request woocommerce/woocommerce-admin#325 from woocommerce/fix/popover-in-popover
DatePicker: Fix Error message positioning on non-mobile widths
2018-08-31 09:30:40 +12:00
Paul Sealock 4580fc453e Merge pull request woocommerce/woocommerce-admin#324 from woocommerce/fix/invalid-date-error-msg
DaptePicker: fix erorr message popover
2018-08-31 09:29:23 +12:00
Paul Sealock 431caff91f Datepicker: change Reset btn to default style 2018-08-30 11:07:34 +12:00
Paul Sealock f48fdd2dea Segmented-selection: remove focus outline in favor of inset box-shadow 2018-08-30 08:21:59 +12:00
David Levin a44d94c7d5 updating datepicker styles 2018-08-29 09:11:35 -07:00
Paul Sealock f6ca6ad366 uncomment code 2018-08-29 16:05:01 +12:00
Paul Sealock 349f8e9d91 Datepicker: use negative margin on popover to avoid creating a new position context 2018-08-29 16:02:16 +12:00
Paul Sealock cddb65813b uncomment needed code 2018-08-29 15:03:55 +12:00
Paul Sealock aae27050b4 set width expl 2018-08-29 15:03:20 +12:00
Paul Sealock e137f7af60 DaptePicker: fix erorr message popover 2018-08-29 14:50:34 +12:00
Kelly Dwan e19aff2169 Components: Add a search component based on Autocomplete (https://github.com/woocommerce/woocommerce-admin/pull/322)
* Add `Search` & `Tag` components

* Fork the Autocomplete component to support a single completer & input field

* Add results inline, not as popover

* Highlight search term in results list

* Check if the item is already selected

* Update docs

* Remove unused properties

* Remove temporary max-width

Once merged, we can tweak real styles

* Use stringifyQuery
2018-08-28 15:15:24 -04:00
David Levin c06c3b0cef Merge pull request woocommerce/woocommerce-admin#318 from woocommerce/update/datepicker-styles-updates
Updates to presets / custom toggle and segmented selection
2018-08-23 12:15:59 -07:00
David Levin c39e6f1edb style updates per review 2018-08-23 11:21:04 -07:00
Kelly Dwan d007105ec1 Animation mixin + add `prefers-reduced-motion` support to existing animations (https://github.com/woocommerce/woocommerce-admin/pull/317)
* Add mixin to control transform animation

* Add `prefers-reduced-motion` support to animations

* Fix duration variable
2018-08-23 13:47:27 -04:00
David Levin c835432c88 Updates to segmented selection and presets / custom toggle 2018-08-22 19:07:19 -07:00
Kelly Dwan 4b30e78ae6 Filters: Remove `filterpaths` props (https://github.com/woocommerce/woocommerce-admin/pull/315)
* Filters: Remove filterPaths, add path as property to filters object

* Set a default path, so we only need to configure it for changed paths

* Fix nav & filter fetching for nested lists

* Add “go back” functionality to all subfilter lists, not only ones with components set

* Make label optional on component options

* Update documentation to remove mention of filterpaths

* Add documentation on the filters structure
2018-08-22 16:20:19 -04:00
Kelly Dwan 14e4aa11dd Fix the summaryNumber display when in toggle-button state (https://github.com/woocommerce/woocommerce-admin/pull/313)
* Fix the summaryNumber display when in toggle-button state

* Fix right border
2018-08-22 14:08:48 -04:00
David Levin f9eea91eed Add transition to chevron 2018-08-22 07:50:10 -07:00
David Levin ad5e661f8a Updated dropdown button styles 2018-08-21 21:44:01 -07:00
Kelly Dwan f36d89cfaf Add path & query back to filter props (https://github.com/woocommerce/woocommerce-admin/pull/308) 2018-08-21 15:03:20 -04:00
Kelly Dwan dec97d178e Components: Export reusable components to a separate file + global (https://github.com/woocommerce/woocommerce-admin/pull/297)
* Importing all components from a root components file

* Update Ratings component to avoid circular dependencies, fix tests

* Export components on `wc.components`, use this for importing

* Move react-dates initialize to the components file

* Push query changes to history

Fixes an issues where native a links do not update the query in `history`

* Update test config for new @woocommerce/components path

* Update chart components import

* Merge simple/complex & alphabetize by first exported name

* Add a readme with info about how to call these components
2018-08-20 17:18:13 -04:00
Kelly Dwan 0286bd9109 Apply scope only to the row headers (https://github.com/woocommerce/woocommerce-admin/pull/300) 2018-08-16 10:37:10 -04:00
Robert Elliott 410104a5cd Merge pull request woocommerce/woocommerce-admin#291 from woocommerce/add/chart-title
D3 Chart Component: add title
2018-08-15 09:24:30 +02:00
Kelly Dwan c16be4d061 Add ReportFilters Component
Add new function to merge query params into a given path

Add a new ReportFilter component, which extracts the date picker & filter picker

Add basic framework for product search

Add new AdvancedFilter to filter options

Remove duplicate CSS

Use library function for merging new query+path

Move filters folder out of reports

Use filter constant

Add README

Add path & query helper functions

Move filters into component folder

Switch to getPath/getQuery helpers

Update classes & merge styles

Remove query/path from READMEs

Add a readme to nav-utils
2018-08-15 11:15:30 +12:00
Justin Shreve d4751e2c73 Fix Column Toggle Error (https://github.com/woocommerce/woocommerce-admin/pull/296)
* Fix column toggle error

* Use rows prop from props, preventing unnecessary re-rendering
2018-08-14 12:43:35 -04:00
Kelly Dwan ff8217165d Table: Update style to match design (https://github.com/woocommerce/woocommerce-admin/pull/289)
* Table: Add a hover state for rows

* Expand target area for table links to take over entire cell

* Add a purple link style for default links

* Increase contrast for links-on-hover-color

* Add “isNumeric” column identifier & right-align these cols
2018-08-13 11:25:32 -04:00
Kelly Dwan 2b92b62ccd SummaryNumber: Update style of dropdown on smaller screens (https://github.com/woocommerce/woocommerce-admin/pull/288)
* Update style of dropdown on smaller screens

* Switch chevron orientation when dropdown is open

* Update font size/spacing in the dropdown

* animate the chevron
2018-08-13 11:25:11 -04:00
Kelly Dwan 9d19bc66c0 Layout: Fix spacing on Card component (https://github.com/woocommerce/woocommerce-admin/pull/283) 2018-08-13 11:24:48 -04:00
Robert Elliott 662c36e5e7 use gap 2018-08-13 13:27:15 +02:00
Robert Elliott f08a724f48 add title 2018-08-13 13:09:44 +02:00
Robert Elliott 9b9dbde858 bg button for safari and right margin 2018-08-13 12:32:08 +02:00
Robert Elliott 3c9b5dd166 fix some testy black hole color scale oddities 2018-08-13 12:24:11 +02:00
Robert Elliott fd97d03317 rescale based on selections 2018-08-13 12:24:10 +02:00
Robert Elliott 11d6e8ba87 rebase with master after some afk 2018-08-13 12:24:10 +02:00
Robert Elliott da5d6600e5 move to getderivedstate 2018-08-13 12:24:09 +02:00
Robert Elliott bbc7e13e3e split out example.js and index for component 2018-08-13 12:23:50 +02:00
Robert Elliott 0c7d016629 D3 Chart Component: split out example + index and handle full-width 2018-08-13 12:22:58 +02:00
Paul Sealock b427249aa1 Advanced Filters: add card and config 2018-08-09 12:16:46 +12:00
Kelly Dwan 4c2797d6cf Table: Add "required"/"sortable" meta to headers/columns (https://github.com/woocommerce/woocommerce-admin/pull/275)
* Switch headers to an object, use `header.label` to display title

* Change sort function to update a query param

* Clean up README

* Get the currently sorted column from the query

* Don’t allow toggling of required columns

* Add in direction-sorting (ascending/descending)

* Switch to aria-describedby so that the actual column name is read aloud

* Fix chevron orientation

* Handle hiding a sorted column

* Fall back to sorting by first item if no defaultSort col is set

* Fix arrow orientation again

* Update order_by to orderby to match wp_query param name
2018-08-06 13:01:41 -04:00
Kelly Dwan a4267202c5 Update TableCard component to handle toggling on/off specific columns (https://github.com/woocommerce/woocommerce-admin/pull/268) 2018-08-02 18:21:37 -04:00
Kelly Dwan 6a82db326e SummaryNumber: Switch to dropdown display on small screens (https://github.com/woocommerce/woocommerce-admin/pull/265)
* Move isMobileViewport to a helper function in lib

* Switch SummaryList to use navigable menu to support up/down (or left/right) arrow key navigation

* Switch to a dropdown menu/button combo when on a smaller screen

* Ensure aria role & href are only added if the item is a link

* Wrap the entire SummaryNumber in a link to match non-mobile use

* Update card content to be single line on mobile

* Add label to the popover title

* Make SummaryNumbers edge-to-edge on smaller screens

* Switch to the collapsed/dropdown view on screens <1100px

* Adjust offset of arrow icon
2018-08-02 18:20:48 -04:00
Paul Sealock 45231f9049 add theming to Gutenberg components' 2018-08-02 12:25:00 +12:00
Timmy Crawford 64b3f99649 Merge pull request woocommerce/woocommerce-admin#253 from woocommerce/fix/pagination-input
Pagination: Fix page input bug.
2018-08-01 13:36:17 -07:00
Timmy Crawford 2e3788a862 Verify the page number exists. 2018-08-01 11:51:11 -07:00
Kelly Dwan 8141a9f66d Update/table component (https://github.com/woocommerce/woocommerce-admin/pull/251)
* Update mock data to reflect latest API format

* Update Table component to create a TableCard, TableSummary, and plain Table

Use the TableCard container to display mocked revenue data

* Add horizontal scroll only on the table itself

* Remove `sortable` prop, base column sortability on whether the `value` is true/false

Checking against a strict false should prevent any real 0 or ‘’ values from triggering unsortability

* Add a checkbox to the demo table

* Update accepted props

* Update README for TableCard, Table, and TableSummary

* Update README

* Fix confused defaults
2018-08-01 12:00:45 -04:00
Justin Shreve d346945702 Add Collapsed Review View (https://github.com/woocommerce/woocommerce-admin/pull/242)
* Add Collapsed Review View

* Fix spacing issue on main button action
2018-08-01 08:21:51 -04:00
Timmy Crawford f93421c750 Ensure NaN doesn't sneak in there. 2018-07-31 09:38:24 -07:00
Paul Sealock 735dfcd272 Merge pull request woocommerce/woocommerce-admin#239 from woocommerce/fix/calendar-component
Datepicker: Refactor Calendar to fully controlled component
2018-07-31 11:10:20 +12:00
Timmy Crawford d373599f8a Pagination: Fix page input bug. 2018-07-30 16:08:13 -07:00
Kelly Dwan 727654ff3b SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237)
* Add first pass + demo of updated SummaryNumber

* Add new larger screen breakpoint

* Remove the max-width from the content wrapper

* Update previous label text

* Fix the border colors/sizing

* Create a mixin to generate the grid template pattern

* Add green/red colors based on trend, with prop to reverse

In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green

* Move selected number containers up to avoid the double-border

* Document className logic, and apply 10-item layout to all cases of 10+ items

* Remove layout notes

* Update component docs, clean up optional displays

* Update style of SummaryNumbers inside cards

* Filter out any `false` or otherwise unrenderable children

* Fix card borders

* Update dashboard component to use new props

* Check that prevValue is defined

a prevValue of 0 was incorrectly outputting `0` for both label and value

* Update no-change datapoint style

* Update default data values

Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders

* Change SummaryList & SummaryNumber to a list of links

Add active, hover, and focus styles

* Add a short help text for screen reader users

* Add href to README

* Add the href prop to the readme example

* Fix border colors

The `nth-of-type` rules need to be on the `li` containers

* Fix font-weights on value & delta

* Wrap the previous label/value when the percentage wraps
2018-07-30 11:14:09 -04:00
Paul Sealock 0df86cb6f6 Datepicker: Refactor Calendar to fully controlled component 2018-07-30 11:11:52 +12:00
Paul Sealock 1c447396c8 Datepicker: Custom: Add styles 2018-07-30 10:36:38 +12:00
Robert Elliott 7a6a82c6af Merge pull request woocommerce/woocommerce-admin#189 from woocommerce/add/chart-legend
D3 Chart: legend component and integration

Thanks for the great feedback. I've made updates and will address a few of the styling (and remove code used for testing) in future PRs. Keep an eye on https://github.com/woocommerce/wc-admin/issues/164 for future work planned on this component.
2018-07-25 17:08:59 +02:00
Robert Elliott 2c78dfb3cc feedback updates and tooltip 2018-07-25 17:04:21 +02:00
Robert Elliott dd663e0cd9 init for legends PR
updates from feedback
2018-07-25 17:04:03 +02:00
Justin Shreve ff934eb999 Add SplitButton Component (https://github.com/woocommerce/woocommerce-admin/pull/236)
* Add SplitButton component

* Update primary styles and focus border
2018-07-25 10:25:08 -04:00
Kelly Dwan 944b7ab460 Update to Gutenberg 3.3 (https://github.com/woocommerce/woocommerce-admin/pull/234)
Removes Gutenberg package dependency in favor of published sub-packages, update tests and build process to reflect new package locations
2018-07-23 16:14:40 -04:00
Justin Shreve c587ca94dc Add rating components (https://github.com/woocommerce/woocommerce-admin/pull/233)
* Add rating component

* Add ProductRating, ReviewRating components.
Add tests.
2018-07-23 09:19:24 -04:00
Paul Sealock 11b30baa6f Merge pull request woocommerce/woocommerce-admin#226 from woocommerce/add/filter-picker-animation
Components: Filter picker: Add animation
2018-07-23 10:03:35 +12:00
Justin Shreve dabef973bd Add ProductImage Component (https://github.com/woocommerce/woocommerce-admin/pull/231)
* Add ProductImage Component

* Use provided product image alt text
2018-07-20 14:24:39 -04:00
Paul Sealock 186c803c31 FilterPicker: Add Animation 2018-07-20 15:42:36 +12:00
Justin Shreve 22028283ef Add Activity Panel Outbound Link Component (https://github.com/woocommerce/woocommerce-admin/pull/213)
* Activity Panel Outbound Link

* Address PR Feedback: Pass through additional props on ActivityOutboundLink, add comment for activity panel wrapping padding, fix README naming, and use $gap $gutter trick for outbound link padding.
2018-07-17 14:51:56 -04:00
Justin Shreve 6abcbbdc87 Fix key prop warning in FilterPicker (https://github.com/woocommerce/woocommerce-admin/pull/221) 2018-07-17 14:38:58 -04:00
Justin Shreve 9cc4e1b97a Add Order Status Component (https://github.com/woocommerce/woocommerce-admin/pull/214) 2018-07-17 09:11:13 -04:00
Paul Sealock 31c055fd57 Component: Filter Picker 2018-07-17 12:25:00 +12:00
Justin Shreve dd98f925ef Add Flag Component (https://github.com/woocommerce/woocommerce-admin/pull/197)
* Add Flag Component

* Fix for travis ci

* Fix spacing with new card layout
2018-07-16 12:28:26 -04:00
Paul Sealock 9af766fe80 Datepicker: fix getCurrentDates to always reflect defaults 2018-07-14 22:27:55 +12:00
Kelly Dwan 96925f77fa Component: Fix rows prop in Table (https://github.com/woocommerce/woocommerce-admin/pull/193)
* Move component lifecycle method to top of component

* Update rows if the rows passed in via props have changed

This lets us bring in API changes, but will wipe out any sorting (revisit in a later PR, perhaps)

* Pass rows through to Table even if we don’t have rows loaded yet

Adds todo comment to remind that we should come back to add a placeholder/loading state
2018-07-13 15:36:41 -04:00