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.

Sign up for GitHub

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

Jump to bottom

feat(stepper): enable responsive layout #7744

Merged
merged 68 commits into from
Nov 21, 2023
Merged

feat(stepper): enable responsive layout #7744

merged 68 commits into from
Nov 21, 2023

Conversation

anveshmekala
Copy link
Contributor

@anveshmekala anveshmekala commented Sep 14, 2023 •
edited
Loading

Related Issue: #6694

Summary

Enables responsive layout for stepper component.

Additional Enhancements:

  • stepper element host display is changed to flex from grid
  • grid column width will use minmax( ) instead of fixed fractional units.
  • When none of the stepper item's are selected and the first one is disabled, the first available enabled stepper will be selected.

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Sep 14, 2023
@anveshmekala
remove unused grid css properties
3738c14
@anveshmekala
hide stepeprs when screen size is smaller
952c687
@anveshmekala
add next and previous chevron functionality
e9e6392
@anveshmekala
use svg to render border top in smaller screen
6676891
@anveshmekala
add step-bar functional component
6678aae
@anveshmekala
assign width of stepbar wrto document width
8a5b76d
@anveshmekala
space adjustments
3607b3c
@anveshmekala
Merge branch 'main' into anveshmekala/6694-stepper-responsive-layout
775ef2d
@anveshmekala
refactor
cb31b9c
@anveshmekala
disable chevron for first and last step
bbe8db0
@anveshmekala
Merge branch 'main' into anveshmekala/6694-stepper-responsive-layout
77e3292
@anveshmekala
Merge branch 'anveshmekala/6694-stepper-responsive-layout' of https:/…
735a81e 
…/github.com/Esri/calcite-components into anveshmekala/6694-stepper-responsive-layout
@anveshmekala
fix tests
34ac6ee
@anveshmekala
fix build errors
badd38f
@anveshmekala
add padding css var for chevron icons
7a356ab
@anveshmekala
add stories
fd6e145
@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 22, 2023
@anveshmekala anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 22, 2023
@anveshmekala anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 25, 2023
@anveshmekala anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 25, 2023
driskull
driskull approved these changes Nov 21, 2023
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

🎉 🌮 !

