From 4035d91a40fd1326fd96f11da3cd845610d8f049 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 13 Mar 2024 16:20:56 -0400 Subject: [PATCH 01/93] Start work on `.iui-field`. --- apps/css-workshop/pages/alert.html | 12 +- apps/css-workshop/pages/assets/selectTag.js | 2 +- apps/css-workshop/pages/breadcrumbs.html | 73 +-- apps/css-workshop/pages/button.html | 437 +++++++++--------- apps/css-workshop/pages/carousel.html | 6 +- apps/css-workshop/pages/code.html | 2 +- apps/css-workshop/pages/color-picker.html | 30 +- apps/css-workshop/pages/column-filter.html | 30 +- apps/css-workshop/pages/date-picker.html | 36 +- apps/css-workshop/pages/dialog.html | 50 +- apps/css-workshop/pages/fieldset.html | 4 +- apps/css-workshop/pages/file-upload.html | 34 +- apps/css-workshop/pages/header.html | 64 +-- .../css-workshop/pages/information-panel.html | 88 ++-- apps/css-workshop/pages/input-grid.html | 32 +- apps/css-workshop/pages/input.html | 80 ++-- apps/css-workshop/pages/menu.html | 20 +- apps/css-workshop/pages/non-ideal-state.html | 66 +-- apps/css-workshop/pages/select.html | 74 +-- apps/css-workshop/pages/side-navigation.html | 50 +- apps/css-workshop/pages/surface.html | 4 +- apps/css-workshop/pages/table.html | 356 +++++++------- apps/css-workshop/pages/tabs.html | 64 +-- apps/css-workshop/pages/tag.html | 60 +-- apps/css-workshop/pages/tile.html | 104 ++--- apps/css-workshop/pages/toast.html | 10 +- apps/css-workshop/pages/transfer-list.html | 8 +- apps/css-workshop/pages/tree.html | 64 +-- apps/css-workshop/pages/variants.html | 365 +++++++++++++++ packages/itwinui-css/src/alert/alert.scss | 2 - .../itwinui-css/src/breadcrumbs/mixins.scss | 7 +- packages/itwinui-css/src/button/active.scss | 35 ++ packages/itwinui-css/src/button/base.scss | 17 - .../itwinui-css/src/button/borderless.scss | 28 -- packages/itwinui-css/src/button/button.scss | 26 +- packages/itwinui-css/src/button/idea.scss | 2 - .../itwinui-css/src/button/split-button.scss | 14 +- packages/itwinui-css/src/button/variant.scss | 44 -- .../src/color-picker/color-picker.scss | 1 - packages/itwinui-css/src/global.scss | 84 ++++ packages/itwinui-css/src/input/input.scss | 20 - packages/itwinui-css/src/select/select.scss | 13 +- packages/itwinui-css/src/table/paginator.scss | 11 +- packages/itwinui-css/src/tile/tile.scss | 2 +- 44 files changed, 1469 insertions(+), 1062 deletions(-) create mode 100644 apps/css-workshop/pages/variants.html create mode 100644 packages/itwinui-css/src/button/active.scss delete mode 100644 packages/itwinui-css/src/button/variant.scss diff --git a/apps/css-workshop/pages/alert.html b/apps/css-workshop/pages/alert.html index 8610c7004f9..3070bdef031 100644 --- a/apps/css-workshop/pages/alert.html +++ b/apps/css-workshop/pages/alert.html @@ -74,7 +74,7 @@

Alert

