Currently, I see that multiple class names are added using javascript strings, it would be better if we use clsx package which is 1.2Kb only for managing it.

Issue Type

Feature Request

Component or Pattern Affected

Most of them

Expected Behavior

Current Behavior

<div
        className={
          'cui-button-group' +
          `${(theme && ` cui-button-group--${theme}`) || ''}` +
          `${(justified && ` cui-button-group--justified`) || ''}` +
          `${(type && ` cui-button-group--${type}` || '')}` +
          `${(className && ` ${className}`) || ''}`
        }
>
</div>

Possible Solution

Using clsx

<div
        className={
          clsx('cui-button-group', {
            'cui-button-group--justified': justified,
            [`cui-button-group--${theme}`]: theme,
            [`cui-button-group--${type}`]: type
          }, className)
        }
>
</div>

This is much cleaner, as you do not have to deal with spaces in the class names and also empty string if the condition is undefined.

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Currently there's an onHide prop which gets passed to the X button on the Alert. However, all the remaining props are being passed to this X button so there is no way to pass an onClick handler to the outer container of the Alert.

1. Remaining props should be on the outer container so we can also pass in className and other props
2. Alert should take handle an onClick handler prop (and also handle key downs for accessibility and keyboard navigation through the AlertContainer list)

Issue Type

Bug Report/Feature Request

Component or Pattern Affected

Alert/Alert Container

Expected Behavior

Clicking Alert should trigger an action

Current Behavior

Clicking Alert does not trigger an action

Possible Solution

1. Remaining props should be on the outer container so we can also pass in className and other props
2. Alert should take handle an onClick handler prop (and also handle key downs for accessibility and keyboard navigation through the AlertContainer list)

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Issue Type

Component or Pattern Affected

Expected Behavior

Should have option not to loop through list when reaching the end.

Current Behavior

Using keyboard navigation (up arrow, down arrow) loops through list when reaching the limits.

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Issue Type

Bug Report

Component or Pattern Affected

ListSeparator

Expected Behavior

background shouldn't be affected, only the color of the line and the text color

Current Behavior

background color is changed instead of the color of the line

Possible Solution

fix colors

Steps to Reproduce (for bugs)

1. wrap cui--dark div with dark background color around ListSeparator

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

When conditionally rendering a section in an list item, an error is thrown on unknown property:

Example code:

function App() {
  const display = false;
  return (
    <div className="App">
      <ListItem type="large" title="List Item">
        <ListItemSection position="left">Left</ListItemSection>
        {display && <ListItemSection position="center">Center</ListItemSection>}
        <ListItemSection position="right">Right</ListItemSection>
      </ListItem>
    </div>
  );
}

Location of error:
https://github.com/collab-ui/collab-ui-react/blob/26bf21d1685f5405cee6909cecea931eb1501862/src/lib/ListItem/index.js#L84

Issue Type

Bug Report

Component or Pattern Affected

Date Picker

Expected Behavior

The voiceover/screen reader should be able to speak out the dates when using the keyboard to select dates, similarly to how it works for https://material.angular.io/components/datepicker/overview

Current Behavior

While using voiceover, and then using keys to select dates, I did not here the voiceover informing the date the current selection is on

Possible Solution

Similar to how material angular does it

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-react/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
CallControl

Current behavior

1. for prop type="microphone-muted" default background color is #333333 and on active it becomes #07C1E4

