Add .iui-field base class for inputs

.changeset/beige-stingrays-ring.md

@@ -0,0 +1,27 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`.iui-breadcrumbs-content` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`.
+
+```diff
+  <button
+-   class="iui-breadcrumbs-content"
++   class="iui-button iui-button-base iui-field iui-breadcrumbs-content"
++   data-iui-variant="borderless"
+  >
+```
+
+When used with `<a>`, the same button classes must be used, and the content must be wrapped in a `<span>`. As a result, the anchor's hover state will now be more consistent with the button's hover state.
+
+```diff
+  <a
+-   class="iui-anchor iui-breadcrumbs-content"
++   class="iui-anchor iui-button-base iui-button iui-field iui-breadcrumbs-content"
++   data-iui-variant="borderless"
+  >
++   <span>
+      …
++   </span>
+  </a>
+```

.changeset/chilled-dolls-promise.md

@@ -0,0 +1,20 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`.iui-select-tag-button` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`.
+
+```diff
+  <button
+-   class="iui-select-tag-button"
++   class="iui-button iui-field iui-select-tag-button"
++   data-iui-variant="borderless"
+  >
+```
+
+Similarly, `.iui-select-tag-button-icon` also requires `.iui-button-icon`.
+
+```diff
+-  <span class="iui-select-tag-button-icon">
++  <span class="iui-select-tag-button-icon iui-button-icon">
+```

.changeset/cyan-candles-walk.md

@@ -0,0 +1,16 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`.iui-table-paginator-page-button` now requires the same markup as borderless buttons. The `.iui-table-paginator-page-button-small` modifier class has been removed.
+
+```diff
+  <button
+-   class="iui-table-paginator-page-button iui-table-paginator-page-button-small"
++   class="iui-table-paginator-page-button iui-button iui-button-base iui-field"
++   data-iui-variant="borderless"
++   data-iui-size="small"
+  >
+```
+
+As a result, the small paginator will now have a smaller width than before.

.changeset/lazy-seahorses-share.md

@@ -0,0 +1,13 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`.iui-sidenav-button.iui-expand` now requires `.iui-button .iui-field` and `data-iui-size="small"`.
+
+```diff
+  <button
+-   class="iui-button iui-button-base iui-sidenav-button iui-expand"
++   class="iui-button iui-button-base iui-sidenav-button iui-field iui-expand"
++   data-iui-size="small"
+  >
+```

.changeset/light-cars-tell.md

@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": patch
+---
+
+The small sized `TablePaginator`'s buttons are now squares instead of rectangles. This makes it consistent with the shape of the regular sized `TablePaginator` buttons.

.changeset/nasty-bananas-join.md

@@ -0,0 +1,7 @@
+---
+"@itwin/itwinui-react": minor
+---
+
+Aggregated a subset of CSS styles across some field components: `Button`, `Input`, `Textarea`, and `Select`, in order to reduce the CSS size and improve visual consistency. Some resulting changes:
+  * `Input`, `Textarea`, and `Select` have a similar hover state as `Button`.
+  * `Input`, `Textarea`, and `Select` now show their value as greyed out when disabled.

.changeset/ninety-numbers-vanish.md

@@ -0,0 +1,26 @@
+---
+"@itwin/itwinui-css": major
+---
+
+Added `.iui-field` class to be used with `.iui-button`, `.iui-input`, and `.iui-select-button`. These components now have consistent styling for base, hover and disabled states.
+
+```diff
+  <button
+-   class="iui-button iui-button-base"
++   class="iui-button iui-button-base iui-field"
+  >
+```
+
+```diff
+  <input
+-   class="iui-input"
++   class="iui-input iui-field"
+  >
+```
+
+```diff
+  <div
+-   class="iui-select-button"
++   class="iui-select-button iui-field"
+  >
+```

.changeset/odd-planes-fix.md

@@ -0,0 +1,14 @@
+---
+"@itwin/itwinui-css": major
+---
+
+Ideas button now requires `.iui-button-idea` and `data-iui-variant="high-visibility"` instead of `data-iui-variant="idea"`.
+
+```diff
+ <button
+-  class="iui-button iui-button-base"
++  class="iui-button iui-button-base iui-field iui-button-idea"
+-  data-iui-variant="idea"
++  data-iui-variant="high-visibility"
+ >
+```

.changeset/perfect-oranges-invite.md

@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": patch
+---
+
+The hover styling of `Breadcrumbs.Item` has been made more consistent across buttons and anchors.

apps/css-workshop/src/components/Button.astro

@@ -5,16 +5,33 @@ type Props = {
   isActive?: boolean;
   dropdown?: boolean;
   idea?: boolean;
+  as?: string;
 } & astroHTML.JSX.ButtonHTMLAttributes;
 
-const { class: className, variant, size, isActive, dropdown, idea, ...props } = Astro.props;
+const {
+  as: Element = 'button',
+  class: className,
+  variant,
+  size,
+  isActive,
+  dropdown,
+  idea,
+  ...props
+} = Astro.props;
 ---
 
-<button
-  class:list={['iui-button', 'iui-button-base', { 'iui-button-dropdown': dropdown }, className]}
-  type='button'
-  data-iui-variant={idea ? 'idea' : variant}
+<Element
+  class:list={[
+    'iui-button',
+    'iui-button-base',
+    'iui-field',
+    { 'iui-button-dropdown': dropdown },
+    { 'iui-button-idea': idea },
+    className,
+  ]}
+  type={Element === 'button' ? 'button' : undefined}
   data-iui-size={size}
+  data-iui-variant={idea ? 'high-visibility' : variant}
   data-iui-active={isActive ? 'true' : undefined}
   {...props}
 >
@@ -39,4 +56,4 @@ const { class: className, variant, size, isActive, dropdown, idea, ...props } =
       </span>
     )
   }
-</button>
+</Element>

apps/css-workshop/src/components/IconButton.astro

@@ -10,7 +10,7 @@ const { class: className, variant, size, isActive, shift, ...props } = Astro.pro
 ---
 
 <button
-  class:list={['iui-button', 'iui-button-base', className]}
+  class:list={['iui-button', 'iui-button-base', 'iui-field', className]}
   type='button'
   data-iui-variant={variant}
   data-iui-size={size}

apps/css-workshop/src/components/selectTag.js

@@ -27,8 +27,8 @@ class SelectTag extends HTMLElement {
       </span>
       ${
         dismissible
-          ? `<button class="iui-select-tag-button" aria-label="Delete ${value} tag" type="button">
-            <svg-close-small class="iui-select-tag-button-icon" aria-hidden="true"></svg-close-small>
+          ? `<button class="iui-button iui-field iui-select-tag-button" data-iui-variant="borderless" aria-label="Delete ${value} tag" type="button">
+            <svg-close-small class="iui-button-icon iui-select-tag-button-icon" aria-hidden="true"></svg-close-small>
           </button>`
           : ''
       }

apps/css-workshop/src/pages/breadcrumbs.astro

@@ -38,7 +38,9 @@ import IconButton_ from '../components/IconButton.astro';
       </Button_>
       <ol class='iui-breadcrumbs-list'>
         <li class='iui-breadcrumbs-item'>
-          <a class='iui-anchor iui-breadcrumbs-content' href='#'> Root</a>
+          <Button_ as='a' class='iui-anchor iui-breadcrumbs-content' variant='borderless' href='#'>
+            Root
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
@@ -50,15 +52,29 @@ import IconButton_ from '../components/IconButton.astro';
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <a class='iui-anchor iui-breadcrumbs-content' href='#' id='test-1'> Nested</a>
+          <Button_
+            as='a'
+            class='iui-anchor iui-breadcrumbs-content'
+            variant='borderless'
+            href='#'
+            id='test-1'
+          >
+            Nested
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <a class='iui-anchor iui-breadcrumbs-content' href='#' id='test-2'>
+          <Button_
+            as='a'
+            class='iui-anchor iui-breadcrumbs-content'
+            variant='borderless'
+            href='#'
+            id='test-2'
+          >
             Double nested folder with truncation
-          </a>
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
@@ -79,9 +95,7 @@ import IconButton_ from '../components/IconButton.astro';
       </Button_>
       <ol class='iui-breadcrumbs-list'>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content'>
-            <span> Root</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless'>Root</Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
@@ -93,25 +107,23 @@ import IconButton_ from '../components/IconButton.astro';
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' id='test-3'>
-            <span> Nested</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' id='test-3'>Nested</Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' id='test-4'>
-            <span> Double nested folder with truncation</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' id='test-4'>
+            Double nested folder with truncation
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' aria-current='page'>
-            <span> You are here</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' aria-current='page'>
+            You are here
+          </Button_>
         </li>
       </ol>
     </nav>
@@ -126,41 +138,37 @@ import IconButton_ from '../components/IconButton.astro';
       </Button_>
       <ol class='iui-breadcrumbs-list'>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content'>
-            <span>Root</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless'>Root</Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' id='overflow-hover'>
-            <svg-more class='iui-button-icon' aria-hidden='true'></svg-more>
-          </button>
+          <IconButton_ class='iui-breadcrumbs-content' variant='borderless' id='overflow-hover'>
+            <svg-more></svg-more>
+          </IconButton_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content'>
-            <span> Nested</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless'>Nested</Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' id='overflow-focus'>
-            <span>Double nested folder with truncation</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' id='overflow-focus'>
+            Double nested folder with truncation
+          </Button_>
         </li>
         <li class='iui-breadcrumbs-separator' aria-hidden='true'>
           <svg-chevron-right aria-hidden='true'></svg-chevron-right>
         </li>
         <li class='iui-breadcrumbs-item'>
-          <button class='iui-breadcrumbs-content' aria-current='page'>
-            <span>You are here</span>
-          </button>
+          <Button_ class='iui-breadcrumbs-content' variant='borderless' aria-current='page'>
+            You are here
+          </Button_>
         </li>
       </ol>
     </nav>
@@ -174,14 +182,16 @@ import IconButton_ from '../components/IconButton.astro';
         <svg-caret-down-small aria-hidden='true' slot='endo-icon'></svg-caret-down-small>
       </Button_>
       <label class='iui-input-grid iui-inline-label iui-inline-icon'>
-        <input
-          value='C:/Root/Lorem/Ipsum/Nested/Double nested folder with truncation/You are here/'
-          class='iui-input'
-          spellcheck='false'
-        />
-        <IconButton_ variant='borderless' aria-label='Close'>
-          <svg-close-small></svg-close-small>
-        </IconButton_>
+        <div class='iui-input-flex-container'>
+          <input
+            value='C:/Root/Lorem/Ipsum/Nested/Double nested folder with truncation/You are here/'
+            class='iui-input iui-field'
+            spellcheck='false'
+          />
+          <IconButton_ variant='borderless' aria-label='Close'>
+            <svg-close-small></svg-close-small>
+          </IconButton_>
+        </div>
       </label>
     </nav>
   </section>

apps/css-workshop/src/pages/button.astro

@@ -762,15 +762,15 @@ import IconButton_ from '../components/IconButton.astro';
   <section id='demo-combo-group'>
     <div class='iui-button-group'>
       <Button_>Button 1</Button_>
-      <input class='iui-input' />
+      <input class='iui-input iui-field' />
       <Button_>Button 2</Button_>
     </div>
 
     <br />
 
     <div class='iui-button-group'>
       <Button_>Button 1</Button_>
-      <input class='iui-input' placeholder='Disabled input' disabled />
+      <input class='iui-input iui-field' disabled />
       <Button_>Button 2</Button_>
     </div>