joshuaellis Github contribution chart
joshuaellis Github Stats
joshuaellis Most Used Languages

Activity

05 Oct 2022

Issue Comment

Joshuaellis

Productivity issue: admin modals closes on click on overlay

Bug report

Describe the bug

When performing a lot of action on the admin, it's often happening that a miss click occurs while fulfilling forms inside modals, thus resetting the form and losing data.

Expected behavior

I think that modal containing any form can be only explicitly closed (click on cancel button, the X button or esc key) Modals that contain only text content (info or confirm modals) can be safely closable by also clicking on the overlay.

Forked On 05 Oct 2022 at 01:44:26

Joshuaellis

So there's a PR to fix the issue with the modal dismissing accidentally in cases like this:

it's happen when you click and hold inside modal (cleaning a field, for example), drag on the input to select, but releases the click with mouse positioned outside the modal.

And regarding the behaviour, we want to look into firing a confirmation alert in these situations to avoid accidental closures.

Commented On 05 Oct 2022 at 01:44:26
Merge

Joshuaellis

[Relations] Fix relations in components & Refactor endpoints

What

  • Use new findExisting and findAvailable routes refactored there #14538
  • Use component model and id to build URLs for relations in components

Test

  • Create a component with a relation
  • Create a CT
  • Create a single, rep component and a dz with this component
  • Create and save relations
  • Also test nested component (component with a component holding a relation)

Snapshots

image

image

Forked On 05 Oct 2022 at 01:41:55

Joshuaellis

Wouldn't that require prop drilling passing down from parents? I think that creates a harder trail to follow no?
On 05 Oct 2022 at 01:41:55

Joshuaellis

[Relations] Fix relations in components & Refactor endpoints

What

  • Use new findExisting and findAvailable routes refactored there #14538
  • Use component model and id to build URLs for relations in components

Test

  • Create a component with a relation
  • Create a CT
  • Create a single, rep component and a dz with this component
  • Create and save relations
  • Also test nested component (component with a component holding a relation)

Snapshots

image

image

Merged On 05 Oct 2022 at 01:41:55

Joshuaellis

Commented On 05 Oct 2022 at 01:41:55
Merge

Joshuaellis

fix: replace all escaped `\n` with an actual `\n` character

What does it do?

When our objects are stringified they're parsed so the \n becomes \\n, which means when it's parsed, it's no longer recognised as a line-break character, instead it's recognised as a \ and n separately. This PR replaces those string sections, with the line-break character again.

Why is it needed?

IMO it's a little confusing because \n isn't strictly markdown and if people use <br> instead, everything works fine. But this solution does solve the issue brought up by the community.

How to test it?

  • Add richtext content field to a content type
  • Set a default value of something like hello\nthere
  • Create new content entry based on initial type
  • Select preview mode
  • There should be a line break.

This will also work if you type out line breaks in the editor itself.

Related issue(s)/PR(s)

  • resolves #13093

Forked On 05 Oct 2022 at 10:39:29

Joshuaellis

Yeah other characters need fixing like `\r` but IMO it's all not markdown and I don't think we should support this. Otherwise, we have to re-add all the characters here. wdyt?
On 05 Oct 2022 at 10:39:29

Joshuaellis

fix: replace all escaped `\n` with an actual `\n` character

What does it do?

When our objects are stringified they're parsed so the \n becomes \\n, which means when it's parsed, it's no longer recognised as a line-break character, instead it's recognised as a \ and n separately. This PR replaces those string sections, with the line-break character again.

Why is it needed?

IMO it's a little confusing because \n isn't strictly markdown and if people use <br> instead, everything works fine. But this solution does solve the issue brought up by the community.

How to test it?

  • Add richtext content field to a content type
  • Set a default value of something like hello\nthere
  • Create new content entry based on initial type
  • Select preview mode
  • There should be a line break.

This will also work if you type out line breaks in the editor itself.

Related issue(s)/PR(s)

  • resolves #13093