default: (background-color: #333333)

active: (background-color: #07C1E4)

2. CallControl which have background color: #333333 turns #999999 on hover

hover: (background-color: #999999)

Expected/desired behavior

1. for prop type="microphone-muted" background color should be #FF503C on active and on hover it should be #EB4937

default: (background-color: #333333)

active: (background-color: #FF503C)

hover: (background-color: #EB4937)

2. CallControl which have background color: #333333 should turn to #2A2A2A on hover

hover: (background-color: #2A2A2A)

Issue Type

Bug Report

Component or Pattern Affected

Input

Expected Behavior

Correct warning/error message.

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-react/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
Input + Icon

Current behavior
When using the iconNode prop with an <Input> component, if the iconNode is wrapped in something (like a <Tooltip>), the iconNode does not display correctly (should be at end of Input).

Expected/desired behavior
The content in the iconNode prop should be aligned at the the end of the input.

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via images or video.

render() {
  const iconNode = (
    <Tooltip
      direction="bottom-center"
      tooltip="Rob's Tooltip"
      trigger="MouseEnter"
    >
      <Icon
        name="info_16"
        ariaLabel={'custom icon'}
      />
    </Tooltip>
  );
  return (
    <div className='row'>
      <Input
        name='inputLabel'
        label='Robs Label'
        htmlId='inputLabel'
        iconNode={iconNode}
        inputSize='small-5'
      />
    </div>
  );
}

Please tell us about your environment:
macOS 10.14

• Toolkit Version version:
  v10
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

YES.

In IE , the meeting alert buttons moves out of the view port.

Issue Type

Bug Report

Component or Pattern Affected

AlertMeeting

Expected Behavior

Current Behavior

Possible Solution

For IE if we remove max-width style from
{alert-class}__content and {alert-class}__content--wide will fix the issue.

Steps to Reproduce (for bugs)

1. Launch Internet Explorer.
2. Go to following link . https://react.collab-ui.com/communication/alert
3. Click on button from meeting section.

Context

The issue affect webex-teams(web) performance

Your Environment

• Library: Core
• Version used: 11
• Browser Name and version: Internet Explorer
• Operating System and version: Windows
• Link to your project:

Discovered using collab-ui with react-virtualized. Essentially if you place something like a Popover or EventOverlay within an absolute or transformed element (or maybe fixed) the dynamic positioning breaks.

Issue Type

Bug

Component or Pattern Affected

Affects things like Popover, but believe the root cause is in EventOverlay.

Expected Behavior

Dynamic positioning should work correctly.

Current Behavior

https://codesandbox.io/s/lv2r35509

Possible Solution

From @bfbiggs:
We aren’t adjusting the parentDims based on an absolutely positioned parent which the ListItem is now behaving as. Need to determine closest transform/absolute ancestor and perform calculations.
I need to handle anytime the origin (top/bottom) is reset to 0 which is applicable to elements with transform or absolute I believe

Steps to Reproduce (for bugs)

https://codesandbox.io/s/lv2r35509

Context

Being able to use react-virtualized or react-window with collab-ui would be awesome!!

Your Environment

• Library: Core, React, Icons, react-virtualized
• Version used:

    "@collab-ui/core": "11.7.2",
    "@collab-ui/icons": "4.11.1",
    "@collab-ui/react": "11.9.2",

• Browser Name and version: Appears to work correctly on Safari.. but broken on FF and Chrome
• Operating System and version: macOS

Issue Type

Bug Report

Component or Pattern Affected

Footer Logo

Expected Behavior

Footer logo should remain same size

Current Behavior

Footer logo stretches as windows size is reduced

Possible Solution

Steps to Reproduce (for bugs)

1. Open https://idbroker.webex.com/idb/profile in IE11
2. Resize browser window so that that width can be reduced
3. Check Footer logo
4. Logo is stretched

Context

Your Environment

• Library: Code
• Version used: 10.10.0
• Browser Name and version: IE 11
• Operating System and version: Windows
• Link to your project:

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-core/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected

sidepanel
Current behavior

text in sidepanel problems, things that are not links highlight blue when I hover and things that are only part of them highlight in some cases
Expected/desired behavior
things that are not links should not highlight and things that are links should

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via images or video.

sidepanel.zip

Please tell us about your environment:
MAC OS

• Toolkit Version version:
  10.33.2
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

Issue Type

Bug Report

Component or Pattern Affected

The whole icon library

Expected Behavior

I am expecting the icons to appear properly on screen

Current Behavior

They all look like this:

Possible Solution

Before mentioning possibles solutions, let's understand why this issue is happening.

After various tests, I concluded that the bug only happened in Firefox Nightly (not in Firefox beta nor stable) so I filed a regression on bugzilla .

Two Firefox engineers got back to me explaining that Firefox Nightly is enforcing stricter parsing of webfonts on purpose, ie. to detect badly formed font resources. This stricter enforcement will not be activated in stable yet, but it may happen someday.

There is a similar issue about another font.

Possible Solutions:

1. Consider it a non-issue since it only affects Firefox Nightly (users can set gfx.downloadable_fonts.otl_validation to false in their settings to fix hide this issue).
2. Investigate why the font generated is invalid, and fix it.
3. Use SVG for the icons because they are graphics and not fonts? Bring down the pitchforks, I am trolling 😅 . But genuinely, wasn't it possible to keep icons as SVG and make tree-shaking / dead code elimination work to avoid bundling the huge iconsData.json?

Steps to Reproduce (for bugs)

1. Visit https://momentum.design/styles/icons/library with Firefox Nightly

Context

There are dozens of us... DOZENS (using Firefox Nightly as the daily browser)!

Your Environment

Firefox Nightly, specifically.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-react/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
ButtonGroup

Current behavior
Throw an error if the children is not Button

Expected/desired behavior
If we want to achieve the following UI. We may need to support:

<ButtonGroup type='pill'>
  <Tooltip><Button ariaLabel='left'><Icon name='icon-flag_16' /></Button></Tooltip>
  <Button ariaLabel='right'><Icon name='icon-cancel_16' /></Button>
</ButtonGroup>

Please tell us about your environment:
OS X 10.14

• Toolkit Version version:
  v10
• Browser: [all]

Reported by @AMANDUA

Issue Type

Component or Pattern Affected

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Allow alerts to take in a timeout prop so it can be dismissed after a certain amount of time

Issue Type

Feature Request

Component or Pattern Affected

Alert/AlertContainer

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Please recreate the DialPad from web-client-components as a collab-ui component.

Abstract designs: https://share.goabstract.com/b01f940f-e7c2-46cd-9367-3465a9ad9236

It's currently used while making a call mid-meeting. Spec: https://cisco.invisionapp.com/d/main#/console/13913688/303735295/preview

FAQ is apparently not in the source tree or it's pointing to an old location.

Hey there! Before you post an issue here, did you try reporting this to the "Collab UI Q&A" space in Webex Teams? Please ask about your issue there before creating a new GitHub issue.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-react/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
Need a new container for quote message feature.

Current behavior
No container could meet the current need for quote message feature.

Expected/desired behavior
Need a new container with an 'x' button on top right of the box;
https://cisco.invisionapp.com/d/main/#/console/16027196/332376724/preview

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via images or video.

Please tell us about your environment:
webex teams web client

• Toolkit Version version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Hey there! Before you post an issue here, did you try reporting this to the "Collab UI Q&A" space in Webex Teams? Please ask about your issue there before creating a new GitHub issue.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-angular/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
Modal Body, Modal Header, Modal Footer, List, List Item

Current behavior
ngClass is not supported for the components mentioned above because of the way its accessing class as Input

Avoid

@Input() class

Expected/desired behavior
ngClass should be supported.

Reproduction of the problem
Here is a sample reproduction: https://stackblitz.com/edit/angular-cmid9w?file=src%2Fapp%2Fapp.component.html (check HelloComponent)

Solution: https://github.com/collab-ui/collab-ui-angular/pull/16#discussion_r259599236

@ArthusLiang @pauljeter @elenagiere
Please tell us about your environment:

• Toolkit Version version:
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Issue Type

Doesn't closes after selection

Component or Pattern Affected

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Hey there! Before you post an issue here, did you try reporting this to the "Collab UI Q&A" space in Webex Teams? Please ask about your issue there before creating a new GitHub issue.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-react/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
Icon

Current behavior

Expected/desired behavior

Reproduction of the problem
Mount Icon without color props on a black background div.

We may need to defined a variable for color #2a2a2a

While trying to reproduce another ticket (double checking if fonts are being loaded-in correctly without needing to import a CSS file) I encountered a bug where during the build process where a core-js dependency caused a failure
Using codesandbox and parcel (locally) I was a

Issue Type

Bug Report

Component or Pattern Affected

Parcel and Codesandbox are reporting a failure in Accordion but it's really a require issue (core-js or not)

Expected Behavior

Should render the react component

Current Behavior

Parcel's zero-config build process causes a build error with modules required by components

Possible Solution

Move off of core-js and to either babel-present-env or pollyfill.io

Steps to Reproduce (for bugs)

Codesandbox link above has a working example of the bug

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Read Only List Item is currently clickable and changes the active state color when clicked. It should not be clickable nor have an active state.

Issue Type

Bug Report

Component or Pattern Affected

ListItem

Expected Behavior

It should not be clickable nor have an active state. Should not have a clickable cursor either

Current Behavior

Read Only List Item is currently clickable and changes the active state color when clicked.

Possible Solution

Hide pointer cursor, don't have active state (is it a button?)

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-react/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
Avatar

Current behavior
Displays avatar presence with option types such as active, inactive, dnd, ooo.

Expected/desired behavior
Expand avatar to include rich presence states such as call, meeting, presenting.

Reproduction of the problem
https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-32577

Please tell us about your environment:
Webex Teams Web Client

• Toolkit Version version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

On a demo page this is the code to use:

<div className="docs-example docs-example--spacing">
          <h3>
            <p><code className="small">type=(default)</code></p>
          </h3>
          <div><Avatar title="Tom Smith"/></div>
        </div>

However, default is not an option (anymore?). I got a Proptype warning using default. Therefore, I changed it to "".

For the SearchInput component, it seems like the "clear" icon is vertically misaligned for the "Pill" type. It looks fine for the "Normal" type. Please see screenshots for examples.

Normal Type

Pill Type

Browser: Chrome
OS: MacOs 10.13.6

Markup Code:

<div className={[classNames('ciscospark-search-input-wrapper', styles.searchInputWrapper), 'cui--dark'].join(' ')}>
              <div className={classNames('ciscospark-search-input', styles.searchInput)}>
                <SearchInput
                  name="pillSearchInput"
                  htmlId="pillSearchInput"
                  type="pill"
                  inputSize="large-10"
                  onKeyUp={this.handleSpaceFilterInput}
                  onChange={this.handleSpaceFilterInput}
                  clear
                />
              </div>
            </div>

CSS:

.searchInputWrapper {
  font-family: CiscoSans, 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  justify-content: center;
  flex-direction: row;
  padding-top: 1rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(0,0,0,1);
  fill: #efefef;
}

.searchInput {
  display: flex;
  justify-content: center;
  align-self: center;
  flex: 1 1 auto;
  margin: auto;
}

SpaceListMeeting needs to support isIMOnlyShare prop.
If isIMOnlyShare is set to true,

1. change the button from green to blue
2. remove the number of the participant
3. show Icon share-screen_12instead ofpeople_12

Issue Type

Support Request

Component or Pattern Affected

SpaceListMeeting

Expected Behavior

Support new prop isIMOnlyShare

Current Behavior

Possible Solution

Context

Need to accomplish IM only share feature.

Your Environment

• Library: React
• Version used:
• Browser Name and version: Chrome
• Operating System and version: macOS
• Link to your project:

Issue Type

Feature Request

Component or Pattern Affected

CallAlerts

Expected Behavior

Show Icon share when receiving the IM only share request.

VD: https://cisco.invisionapp.com/d/main/#/console/16845228/349259633/preview

Current Behavior

Showed Icon camera when receiving IM only share.

Possible Solution

Context

Accomplish IM only share feature

Your Environment

• Library: React
• Version used:
• Browser Name and version: Chrome
• Operating System and version: macOS
• Link to your project:

Issue Type

Component or Pattern Affected

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Hey there! Before you post an issue here, did you try reporting this to the "Collab UI Q&A" space in Webex Teams? Please ask about your issue there before creating a new GitHub issue.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-core/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
CollabIconType.swift

Current behavior
Swift icon file enumeration can create invalid Swift enums if the corresponding svg file starts with a number.

Expected/desired behavior
Swift icon file enumeration should create valid enums. There are a couple of options including:

• Change whatever automate process that creates the CollabIconType Swift file to “spell out” a number when creating the enum if the first character of the svg file starts with a number.
• Don’t name the svg files so that the first character is a number.

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via images or video.

Please tell us about your environment:
XCode 10.1

• Toolkit Version version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Issue Type

Bug Report

Component or Pattern Affected

Slider

Expected Behavior

I should be able to hear what value is when I interact with the slider, similar to https://material.angular.io/components/slider/examples

Current Behavior

Have no clue what value does the slider has

Possible Solution

Similar to angular material slider

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

@bfbiggs Hey Ben, the size of the button group is large than the VD, is it possible to make the size of the button group adjustable? Thanks!

VD:
https://cisco.invisionapp.com/d/main/#/console/16027196/348752181/

.menu{
height: 24px;
width: 108px;
}

Actual:

height: 38px;
width: 178px;

Issue Type

Support Request

Component or Pattern Affected

ButtonGroup

Expected Behavior

Make the size of button group adjustable.

Current Behavior

The size of the button group is too big on the web.

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment

• Library: React
• Version used:
  "@collab-ui/core": "11.6.7",
  "@collab-ui/icons": "4.9.0",
  "@collab-ui/react": "11.8.0",
• Browser Name and version: Chrome
• Operating System and version: Mac
• Link to your project:https://sqbu-github.cisco.com/stawang2/web-client/

These are being listed in tandem because debugging them without the other is not feasible.

When using the EventOverlay/Popover to replicate Combobox functionality - two errors are thrown:

1. There is no-op error caused most likely by Popover because it is trying to perform an action after the component has already unmounted. Investigate componentWillUnmount logic and possibility of determining if clearTimeout function should run.
2. Due to the logic in EventOverlay componentDidUpdate, it appears there's the possibility of multiple keyHandlers being added as well keyHandlers being removed prematurely. This requires more investigation, but has to do with the keyHandler change made for enter/esc to work with EditableTextField within the Menu component.
   @robstax

Issue Type

Bug Report

Component or Pattern Affected

EventOverlay, Popover

Expected Behavior

No errors or warnings using the Popover/EO.

Current Behavior

2 console errors being thrown.

Possible Solution

Clean up unMount logic and keyHandler logic.

Steps to Reproduce (for bugs)

Context

The issue appeared when trying to recreate comboBox behavior.

Your Environment

• Library: React
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

The input's placeholder is not aligned properly on IE11

In a couple different places within Webex teams, we do input validation to check whether a string matches a regex pattern for a valid email format. Only once the text value in the component matches the regex do we enable the . It would be nice to have a component that wrapped the Input and Button components to do this sort of thing for us. Here is the regex we use:

/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

Issue Type

Feature Request

Component or Pattern Affected

None? It's a new component

Expected Behavior

Possible Solution

Make a component that wraps the Button and Input components like I mentioned above and include the functionality I mentioned with a regex such as the one I listed above.

Research if there is a solution to force destructuring past two properties onto a new line. Write stories to update libraries.

i.e.

import { a, b c } from 'd';

should be

import {
a,
b,
c
} from 'd';

We would like to be able to pass our own Avatar Component to the CompositeAvatar Component. Our custom Avatar component would essentially render the Collab Avatar Component, but we want to do some processing in our component as well.

Issue Type

Feature Request

Component or Pattern Affected

CompositeAvatar

Expected Behavior

Be able to pass own Avatar Component

<CompositeAvatar>
  <CustomAvatar/>
  <CustomAvatar/>
</CompositeAvatar>

Current Behavior

Can only pass Collab Avatar

<CompositeAvatar>
  <Avatar/>
  <Avatar/>
</CompositeAvatar>

Possible Solution

somehow check if underlying component is the collab Avatar component?

Steps to Reproduce (for bugs)

1. Render Custom Avatar inside CompositeAvatar

Context

We have a ParticipantAvatar which does some processing to fetch the participant avatar and display it. We would like to display this avatar in the CompositeAvatar

Your Environment

• Library: React
• Version used: Latest
• Browser Name and version: all
• Operating System and version: Mac
• Link to your project: web-client

Hey there! Before you post an issue here, did you try reporting this to the "Collab UI Q&A" space in Webex Teams? Please ask about your issue there before creating a new GitHub issue.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-core/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
ButtonGroup

Current behavior
Active style can't be modified because it's being programatically removed in the ButtonGroup component.

Expected/desired behavior
If the default active style should be trasparent, than that style could be applied in the css so that it can be overwritten.

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via images or video.

Please tell us about your environment:

• Toolkit Version version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Issue Type

Feature Request

Component or Pattern Affected

CallControl

Expected Behavior

• background-color and border collab styles value should be customizable based on the colorObj props value. If colorObj is null/undefined then the styles value should be default (as it is now)
• As an instance

1. In meeting, CallControl type= microphone-muted default color is black and it turns to red on active, but as per requirement when microphone-muted CallControl collapsed to the center, we want its background-color to be lighten by some opacity and border to be set with color red as below -
   
2. Similarly, In roster panel we want some other behavior as below -
   

Current Behavior

We have achieved the above mentioned scenario by overriding default behavior.

1. In meeting case:

Normal mode:

.cui-button--red {
    background-color: rgba($flamingo, .12);
    border: 1px solid $flamingo;
}

High contrast mode:

.cui--contrast {
  & .cui-button--red {
      background-color: rgba($red-base-contrast, .12);
      border: 1px solid $red-base-contrast;
  }
}

1. Roster panel case:
   Same as above, we have overridden collab styles in this case as well.

Possible Solution

CallControl should allow a props of object type by using which user can pass background-color, opacity, border etc. and these value can be use to decide the backgroundColor and border of CallControl.

Steps to Reproduce (for bugs)

1. Start any meeting
2. Mute yourself from meeting controls
3. When microphone-muted collapsed to center, its background color will be lighten with some border.
4. If you are a host, go to roster panel and hover participant list, there you will see microphone-muted customized backgroundColor. Mute any user to check muted behavior as well.

Context

Your Environment

• Library: React
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Failure badge icon on avatar is too small.

Issue Type

Enchancement

Component or Pattern Affected

Avatar

Expected Behavior

Screenshot from desktop clients:

Current Behavior

Screenshot from web client:

Your Environment

• Library: Core, React, Icons
• Version used:

    "@collab-ui/core": "10.39.2",
    "@collab-ui/icons": "3.43.0",
    "@collab-ui/react": "10.0.8",

• Browser Name and version: Chrome, Firefox, Safari
• Operating System and version: macOS 10.14.3

Hey there! Before you post an issue here, did you try reporting this to the "Collab UI Q&A" space in Webex Teams? Please ask about your issue there before creating a new GitHub issue.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-angular/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
Package

Current behavior
Not able to search in tools like ngx.tools

Expected/desired behavior
Adding keywords in pacakge.json should resolve the issue as mentioned here ngxtools/ngx.tools#32

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via images or video.

Please tell us about your environment:

• Toolkit Version version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

https://app.asana.com/app/asana/-/get_asset?asset_id=904946745348633If you have multiple components, the select highlight does not not go away onClick outside of that List component.

Issue Type

Bug Report

Component or Pattern Affected

Button

Expected Behavior

Colors should be accessible to all users

Current Behavior

Primary Button is not accessible according to AA or AAA standards

Possible Solution

Black (dark) color instead of white(light) color for the primary button is accessible

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project:

Hey there! Before you post an issue here, did you try reporting this to the "Collab UI Q&A" space in Webex Teams? Please ask about your issue there before creating a new GitHub issue.

I'm submitting a ... (check one with "x")

- [ ] bug report
- [x] feature request
- [ ] support request => Please do not submit support request here, instead see https://github.com/collab-ui/collab-ui-angular/blob/master/CONTRIBUTING.md#-got-a-question-or-problem

Component Affected
All

Current behavior
Web Components are not generated

Expected/desired behavior
Using Angular Elements, the components in Collab UI can be converted into Web Components, so that they can be used in any other application, even in Vanilla JS app or with any other framework https://custom-elements-everywhere.com/

Since I am not a Cisco Employee, I could not post in "Collab UI Q&A" space in Webex Teams first.

Reloading pages on momemtum.design (except for the home page), shows 404 page first and then displays the content.

Issue Type

Bug Report

Component or Pattern Affected

Momentum website

Expected Behavior

Reloading pages on momentum.design should displays the content for the page.

Current Behavior

It displays 404 page first and then shows the content

Possible Solution

Don't show the 404 page

Steps to Reproduce (for bugs)

Context

Your Environment

• Library:
• Version used:
• Browser Name and version:
• Operating System and version:
• Link to your project: