Splitter component

[MonikaKirkova]

No description provided.

[didimmova]

We’ve come to a conclusion that the splitter should not support customizable expander and handle slots. This functionality isn’t available in Angular, and I personaly don’t see a clear or practical use case for placing custom content in those areas.

[ddaribo]

We’ve come to a conclusion that the splitter should not support customizable expander and handle slots. This functionality isn’t available in Angular, and I personaly don’t see a clear or practical use case for placing custom content in those areas.

Some more context:

The slotted content, whatever it is, should be really small to fit the splitter bar. Resizing the bar to accommodate slotted content does not seem an ideal solution either. Probably best to reconsider these slots indeed?

[Copilot]

Pull request overview

Copilot reviewed 21 out of 22 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (3)

stories/splitter.stories.ts:175

• There is commented-out code for event listeners. If this code is not needed for the story, it should be removed. If it's meant as an example, consider moving it to a comment or documentation instead.

    document.addEventListener('DOMContentLoaded', () => {
      // const splitter = document.getElementById(
      //   'splitter'
      // ) as IgcSplitterComponent;
      // splitter.addEventListener('igcResizeStart', (event) =>
      //   console.log(event.detail)
      // );
      // splitter.addEventListener('igcResizing', (event) =>
      //   console.log(event.detail)
      // );
      // splitter.addEventListener('igcResizeEnd', (event) =>
      //   console.log(event.detail)
      // );
    });

src/components/splitter/splitter.ts:449

• The toggle public method should have an explicit return type annotation. According to the custom coding guidelines, explicit return types should be specified. Add : void to match the pattern seen in other components like tree-item.

  public toggle(position: 'start' | 'end') {
    if (position === 'start') {
      this.startCollapsed = !this.startCollapsed;
    } else {
      this.endCollapsed = !this.endCollapsed;
    }

    if (!this.startCollapsed || !this.endCollapsed) {
      this.updateComplete.then(() => this.requestUpdate());
    }
  }

stories/splitter.stories.ts:59

• The startCollapsed argType is missing the control property while the endCollapsed argType has it. For consistency, add control: 'boolean' to the startCollapsed argType configuration.

    startCollapsed: {
      type: 'boolean',
      description: 'Collapses the start pane.',
      table: { defaultValue: { summary: 'false' } },
    },

[Copilot]

The documentation for the disableCollapse property states "Sets whether the user can resize the panels", but this property controls collapse functionality, not resize. The description should be corrected to something like "Sets whether the user can collapse the panels by interacting with the splitter bar."

[kacheshmarova]

#1922

[yradoeva]

Design review:

Material, Fluent, Bootstrap

1. Light and Dark mode - Idle, Focused, disabledCollapse, disabledResize states: The handle and icons should also be with 68% opacity

2. Light and Dark mode - Hover on DisabledResize; Hover on DisabledResize & DisabledCollapse: the background fill of the bar should be with 68% opacity

Bootstrap only
3. Dark mode:

• Idle, Focused, disabledCollapse, disabledResize states: handle and icon color should be dark grays.400 68% (not grays.800)
• Hover, Hover on disabledCollapse, Hover on disabledResize: handle and icon color should be dark grays.400 (not grays.800)

Indigo only
4. Light and Dark mode - Focused state: The handle and icons should also be with 68% opacity

5. Light and Dark mode - Hover on DisabledResize: the background fill of the bar should be with 68% opacity