Merged On 05 Oct 2022 at 10:39:29

Joshuaellis

Commented On 05 Oct 2022 at 10:39:29
Issue Comment

Joshuaellis

[fix][Modal | Dialog]: Add dismissible layer component

What does it do?

Add a new component to the design-system that handles "Dismissible Layers" commonly found with modals / dialogs etc. This component handles global listeners for escape and pointerDown the latter is important because a "click" event causes a false closure, see https://github.com/strapi/strapi/issues/13044#issuecomment-1225900907

Why is it needed?

  • Modals shouldn't close on a click event you want to know where the mouse pressed down not where it finished.

Additional thoughts

There's more you can do in this area, but I see this as a temporary fix whilst we decide on the progression of this lib.

Related issue(s)/PR(s)

  • partially https://github.com/strapi/strapi/issues/13044

Forked On 05 Oct 2022 at 10:31:26

Joshuaellis

Also should this be added to other components e.g. Popover? IIRC those menus behave similarly, they're supposed to have a focus capture and the same dismissible properties...?

Commented On 05 Oct 2022 at 10:31:26

Joshuaellis

[fix][Modal | Dialog]: Add dismissible layer component

What does it do?

Add a new component to the design-system that handles "Dismissible Layers" commonly found with modals / dialogs etc. This component handles global listeners for escape and pointerDown the latter is important because a "click" event causes a false closure, see https://github.com/strapi/strapi/issues/13044#issuecomment-1225900907

Why is it needed?

  • Modals shouldn't close on a click event you want to know where the mouse pressed down not where it finished.

Additional thoughts

There's more you can do in this area, but I see this as a temporary fix whilst we decide on the progression of this lib.

Related issue(s)/PR(s)

  • partially https://github.com/strapi/strapi/issues/13044

Forked On 05 Oct 2022 at 10:27:18

Joshuaellis

I haven't used it in other components, so I suppose the question is "is there a need for it"? Happy to take the consensus of the group 👍🏼
On 05 Oct 2022 at 10:27:18

Joshuaellis

[fix][Modal | Dialog]: Add dismissible layer component

What does it do?

Add a new component to the design-system that handles "Dismissible Layers" commonly found with modals / dialogs etc. This component handles global listeners for escape and pointerDown the latter is important because a "click" event causes a false closure, see https://github.com/strapi/strapi/issues/13044#issuecomment-1225900907

Why is it needed?

  • Modals shouldn't close on a click event you want to know where the mouse pressed down not where it finished.

Additional thoughts

There's more you can do in this area, but I see this as a temporary fix whilst we decide on the progression of this lib.

Related issue(s)/PR(s)

  • partially https://github.com/strapi/strapi/issues/13044

Merged On 05 Oct 2022 at 10:27:18

Joshuaellis

Commented On 05 Oct 2022 at 10:27:18

Joshuaellis

chore: fix tests

Pushed On 05 Oct 2022 at 10:24:06
Issue Comment

Joshuaellis

Unbroken CarouselImage alt text overflows out of CarouselInput

Bug report

Required System information

  • Npm version: 8.15.1
  • NodeJS version: 16.16.0
  • Strapi Design System version: 1.2.2
  • Browser: Chrome v105.0.5195.102

Describe the bug

When a CarouselInput's slide image src can't be found, long alt text overflow out of the image.

Steps to reproduce the behavior

Sandbox: https://codesandbox.io/s/affectionate-austin-bv7un1?file=/src/App.js

  1. Create a CarouselInput, with selectedSlide={0} and a fixed css width.
  2. Inside the CarouselInput, make a CarouselSlide containing a CarouselImage.
  3. Give the CarouselImage:
    • an invalid src attribute, and
    • alt text with one, unbroken string longer than the CarouselInput width.

Expected behavior

The text should wrap within the bounds of the image.

Screenshots

screenshott

Code snippets

import {
  CarouselImage,
  CarouselInput,
  CarouselSlide
} from "@strapi/design-system/CarouselInput";

