Commit Graph

128 Commits

Author SHA1 Message Date
benignant a8b69be326 Remove declaration that causes incorrect margins
The declaration in question causes notices that are not collapsed and do not have the 'updated' class to have incorrect margins.
2019-06-23 00:35:51 -04:00
Albert Juhé Lluveras 15ecc94252 Fix conflicts with WordPress.com toolbar (https://github.com/woocommerce/woocommerce-admin/pull/2431)
* Fix conflicts with WordPress.com toolbar

* Simplify selector

* Decrease z-index of header

* Remove unnecessary important
2019-06-14 17:48:28 +02:00
Albert Juhé Lluveras 3e0d296646 Fix search bar in Orders page not being tapable on mobile (https://github.com/woocommerce/woocommerce-admin/pull/2384)
* Fix search bar in Orders page not being tapable on mobile

* Cleanup

* Remove unnecessary duplicated media-query

* Cleanup
2019-06-13 18:07:02 +02:00
Jeff Stieler 3f2957dc0d Update new sass variable. 2019-06-12 11:37:13 -06:00
Joshua T Flowers 5e8509edd3 Onboarding: Add profiler body class on initial load + respect skipped/completed flags (https://github.com/woocommerce/woocommerce-admin/pull/2300) (https://github.com/woocommerce/woocommerce-admin/pull/2318)
* Add profiler body class on initial load, and respect skipped/complete status.

* Handle PR feedback: Remove unnecessary global, add some todos, added a filter around the next step slug, generalized the is-loading class a bit.
2019-05-28 06:38:01 -04:00
Jeff Stieler 34b1c19456 Fix reflow on mobile when no alerts are present.
Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>
2019-05-23 11:10:41 -06:00
Jeff Stieler 5fc0f03713 Reduce the top padding for StoreAlerts in mobile. 2019-05-23 10:39:09 -06:00
Albert Juhé Lluveras 37fab0227d Prevent screen meta reflows 2019-05-23 11:43:57 +02:00
Jeff Stieler 9578280423 Move StoreAlerts below screen meta links on embed pages. 2019-05-22 14:59:18 -06:00
Joshua T Flowers 7c5394408d Add onboarding profile wizard step 1 (https://github.com/woocommerce/woocommerce-admin/pull/2260)
* Add onboarding step 1 content

* Add onboarding content styling

* Extract step 1 specific styles to separate stylesheet

* Update muriel box shadow variable names
2019-05-23 00:19:56 +08:00
Joshua T Flowers 633177bdea Update Card component to use Muriel design (https://github.com/woocommerce/woocommerce-admin/pull/2252)
* Use Muriel card styling and override card styles in reports

* Add card description prop

* Add isInactive prop and styling to card component
2019-05-22 16:38:25 +08:00
Justin Shreve acd3f2f9d2 Update Onboarding Colors (https://github.com/woocommerce/woocommerce-admin/pull/2264)
* Update Onboarding Colors

* Bump package version, fix a couple duplicate definitions

* Adjust stroke to match Calypso style
2019-05-21 11:47:18 -04:00
Justin Shreve 416cb60b37 Add vertical and spinner options to the Stepper Component (https://github.com/woocommerce/woocommerce-admin/pull/2255)
* Add a vertical mode to the stepper component, and make some adjustments to the font weights.
Also adds a 'isPending' parameter to show a spinner for the currently active step.

* Handle PR feedback: Fix typo, add some margin to stop bouncing around in horizontal mode, add vertical example to devdocs.

* Fix linter errors
2019-05-20 14:31:03 -04:00
Joshua T Flowers 8f528ee824 Add Stepper component (https://github.com/woocommerce/woocommerce-admin/pull/2246)
* Add Stepper component

* Add Muriel colors as variables

* Add changelog entry for Stepper component
2019-05-17 16:01:40 +08:00
Paul Sealock b4fa697a71 Dashboard: re-arrange section dropdown order 2019-05-15 08:54:03 +12:00
Albert Juhé Lluveras 1c67b40d76 Scroll to top of the table when navigating table pages (https://github.com/woocommerce/woocommerce-admin/pull/2051)
* Scroll to top of the table when navigating table pages

* Cleanup

* Avoid using scroll-padding-top

* Add space between the table top and the scroll point

* Only call  if the page is different

* Move focus to the top of the table when switching pages

* Use CSS variables in the Activity Panel and breadcrumbs CSS (https://github.com/woocommerce/woocommerce-admin/pull/2096)

* Use CSS variables in the Activity Panel and breadcrumbs CSS

* Cleanup

* Focus on table element when navigating pages
2019-04-30 11:43:55 +02:00
Kelly Dwan b98c05c331 Components: Add SearchListControl (https://github.com/woocommerce/woocommerce-admin/pull/1628)
* Add SearchListControl as exported component

* Add entry to changelog (and fix versioning)

* Fix repeating character mixin

* Update textdomain
2019-02-20 15:18:27 -05:00
Tiago Noronha 20aacb4fd8 Remove on hover color from disabled button 2019-02-11 12:54:40 +00:00
Joshua T Flowers b7379def1b Format todo comments to match WC Core format (https://github.com/woocommerce/woocommerce-admin/pull/1474)
* Format todo comments to match WC Core format

* Remove variations todo comment
2019-02-06 14:41:53 +08:00
Paul Sealock c75777cd11 add variable now used in button's scss 2019-01-04 14:00:28 +13:00
Joshua T Flowers 024d267ae6 Set minimum content height to prevent cutoff of absolute content (https://github.com/woocommerce/woocommerce-admin/pull/1166)
* Set minimum content height to prevent cutoff of absolute content

* Add admin bar height vars for SCSS and apply them
2018-12-25 12:34:24 +08:00
Joshua T Flowers 76f3f8605f Add z-index to admin menu wrap to fix menu overlapping (https://github.com/woocommerce/woocommerce-admin/pull/1049) 2018-12-11 08:59:35 +08:00
Justin Shreve 8d4b0fcc07 Fix Activity Panel on existing WooCommerce pages (https://github.com/woocommerce/woocommerce-admin/pull/1004)
* Fix Activity Panel on embedded pages

* Fix comment typo
2018-12-06 17:08:40 -05:00
Albert Juhé Lluveras 8997d4ca26 Update chart breakpoints (https://github.com/woocommerce/woocommerce-admin/pull/838)
* Update chart breakpoints to match the other parts or wc-admin

* Make chart have always the specified height so it matches the legend total label

* Remove obsolete test

* Remove exports no longer needed

* Remove @wordpress/viewport dependency from chart.js

* Update chart docs

* Make tooltipPosition PropType more strict
2018-11-15 09:27:55 -06:00
Kelly Dwan c29043a3bc Switch to using `@wordpress/viewport` for responsive screen layouts (https://github.com/woocommerce/woocommerce-admin/pull/761)
* Switch to Gutenberg viewport package

* Switch CSS breakpoints to core-supported values

* Fix double-calendar logic
2018-11-02 15:20:11 -04:00
Jonathan Belcher b16c056c32 Makes stylelint config match prettier settings (https://github.com/woocommerce/woocommerce-admin/pull/733)
* Makes stylelint config match prettier settings

* Fix/all css lints (https://github.com/woocommerce/woocommerce-admin/pull/734)

* Fix all sass lints!

* Delete settings.json

* Update newline rule, which also conflicts with prettier

* Fix remaining stylelint issues

* Disable stylelint rule for a line to avoid prettier/linter fights
2018-11-01 17:03:00 -04:00
Jonathan Belcher 3446c0814b Stylint autofixes (https://github.com/woocommerce/woocommerce-admin/pull/729) 2018-10-30 09:17:17 -04:00
Paul Sealock 76eb49125e Search: Add inline tags 2018-10-12 11:34:08 +13:00
Jonathan Belcher 3939bc7eb1 Move colours to colour stylesheet 2018-10-10 14:06:13 -04:00
Kelly Dwan f5dd2559db Documentation: Move topic READMEs into docs for discoverability (https://github.com/woocommerce/woocommerce-admin/pull/469)
* Move header/row documentation into the component, so it can be rendered in the external docs

* Move project READMEs into docs folder for exposure in docs site

* Regenerate docs, generate component folder sidebar with component list

* Update format of CSS docs
2018-09-24 11:22:14 -04:00
Paul Sealock 925140fc78 Merge pull request woocommerce/woocommerce-admin#349 from woocommerce/add/advanced-filters-url-support
Advanced Filters: Add url support
2018-09-12 14:31:13 +12:00
Albert Juhé Lluveras 8932f99038 Add fallback gutter for browsers that don't support CSS Custom properties (https://github.com/woocommerce/woocommerce-admin/pull/372) 2018-09-11 09:27:13 +02:00
Paul Sealock 3e7bed27cc Search: move selected from state to props 2018-09-11 16:18:10 +12: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
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
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
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
Robert Elliott 11d6e8ba87 rebase with master after some afk 2018-08-13 12:24:10 +02:00
Kelly Dwan 4669ab9422 Layout: Add the 40px side gutters on 1100px+ screens (https://github.com/woocommerce/woocommerce-admin/pull/282) 2018-08-08 18:11:54 -04:00
Kelly Dwan ddeacb84e5 Move non-reset SCSS to new files, add folder structure (https://github.com/woocommerce/woocommerce-admin/pull/274)
* Move non-reset SCSS to a new file

* Split shared files and “meta” files into two folders

This also creates two new base scss files for the different app vs embedded CSS files

* Move notice & embed-specific css out of reset

* Update README with folder structure notes
2018-08-06 11:30:43 -04:00
Paul Sealock 45231f9049 add theming to Gutenberg components' 2018-08-02 12:25:00 +12: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
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
James Koster 1705087cb4 Merge pull request woocommerce/woocommerce-admin#240 from woocommerce/add/woocommerce-purples
Adds the full range of WooCommerce purples
2018-07-26 16:44:58 +01:00
Justin Shreve dca07063fa Fix WP Notices Tabbing (https://github.com/woocommerce/woocommerce-admin/pull/238) 2018-07-26 09:13:47 -04:00
James Koster 1de11d7a75 Adds the full range of WooCommerce purples 2018-07-26 12:40:50 +01: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
Justin Shreve 0d00e6ef2b Fade in activity panel tabs during page transition (https://github.com/woocommerce/woocommerce-admin/pull/232) 2018-07-24 11:30:53 -04:00
Kelly Dwan 0c845a2852 Activity Panel: Add loading placeholder for ActivityCard, using Inbox as demo (https://github.com/woocommerce/woocommerce-admin/pull/220)
* Mock up an “API response object” for the inbox notices

* Add in a fake “loading” delay

* Add placeholder mixin from Calypso

* Add a placeholder ActivityCard and styles

* Merge exports of placeholder into ActivityCard

* Add tests for placeholder card

* Update readme

* Switch placeholder content prop to a line count, rather than specific children

* Update tests for new lines prop

* Clear timeout when the inbox unmounts

* Add a test for 0 lines
2018-07-20 14:41:39 -04: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 9cc4e1b97a Add Order Status Component (https://github.com/woocommerce/woocommerce-admin/pull/214) 2018-07-17 09:11:13 -04:00
Kelly Dwan 9fca535c67 Update ActivityCard to latest hifi designs (https://github.com/woocommerce/woocommerce-admin/pull/203)
* ActivityCard: Update to match new activity panel designs

* Add spacing rhythm system, add the rest of the base colors

* Add styles for the ActivityCard

* Use the new ActivityCard in the orders panel

* Update text color & size

* Disable timestamped test (string changes based on date)

* Use moment to generate a relative timestamp to match “3 days ago” snapshot

* Rename spacing vars

The difference between gap and gap-med is not intuitive, so let’s switch to -small, and change -small to -smallest.
2018-07-16 09:53:38 -04:00
Justin Shreve 803136ca9a Fixes some display issues on embedded/classic WC pages (https://github.com/woocommerce/woocommerce-admin/pull/186) 2018-07-13 15:19:54 -04:00
Justin Shreve 71c12e6795 Update woo-dash naming to new wc-admin name (https://github.com/woocommerce/woocommerce-admin/pull/183) 2018-07-10 08:48:06 -04:00
Justin Shreve 3783e5e6f7 Add ActivityHeader & implement panel styles (https://github.com/woocommerce/woocommerce-admin/pull/167)
* Header shadow on scroll, panel styles, implement woo bubble

* Add ActivityHeader component

* Fix admin bar stickyness and missing onInvoke function
2018-07-09 11:46:31 -04:00
Justin Shreve f0c27ee999 Activity Panel: Unread bubble, animations, cleaned up styles/mobile handling (https://github.com/woocommerce/woocommerce-admin/pull/154)
* Activity Panel Updates: Unread bubble, animations, cleaned up styles and mobile handling.

* * Color and animation definition cleanup
* Fix animation for tab switch
* Clicking outside the panel will close it
* Hover bubble border
* Aria attributes/tablist

* Fix mobile styles
2018-07-06 08:40:05 -04:00
Paul Sealock a4305347ce Datepicker: Add styles 2018-07-03 11:41:38 +12:00
Justin Shreve 9f1015b155 Implement updated activity panel tab design (https://github.com/woocommerce/woocommerce-admin/pull/137) 2018-06-29 11:20:08 -04:00
Justin Shreve d604f3625c Rename sidebar to activity-panel, and refactor code and behavior. 2018-06-28 09:52:45 -04:00
Justin Shreve ba68ada59d Add Pagination Component (https://github.com/woocommerce/woocommerce-admin/pull/117)
* Add pagination component

* Refactor query string/route updating so it can be done using a nav-utils helper function

* Fix typo and adjust accessibility attributes for error handling and current page

* Update styles
2018-06-26 10:59:35 -04:00
Justin Shreve bf80e5c649 Global Header & Activity Panel on all WooCommerce Pages (https://github.com/woocommerce/woocommerce-admin/pull/110)
* Makes the header/sidebar component embeddable on other WooCommerce pages.

* Some mobile CSS fixes to make sure the header bar displays properly on smaller screensizes.

* Refactor notices and pull out success message from the panel

* Handle positioning of screen options, update message handling, css fixes and header height increase to match mockups, some code cleanup

* Only enable the header embed on normal/classic WooCommerce pages, and provide a method for plugins to opt-in.
This change also builds nicer breadcrumbs for pages.

* Code cleanup and consistent naming.

* Some spacing cleanup. Also updated the page title method to correctly set page titles in PHP for classic WC pages
2018-06-26 10:49:42 -04:00
Kelly Dwan bc084b7302 Add Summary Number/Performance Tile component (https://github.com/woocommerce/woocommerce-admin/pull/109)
* Add SummaryList and SummaryNumber components

* Add a demo of SummaryList/SummaryNumbers

* Pages without the sidebar displayed can use a larger max-width

* Adjust layout styles for smaller screens
2018-06-14 11:16:57 -04:00
Justin Shreve 59cb071aa2 Expand WP notices with header toggle (https://github.com/woocommerce/woocommerce-admin/pull/101)
* Display WP notices behind a button

* Expand WP notices inline when the WP toggle is clicked

* Update setState calls

* Fix string display when only 1 notice is present

* Remove display:none that snuck in during rebase
2018-06-04 10:25:41 -04:00
Kelly Dwan b0bcce86d8 Add CSS naming conventions following Gutenberg’s standards (https://github.com/woocommerce/woocommerce-admin/pull/99)
* Add CSS naming conventions following Gutenberg’s standards

* Update `woo-dashboard` to `woocommerce-layout`

* Update admin notice container to new classname standard
2018-06-01 10:35:18 -04:00
Kelly Dwan 4191d7adab Add ActivityCard component (https://github.com/woocommerce/woocommerce-admin/pull/86)
* Add an ActivityCard component

* Add font-size mixin, hover-state mixin, and a fake base padding

* Style the ActivityCard

* Style the card image

* Add README

* Address PR feedback

- Add className prop
- children propType is required
- Link to a real image
2018-05-25 15:34:35 -04:00
Paul Sealock ee5e314668 Merge pull request woocommerce/woocommerce-admin#63 from woocommerce/add/segmented-selection
Component: add segmented selection
2018-05-24 11:19:21 +12:00
Paul Sealock 631ce420a4 Component: add segmented selection 2018-05-24 11:14:19 +12:00
Justin Shreve ab4b0b16ed Fix notifications JS error & masterbar menu CSS (https://github.com/woocommerce/woocommerce-admin/pull/74) 2018-05-23 12:40:10 -04:00
Paul Sealock 558d163f35 Sidebar: Add Tabs 2018-05-23 12:42:26 +12:00
Justin Shreve d47454300a Add timeline separator/heading to the sidebar (https://github.com/woocommerce/woocommerce-admin/pull/71)
* Add a timeline separator to the sidebar.

* Rename Timeline/Separator to SidebarHeader
2018-05-22 16:15:00 -04:00
Justin Shreve 7b0d0b1fed Update wp-admin navigation structure (https://github.com/woocommerce/woocommerce-admin/pull/70)
* Updates wp-admin navigation structure: Dashboard is now under WooCommerce, and Analytics is moved visually under WooCommerce

* Fix focus padding issue and make sure arrow displays for the current submenu
2018-05-22 15:59:32 -04:00
Justin Shreve d4ade607d8 Add agenda widget base and related components (https://github.com/woocommerce/woocommerce-admin/pull/57)
* Add agenda widget with accordion

* Add AgendaItem, README, and do some cleanup

* Handle PR Feedback: Rename AgendaAccordion to AgendaGroup, accept an href prop for a non-accordion state. Accept onClick or href for AgendaItem, a11y fixes, fix some typos, update examples & README.

* Address PR Feedback: Rename AgendaGroup to AgenaHeader, use a direct link for href mode, use IconButton instead of Button & Dashicon, pull out link rendering to its own method. Use <Link /> for app links.

* Combine box-shadow focus/hover rule and add transparent background

* Make `count` optional
2018-05-22 11:19:56 -04:00
Kelly Dwan 8f23630269 Layout: Add structure components & CSS (https://github.com/woocommerce/woocommerce-admin/pull/45)
* Refactor dashboard layout into new Layout components

* Style the new layout

* Use Slot/Fill for the Header component

* Center cards, fixed size for sidebar

* Only set the box-sizing on things within our app

* Make app the full height of the wp-admin frame

* Add styles to show/hide sidebar

* Toggle the sidebar

* Wrap router around entire Layout, use page setting to show/hide sidebar on page

* Fix the styles on show/hide buttons, add title & close button to the sidebar

* Use a min-height on visible sidebars

* Add/update READMEs

* Update space between main content & sidebar
2018-05-18 13:31:08 -04:00
Justin Shreve 881598fa30 Fix mobile menu and header padding (https://github.com/woocommerce/woocommerce-admin/pull/52)
* Fixes mobile menu and padding for dash pages

* Handle PR feedback
2018-05-15 15:26:07 -04:00
Kelly Dwan 146547cb1d Components: Add EllipsisMenu component (https://github.com/woocommerce/woocommerce-admin/pull/40)
* Add EllipsisMenu & MenuItem

* Add styles for menu items

* Don’t disable all keyboard interactions

Was breaking tab

* Move EllipsisMenu to client folder

* Clean up unused props & focus state

* Add an unfocusable MenuTitle component

* Update EllipsisMenu exports so that all menu-related components can be pulled from EllipsisMenu

* Make strings translatable

Even demo content should use translation functions :)

* Add README

* Fix arrow position

* Add box-sizing back to global reset
2018-05-14 11:47:42 -04:00
Justin Shreve d7df8ed76e Adds SCSS color variables and breakpoints (https://github.com/woocommerce/woocommerce-admin/pull/39)
* Adds SCSS color variables and breakpoint mixins

* Use webpack to pull in shared CSS

* Move notices reset rule to wpadmin-reset

* Prefix breakpoints, colors, and wpadmin reset
2018-05-14 09:41:30 -04:00