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

fix(action): Update transparent action styles #8194

Merged
merged 8 commits into from
Nov 20, 2023
Merged

fix(action): Update transparent action styles #8194

merged 8 commits into from
Nov 20, 2023

Conversation

macandcheese
Copy link
Contributor

Related Issue: #3834

Summary

cc @asangma @SkyeSeitz @ashetland

@macandcheese macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Nov 17, 2023
@macandcheese macandcheese requested a review from a team as a code owner November 17, 2023 00:12
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Nov 17, 2023
@SkyeSeitz
Copy link

Looking good! A few small notes before approving the rest of the snapshots..

  • The active fg-3 background goes away when loading=“true”
  • The loader not animating is a Storybook artifact, correct?
  • Should the hover leave 1px top & bottom or can it fill the height of the container?

hello world
  • Same here?
Estuaries
  • Super smol but there is corner radius mismatch here on all dismissible popover scales (I think this is just for the test tho?)
Pasted Graphic 2

@macandcheese
Copy link
Contributor Author

Super smol but there is corner radius mismatch here on all dismissible popover scales

Nice catch! Should be unrelated to this PR though - could you open a new issue?

Should the hover leave 1px top & bottom or can it fill the height of the container?
This is the current behavior, it might be resolved by #7538, could you add a +1 there?

For the "Estuaries" one that is not close to full-height, only Action elements are slotted and automatically stretched - that is slotted into the Dropdown trigger so isn't being stretched. I think this could be improved, but also something a user can adjust. Upcoming changes to Dropdown might resolve this by using a reference-element instead of user needing to slot a trigger inside Dropdown.

I'll take a look at the FG change in loading, can you confirm the behavior for this transparent mode and solid? Thanks!

@SkyeSeitz SkyeSeitz mentioned this pull request Nov 17, 2023
Closed
5 tasks
@SkyeSeitz
Copy link

I'll take a look at the FG change in loading, can you confirm the behavior for this transparent mode and solid? Thanks!

I would expect the transparent active Action to retain its fg-3 background when loading="true" as it does in solid.

This is the current behavior, it might be resolved by #7538, could you add a +1 there?

Added a +1 to #7538

Nice catch! Should be unrelated to this PR though - could you open a new issue?

Good point - thought that was new to this build. Issue created ✅ #8208

@macandcheese macandcheese 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 20, 2023
@macandcheese macandcheese 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 20, 2023
@macandcheese macandcheese 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 20, 2023
@macandcheese macandcheese 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 20, 2023
jcfranco
jcfranco approved these changes Nov 20, 2023
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

Code changes LGTM! 🚀

@macandcheese macandcheese merged commit 0f12489 into main Nov 20, 2023
16 checks passed
@macandcheese macandcheese deleted the macandcheese/3834-update-action-transparent-style branch November 20, 2023 19:16
@github-actions github-actions bot added this to the 2023 November Priorities milestone Nov 20, 2023
@calcite-admin calcite-admin mentioned this pull request Nov 20, 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 pushed a commit that referenced this pull request Nov 24, 2023
@macandcheese @benelan
fix(action): Update transparent action styles (#8194)
6aadef8 
**Related Issue:** #3834 

## Summary
cc @asangma @SkyeSeitz @ashetland
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
@macandcheese @benelan
fix(action): Update transparent action styles (#8194)
d4b14d6 
**Related Issue:** #3834 

## Summary
cc @asangma @SkyeSeitz @ashetland
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
@macandcheese @benelan
fix(action): Update transparent action styles (#8194)
7d2b61a 
**Related Issue:** #3834 

## Summary
cc @asangma @SkyeSeitz @ashetland
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>
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

Assignees

@macandcheese macandcheese

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 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.
3 participants
@macandcheese @SkyeSeitz @jcfranco