` : '' diff --git a/apps/css-workshop/pages/breadcrumbs.html b/apps/css-workshop/pages/breadcrumbs.html index 567949c96d8..0b131a446bd 100644 --- a/apps/css-workshop/pages/breadcrumbs.html +++ b/apps/css-workshop/pages/breadcrumbs.html @@ -52,7 +52,7 @@

Breadcrumbs anchor

aria-label="Breadcrumbs" >
  1. -
    1. -
    3. -
    5. diff --git a/apps/css-workshop/pages/button.html b/apps/css-workshop/pages/button.html index 6c269266485..586fcffa86d 100644 --- a/apps/css-workshop/pages/button.html +++ b/apps/css-workshop/pages/button.html @@ -79,16 +79,16 @@

      High visibility

      class="demo-container" > - - - - - - - @@ -1110,19 +1110,19 @@

      Default

      - - - - - @@ -1851,15 +1851,15 @@

      Input + button combo group


      - -
      @@ -1872,13 +1872,14 @@

      Input + button combo group

      data-iui-disabled="true" > @@ -1888,9 +1889,13 @@

      Input + button combo group

      - + +
      -
      @@ -287,7 +287,7 @@

      Advanced

      min="0" max="255" value="195" - class="iui-input" + class="iui-input iui-field" data-iui-size="small" /> @@ -297,7 +297,7 @@

      Advanced

      min="0" max="255" value="53" - class="iui-input" + class="iui-input iui-field" data-iui-size="small" /> @@ -308,7 +308,7 @@

      Advanced

      max="1" step="0.01" value="1.0" - class="iui-input" + class="iui-input iui-field" data-iui-size="small" /> @@ -320,7 +320,7 @@

      Advanced

      Saved colors
      @@ -444,7 +444,7 @@

      Advanced

      min="0" max="100" value="100" - class="iui-input" + class="iui-input iui-field" data-iui-size="small" /> @@ -454,7 +454,7 @@

      Advanced

      min="0" max="100" value="60" - class="iui-input" + class="iui-input iui-field" data-iui-size="small" /> @@ -465,7 +465,7 @@

      Advanced

      max="1" step="0.01" value="1.0" - class="iui-input" + class="iui-input iui-field" data-iui-size="small" /> @@ -477,7 +477,7 @@

      Advanced

      Saved colors
      @@ -583,7 +583,7 @@

      Advanced

      Saved colors
      - +
      -
      @@ -84,7 +84,7 @@

      Date filter

      -
      @@ -148,7 +148,7 @@

      Date filter

      -
      diff --git a/apps/css-workshop/pages/date-picker.html b/apps/css-workshop/pages/date-picker.html index 750eb222aef..f8f7cc5d79e 100644 --- a/apps/css-workshop/pages/date-picker.html +++ b/apps/css-workshop/pages/date-picker.html @@ -51,7 +51,7 @@

      Date

      aria-label="Previous month" type="button" role="month-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -67,7 +67,7 @@

      Date

      aria-label="Next month" type="button" role="month-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -440,7 +440,7 @@

      Year skipping buttons

      aria-label="Previous year" type="button" role="year-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -453,7 +453,7 @@

      Year skipping buttons

      aria-label="Previous month" type="button" role="month-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -469,7 +469,7 @@

      Year skipping buttons

      aria-label="Next month" type="button" role="month-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -482,7 +482,7 @@

      Year skipping buttons

      aria-label="Next year" type="button" role="year-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -943,7 +943,7 @@

      Date & time

      aria-label="Previous month" type="button" role="month-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -959,7 +959,7 @@

      Date & time

      aria-label="Next month" type="button" role="month-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -1490,7 +1490,7 @@

      24hr format

      aria-label="Previous month" type="button" role="month-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -1506,7 +1506,7 @@

      24hr format

      aria-label="Next month" type="button" role="month-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -2071,7 +2071,7 @@

      Date range

      aria-label="Previous year" type="button" role="year-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -2084,7 +2084,7 @@

      Date range

      aria-label="Previous month" type="button" role="month-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -2100,7 +2100,7 @@

      Date range

      aria-label="Next month" type="button" role="month-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -2113,7 +2113,7 @@

      Date range

      aria-label="Next year" type="button" role="year-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" > @@ -2572,7 +2572,7 @@

      Some dates disabled

      aria-label="Previous year" type="button" role="year-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" disabled="" @@ -2586,7 +2586,7 @@

      Some dates disabled

      aria-label="Previous month" type="button" role="month-previous" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" disabled="" @@ -2603,7 +2603,7 @@

      Some dates disabled

      aria-label="Next month" type="button" role="month-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" disabled="" @@ -2617,7 +2617,7 @@

      Some dates disabled

      aria-label="Next year" type="button" role="year-next" - class="iui-button" + class="iui-button iui-field" data-iui-variant="borderless" data-iui-size="small" disabled="" diff --git a/apps/css-workshop/pages/dialog.html b/apps/css-workshop/pages/dialog.html index 272cd5f8a74..2efd38df649 100644 --- a/apps/css-workshop/pages/dialog.html +++ b/apps/css-workshop/pages/dialog.html @@ -106,7 +106,7 @@

      Dialog

      aria-label="Open dialog" id="open-dialog" type="button" - class="iui-button" + class="iui-button iui-field" onclick="toggleDialog('default-dialog')" > Open dialog @@ -118,7 +118,7 @@

      Dialog

      aria-label="Open full page dialog" id="open-full-page-dialog" type="button" - class="iui-button" + class="iui-button iui-field" onclick="toggleDialog('full-page-dialog')" > Open full page dialog @@ -130,7 +130,7 @@

      Dialog

      aria-label="Toggle draggable dialog" id="toggle-draggable-dialog" type="button" - class="iui-button" + class="iui-button iui-field" onclick="toggleDialog('draggable-dialog')" > Toggle draggable dialog @@ -147,7 +147,7 @@

      Dialog

      - @@ -615,12 +615,12 @@
      -
      @@ -975,12 +975,12 @@
      -
      @@ -1237,12 +1237,12 @@
      -
      @@ -1562,12 +1562,12 @@
      -
      @@ -1846,12 +1846,12 @@
      -
      @@ -2213,12 +2213,12 @@
      -
      @@ -2284,11 +2284,11 @@
      -
      @@ -2364,7 +2364,7 @@
    6. - +
    7. - +
    8. - +
    @@ -140,55 +125,41 @@ import Button_ from '../components/Button.astro';
    1. - +
    2. - +
    3. - +
    4. - +
    5. - +
    diff --git a/apps/css-workshop/src/pages/table.astro b/apps/css-workshop/src/pages/table.astro index 64e040d7092..d8d65a5871d 100644 --- a/apps/css-workshop/src/pages/table.astro +++ b/apps/css-workshop/src/pages/table.astro @@ -2260,80 +2260,72 @@ import Checkbox_ from '../components/Checkbox.astro'; - + - + - + - + - + - + - + … - + @@ -2551,80 +2543,72 @@ import Checkbox_ from '../components/Checkbox.astro'; - + … - + - + - + - + - + - + - + @@ -2750,84 +2734,77 @@ import Checkbox_ from '../components/Checkbox.astro'; - + … - + - + - + - + - + … - + @@ -2959,76 +2936,69 @@ import Checkbox_ from '../components/Checkbox.astro'; - + - + - + - + - + - + - + … Date: Wed, 24 Apr 2024 11:45:34 -0400 Subject: [PATCH 56/93] Update apps/css-workshop/src/pages/table.astro Co-authored-by: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> --- apps/css-workshop/src/pages/table.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/css-workshop/src/pages/table.astro b/apps/css-workshop/src/pages/table.astro index d8d65a5871d..ba6ae581dd5 100644 --- a/apps/css-workshop/src/pages/table.astro +++ b/apps/css-workshop/src/pages/table.astro @@ -2770,7 +2770,7 @@ import Checkbox_ from '../components/Checkbox.astro'; variant='borderless' size='small' aria-label='Page 15' - data-iui-active='true' + active={true} > 15 From 83a40783ca6da116f6e21a24a645ca6a70e8485b Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 24 Apr 2024 12:16:22 -0400 Subject: [PATCH 57/93] Increase specificity of `.iui-field`, revert moving `utils` within `all.scss` --- packages/itwinui-css/src/all.scss | 2 +- packages/itwinui-css/src/field.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-css/src/all.scss b/packages/itwinui-css/src/all.scss index 35a2d3301af..08df3d1db47 100644 --- a/packages/itwinui-css/src/all.scss +++ b/packages/itwinui-css/src/all.scss @@ -4,7 +4,6 @@ @layer itwinui.v3 { @include meta.load-css('global'); - @include meta.load-css('utils/utils'); @include meta.load-css('field'); @include meta.load-css('alert/alert'); @include meta.load-css('anchor/anchor'); @@ -54,5 +53,6 @@ @include meta.load-css('tooltip/tooltip'); @include meta.load-css('transfer-list/transfer-list'); @include meta.load-css('tree/tree'); + @include meta.load-css('utils/utils'); @include meta.load-css('workflow-diagram/workflow-diagram'); } diff --git a/packages/itwinui-css/src/field.scss b/packages/itwinui-css/src/field.scss index 3d1b7ee3c5e..a3b67d661ec 100644 --- a/packages/itwinui-css/src/field.scss +++ b/packages/itwinui-css/src/field.scss @@ -1,6 +1,6 @@ // Copyright (c) Bentley Systems, Incorporated. All rights reserved. // See LICENSE.md in the project root for license terms and full copyright notice. -:where(.iui-field) { +.iui-field { --_iui-field-color-text: var(--iui-color-text); --_iui-field-color-text-hover: var(--iui-color-text-hover); --_iui-field-color-text-disabled: var(--iui-color-text-disabled); From 7078107ff0d14e427b26944a888816a12cf415cc Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 24 Apr 2024 12:47:21 -0400 Subject: [PATCH 58/93] Revert search CSS change after `iui-field` specificity change. --- packages/itwinui-css/src/searchbox/searchbox.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/itwinui-css/src/searchbox/searchbox.scss b/packages/itwinui-css/src/searchbox/searchbox.scss index 6e385ed4600..ac46d864b54 100644 --- a/packages/itwinui-css/src/searchbox/searchbox.scss +++ b/packages/itwinui-css/src/searchbox/searchbox.scss @@ -12,15 +12,10 @@ } } +// noop https://github.com/iTwin/iTwinUI/pull/1881#discussion_r1506166537 +/* stylelint-disable-next-line block-no-empty */ .iui-search-icon { - --_iui-button-icon-fill: var(--iui-color-icon-muted); - - [data-iui-size='small'] & svg { - inline-size: var(--iui-size-s); - } } - -// noop https://github.com/iTwin/iTwinUI/pull/1881#discussion_r1506166537 /* stylelint-disable-next-line block-no-empty */ .iui-search-input { } From 54c24a7ad78db12d4227268e947b8e43a679d0bd Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 24 Apr 2024 13:10:21 -0400 Subject: [PATCH 59/93] Merge `.iui-field`'s hover and active states in CSS. --- packages/itwinui-css/src/field.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/itwinui-css/src/field.scss b/packages/itwinui-css/src/field.scss index a3b67d661ec..8fadde426e9 100644 --- a/packages/itwinui-css/src/field.scss +++ b/packages/itwinui-css/src/field.scss @@ -31,12 +31,7 @@ border-color var(--iui-duration-1) ease-out, color var(--iui-duration-1) ease-out; - &:where(:hover) { - background-color: var(--_iui-field-color-background-hover); - border-color: var(--_iui-field-color-border-hover); - color: var(--_iui-field-color-text-hover); - } - + &:where(:hover), &:where(:active) { background-color: var(--_iui-field-color-background-hover); border-color: var(--_iui-field-color-border-hover); From ef0344afe37baa4dc25c877433a594c16fa26ac7 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 24 Apr 2024 13:14:26 -0400 Subject: [PATCH 60/93] `className` as a list. --- packages/itwinui-react/src/core/Input/Input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Input/Input.tsx b/packages/itwinui-react/src/core/Input/Input.tsx index fa112502bc5..7f19c2a2126 100644 --- a/packages/itwinui-react/src/core/Input/Input.tsx +++ b/packages/itwinui-react/src/core/Input/Input.tsx @@ -37,7 +37,7 @@ export const Input = React.forwardRef((props, ref) => { return ( Date: Wed, 24 Apr 2024 13:35:37 -0400 Subject: [PATCH 61/93] Remove `@each` loop from `field.scss`. --- packages/itwinui-css/src/field.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/itwinui-css/src/field.scss b/packages/itwinui-css/src/field.scss index 8fadde426e9..c1b87303acb 100644 --- a/packages/itwinui-css/src/field.scss +++ b/packages/itwinui-css/src/field.scss @@ -61,12 +61,12 @@ --_iui-field-focus-outline-width: 1px; } - @each $fieldSize in small, large { - &:where([data-iui-size='#{$fieldSize}']) { - --_iui-field-height: var(--iui-component-height-#{$fieldSize}); - @if $fieldSize == large { - --_iui-field-font-size: var(--iui-font-size-2); - } - } + &:where([data-iui-size='small']) { + --_iui-field-height: var(--iui-component-height-small); + } + + &:where([data-iui-size='large']) { + --_iui-field-height: var(--iui-component-height-large); + --_iui-field-font-size: var(--iui-font-size-2); } } From b4bef4d414f7e041c10ffac91809cca63b74bfac Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 24 Apr 2024 14:49:12 -0400 Subject: [PATCH 62/93] Simplified `.iui-field`'s hover and active states even further. --- packages/itwinui-css/src/field.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/itwinui-css/src/field.scss b/packages/itwinui-css/src/field.scss index c1b87303acb..f34be1d1e13 100644 --- a/packages/itwinui-css/src/field.scss +++ b/packages/itwinui-css/src/field.scss @@ -31,8 +31,7 @@ border-color var(--iui-duration-1) ease-out, color var(--iui-duration-1) ease-out; - &:where(:hover), - &:where(:active) { + &:where(:hover, :active) { background-color: var(--_iui-field-color-background-hover); border-color: var(--_iui-field-color-border-hover); color: var(--_iui-field-color-text-hover); From a8e0b684479d9e89eb34e14cac0ef602fb88e3d0 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 24 Apr 2024 17:05:10 -0400 Subject: [PATCH 63/93] Remove abstraction from unit test --- .../src/core/Buttons/IdeasButton.test.tsx | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx b/packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx index c33a1f603d6..5d7c59716c1 100644 --- a/packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx +++ b/packages/itwinui-react/src/core/Buttons/IdeasButton.test.tsx @@ -7,24 +7,16 @@ import * as React from 'react'; import { IdeasButton } from './IdeasButton.js'; -const assertBaseElement = (container: HTMLElement) => { - const button = container.querySelector('.iui-button') as HTMLButtonElement; - - expect(button).toBeTruthy(); - expect(button.classList).toContain('iui-button-idea'); - expect(button).toHaveAttribute('data-iui-variant', 'high-visibility'); - expect(button.type).toBe('button'); - - return button; -}; - it('renders ideas button correctly', () => { const onClickMock = vi.fn(); const { container, getByText } = render( , ); - const button = assertBaseElement(container); + const button = container.querySelector('.iui-button') as HTMLButtonElement; + expect(button).toBeTruthy(); + expect(button).toHaveAttribute('data-iui-variant', 'idea'); + expect(button.type).toBe('button'); button.click(); expect(onClickMock).toHaveBeenCalled(); expect(container.querySelector('.iui-button-icon')).toBeTruthy(); @@ -37,7 +29,10 @@ it('takes localized label', () => { , ); - const button = assertBaseElement(container); + const button = container.querySelector('.iui-button') as HTMLButtonElement; + expect(button).toBeTruthy(); + expect(button).toHaveAttribute('data-iui-variant', 'idea'); + expect(button.type).toBe('button'); button.click(); expect(onClickMock).toHaveBeenCalled(); expect(container.querySelector('.iui-button-icon')).toBeTruthy(); From be3b0d361fc694bb867fa9dda17a85328176bba7 Mon Sep 17 00:00:00 2001 From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> Date: Wed, 24 Apr 2024 17:15:21 -0400 Subject: [PATCH 64/93] TablePaginator uses `Button` instead of `.iui-button` --- .../src/core/Table/TablePaginator.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/itwinui-react/src/core/Table/TablePaginator.tsx b/packages/itwinui-react/src/core/Table/TablePaginator.tsx index be599ebc313..8ef30a080a4 100644 --- a/packages/itwinui-react/src/core/Table/TablePaginator.tsx +++ b/packages/itwinui-react/src/core/Table/TablePaginator.tsx @@ -17,7 +17,6 @@ import { SvgChevronLeft, SvgChevronRight, Box, - ButtonBase, } from '../../utils/index.js'; import type { CommonProps } from '../../utils/index.js'; import type { TablePaginatorRendererProps } from './Table.js'; @@ -173,15 +172,11 @@ export const TablePaginator = (props: TablePaginatorProps) => { const pageButton = React.useCallback( (index: number, tabIndex = index === focusedIndex ? 0 : -1) => ( - onPageChange(index)} aria-current={index === currentPage} @@ -189,7 +184,7 @@ export const TablePaginator = (props: TablePaginatorProps) => { tabIndex={tabIndex} > {index + 1} - + ), [focusedIndex, currentPage, localization, buttonSize, onPageChange], ); From 2a748ad814d62614797bd9ad1f42a37f44a9d389 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 25 Apr 2024 11:23:22 -0400 Subject: [PATCH 65/93] Remove `.iui-disabled` from buttons (not split button). --- packages/itwinui-css/src/button/base.scss | 2 +- packages/itwinui-css/src/button/button-group.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-css/src/button/base.scss b/packages/itwinui-css/src/button/base.scss index eeaacef1c1c..b3619705ac9 100644 --- a/packages/itwinui-css/src/button/base.scss +++ b/packages/itwinui-css/src/button/base.scss @@ -2,7 +2,7 @@ // See LICENSE.md in the project root for license terms and full copyright notice. @use '../mixins'; -$disabledButtonSelectors: '[disabled], :disabled, [aria-disabled="true"], [data-iui-disabled="true"], .iui-disabled'; +$disabledButtonSelectors: '[disabled], :disabled, [aria-disabled="true"], [data-iui-disabled="true"]'; @mixin iui-button { display: inline-flex; diff --git a/packages/itwinui-css/src/button/button-group.scss b/packages/itwinui-css/src/button/button-group.scss index 6cf33a44c9b..a98f92eba8a 100644 --- a/packages/itwinui-css/src/button/button-group.scss +++ b/packages/itwinui-css/src/button/button-group.scss @@ -17,7 +17,7 @@ $childZindexSelector: '&:where(.iui-input-flex-container, .iui-button, .iui-input)'; $childBorderSelector: '&:where(.iui-input-flex-container, .iui-input, .iui-button:where(:not([data-iui-variant="borderless"]))), &:where(.iui-input-flex-container)::before'; - $disabledSelector: '&:where(:disabled, .iui-disabled, [aria-disabled="true"])'; + $disabledSelector: '&:where(:disabled, [aria-disabled="true"])'; // specificity hack > [class] { From fb546c8c636fe0c67e3a0b217f8fed07f3f29adb Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 25 Apr 2024 13:45:42 -0400 Subject: [PATCH 66/93] Remove `.iui-disabled` from `.iui-field` and `.iui-select-button` in CSS only. --- apps/css-workshop/src/pages/select.astro | 2 +- packages/itwinui-css/src/field.scss | 2 +- packages/itwinui-css/src/select/select.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/css-workshop/src/pages/select.astro b/apps/css-workshop/src/pages/select.astro index 79a390985df..20512532658 100644 --- a/apps/css-workshop/src/pages/select.astro +++ b/apps/css-workshop/src/pages/select.astro @@ -171,7 +171,7 @@ import Button_ from '../components/Button.astro';
    -
    +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud diff --git a/packages/itwinui-css/src/field.scss b/packages/itwinui-css/src/field.scss index f34be1d1e13..41784f76d64 100644 --- a/packages/itwinui-css/src/field.scss +++ b/packages/itwinui-css/src/field.scss @@ -42,7 +42,7 @@ outline-offset: var(--_iui-field-focus-outline-offset); } - &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true'], .iui-disabled) { + &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) { background-color: var(--_iui-field-color-background-disabled); border-color: var(--_iui-field-color-border-disabled); color: var(--_iui-field-color-text-disabled); diff --git a/packages/itwinui-css/src/select/select.scss b/packages/itwinui-css/src/select/select.scss index 28c2f559fce..7ba5ec4a2ca 100644 --- a/packages/itwinui-css/src/select/select.scss +++ b/packages/itwinui-css/src/select/select.scss @@ -36,7 +36,7 @@ overflow: hidden; } - &:where([disabled], :disabled, [aria-disabled='true'], .iui-disabled) { + &:where([disabled], :disabled, [aria-disabled='true'], [data-iui-disabled='true']) { --_iui-list-item-icon-fill: var(--iui-color-icon-disabled); opacity: 1; cursor: not-allowed; From ad7e0ae9af16b5cc045b62eea13f2de0ca9ec73d Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Thu, 25 Apr 2024 13:49:10 -0400 Subject: [PATCH 67/93] Update ideas button className in React. --- packages/itwinui-react/src/core/Buttons/IdeasButton.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx b/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx index 6758f38176b..8db4aea0734 100644 --- a/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx +++ b/packages/itwinui-react/src/core/Buttons/IdeasButton.tsx @@ -2,6 +2,7 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ +import cx from 'classnames'; import * as React from 'react'; import { SvgSmileyHappy } from '../../utils/index.js'; import type { PolymorphicForwardRefComponent } from '../../utils/index.js'; @@ -24,12 +25,12 @@ type IdeasButtonProps = { * */ export const IdeasButton = React.forwardRef((props, ref) => { - const { feedbackLabel = 'Feedback', onClick, ...rest } = props; + const { feedbackLabel = 'Feedback', className, onClick, ...rest } = props; return ( ); }) as PolymorphicForwardRefComponent<'a'>; BreadcrumbsItem.displayName = 'Breadcrumbs.Item'; From 9713780d0ce4d0d5111733e08a5c994b206263f8 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 1 May 2024 12:43:28 -0400 Subject: [PATCH 79/93] You get a changeset, everyone gets a changeset! --- .changeset/beige-stingrays-ring.md | 6 ++++++ .changeset/chilled-dolls-promise.md | 5 +++++ .changeset/cyan-candles-walk.md | 6 ++++++ .changeset/lazy-seahorses-share.md | 5 +++++ .changeset/ninety-numbers-vanish.md | 6 +----- 5 files changed, 23 insertions(+), 5 deletions(-) create mode 100644 .changeset/beige-stingrays-ring.md create mode 100644 .changeset/chilled-dolls-promise.md create mode 100644 .changeset/cyan-candles-walk.md create mode 100644 .changeset/lazy-seahorses-share.md diff --git a/.changeset/beige-stingrays-ring.md b/.changeset/beige-stingrays-ring.md new file mode 100644 index 00000000000..de79657d2d1 --- /dev/null +++ b/.changeset/beige-stingrays-ring.md @@ -0,0 +1,6 @@ +--- +"@itwin/itwinui-css": major +--- + +- `.iui-breadcrumbs-content` now requires `.iui-button .iui-field`. +- `a.iui-breadcrumbs-content` require nested `` and hover state looks more like button's hover state. diff --git a/.changeset/chilled-dolls-promise.md b/.changeset/chilled-dolls-promise.md new file mode 100644 index 00000000000..d0347095286 --- /dev/null +++ b/.changeset/chilled-dolls-promise.md @@ -0,0 +1,5 @@ +--- +"@itwin/itwinui-css": major +--- + +- `.iui-select-tag-button` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`. diff --git a/.changeset/cyan-candles-walk.md b/.changeset/cyan-candles-walk.md new file mode 100644 index 00000000000..1c5627c6b34 --- /dev/null +++ b/.changeset/cyan-candles-walk.md @@ -0,0 +1,6 @@ +--- +"@itwin/itwinui-css": major +--- + +- Paginator buttons now use the `.iui-field` data attribute for sizing rather than the `.iui-table-paginator-page-button-small` modifier class. +- Small paginator button width is less than it was before. diff --git a/.changeset/lazy-seahorses-share.md b/.changeset/lazy-seahorses-share.md new file mode 100644 index 00000000000..ea461543312 --- /dev/null +++ b/.changeset/lazy-seahorses-share.md @@ -0,0 +1,5 @@ +--- +"@itwin/itwinui-react": major +--- + +- `.iui-sidenav-button .iui-expand` now requires `.iui-button .iui-field` and `data-iui-size="small"`. diff --git a/.changeset/ninety-numbers-vanish.md b/.changeset/ninety-numbers-vanish.md index 5ee4b2c8375..196f09bd1b0 100644 --- a/.changeset/ninety-numbers-vanish.md +++ b/.changeset/ninety-numbers-vanish.md @@ -4,12 +4,8 @@ Add `.iui-field` class to unify & centralize basic styling for `.iui-button`, `.iui-input`, and `.iui-select-button`. -- Paginator buttons now use the `.iui-field` data attribute for sizing rather than the `.iui-table-paginator-page-button-small` modifier class. -- `.iui-select-tag-button` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`. -- `.iui-breadcrumbs-content` now requires `.iui-button .iui-field`. -- `a.iui-breadcrumbs-content` require nested `` and hover state looks more like button. -- `.iui-sidenav-button .iui-expand` now requires `.iui-button .iui-field` and `data-iui-size="small"`. - Ideas button requires `.iui-button-idea` & `data-iui-variant="high-visibility"` instead of `data-iui-variant="idea"`. - Disabled `.iui-input` and `.iui-select-button` with a value have a different text color. - Disabled `.iui-input` and `.iui-select-button` with a placeholder no longer show placeholder text. +- Hover state colors for `.iui-input` and `.iui-select-button` now match `.iui-button`. - Within `all.scss`, `field` include added. From 840aa72063aeee4ce618d1c2222602d265a470c6 Mon Sep 17 00:00:00 2001 From: Jon Graft <849817+FlyersPh9@users.noreply.github.com> Date: Wed, 1 May 2024 13:02:30 -0400 Subject: [PATCH 80/93] Changesets include diffs --- .changeset/beige-stingrays-ring.md | 22 +++++++++++++++++ .changeset/chilled-dolls-promise.md | 13 ++++++++++ .changeset/cyan-candles-walk.md | 13 +++++++++- .changeset/lazy-seahorses-share.md | 10 ++++++++ .changeset/ninety-numbers-vanish.md | 38 +++++++++++++++++++++++++++++ 5 files changed, 95 insertions(+), 1 deletion(-) diff --git a/.changeset/beige-stingrays-ring.md b/.changeset/beige-stingrays-ring.md index de79657d2d1..7432f12bf0f 100644 --- a/.changeset/beige-stingrays-ring.md +++ b/.changeset/beige-stingrays-ring.md @@ -4,3 +4,25 @@ - `.iui-breadcrumbs-content` now requires `.iui-button .iui-field`. - `a.iui-breadcrumbs-content` require nested `` and hover state looks more like button's hover state. + +```diff + +``` + +```diff + ++ + ... ++ + +``` diff --git a/.changeset/chilled-dolls-promise.md b/.changeset/chilled-dolls-promise.md index d0347095286..07c5dda2387 100644 --- a/.changeset/chilled-dolls-promise.md +++ b/.changeset/chilled-dolls-promise.md @@ -3,3 +3,16 @@ --- - `.iui-select-tag-button` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`. + +```diff + + ... + + +``` diff --git a/.changeset/cyan-candles-walk.md b/.changeset/cyan-candles-walk.md index 1c5627c6b34..1992fafc04f 100644 --- a/.changeset/cyan-candles-walk.md +++ b/.changeset/cyan-candles-walk.md @@ -2,5 +2,16 @@ "@itwin/itwinui-css": major --- -- Paginator buttons now use the `.iui-field` data attribute for sizing rather than the `.iui-table-paginator-page-button-small` modifier class. +- Paginator buttons now use the `.iui-field` data attribute for variant & sizing rather than the `.iui-table-paginator-page-button-small` modifier class. - Small paginator button width is less than it was before. + +```diff + +``` diff --git a/.changeset/lazy-seahorses-share.md b/.changeset/lazy-seahorses-share.md index ea461543312..6142cb44862 100644 --- a/.changeset/lazy-seahorses-share.md +++ b/.changeset/lazy-seahorses-share.md @@ -3,3 +3,13 @@ --- - `.iui-sidenav-button .iui-expand` now requires `.iui-button .iui-field` and `data-iui-size="small"`. + +```diff + +``` diff --git a/.changeset/ninety-numbers-vanish.md b/.changeset/ninety-numbers-vanish.md index 196f09bd1b0..bc6eadf392a 100644 --- a/.changeset/ninety-numbers-vanish.md +++ b/.changeset/ninety-numbers-vanish.md @@ -9,3 +9,41 @@ Add `.iui-field` class to unify & centralize basic styling for `.iui-button`, `. - Disabled `.iui-input` and `.iui-select-button` with a placeholder no longer show placeholder text. - Hover state colors for `.iui-input` and `.iui-select-button` now match `.iui-button`. - Within `all.scss`, `field` include added. + +```diff + +``` + +```diff + +``` + +```diff + + ... + +``` + +```diff +
    + ... +
    +``` From 93e16d799b2daabb24f0c08d6afeaa79d160adaf Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Wed, 1 May 2024 13:23:43 -0400 Subject: [PATCH 81/93] tweak changesets some more --- .changeset/beige-stingrays-ring.md | 35 ++++++++++----------- .changeset/chilled-dolls-promise.md | 13 +++----- .changeset/cyan-candles-walk.md | 19 ++++++----- .changeset/lazy-seahorses-share.md | 14 ++++----- .changeset/ninety-numbers-vanish.md | 49 ++++++++--------------------- .changeset/odd-planes-fix.md | 14 +++++++++ 6 files changed, 63 insertions(+), 81 deletions(-) create mode 100644 .changeset/odd-planes-fix.md diff --git a/.changeset/beige-stingrays-ring.md b/.changeset/beige-stingrays-ring.md index 7432f12bf0f..accbb380b83 100644 --- a/.changeset/beige-stingrays-ring.md +++ b/.changeset/beige-stingrays-ring.md @@ -2,27 +2,26 @@ "@itwin/itwinui-css": major --- -- `.iui-breadcrumbs-content` now requires `.iui-button .iui-field`. -- `a.iui-breadcrumbs-content` require nested `` and hover state looks more like button's hover state. +`.iui-breadcrumbs-content` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`. ```diff - + - ``` diff --git a/.changeset/cyan-candles-walk.md b/.changeset/cyan-candles-walk.md index 1992fafc04f..1ac7394efc1 100644 --- a/.changeset/cyan-candles-walk.md +++ b/.changeset/cyan-candles-walk.md @@ -2,16 +2,15 @@ "@itwin/itwinui-css": major --- -- Paginator buttons now use the `.iui-field` data attribute for variant & sizing rather than the `.iui-table-paginator-page-button-small` modifier class. -- Small paginator button width is less than it was before. +`.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 - + + -``` +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 - + + diff --git a/apps/css-workshop/src/pages/breadcrumbs.astro b/apps/css-workshop/src/pages/breadcrumbs.astro index 6b38f8828a8..39e6e6acab3 100644 --- a/apps/css-workshop/src/pages/breadcrumbs.astro +++ b/apps/css-workshop/src/pages/breadcrumbs.astro @@ -38,13 +38,9 @@ import IconButton_ from '../components/IconButton.astro';
    1. - - Root - + + Root +
    2. - - Nested - + Nested +
    3. - - Double nested folder with truncation - + Double nested folder with truncation +