export default function App() {
  return (
    <CarouselInput selectedSlide={0} style={{ width: "242px" }}>
      <CarouselSlide label="1 of 1 slides">
        <CarouselImage
          src="invalid.jpg"
          alt="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"
        />
      </CarouselSlide>
    </CarouselInput>
  );
} 

Additional context

This bug is a replication of strapi/strapi issue 14324

Forked On 05 Oct 2022 at 10:13:08

Joshuaellis

@joshuaellis @gu-stav So should I create a PR as per @maevalienard suggestion?

Sure 👍🏼 thanks.

Commented On 05 Oct 2022 at 10:13:08

Joshuaellis

[fix][Modal | Dialog]: Add dismissible layer component

Created On 05 Oct 2022 at 10:10:01
Create Branch
Joshuaellis In strapi/design-system Create Branchfix/modal-dialog-dissmissable-layer

Joshuaellis

Strapi.io's design system :rocket:

On 05 Oct 2022 at 10:02:59

Joshuaellis

fix: use router link for actions that route places

Pushed On 05 Oct 2022 at 08:15:12

Joshuaellis

Merge pull request #14528 from strapi/fix/dynamic-table-actions-should-be-links

Pushed On 05 Oct 2022 at 08:15:12

Joshuaellis

[fix]: use router link for actions that route places in Content Manager ListView & DynamicTable

Created On 05 Oct 2022 at 08:15:11

Joshuaellis

[Relations] Fix relations in components & Refactor endpoints

What

  • Use new findExisting and findAvailable routes refactored there #14538
  • Use component model and id to build URLs for relations in components

Test

  • Create a component with a relation
  • Create a CT
  • Create a single, rep component and a dz with this component
  • Create and save relations
  • Also test nested component (component with a component holding a relation)

Snapshots

image

image

Merged On 05 Oct 2022 at 07:35:02

Joshuaellis

Great fix ⭐

Commented On 05 Oct 2022 at 07:35:02
Issue Comment

Joshuaellis

Unbroken CarouselImage alt text overflows out of CarouselInput

Bug report

Required System information

  • Npm version: 8.15.1
  • NodeJS version: 16.16.0
  • Strapi Design System version: 1.2.2
  • Browser: Chrome v105.0.5195.102

Describe the bug

When a CarouselInput's slide image src can't be found, long alt text overflow out of the image.

Steps to reproduce the behavior

Sandbox: https://codesandbox.io/s/affectionate-austin-bv7un1?file=/src/App.js

  1. Create a CarouselInput, with selectedSlide={0} and a fixed css width.
  2. Inside the CarouselInput, make a CarouselSlide containing a CarouselImage.
  3. Give the CarouselImage:
    • an invalid src attribute, and
    • alt text with one, unbroken string longer than the CarouselInput width.

Expected behavior

The text should wrap within the bounds of the image.

Screenshots

screenshott

Code snippets

import {
  CarouselImage,
  CarouselInput,
  CarouselSlide
} from "@strapi/design-system/CarouselInput";

export default function App() {
  return (
    <CarouselInput selectedSlide={0} style={{ width: "242px" }}>
      <CarouselSlide label="1 of 1 slides">
        <CarouselImage
          src="invalid.jpg"
          alt="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"
        />
      </CarouselSlide>
    </CarouselInput>
  );
} 

Additional context

This bug is a replication of strapi/strapi issue 14324

Forked On 05 Oct 2022 at 07:09:28

Joshuaellis

We'll need to discuss with the design team first as this isnt a technical problem.

Commented On 05 Oct 2022 at 07:09:28

Joshuaellis

chore(demos): refactor to use titles, descriptions and keywords for csb api

Pushed On 04 Oct 2022 at 08:58:37

Joshuaellis

fix(Sparkles): remove circular dependency

Modules should not import from flatbundles that they are a part of.

Merged On 04 Oct 2022 at 11:32:31

Joshuaellis

Commented On 04 Oct 2022 at 11:32:31

Joshuaellis

chore: update to latest version of design-system

Pushed On 04 Oct 2022 at 10:29:35

Joshuaellis

fix(test): manually increase timeout to avoid document being closed early

Pushed On 04 Oct 2022 at 10:29:35

Joshuaellis

chore: remove rogue log

Pushed On 04 Oct 2022 at 10:29:35

Joshuaellis

Merge branch 'main' into chore/update-design-system

Pushed On 04 Oct 2022 at 10:29:35

Joshuaellis

Merge pull request #14530 from strapi/chore/update-design-system

Pushed On 04 Oct 2022 at 10:29:35

Joshuaellis

chore: update to latest version of design-system

Created On 04 Oct 2022 at 10:29:28

Joshuaellis

fix: init invalid assignment of current prop

On building with TS it throws the following errors:

  • TS2540: Cannot assign to 'current' because it is a read-only property.
  • TS2721: Cannot invoke an object which is possibly 'null'.

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Merge branch 'main' into patch-1

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Merge branch 'main' into patch-1

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Merge branch 'main' into patch-1

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

ci(checks.yml): update actions/checkout to v3

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Update packages/generators/generators/lib/files/ts/plugin/admin/src/components/Initializer/index.tsx

Co-authored-by: Josh 37798644+joshuaellis@users.noreply.github.com

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Update packages/generators/generators/lib/files/ts/plugin/admin/src/components/Initializer/index.tsx

Co-authored-by: Josh 37798644+joshuaellis@users.noreply.github.com

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Merge branch 'main' into patch-1

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Merge branch 'main' into patch-1

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Merge pull request #14516 from oscard0m/patch-1

ci(checks.yml): update actions/checkout to v3

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Merge pull request #14478 from iagocalazans/patch-1

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

Merge branch 'main' into chore/update-design-system

Pushed On 04 Oct 2022 at 08:53:46

Joshuaellis

chore: remove rogue log

Pushed On 04 Oct 2022 at 08:52:04
Merge

Joshuaellis

chore: update to latest version of design-system

What does it do?

  • updates design-system to latest version

Why is it needed?

There are two significant fixes in the latest version of the DS

  • Table keyboard navigation (especially with input fields)
  • Popover placements & rendering

For the full changelog see – https://github.com/strapi/design-system/releases/tag/v1.2.5

Forked On 04 Oct 2022 at 08:50:25

Joshuaellis

Jest is so flaky, yet no one has brought out a viable alternative – maybe vitest, but that's not exactly been around that long.
On 04 Oct 2022 at 08:50:25

Joshuaellis

chore: update to latest version of design-system

What does it do?

  • updates design-system to latest version

Why is it needed?

There are two significant fixes in the latest version of the DS

  • Table keyboard navigation (especially with input fields)
  • Popover placements & rendering

For the full changelog see – https://github.com/strapi/design-system/releases/tag/v1.2.5

Merged On 04 Oct 2022 at 08:50:26

Joshuaellis

Commented On 04 Oct 2022 at 08:50:26
Merge

Joshuaellis

chore: update to latest version of design-system

What does it do?

  • updates design-system to latest version

Why is it needed?

There are two significant fixes in the latest version of the DS

  • Table keyboard navigation (especially with input fields)
  • Popover placements & rendering

For the full changelog see – https://github.com/strapi/design-system/releases/tag/v1.2.5

Forked On 04 Oct 2022 at 08:49:45

Joshuaellis

🫠
On 04 Oct 2022 at 08:49:45

Joshuaellis

chore: update to latest version of design-system

What does it do?

  • updates design-system to latest version

Why is it needed?

There are two significant fixes in the latest version of the DS

  • Table keyboard navigation (especially with input fields)
  • Popover placements & rendering

For the full changelog see – https://github.com/strapi/design-system/releases/tag/v1.2.5

Merged On 04 Oct 2022 at 08:49:46

Joshuaellis

Commented On 04 Oct 2022 at 08:49:46