Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate IconButton and replace its usage with Button #19299

Merged
merged 2 commits into from
Dec 24, 2019

Conversation

youknowriad
Copy link
Contributor

This PR replaces all usage of IconButton by Button in the project and deprecates the IconButton component.

testing instructions

  • Tests should pass.

@youknowriad youknowriad added [Feature] UI Components Impacts or related to the UI component system [Type] Code Quality Issues or PRs that relate to code quality labels Dec 23, 2019
@youknowriad youknowriad self-assigned this Dec 23, 2019
@youknowriad
Copy link
Contributor Author

Is this safe for mobile @hypest @Tug ? the Button component must support the icon prop here.

@@ -1,6 +1,7 @@
/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m on mobile so I can’t do a proper check. Is README file removed? It should as our docs generator will still keep it exposed. Maybe we could remove the folder completely and put the file in deprecated subfolder?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call

@gziolo
Copy link
Member

gziolo commented Dec 23, 2019

Nice one, I wasn’t sure in which direction you would go but seeing this PR, I admit I like it. We should follow up and make similar refactoring for the Toolbar components family 👍

@youknowriad youknowriad added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Dec 24, 2019
@youknowriad youknowriad merged commit 6740bd2 into master Dec 24, 2019
@youknowriad youknowriad deleted the update/deprecate-icon-button branch December 24, 2019 12:48
@gziolo
Copy link
Member

gziolo commented Dec 24, 2019

Great one, thanks for wrangling it 💯

@Soean
Copy link
Member

Soean commented Mar 11, 2020

The IconButton is still in the handbook:
https://developer.wordpress.org/block-editor/components/icon-button/

We need to add the icon prop to the button docs:
https://developer.wordpress.org/block-editor/components/button/

kienstra added a commit to ampproject/amp-wp that referenced this pull request Mar 16, 2020
Use <Button> instead of the now deprecated <IconButton>:
WordPress/gutenberg#19299
The styling here isn't ideal,
but it's the best compromise of all of the scenarios
that I could come up with.
jconroy added a commit to woocommerce/woocommerce-admin that referenced this pull request Mar 25, 2020
jconroy added a commit to woocommerce/woocommerce-admin that referenced this pull request Mar 26, 2020
danielbitzer pushed a commit to woocommerce/woocommerce-admin that referenced this pull request Mar 27, 2020
timmyc pushed a commit to woocommerce/woocommerce-admin that referenced this pull request Mar 28, 2020
* Add Marketing feature flag

* Add marketing page and menu item

* Register marketing page with layout controller

* Add initial marketing cards

* Add max-width to marketing overview page

* Add initial marketing WelcomeCard component

* Make marketing welcome card permanently dismiss

* Add a readme for the marketing page components

* Record tracks event when marketing welcome dismissed

* Match design width

* Add welcome image and initial styles

* Use gridicon for close button

* Fix whitespace

* Add PluginsHelper::get_plugin_data()

* Add initial Marketing\InstalledExtensions class

* Preload installed marketing extensions data

* Tweak extension statuses

* Add InstalledExtensionRow component

* Add initial extension data to InstalledExtensions card

* Refactor PluginsHelper::get_plugin_data method

Using the new get_plugin_path_from_slug method

* Ensure get_plugins() function is available for PluginsHelper

* Simplify using PluginsHelper method

* Add MailChimp configured status logic

* Add links to InstalledExtensionRow component

* Add key prop to extensions list

* Setup styles for InstalledExtensions card

* Display nothing if no installed extensions

* Add InstalledExtensions::get_allowed_plugins()

* Setup Marketing Overview API controller

* Add /activate-plugin marketing endpoint

* Add more extensions URL props

* Add Facebook extension configured status logic

* Update Facebook extension URL props

* Fix extenion data logic

* Move component into it’s own directory

* Setup /marketing/overview/recommended endpoint

* Initial marketing page card header styles

* Add basic extension data to RecommendedExtensions

* Use color as variable

* Tweak card header padding for design

* Add basic styling to RecommendedExtensions card

* settingsUrl is not available if the plugin is not active

* Add /marketing/overview/installed-plugins REST endpoint

* Add basic activation functionality to InstalledExtensions component

* Don’t throw error on success

* Add MVP data store for installed extensions card

* Add core dark blue color variable

* Add styles for installed extensions card

* Move knowledge-base component to its own directory

* Pull recommended marketing plugins from remote test site

* Hide description when configured

As per design

* Tweak colors based on design

* Finish off styling for RecommendedExtensions

* Limit recommended extensions to 6 items

* Add error handling to RecommendedExtensions card

* Rename ‘copy’ extension prop

* Add marketing button component to match design

* Create ProductIcon component for marketing

* Add InstalledExtension icons

* Fix icon image paths

* Add ProductIcon to InstallExtensionRow

* Final styling to installed extensions card row

* Knowledge base card placeholders

* Fix missing icons when plugin not activated

* Remove logging

* Tweak array structure to ensure we have an array in JS

and not an object

* Refactor KnowledgeBase marketing component

- We don’t need loop through every post when rendering, just pick the posts we need
- Remove unused classes

* Move padding from each slide to the container

* Improve slider animations by absolute positioning the slides

* Reduce the slider animation timeout and add a note

* Add in-app purchase flow url params for recommended extensions

* Fix slider animation

* Reset slider height on window resize

* Short slider animation, fix double margin on smaller screens

* Add initial marketing/knowledge-base endpoint

* Pull knowledge base posts from API

* Rename welcome card dismiss tracks event

* Record event on recommended product click

* Recond onclick events for installed extensions card

* Record event when carousel navigation clicked

* img elements must have an alt prop

* Remove import that is never used

* use camelCase

* Decode HTML entities from API call

* Remove unused container div

* Add card loading state

* Add images to knowledge base card

* Link knowledge base posts

* Use the Pagination component rather than duplicate it’s functionality

* Clean up and rename knowledge base slider

* Clean knowledge base CSS and update responsive styles for single post slide

* Add a README for button component

* Add README for product icon component

* Add initial readme for Slider component

* Add correct image sizes to knowledge base slider, finalize styles

* Fix extension link urls

* Resolve some code formatting issue

* Bind class click methods to this

* Wrap nodes in Fragment

* Fix wccom-back path

* Add placeholder author and gravatar

Default avatar url size returned from the API is currently set to 96 so I’ve done a simple replace with 16

* Fix style-lint expected new line

* Add docblock for get_knowledge_base_posts()

* Setup data store for marketing to handle installedExtensions card

* Fix function names

“Activating” not “installing”

* Move welcome card component to its own dir

* IconButton component is going to be deprecated

ref: WordPress/gutenberg#19299

* Support multiple activating plugins in the data store

* Rename extension to plugin for consistency

* Add propTypes to component

* Rename data-store/ to data/

* Fix import paths

* Extract isActivatingPlugin logic into datastore

* Move data store selectors into own file

* POST requests are not cached

* Export apiFetch action

* Don’t wrap API response in object

* Implement data store for recommended extensions

* Implement data store for marketing knowledge base

* Tidy getRecommendedPlugins resolver

* Try a cross browser cover/crop image effect to fit proposed design

And help fit longer titles in

* Add caught errors to handler

* Adjust positioning so watermater is displayed

* InstalledExtensions phpcs fixes

* Marketing phpcs fixes

* Alignment fix

* MarketingOverview phpcs fixes

* Missing full stop

* Update breadcrumbs to use new approach

* Fix style lint issues

* Record `marketing_knowledge_article` track event on knowledge base post click

* Import apiFetch and controls from @wordpress/data-controls

* Hex color to lowercase

* Remove duplicate method after rebase

* Use new showPageArrowsLabel rather than hide with CSS

* Fix blurry avatars on hidpi displays

* Hide avatar if URL is falsy

* Replace test author data with live data

* Combine conditionals into ternary

* Combine conditionals into ternary

* Simplify class column logic

* Only preload option and component settings in the admin

* Fix isActivatingPlugin not updating

Component was not re-rendeding.

* Use querySelector over getElementsByClassName

* Hide Marketing Welcome Card immediately on click

* Use create-a-ticket url for supportUrl and make that the default

* Add getInstalledPlugins resolver with preloaded data

* Revert "Add getInstalledPlugins resolver with preloaded data"

This reverts commit b8b127e.

* Load plugin data in a separate request after activation

* Update welcome image

* Don’t return plugin data in the activation request.

* A space is required before closing bracket

* Update Jest config to gracefully handle static assets

Ref: https://jestjs.io/docs/en/webpack#handling-static-assets

* Remove unused onExit property

* Remove placeholder README

* Use prop directly

* yield createNotice

* Add note to indicate which Category

* Increase transient time to 3 days

* Use $gap-small

* Add proptype

* Add debounce to slider height resize listener

* Clean up isLoading logic

* Dont show image elements if image data is empty

* Open knowledge base posts in a new window

* Add “noreferrer”

* Turn the tab on in all env

Co-authored-by: Daniel Bitzer <[email protected]>
@youknowriad youknowriad removed the Needs Dev Note Requires a developer note for a major WordPress release cycle label Apr 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants