Remove the iui-anchor mixin. (#1915)

Co-authored-by: Mayank <[email protected]>

.changeset/green-cheetahs-rush.md

@@ -0,0 +1,11 @@
+---
+"@itwin/itwinui-css": minor
+---
+
+`iui-anchor` can now be styled with status colors using a new `data-iui-status` attribute.
+
+```html
+<a class="iui-anchor" data-iui-status="negative">...</a>
+```
+
+Possible values include: `"positive"`, `"negative"`, `"informational"`, and `"warning"`.

.changeset/lemon-avocados-change.md

@@ -0,0 +1,34 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`iui-anchor` must now be explicitly added to `<a>` elements, in addition to the previous `iui-alert-link`, `iui-breadcrumbs-content`, `iui-tag-basic`, and `iui-toast-anchor` classes.
+
+```diff
+-<a class="iui-alert-link">
++<a class="iui-anchor iui-alert-link">
+```
+
+```diff
+-<a class="iui-breadcrumbs-content">
++<a class="iui-anchor iui-breadcrumbs-content">
+```
+
+```diff
+-<a class="iui-tag-basic">
++<a class="iui-anchor iui-tag-basic">
+```
+
+```diff
+-<a class="iui-toast-anchor">
++<a class="iui-anchor iui-toast-anchor">
+```
+
+Additionally, all `<a>` elements within `iui-legal-footer` elements will need the `iui-anchor` class.
+
+```diff
+<li class="iui-legal-footer-item">
+- <a>...</a>
++ <a class="iui-anchor>...</a>
+</li>
+```

apps/css-workshop/pages/alert.html

@@ -67,8 +67,10 @@ <h1>Alert</h1>
         ></svg-info-circular>
         <span class="iui-alert-message">Informational message.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="informational"
           >Learn more</a>
         </span>
         <button
@@ -96,8 +98,10 @@ <h1>Alert</h1>
         ></svg-status-success>
         <span class="iui-alert-message">Positive message.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="positive"
           >Learn more</a>
         </span>
         <button
@@ -125,8 +129,10 @@ <h1>Alert</h1>
         ></svg-status-warning>
         <span class="iui-alert-message">Warning message.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="warning"
           >Learn more</a>
         </span>
         <button
@@ -155,8 +161,10 @@ <h1>Alert</h1>
         ></svg-status-error>
         <span class="iui-alert-message">Negative message.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="negative"
           >Learn more</a>
         </span>
         <button
@@ -190,8 +198,10 @@ <h1>Alert</h1>
           est
           laborum.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="informational"
           >Learn more</a>
         </span>
         <button
@@ -224,8 +234,10 @@ <h1>Alert</h1>
           ></svg-info-circular>
           <span class="iui-alert-message">This is a sticky alert.
             <a
-              class="iui-alert-link"
+              class="iui-anchor iui-alert-link"
               href="#"
+              data-iui-status="informational"
+              data-iui-underline="true"
             >Learn more</a>
           </span>
           <button

apps/css-workshop/pages/breadcrumbs.html

@@ -67,7 +67,7 @@ <h2>Breadcrumbs anchor</h2>
         <ol class="iui-breadcrumbs-list">
           <li class="iui-breadcrumbs-item">
             <a
-              class="iui-breadcrumbs-content"
+              class="iui-anchor iui-breadcrumbs-content"
               href="#"
             >
               Root
@@ -90,7 +90,7 @@ <h2>Breadcrumbs anchor</h2>
           </li>
           <li class="iui-breadcrumbs-item">
             <a
-              class="iui-breadcrumbs-content"
+              class="iui-anchor iui-breadcrumbs-content"
               href="#"
               id="test-1"
             >
@@ -105,7 +105,7 @@ <h2>Breadcrumbs anchor</h2>
           </li>
           <li class="iui-breadcrumbs-item">
             <a
-              class="iui-breadcrumbs-content"
+              class="iui-anchor iui-breadcrumbs-content"
               href="#"
               id="test-2"
             >

apps/css-workshop/pages/footer.html

@@ -56,6 +56,7 @@ <h1>Footer</h1>
             href="https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect"
             target="_blank"
             id="test-link-1"
+            class="iui-anchor"
           >
             Terms of service
           </a>
@@ -66,6 +67,7 @@ <h1>Footer</h1>
             href="https://www.bentley.com/en/privacy-policy"
             target="_blank"
             id="test-link-2"
+            class="iui-anchor"
           >
             Privacy
           </a>
@@ -75,6 +77,7 @@ <h1>Footer</h1>
           <a
             href="https://www.bentley.com/en/terms-of-use-and-select-online-agreement"
             target="_blank"
+            class="iui-anchor"
           >
             Terms of use
           </a>
@@ -84,6 +87,7 @@ <h1>Footer</h1>
           <a
             href="https://www.bentley.com/en/cookie-policy"
             target="_blank"
+            class="iui-anchor"
           >
             Cookies
           </a>
@@ -93,6 +97,7 @@ <h1>Footer</h1>
           <a
             href="https://connect.bentley.com/Legal"
             target="_blank"
+            class="iui-anchor"
           >
             Legal notices
           </a>

apps/css-workshop/pages/tag.html

@@ -733,38 +733,38 @@ <h2>Basic tag containers</h2>
       <div class="iui-tag-container">
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
           id="test-tag-3"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
@@ -797,110 +797,110 @@ <h2>Truncate basic tag containers</h2>
       <div class="iui-tag-container iui-truncate">
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
           id="test-tag-3"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>