@anveshmekala anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 21, 2023
@anveshmekala anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 21, 2023
@anveshmekala anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 21, 2023
@anveshmekala anveshmekala merged commit 687ca2b into main Nov 21, 2023
16 checks passed
@anveshmekala anveshmekala deleted the anveshmekala/6694-stepper-responsive-layout branch November 21, 2023 20:11
@github-actions github-actions bot added this to the 2023 November Priorities milestone Nov 21, 2023
@calcite-admin calcite-admin mentioned this pull request Nov 21, 2023
Merged
benelan added a commit that referenced this pull request Nov 21, 2023
@calcite-admin @github-actions @benelan
chore: release main (#8092)
023e732 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/eslint-plugin-calcite-components:
0.2.3</summary>

##
[0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3)
(2023-11-21)
</details>

<details><summary>@esri/calcite-components: 1.11.0</summary>

##
[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0)
(2023-11-21)

### Features

* **combobox:** Limit display of selected items with new
selection-display prop
([#7912](#7912))
([58317ae](58317ae))
* **date-picker:** Make component responsive
([#7872](#7872))
([f131218](f131218))
* **input, input-date-picker, input-number, input-text,
input-time-picker:** Truncate value and placeholder when input is narrow
([#8160](#8160))
([533eff3](533eff3))
* **list-item:** Add content-bottom slot for placing content below the
label and description of the component
([#8183](#8183))
([7d400fb](7d400fb))
* **list:** Specify the element types in the `calciteListOrderChange`
event detail.
([#8123](#8123))
([3e81d7e](3e81d7e))
* **pagination:** Introduce responsive design for xxsmall breakpoint
([#8150](#8150))
([ab20eb0](ab20eb0))
* **stepper-item:** Remove support for previousStep and nextStep in
messages
([#8222](#8222))
([213b31d](213b31d))
* **stepper:** Enable responsive layout
([#7744](#7744))
([687ca2b](687ca2b))


### Bug Fixes

* **accordion-item:** Update expanded chevron color
([#8087](#8087))
([d3d7688](d3d7688))
* **action:** Ensure action content is correctly spaced
([#8184](#8184))
([b18dcc8](b18dcc8))
* **action:** Update transparent action styles
([#8194](#8194))
([0f12489](0f12489))
* **block-section:** Wraps long text over to a new line when toggle
switch is displayed
([#8101](#8101))
([3f90780](3f90780))
* **checkbox:** Make label property public
([#8181](#8181))
([d3b9c1f](d3b9c1f))
* **combobox-item:** Hide disabled item icon
([#8095](#8095))
([36552f3](36552f3))
* **input-date-picker:** Fix date-picker wrapper displaying beyond its
bounds
([#8172](#8172))
([01ec024](01ec024))
* **input-number:** Prevents mutating value on blur
([#8226](#8226))
([b89a893](b89a893))
* **input-time-zone:** Fix Indian/Christmas time zone translation
([#8096](#8096))
([d79d591](d79d591))
* **list-item, stack:** Stretch action-menu and handle when placed
inside a list-item or stack.
([#8185](#8185))
([8a16a69](8a16a69))
* **list-item, stack:** Stretch dropdown when placed inside a list-item
or stack
([#8204](#8204))
([05e6b65](05e6b65))
* **list-item:** Adds border between grouped and ungrouped list-items
([#8134](#8134))
([b3c331c](b3c331c))
* **list-item:** Fix rendering of open icon.
([#8207](#8207))
([a6e1766](a6e1766))
* **panel, flow-item:** Remove overflow rule
([#8055](#8055))
([d0c3ed2](d0c3ed2))
* **split-button:** Fix width layout
([#8133](#8133))
([051f332](051f332))

### Dependencies

* The following workspace dependencies were updated
  * devDependencies
* @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to
0.2.3
</details>

<details><summary>@esri/calcite-components-angular: 1.11.0</summary>

## 1.11.0 (2023-11-21)


### Bug Fixes

* **angular:** Publish from the dist directory
([#8151](#8151))
([d813f14](d813f14))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

<details><summary>@esri/calcite-components-react: 1.11.0</summary>

##
[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0)
(2023-11-21)


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
benelan added a commit that referenced this pull request Nov 23, 2023
@benelan
chore: sync with main
437ec4d 
* origin/main: (30 commits)
  test: add token snapshot tests (#8050)
  chore: release next
  fix(color-picker, popover, shell-panel, slider, tooltip): Register events on the window instead of the document (#8247)
  fix(list-item): Reserve space for empty open lists. (#8239)
  fix: dragging floating ui components (#8230)
  fix(list-item): an item with an empty slotted list should be openable. (#8240)
  fix(input): prevents mutating value on `blur` when `type="number"` (#8245)
  chore: release main (#8092)
  chore: downgrade eslint plugin after reverting breaking change (#8238)
  refactor(combobox): fix linting errors (#8235)
  chore: downgrade packages after reverting 2.0.0-next.0 change (#8237)
  chore: release next
  revert: feat(stepper-item)!: remove support for previousStep and nextStep in messages (#8222) (#8232)
  feat(stepper): enable responsive layout (#7744)
  feat(combobox): limit display of selected items with new selection-display prop (#7912)
  chore: release next
  build: update browserslist db (#8218)
  fix(list-item): fix rendering of open icon. (#8207)
  revert: feat(alert): make component responsive (#8195)
  fix(input-number): prevents mutating value on blur (#8226)
  ...
benelan added a commit that referenced this pull request Nov 23, 2023
@benelan
chore: sync with main
82cd085 
* origin/main: (30 commits)
  test: add token snapshot tests (#8050)
  chore: release next
  fix(color-picker, popover, shell-panel, slider, tooltip): Register events on the window instead of the document (#8247)
  fix(list-item): Reserve space for empty open lists. (#8239)
  fix: dragging floating ui components (#8230)
  fix(list-item): an item with an empty slotted list should be openable. (#8240)
  fix(input): prevents mutating value on `blur` when `type="number"` (#8245)
  chore: release main (#8092)
  chore: downgrade eslint plugin after reverting breaking change (#8238)
  refactor(combobox): fix linting errors (#8235)
  chore: downgrade packages after reverting 2.0.0-next.0 change (#8237)
  chore: release next
  revert: feat(stepper-item)!: remove support for previousStep and nextStep in messages (#8222) (#8232)
  feat(stepper): enable responsive layout (#7744)
  feat(combobox): limit display of selected items with new selection-display prop (#7912)
  chore: release next
  build: update browserslist db (#8218)
  fix(list-item): fix rendering of open icon. (#8207)
  revert: feat(alert): make component responsive (#8195)
  fix(input-number): prevents mutating value on blur (#8226)
  ...
benelan pushed a commit that referenced this pull request Nov 24, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
d932710 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan added a commit that referenced this pull request Nov 24, 2023
@calcite-admin @github-actions @benelan
chore: release main (#8092)
c4dc9af 
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/eslint-plugin-calcite-components:
0.2.3</summary>

[0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3)
(2023-11-21)
</details>

<details><summary>@esri/calcite-components: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0)
(2023-11-21)

* **combobox:** Limit display of selected items with new
selection-display prop
([#7912](#7912))
([58317ae](58317ae))
* **date-picker:** Make component responsive
([#7872](#7872))
([f131218](f131218))
* **input, input-date-picker, input-number, input-text,
input-time-picker:** Truncate value and placeholder when input is narrow
([#8160](#8160))
([533eff3](533eff3))
* **list-item:** Add content-bottom slot for placing content below the
label and description of the component
([#8183](#8183))
([7d400fb](7d400fb))
* **list:** Specify the element types in the `calciteListOrderChange`
event detail.
([#8123](#8123))
([3e81d7e](3e81d7e))
* **pagination:** Introduce responsive design for xxsmall breakpoint
([#8150](#8150))
([ab20eb0](ab20eb0))
* **stepper-item:** Remove support for previousStep and nextStep in
messages
([#8222](#8222))
([213b31d](213b31d))
* **stepper:** Enable responsive layout
([#7744](#7744))
([687ca2b](687ca2b))

* **accordion-item:** Update expanded chevron color
([#8087](#8087))
([d3d7688](d3d7688))
* **action:** Ensure action content is correctly spaced
([#8184](#8184))
([b18dcc8](b18dcc8))
* **action:** Update transparent action styles
([#8194](#8194))
([0f12489](0f12489))
* **block-section:** Wraps long text over to a new line when toggle
switch is displayed
([#8101](#8101))
([3f90780](3f90780))
* **checkbox:** Make label property public
([#8181](#8181))
([d3b9c1f](d3b9c1f))
* **combobox-item:** Hide disabled item icon
([#8095](#8095))
([36552f3](36552f3))
* **input-date-picker:** Fix date-picker wrapper displaying beyond its
bounds
([#8172](#8172))
([01ec024](01ec024))
* **input-number:** Prevents mutating value on blur
([#8226](#8226))
([b89a893](b89a893))
* **input-time-zone:** Fix Indian/Christmas time zone translation
([#8096](#8096))
([d79d591](d79d591))
* **list-item, stack:** Stretch action-menu and handle when placed
inside a list-item or stack.
([#8185](#8185))
([8a16a69](8a16a69))
* **list-item, stack:** Stretch dropdown when placed inside a list-item
or stack
([#8204](#8204))
([05e6b65](05e6b65))
* **list-item:** Adds border between grouped and ungrouped list-items
([#8134](#8134))
([b3c331c](b3c331c))
* **list-item:** Fix rendering of open icon.
([#8207](#8207))
([a6e1766](a6e1766))
* **panel, flow-item:** Remove overflow rule
([#8055](#8055))
([d0c3ed2](d0c3ed2))
* **split-button:** Fix width layout
([#8133](#8133))
([051f332](051f332))

* The following workspace dependencies were updated
  * devDependencies
* @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to
0.2.3
</details>

<details><summary>@esri/calcite-components-angular: 1.11.0</summary>

* **angular:** Publish from the dist directory
([#8151](#8151))
([d813f14](d813f14))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

<details><summary>@esri/calcite-components-react: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0)
(2023-11-21)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
benelan pushed a commit that referenced this pull request Nov 24, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
80792e4 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan added a commit that referenced this pull request Nov 24, 2023
@calcite-admin @github-actions @benelan
chore: release main (#8092)
c351890 
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/eslint-plugin-calcite-components:
0.2.3</summary>

[0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3)
(2023-11-21)
</details>

<details><summary>@esri/calcite-components: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0)
(2023-11-21)

* **combobox:** Limit display of selected items with new
selection-display prop
([#7912](#7912))
([58317ae](58317ae))
* **date-picker:** Make component responsive
([#7872](#7872))
([f131218](f131218))
* **input, input-date-picker, input-number, input-text,
input-time-picker:** Truncate value and placeholder when input is narrow
([#8160](#8160))
([533eff3](533eff3))
* **list-item:** Add content-bottom slot for placing content below the
label and description of the component
([#8183](#8183))
([7d400fb](7d400fb))
* **list:** Specify the element types in the `calciteListOrderChange`
event detail.
([#8123](#8123))
([3e81d7e](3e81d7e))
* **pagination:** Introduce responsive design for xxsmall breakpoint
([#8150](#8150))
([ab20eb0](ab20eb0))
* **stepper-item:** Remove support for previousStep and nextStep in
messages
([#8222](#8222))
([213b31d](213b31d))
* **stepper:** Enable responsive layout
([#7744](#7744))
([687ca2b](687ca2b))

* **accordion-item:** Update expanded chevron color
([#8087](#8087))
([d3d7688](d3d7688))
* **action:** Ensure action content is correctly spaced
([#8184](#8184))
([b18dcc8](b18dcc8))
* **action:** Update transparent action styles
([#8194](#8194))
([0f12489](0f12489))
* **block-section:** Wraps long text over to a new line when toggle
switch is displayed
([#8101](#8101))
([3f90780](3f90780))
* **checkbox:** Make label property public
([#8181](#8181))
([d3b9c1f](d3b9c1f))
* **combobox-item:** Hide disabled item icon
([#8095](#8095))
([36552f3](36552f3))
* **input-date-picker:** Fix date-picker wrapper displaying beyond its
bounds
([#8172](#8172))
([01ec024](01ec024))
* **input-number:** Prevents mutating value on blur
([#8226](#8226))
([b89a893](b89a893))
* **input-time-zone:** Fix Indian/Christmas time zone translation
([#8096](#8096))
([d79d591](d79d591))
* **list-item, stack:** Stretch action-menu and handle when placed
inside a list-item or stack.
([#8185](#8185))
([8a16a69](8a16a69))
* **list-item, stack:** Stretch dropdown when placed inside a list-item
or stack
([#8204](#8204))
([05e6b65](05e6b65))
* **list-item:** Adds border between grouped and ungrouped list-items
([#8134](#8134))
([b3c331c](b3c331c))
* **list-item:** Fix rendering of open icon.
([#8207](#8207))
([a6e1766](a6e1766))
* **panel, flow-item:** Remove overflow rule
([#8055](#8055))
([d0c3ed2](d0c3ed2))
* **split-button:** Fix width layout
([#8133](#8133))
([051f332](051f332))

* The following workspace dependencies were updated
  * devDependencies
* @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to
0.2.3
</details>

<details><summary>@esri/calcite-components-angular: 1.11.0</summary>

* **angular:** Publish from the dist directory
([#8151](#8151))
([d813f14](d813f14))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

<details><summary>@esri/calcite-components-react: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0)
(2023-11-21)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
benelan pushed a commit that referenced this pull request Nov 26, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
c74ee15 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan added a commit that referenced this pull request Nov 26, 2023
@calcite-admin @github-actions @benelan
chore: release main (#8092)
e504346 
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/eslint-plugin-calcite-components:
0.2.3</summary>

[0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3)
(2023-11-21)
</details>

<details><summary>@esri/calcite-components: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0)
(2023-11-21)

* **combobox:** Limit display of selected items with new
selection-display prop
([#7912](#7912))
([58317ae](58317ae))
* **date-picker:** Make component responsive
([#7872](#7872))
([f131218](f131218))
* **input, input-date-picker, input-number, input-text,
input-time-picker:** Truncate value and placeholder when input is narrow
([#8160](#8160))
([533eff3](533eff3))
* **list-item:** Add content-bottom slot for placing content below the
label and description of the component
([#8183](#8183))
([7d400fb](7d400fb))
* **list:** Specify the element types in the `calciteListOrderChange`
event detail.
([#8123](#8123))
([3e81d7e](3e81d7e))
* **pagination:** Introduce responsive design for xxsmall breakpoint
([#8150](#8150))
([ab20eb0](ab20eb0))
* **stepper-item:** Remove support for previousStep and nextStep in
messages
([#8222](#8222))
([213b31d](213b31d))
* **stepper:** Enable responsive layout
([#7744](#7744))
([687ca2b](687ca2b))

* **accordion-item:** Update expanded chevron color
([#8087](#8087))
([d3d7688](d3d7688))
* **action:** Ensure action content is correctly spaced
([#8184](#8184))
([b18dcc8](b18dcc8))
* **action:** Update transparent action styles
([#8194](#8194))
([0f12489](0f12489))
* **block-section:** Wraps long text over to a new line when toggle
switch is displayed
([#8101](#8101))
([3f90780](3f90780))
* **checkbox:** Make label property public
([#8181](#8181))
([d3b9c1f](d3b9c1f))
* **combobox-item:** Hide disabled item icon
([#8095](#8095))
([36552f3](36552f3))
* **input-date-picker:** Fix date-picker wrapper displaying beyond its
bounds
([#8172](#8172))
([01ec024](01ec024))
* **input-number:** Prevents mutating value on blur
([#8226](#8226))
([b89a893](b89a893))
* **input-time-zone:** Fix Indian/Christmas time zone translation
([#8096](#8096))
([d79d591](d79d591))
* **list-item, stack:** Stretch action-menu and handle when placed
inside a list-item or stack.
([#8185](#8185))
([8a16a69](8a16a69))
* **list-item, stack:** Stretch dropdown when placed inside a list-item
or stack
([#8204](#8204))
([05e6b65](05e6b65))
* **list-item:** Adds border between grouped and ungrouped list-items
([#8134](#8134))
([b3c331c](b3c331c))
* **list-item:** Fix rendering of open icon.
([#8207](#8207))
([a6e1766](a6e1766))
* **panel, flow-item:** Remove overflow rule
([#8055](#8055))
([d0c3ed2](d0c3ed2))
* **split-button:** Fix width layout
([#8133](#8133))
([051f332](051f332))

* The following workspace dependencies were updated
  * devDependencies
* @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to
0.2.3
</details>

<details><summary>@esri/calcite-components-angular: 1.11.0</summary>

* **angular:** Publish from the dist directory
([#8151](#8151))
([d813f14](d813f14))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

<details><summary>@esri/calcite-components-react: 1.11.0</summary>

[1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0)
(2023-11-21)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
benelan pushed a commit that referenced this pull request Nov 29, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
64daee5 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this pull request Dec 1, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
bcd4a7e 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this pull request Dec 1, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
6709703 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
benelan pushed a commit that referenced this pull request Dec 2, 2023
@anveshmekala @benelan
feat(stepper): enable responsive layout (#7744)
556b8bc 
**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.
@calcite-admin calcite-admin mentioned this pull request Dec 2, 2023
Merged
benelan added a commit that referenced this pull request Dec 2, 2023
@calcite-admin @github-actions
@benelan @alisonailea @jcfranco
chore: release main (#8246)
d6adf55 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.0.0</summary>

##
[2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.1.0...@esri/calcite-design-tokens@2.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- Change the default export to a tree-shakable list of design tokens in
camelCase format rather than a JSON object (`import * as tokens from
"@esri/calcite-design-tokens";`)
- Use font name in core font family tokens
- Remove unnecessary core tokens line-height, font-size, letter-spacing,
paragraph-spacing as these can be exclusive to semantic and reference
core size tokens
- Core size tokens now use their pixel size in their name
- Change `border-radius` to `corner-radius`
- Remove unnecessary `border-width` tokens `none`, `sm`, `md`, `lg`
- Platform output
  - Remove component tokens from global output
  - Add new platform output
    - css
      - index
      - global
      - light
      - dark
      - core
      - breakpoint
      - typography classes
    - scss
      - index
      - global
      - light
      - dark
      - core
      - breakpoints
      - typography mixins
  - Replace "headless" with "global"
  - Remove "calcite" from filenames
- Package.json exports

- `@esri/calcite-design-tokens/css/headless` is now
`@esri/calcite-design-tokens/css/global`
- `@esri/calcite-design-tokens/scss/headless` is now
`@esri/calcite-design-tokens/scss/global`
- `@esri/calcite-design-tokens/js/headless` is now
`@esri/calcite-design-tokens/js/global`
- `@esri/calcite-design-tokens/es6/headless` is now
`@esri/calcite-design-tokens/es6/global`

- Token paths and values
  - Border
    - Use t-shirt sizing for border width tokens
- `Border.border-width.0` is now `border.width.none`
(--calcite-border-width-none)
- `border.border-width.1` is now `border.width.sm`
(--calcite-border-width-sm)
- `border.border-width.2` is now `border.width.md`
(--calcite-border-width-md)
- `border.border-width.3` is now `border.width.lg`
(--calcite-border-width-lg)
      - `border.border-width.4` is removed
    - Remove unused border radius tokens
      - `Core.border.border-radius.0`
      - `Core.border.border-radius.2`
      - `Core.border.border-radius.3`
- Use t-shirt sizing for border radius (now called corner radius) tokens
- `semantic.ui.border.border-radius` is `semantic.corner.radius.default`
- `Core.border.border-radius.1` is now `semantic.corner.radius.sharp`
- `Core.border.border-radius.4` is now `semantic.corner.radius.round`
- `Core.border.border-radius.5` is now `semantic.corner.radius.pill`
  - Sizing
    - `core.sizing.` tokens are now `core.size.default`
  - Breakpoints
- Move breakpoint tokens to their own separate output file for most
platform outputs (except JS)
- Update breakpoint token path from `.breakpoint.` to `.container-size.`
    - Delete unused `breakpoint.cols` tokens
  - Box Shadow
    - Use t-shirt sizing for global box shadow tokens
      - `box-shadow.0` is now `shadow.none`
      - `box-shadow.1` is now `shadow.sm`
      - `box-shadow.2` is now `shadow.md`
  - Colors
    - Remove "palette" from core color paths
- `core.color.palette.high-saturation` is now
`core.color.high-saturation`
  - Light Mode and Dark Mode
- Semantic color tokens now use the composite color scheme token type to
reference "light" and "dark" mode instead of having separate light and
dark tokens.
- `.calcite-mode-light` and `.calcite-mode-dark` classes as well as the
color scheme media queries are now provided via
`calcite-design-tokens/css/index.css`
- Provide light and dark mode mixins via
`calcite-design-tokens/css/index.scss`
    - Remove "ui" from output platform names in favor of "color"
    - `--calcite-ui-background` is now `--calcite-color-background`
    - `--calcite-ui-brand` is now `--calcite-color-brand`
    - `--calcite-ui-success` is now `--calcite-color-status-success`
    - `--calcite-ui-danger` is now `--calcite-color-status-danger`
    - `--calcite-ui-warning` is now `--calcite-color-status-warning`
    - `--calcite-ui-hint` is now `--calcite-color-status-hint`
- `--calcite-button-transparent-hover` is now
`--calcite-color-transparent-press`

### Features

- Add json to design token output
([#8290](#8290))
([753061f](753061f))
- Reduce global design tokens in calcite.css
([#8215](#8215))
([335d010](335d010))
- Update default main file output for design tokens
([#8299](#8299))
([4050a91](4050a91))
- Update json shape for docs
([#8308](#8308))
([6fac3e9](6fac3e9))

### Bug Fixes

- Align tokens with figma variables
([#8311](#8311))
([8d7cf3f](8d7cf3f))

</details>

<details><summary>@esri/eslint-plugin-calcite-components:
1.0.0</summary>

##
[1.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.3...@esri/eslint-plugin-calcite-components@1.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- __deps:__ We are treating the `@stencil/core@v4` bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.

### Build System

- __deps:__ Bump Stencil to v4
([#8108](#8108))
([bcbb79f](bcbb79f))

</details>

<details><summary>@esri/calcite-components: 2.0.0</summary>

##
[2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.11.0...@esri/calcite-components@2.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- __tokens:__ Changes to `@esri/calcite-design-tokens`, including the
names of CSS variables used to customize component styling. See the
[breaking changes
section](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-design-tokens/CHANGELOG.md#200-2023-12-02)
of the `@esri/calcite-design-tokens` changelog.
([#8311](#8311))
([8d7cf3f](8d7cf3f)),
([#8299](#8299))
([4050a91](4050a91)),
([#8215](#8215))
([335d010](335d010))
- __button, list, pick-list, value-list:__ Setting `loading` prop to
true no longer prevents interaction nor applies disabled styles. If
you'd like to block interaction when loading, please set `disabled`
along with `loading`.
([#8292](#8292))
([db3c5c7](db3c5c7))
- __dropdown:__ Dropdown's default `display` was changed from
`inline-flex` to `inline-block` to make it easier to prompt truncation
in trigger button text with minimal impact to layout (by setting an
explicit width __or__ setting `width: 100%` or `display: block` on the
dropdown of a width-constrained parent).
([#8253](#8253))
([7c96e9f](7c96e9f))
- __dropdown, modal:__ For consistency, renames the `width` property to
`widthScale`.
([#8251](#8251))
([ab12968](ab12968)),
([#8252](#8252))
([6b09245](6b09245))
- __react:__ Disabled `includeImportCustomElements`. Make sure to import
components from `@esri/calcite-components` in addition to the React
wrappers. For example, the first code snippet in
[#7185](#7185) is
now required, or else the custom elements will not be defined in the
browser.
([#8248](#8248))
([0948c1a](0948c1a))
- __i18n:__ Reduced numbering system support to `latn`, `arab` and
`arabext`. The following numbering systems were removed: `bali`, `beng`,
`deva`, `fullwide`, `gujr`, `guru`, `hanidec`, `khmr`, `knda`, `laoo`,
`limb`, `mlym`, `mong`, `mymr`, `orya`, `tamldec`, `telu`, `thai`,
`tibt`.
([#8217](#8217))
([9946ac1](9946ac1))
- __stepper-item:__ Removed both `previousStep` and `nextStep` message
properties. These are no longer overrideable via `messageOverrides`.
([#8234](#8234))
([331aafb](331aafb))
- __card:__ Removed the `deselect` message property – this property was
deprecated in
[#6657](#6657) as it
is no longer being rendered. This is no longer overrideable via
`messageOverrides`.
([#8099](#8099))
([1bab172](1bab172))
- __deps:__ We are treating the `@stencil/core@v4` bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.
([#8108](#8108))
([bcbb79f](bcbb79f))

### Features

- __action-menu:__ Set max height of the action menu
([#8275](#8275))
([ca1be28](ca1be28))
- __action-menu:__ Support action-groups
([#8273](#8273))
([c07144f](c07144f))
- __combobox, checkbox, input-time-zone, select, text-area:__ Add
`status` property
([#8304](#8304))
([a44e9fe](a44e9fe))
- __handle:__ Add disabled property
([#8283](#8283))
([7aeecd5](7aeecd5))
- __list-item:__ Add dragDisabled property
([#8285](#8285))
([f091f26](f091f26))
- __list:__ Support multiple selection using the shift key
([#8301](#8301))
([79538be](79538be))
- Reduce global design tokens in calcite.css
([#8215](#8215))
([335d010](335d010))
- __stepper:__ Enable responsive layout
([#7744](#7744))
([556b8bc](556b8bc))

### Bug Fixes

- Align tokens with figma variables
([#8311](#8311))
([8d7cf3f](8d7cf3f))
- __button, list, pick-list, value-list:__ Prevent loading prop from
affecting interactivity
([#8292](#8292))
([db3c5c7](db3c5c7))
- __button:__ Sets aria-disabled instead of disabled on internal anchor
element
([#8270](#8270))
([0926eb6](0926eb6))
- __color-picker, popover, shell-panel, slider, tooltip:__ Register
events on the window instead of the document
([#8247](#8247))
([2aaf592](2aaf592))
- __combobox, dropdown, input-date-picker, popover, tooltip:__ Fix
positioning of component when component is moved
([#8296](#8296))
([2b2506d](2b2506d))
- Dragging floating ui components
([#8230](#8230))
([5a81f6c](5a81f6c))
- __dropdown:__ Change display to inline-block to ease truncation setup
([#8253](#8253))
([7c96e9f](7c96e9f))
- __dropdown:__ Restore trigger container height
([51d1ea8](51d1ea8))
- __input-time-zone:__ Update time zone items when item-dependent props
change
([#8271](#8271))
([f77532e](f77532e))
- __input:__ Prevents mutating value on `blur` when `type="number"`
([#8245](#8245))
([58ededd](58ededd))
- __label:__ Associate label to component when `for` prop is set after
initialization
([#8309](#8309))
([e81b650](e81b650))
- __list-item:__ Adds border between grouped and ungrouped list-items
([#8134](#8134))
([ae9b083](ae9b083))
- __list-item:__ Adds border between last item in a group and slotted
item
([#8262](#8262))
([9b5cf76](9b5cf76))
- __list-item:__ An item with an empty slotted list should be openable.
([#8240](#8240))
([d615b39](d615b39))
- __list-item:__ Focus on the first focusable element within the
component when using arrow keys
([#8291](#8291))
([b902365](b902365))
- __list-item:__ Reserve space for empty open lists.
([#8239](#8239))
([484a5aa](484a5aa))
- __list:__ Add live region for dynamically changing list items
([#8148](#8148))
([e3c0c06](e3c0c06))
- __react:__ Disable includeImportCustomElements to resolve initial
render issues
([#8248](#8248))
([0948c1a](0948c1a))
- __stepper:__ Typo in CSS variable for step bar's fill
([#8255](#8255))
([2e643aa](2e643aa))

### Build System

- __deps:__ Bump Stencil to v4
([#8108](#8108))
([bcbb79f](bcbb79f))

### Code Refactoring

- __card:__ Remove deprecated `deselected` message
([#8099](#8099))
([1bab172](1bab172))
- __dropdown:__ Rename `width` property to `widthScale`
([#8251](#8251))
([ab12968](ab12968))
- __i18n:__ Reduce list of supported numbering systems to `latn`,
`arab`, and `arabext`
([#8217](#8217))
([9946ac1](9946ac1))
- __modal:__ Rename `width` property to `widthScale`
([#8252](#8252))
([6b09245](6b09245))
- __stepper-item:__ No longer supports previousStep and nextStep
messages
([#8234](#8234))
([331aafb](331aafb))

### Dependencies

- The following workspace dependencies were updated
  - devDependencies
    - @esri/calcite-design-tokens bumped from 1.1.1-next.2 to 2.0.0
- @esri/eslint-plugin-calcite-components bumped from 0.2.4-next.0 to
1.0.0

</details>

<details><summary>@esri/calcite-components-angular: 2.0.0</summary>

##
[2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@1.11.0...@esri/calcite-components-angular@2.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- __deps:__ We are treating the `@stencil/core@v4` bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.

### Build System

- __deps:__ Bump Stencil to v4
([#8108](#8108))
([bcbb79f](bcbb79f))

### Dependencies

- The following workspace dependencies were updated
  - dependencies
    - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0

</details>

<details><summary>@esri/calcite-components-react: 2.0.0</summary>

##
[2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.11.0...@esri/calcite-components-react@2.0.0)
(2023-12-02)

### ⚠ BREAKING CHANGES

- __react:__ Disabled `includeImportCustomElements`. Make sure to import
components from `@esri/calcite-components` in addition to the React
wrappers. For example, the first code snippet in
[#7185](#7185) is
now required, or else the custom elements will not be defined in the
browser.
- __deps:__ We are treating the `@stencil/core@v4` bump as a
precautionary measure, particularly due to its potential impact on
projects using `calcite-components` and Stencil.

### Bug Fixes

- __react:__ Disable includeImportCustomElements to resolve initial
render issues
([#8248](#8248))
([0948c1a](0948c1a))

### Build System

- __deps:__ Bump Stencil to v4
([#8108](#8108))
([bcbb79f](bcbb79f))

### Dependencies

- The following workspace dependencies were updated
  - dependencies
    - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0

</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
Co-authored-by: Ali Stump <astump@esri.com>
Co-authored-by: JC Franco <jfranco@esri.com>
@anveshmekala anveshmekala mentioned this pull request Mar 15, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jcfranco jcfranco jcfranco approved these changes

@driskull driskull driskull approved these changes

@eriklharper eriklharper Awaiting requested review from eriklharper

@benelan benelan Awaiting requested review from benelan benelan is a code owner

@alisonailea alisonailea Awaiting requested review from alisonailea

@Elijbet Elijbet Awaiting requested review from Elijbet

@geospatialem geospatialem Awaiting requested review from geospatialem

Assignees

@anveshmekala anveshmekala

Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2023 November Priorities
Development

Successfully merging this pull request may close these issues.
4 participants
@anveshmekala @macandcheese @jcfranco @driskull