{"id":5516,"date":"2023-07-25T16:43:24","date_gmt":"2023-07-25T20:43:24","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5516"},"modified":"2023-08-10T15:20:43","modified_gmt":"2023-08-10T19:20:43","slug":"announcing-ionic-7-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2","title":{"rendered":"Announcing Ionic 7.2"},"content":{"rendered":"\n<p>Hot on the heels of Ionic 7.1 is another great feature release! This release brings updates to Button, Searchbar, and our Angular integration.<\/p>\n\n\n\n<p>Here\u2019s what\u2019s new \ud83d\udc47<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Button Wrapping<\/h2>\n\n\n\n<p>We made some important infrastructure improvements to Button ahead of a change we plan to make in Ionic 8. Buttons with long text currently get cut off, making the text impossible to read. Starting in Ionic 8, long text in Buttons will wrap to the next line instead of getting cut off to improve readability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why is button text going to wrap instead of truncate with ellipsis?<\/h3>\n\n\n\n<p>We collaborated with <a href=\"https:\/\/github.com\/colabottles\">Todd Libby<\/a>, a W3C Invited Expert on Accessibility, to develop a solution for this problem. During development, it was noted that truncating text with ellipsis is not an acceptable solution because the text that is truncated is still not readable even though the button layout may look nicer than it did before. Instead, wrapping the text to the next line fixes the original layout issue while ensuring that the text is readable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why is this behavior not enabled by default?<\/h3>\n\n\n\n<p>During development we identified some instances where this new behavior may cause unexpected layout changes in developer applications. In particular, buttons inside of list headers may wrap instead of displaying on the same line even if the text was never cut off. As a result, we have decided to enable this behavior in Ionic 8.0, so developers can make any necessary changes at their own pace.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I opt-in to this behavior now?<\/h3>\n\n\n\n<p>Ionic 7.2 lays the groundwork for this change with some internal fixes to Button. Developers can enable this wrapping behavior now by setting either the <code>ion-text-wrap<\/code> class on <code>ion-button<\/code> or <code>white-space: normal<\/code> in their CSS.<\/p>\n\n\n\n<p><strong>Using a Class<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;ion-button class=&quot;ion-text-wrap&quot;&gt;Some text with a really long label&lt;\/ion-button&gt;<\/code><\/pre>\n\n\n\n<p><strong>Using CSS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">ion-button {\n\u00a0\u00a0white-space: normal;\n}<\/code><\/pre>\n\n\n\n<p>We have also launched a new accessibility guide on the Button documentation that shows how to opt-in to this behavior: <a href=\"https:\/\/ionicframework.com\/docs\/api\/button#accessibility\">https:\/\/ionicframework.com\/docs\/api\/button#accessibility<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Searchbar Name Property<\/h2>\n\n\n\n<p>Searchbar now has a \u201cname\u201d property to help identify search data when submitting a form.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;ion-searchbar placeholder=&quot;Search for an Artist&quot; name=&quot;artist-search&quot;&gt;&lt;\/ion-searchbar&gt;<\/code><\/pre>\n\n\n\n<p>Thanks to <a href=\"https:\/\/github.com\/NicoDos\">NicoDos<\/a> for contributing this feature!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Angular Route Parameter Binding<\/h2>\n\n\n\n<p>Angular 16 introduced a new feature that lets developers bind route parameters as component inputs. This means that developers can access the parameter for <code>\/my-route\/:id<\/code> by using the <code>@Input<\/code> decorator in the associated component.<\/p>\n\n\n\n<p>Ionic 7.2 adds support for this feature to our Router Outlet component. Developers can use this feature by <a href=\"https:\/\/next.angular.io\/guide\/router#getting-route-information\">updating their router configuration<\/a>.<\/p>\n\n\n\n<p><strong>Opt-in with NgModules<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">RouterModule.forRoot(routes, {\n\u00a0\u00a0\/\/... other features\n\u00a0\u00a0bindToComponentInputs: true\n});<\/code><\/pre>\n\n\n\n<p><strong>Opt-in with Standalone Components<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">provideRouter(appRoutes, withComponentInputBinding());<\/code><\/pre>\n\n\n\n<p>Thanks again to everyone who helped make this latest release possible. We&#8217;ll catch you soon for the next one!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ionic v7.2 is here! This latest release brings updates to Button, Searchbar, and our Angular integration. Read on to learn more!<\/p>\n","protected":false},"author":72,"featured_media":5518,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"12","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"566245","discourse_permalink":"http:\/\/forum.ionicframework.com\/t\/announcing-ionic-7-2\/235144","wpdc_publishing_response":"success","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120],"tags":[23,3],"class_list":["post-5516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-announcements","tag-framework","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing Ionic 7.2 - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Ionic v7.2 is here! This latest release brings updates to Button, Searchbar, and our Angular integration. Read on to learn more!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionic 7.2\" \/>\n<meta property=\"og:description\" content=\"Ionic v7.2 is here! This latest release brings updates to Button, Searchbar, and our Angular integration. Read on to learn more!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-25T20:43:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-10T19:20:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Liam DeBeasi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LiamDeBeasi\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam DeBeasi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2\"},\"author\":{\"name\":\"Liam DeBeasi\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\"},\"headline\":\"Announcing Ionic 7.2\",\"datePublished\":\"2023-07-25T20:43:24+00:00\",\"dateModified\":\"2023-08-10T19:20:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2\"},\"wordCount\":423,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png\",\"keywords\":[\"Framework\",\"Ionic\"],\"articleSection\":[\"All\",\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2\",\"name\":\"Announcing Ionic 7.2 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png\",\"datePublished\":\"2023-07-25T20:43:24+00:00\",\"dateModified\":\"2023-08-10T19:20:43+00:00\",\"description\":\"Ionic v7.2 is here! This latest release brings updates to Button, Searchbar, and our Angular integration. Read on to learn more!\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionic 7.2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\",\"name\":\"Liam DeBeasi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"caption\":\"Liam DeBeasi\"},\"sameAs\":[\"https:\/\/x.com\/LiamDeBeasi\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/liam\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Ionic 7.2 - Ionic Blog","description":"Ionic v7.2 is here! This latest release brings updates to Button, Searchbar, and our Angular integration. Read on to learn more!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionic 7.2","og_description":"Ionic v7.2 is here! This latest release brings updates to Button, Searchbar, and our Angular integration. Read on to learn more!","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2","og_site_name":"Ionic Blog","article_published_time":"2023-07-25T20:43:24+00:00","article_modified_time":"2023-08-10T19:20:43+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png","type":"image\/png"}],"author":"Liam DeBeasi","twitter_card":"summary_large_image","twitter_creator":"@LiamDeBeasi","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Liam DeBeasi","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2"},"author":{"name":"Liam DeBeasi","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa"},"headline":"Announcing Ionic 7.2","datePublished":"2023-07-25T20:43:24+00:00","dateModified":"2023-08-10T19:20:43+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2"},"wordCount":423,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png","keywords":["Framework","Ionic"],"articleSection":["All","Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-7-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2","url":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2","name":"Announcing Ionic 7.2 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png","datePublished":"2023-07-25T20:43:24+00:00","dateModified":"2023-08-10T19:20:43+00:00","description":"Ionic v7.2 is here! This latest release brings updates to Button, Searchbar, and our Angular integration. Read on to learn more!","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-7-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionic 7.2"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa","name":"Liam DeBeasi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","caption":"Liam DeBeasi"},"sameAs":["https:\/\/x.com\/LiamDeBeasi"],"url":"https:\/\/ionic.io\/blog\/author\/liam"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/07\/ionic7.2-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=5516"}],"version-history":[{"count":11,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5516\/revisions"}],"predecessor-version":[{"id":5538,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5516\/revisions\/5538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5518"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}