cloudscape-design / components Goto Github PK

Browser

No response

Package version

Current

React version

No response

Description

Component Setup

import * as React from "react";
import Pagination from "@amzn/awsui-components-react/polaris/pagination";

export default () => {
  const [
    currentPageIndex,
    setCurrentPageIndex
  ] = React.useState(1);
  return (
    <Pagination
      ariaLabels={{
        nextPageLabel: "Next page",
        previousPageLabel: "Previous page",
        pageLabel: pageNumber =>
          `Page ${pageNumber} of all pages`
      }}
      currentPageIndex={currentPageIndex}
      onChange={({ detail }) =>
        setCurrentPageIndex(detail.currentPageIndex)
      }
      openEnd
      pagesCount={5}
    />
  );
}

If i have openEnd i can keep clicking 'next arrow' past the end. and then have to click the
back arrow'

Source code

No response

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

It appears the ButtonDropdown component only goes one level deep and then the nesting stops, would be great to go deeper.

https://cloudscape.design/components/button-dropdown/?tabId=playground&example=with-expandable-groups

Double nesting data attempt in playground

[
  { "id": "connect", "text": "Connect" },
  { "id": "password", "text": "Get password" },
  {
    "id": "states",
    "text": "Instance State",
    "items": [
      {
        "id": "states",
        "text": "Instance State",
        "items": [
          { "id": "start", "text": "Start" },
          { "id": "stop", "text": "Stop", "disabled": true },
          { "id": "hibernate", "text": "Hibernate", "disabled": true },
          { "id": "reboot", "text": "Reboot", "disabled": true },
          { "id": "terminate", "text": "Terminate" }
        ]
      },
      { "id": "stop", "text": "Stop", "disabled": true },
      { "id": "hibernate", "text": "Hibernate", "disabled": true },
      { "id": "reboot", "text": "Reboot", "disabled": true },
      { "id": "terminate", "text": "Terminate" }
    ]
  }
]

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

An Autocomplete component like the one MUI here https://mui.com/material-ui/react-autocomplete
Can also be achieved by giving search capability in the Select component

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

name: Figma - Bug Report
about: Report a bug in our Figma library
labels: bug,figma,design
body:

• type: markdown
  attributes:
  value: TBD

Browser

Chrome

Package version

3.0.1

React version

18.2

Description

Documentation shows a component ContentLayout (https://cloudscape.design/components/content-layout/?tabId=playground), but this is not exported from the package.

Source code

No response

Reproduction

attempt to import ContentLayout component into react

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

Hi friends,

we are using the Multiselect component and we'd like to offer a "select all" option. Here is an example for clarification:

I'm aware I can build it into each usage of Multiselect,by adding an extra special item to the items list and than handle the special case in the onChange function, but it's a bit clunky and repetitive. Would be awesome to have a built-in option in the Multiselect component to enable/disable a "Select all".

I'm happy to implement it and create a pull request if you want me to.

Best regards
Thiemo

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

Chrome

Package version

v3.0.34

React version

v17.0.2

Description

I cannot use onItemClick of menu-dropdown utility on TopNavigation.

※onClick of button utility is no problem, instead.

Source code

import TopNavigation from '@cloudscape-design/components/top-navigation';

export default function CDTopNavigation(props: any) {
  return (
    <TopNavigation
      identity={{
        href: '#',
        title: 'Service Name',
      }}
      utilities={[
        // OK
        {
          type: 'button',
          text: 'Sign Out',
          onClick: props.signOut
        },
        // NG
        {
          type: 'menu-dropdown',
          text: props.username,
          description: props.email,
          iconName: 'user-profile',
          items: [
            { id: 'profile', text: 'Profile' },
            { id: 'preferences', text: 'Preferences' },
            { id: 'signout', text: 'Sign Out' },
          ],
          onItemClick: (props.signOut) => {
            id: 'signout'
          },
        }
      ]}
      i18nStrings={{
        overflowMenuTriggerText: 'More',
        overflowMenuTitleText: 'All',
      }}
    />
  );
}

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

Hi,

I'm using Gatsby and it work pretty well, my only concern is that Gatsby has the component Link which is super optimized for users

The component drives a powerful performance feature called preloading. Preloading is used to prefetch page resources so that the resources are available by the time the user navigates to the page.

We use the browser’s Intersection Observer API to observe when a component enters the user viewport and then start a low-priority request for the linked page’s resources. Then when a user moves their mouse over a link and the onMouseOver event is triggered, we upgrade the fetches to high-priority.

I can feel the speed difference by using it or not.
Is it possible to add an option to define a react component directly for the link ?

Something like:

<SideNavigation
      items={[
        {
          type: "section",
          text: "Collections",
          items: [
            {
              type: "cmp",
              value: <Link href="/page2"></Link>,
            },
            {
              type: "link",
              text: "Test",
              href: "/test",
            },
          ],
        },
...

<TopNavigation
      identity={{
        href: "/",
        cmp: <Link href="/page3"></Link>,
      }}
...

Or is there a way to do it already?

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

It will be nice to be able to see the code for the demos. The demos contain some ideas for how to use the component libraries. Unfortunately without the demo code, it is not currently possible to know how the demo was put together and what the recommended practices are. It will be great if the codes can be made available.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

The way the ref is used on each elements at the moment we cannot easily use react-hook-form. For component libraries, react suggest that we forward the ref.
https://reactjs.org/docs/forwarding-refs.html

react-form-hook use the ref to bind the events on the input itself, but with the actual state of the ref it doesn't work.
https://react-hook-form.com/api/useform/register#registerRef

There is a workaround, but it makes react-form-hook less usefull and fun to work with.
https://react-hook-form.com/faqs#Whatifyoudonthaveaccesstoref

react-form-hook is a really popular library used by a lot of people. Maybe there is an other work around I am not aware of. If this is the case I would be happy to have it.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

For global digital products, it's important to have a language switch component. Currently we have to use a dropdown to do the language switch which is not ideal.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

No response

Package version

v3.0.11

React version

v18.0.0

Description

When I use the Tabs component, I can not find it by findTabs() method, it always return null.

I add Tabs as the content in Container, I can findHeader, findActions, findDescription, but can not findTabs()

Source code

<Container
    header={
        <Header
          variant="h2"
          description="Container description"
          actions={
            <SpaceBetween
              direction="horizontal"
              size="xs"
            >
              <Button>Action</Button>
              <Button>Another action</Button>
            </SpaceBetween>
          }
>
    <Tabs
        tabs={[
            {
                label: "HOME",
                id: "home",
                content: "home page"
            },
            {
                label: "feedback",
                id: "feedback",
                content: "feedback",
            },
            {
                label: "setting",
                id: "setting",
                content: "setting",
            }
        ]}
    />
</Container>

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Browser

Chrome

Package version

3.0.1

React version

18.2.0

Description

I am using a Table component with a variant set to "full-page". I am using react-router to route to a detail page and I notice the dynamicOverlapHeight is retained when the detail page loads (--awsui-overlap-height-ujkcpl is present in

Table uses an InternalContainer which appears to be the culprit: https://github.com/cloudscape-design/components/blob/main/src/container/internal.tsx#L59

I haven't tested but I assume to fix this we should change the layout callback as follows:

useLayoutEffect(
    function handleDynamicOverlapHeight() {
      if (hasDynamicHeight) {
        setDynamicOverlapHeight(overlapContainerQuery ?? 0);
      }
      return () => setDynamicOverlapHeight(0);
    },
    [hasDynamicHeight, overlapContainerQuery, setDynamicOverlapHeight]
  );

This should work as this code only overrides the offset if it is > 0:

Source code

N/A

Reproduction

• Create a table with full-page variant.
• Add a link from the table to a new page using something like react-router.
• The new page will preserve the offset set by the previous page which is not correct.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Browser

No response

Package version

v3.0.95

React version

v17.0.2

Description

Hello !
I have such a situation : I have a table with an horizontal scrollbar, a split panel which appears and disappears on selecting and deselecting an item in table (using multi select to achive single selection like behaviur). In this scenario, if I select item in table -> split panel appears -> horizontal scrollbar of table is being pushed up to the split-panel,

and after I deselect item in table -> split panel disappear -> and scrollbar position is not reset, but is kept were it was

In the sample split planel is opened/closed(appear/dissapear) on clicking button.

Source code

No response

Reproduction

https://codesandbox.io/s/intelligent-volhard-skggs2?file=/src/App.tsx

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

I'd like to be able to enforce that AutoSuggest components require one of the suggested items rather than customers being able to enter a plaintext field through the enteredTextLabel.

I find it much better to use than a select component for quickly iterating though form inputs but being able to enter plaintext inhibits the usage.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

The current text style for selected options in multiselect is too close to the placeholder text style in other form inputs.
Example below. Changing it to something what a filled input value looks like will make it more clearer.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

Chrome

Package version

vr3

React version

18

Description

Blocker

Looking to use Cloudscape CodeEditor and implement simple autocompletion and completion keywords and snippets. This is easily illustrated by using ace editor here

• CodeEditor API states that 'The code editor component relies on the Ace library'

TL;DR

• CodeEditor doesn't seem to expose enableBasicAutocompletion for keywords and snippets where as React Ace does.
• CodeEditor simply wraps Ace

Simply put, please reinstate / enable the enableBasicAutocompletion

Alternate Solution

• Use React Ace directly from Cloud9

Source code

let editor = ace.edit('editor');
editor.setValue(`# Start Typing Your YAML Here\n`);
editor.setOptions({
  enableBasicAutocompletion: [{ // <-- This capability is shut off in <CodeEditor>
    getCompletions: (editor, session, pos, prefix, callback) => {
      callback(null, [
        {value: 'Actions:', score: 1, meta: 'Actions'},
        {caption: 'Triggers:', type: 'snippet',  meta: 'Add Triggers Snippet', snippet:`
Triggers:
  - Type: \${1:type}
    Branches:
      - \${2:branch}`},
        {value: 'Triggers:', score: 1, meta: 'Triggers'},
        {value: 'Identifier:', score: 1, meta: 'Identifier'},
        {value: 'OutputArtifacts:', score: 1, meta: 'OutputArtifacts'},
        {value: 'Configuration:', score: 1, meta: 'Configuration'},
        {value: 'Environment:', score: 1, meta: 'Environment'},
        {value: 'Branch:', score: 1, meta: 'Branch'},
        {value: 'Push', score: 1, meta: 'Push'},
        {value: 'Pull', score: 1, meta: 'Pull'},        
      ]);
    },
  }],
  // to make popup appear automatically, without explicit _ctrl+space_
  enableLiveAutocompletion: true,
});

Reproduction

See above

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

I noticed that the type of Input used in Autosuggest is visualSearch and cannot be changed. Exposing it via a prop would make it a more flexible component without needing breaking changes as 'visualSearch' can still be used as default
My use case is that I do not need the search icon on the left side of the input

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

Chrome, Safari, Firefox

Package version

3.0.22

React version

18.2.0

Description

The style is wrong in the free text search.
I haven't checked Edge, but it's probably the same.

Detail:

It may not be a bug, but simply an unintended use.
But if that is the case, it should be mandatory to specify the choice of each property value in filteringOptions.

Source code

No response

Reproduction

https://codesandbox.io/s/cloudscape-property-fileter-freetext-style-bug-hvmzg6?file=/src/App.js

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Browser

No response

Package version

^3.0.95

React version

^17.0.2

Description

Hi 👋 ,

I have a Table component with an onRowClick. The table has a cell that renders a Link component with an onFollow handler attached to it.

I need to trigger onRowClick only when user clicked on the cell, or outside cell, but it should NOT trigger when user clicked on the Link

event.preventDefault() from the onFollow does not help much.

Is that even possible ? (to have onFollow event to cancel onRowClick)

Thanks

Source code

No response

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

Explain how we can use the "ace" object of the Code Editor component when the application was created using create react app.

Would be nice to have for people that doesn't interact with webpack a lot.

Tried to follow this guide:

https://cloudscape.design/components/code-editor/?tabId=api

Using create-react-app with no success

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

like this https://ant.design/docs/react/i18n

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

Chrome

Package version

v3.0.0

React version

v18.0

Description

This is a test

Source code

No response

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

Hello !
A Table component with selectionType="single" doesn't support unselect item like selectionType="multi".
Example:

1. Select item.
2. Try to unselect -> nothin happens.(onSelectionChange is not triggered by trying to unselect item)

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

Cards are only selected if users click the small radio button / checkbox in the upper-right hand corner.

Allowing users to click anywhere on the card would be more user friendly. It would also increase discoverability of the ability to select cards as the cursor would change to a pointer whenever the user hovers over a card.

Ideally, there would also be an option to override this behaviour with a custom click handler.

Note that the Tiles component already supports click-anywhere behaviour, and so extending this change to Cards would also improve consistency.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

Adding a hyperlink to Amazon Web Services (AWS) for quality of life.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

Hey Gang- Love the overall offering to the community; it's terrific. Since my design skills are not great, inquiring here about a standard login which matches with the "internal" pages. Thanks in advance.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

Chrome

Package version

3.0.18

React version

18.2.0

Description

The Popover should display adjacent to the selected element but instead it is placed further left on a zoomed out div and further right on a zoomed in div.

Source code

Description

Current classnames are prefixed with awsui_. For example,

import * as React from "react";
import Box from "@cloudscape-design/components/box";

export default () => {
  return <Box variant="p">text</Box>;
}

will be rendered as

<p class="awsui_root_18wu0_1xtkt_93 awsui_box_18wu0_1xtkt_205 awsui_p-variant_18wu0_1xtkt_205 awsui_color-default_18wu0_1xtkt_205 awsui_font-size-default_18wu0_1xtkt_221 awsui_font-weight-default_18wu0_1xtkt_261">text</p>

As the lib is not called awsui, maybe changing the prefix to something likecloudscape_design or cs_?

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

changing editor configurations should be possible via ace.editor() returned instance (I belive you save it as a ref).

Is there any way to get this instance, or change some editor configurations, like setting the mode to read only ?

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

Chrome

Package version

v3.0.68

React version

v18

Description

The d3-color module provides representations for various color spaces in the browser. Versions prior to 3.1.0 are vulnerable to a Regular expression Denial of Service. This issue has been patched in version 3.1.0. There are no known workarounds.

Cloudscape currently has a transitive dependency on d3-scale -> d3-interpolate -> d3-color.

It would be great if we can upgrade this to > 3.1.0

Source code

https://github.com/cloudscape-design/components/blob/main/package.json#L35

d3-scale has a dependency on d3-color which is the culprit.

Reproduction

N/A

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

I wasn't sure if I missed it, but after reviewing the documentation and the demo pages, I didn't find the source code to the demo pages for each component.

Would it be possible to open source the demo pages so the community would be able to review the example code and how each component is implemented in more detail?

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

Difficult to use Pagination when listing users in AWS Cognito.

Reason:
Some services are not easy to obtain total data counts.
(See detail: https://stackoverflow.com/questions/69316247/aws-cognito-user-pool-total-users-count-and-querying

This is not limited to AWS services, only prev, next information may be provided.
So it would be good to have only PREV, NEXT links.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Discussed in https://github.com/cloudscape-design/components/discussions/14

Browser

No response

Package version

Current

React version

16

Description

Situation

I have a grid layout (2x2) and i would like to include <CodeEditor> in one of my grid-template-areas

Here is a very straight forward of my grid where i have set the 'Ace' Editor to take up the <main> component.

I have found that if i use <CodeEditor> it inline styles height: 480px; as seen here
<div class="awsui_resizable-box_1gl9c_1563r_455 react-resizable" style="height: 480px;">

Source code

Reproduction

CodePen

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Browser

No response

Package version

3.0.13

React version

18.1.0

Description

I'd like to use the onFollow event for the top navigation link to avoid refreshing the full page but it's doesn't allow me to.
I think something must be wrong from typescript?

Source code

No response

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Browser

Chrome

Package version

v3.0.108

React version

17.0.2

Description

I know that SpaceBetween component can not be used with non-element children, per documentation:

This component only supports element children (components or HTML elements). Primitive values will cause React's missing key warning. If you want to put a string or a number as a direct child, wrap it into a .

However, expressions that evaluate to false are not shown by React in any way, yet they result in the following error:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `InternalSpaceBetween`. See https://reactjs.org/link/warning-keys for more information.
    at div
    at InternalSpaceBetween (https://8z2crx.csb.app/node_modules/@cloudscape-design/components/space-between/internal.js:16:15)
    at SpaceBetween (https://8z2crx.csb.app/node_modules/@cloudscape-design/components/space-between/index.js:14:15)
    at App (https://8z2crx.csb.app/src/App.js:28:41)

To avoid this issue, one has to change expression such as:

{showSomeAlert && (
  <Alert>
    Some message.
  </Alert>
)}

into:

{showSomeAlert ? (
  <Alert>
    Some message.
  </Alert>
): null}

which is slightly less concise. Could SpaceBetween component filter out falsey children to avoid this issue?

Source code

See CodeSandbox below.

Reproduction

1. Go to https://codesandbox.io/s/vigilant-lake-8z2crx?file=/src/App.js
2. Remove character from the input and see missing key warning.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

The library does not seem to have a log out icon.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

No response

Package version

3.0.39

React version

No response

Description

I want to create a function and pass Header Variant as well as Table Variant as parameters:

import {TableProps, HeaderProps} from "@cloudscape-design/components";
function createTable(
  headerVariant: HeaderProps.Variant,
  tableVariant: TableProps.Variant,
  ...

Using TableProps.Variant works fine, HeaderProps.Variant results in a type error.
The reason is that table.interfaces.d.ts exports the namespace TableProps, while header/interfaces.d.ts only declares the namespace HeaderProps and doesn't export it.

Source code

No response

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Browser

Chrome

Package version

3.0.10

React version

v18.2.0

Description

I'm trying to implement Cloudscape design in a simple React app. The UI runs fine; however when I run Jest tests I encounter a (import ...) bug. Here are my steps to reproduce the issue.

1. create react app using npx command
2. install cloudscape components using the following guide
3. run npm test
4. get the following error: SyntaxError: Cannot use import statement outside a module
   

I've tried to create babel.config.js and write certain settings, however to no avail. (as recommended by SO)

Any ideas on how to ameliorate this issue?

Source code

https://github.com/adnjoo/cloudscape-test/

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Description

Docs describe a file upload component but it appears this component is not directly available in the library. File upload is non-trivial to implement and the documented example for multiple file upload does not appear to be replicable externally since TokenGroup does not allow for components within Tokens.

Since file uploaders are a common need and consumers currently require additional effort to implement them, I think it would be great if we could have a FileUpload implementation directly available in the library that follows the specification described in the docs.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

Cloudscape currently uses SASS .scss files to build and output CSS files that contain CSS variables. These CSS variables contain random hash strings appended to the end of the name. For example, SASS var $color-red outputs to CSS as--color-red-f921aa).

CSS variables are currently widely supported by all major browser vendors (excluding IE11, which has reached EOL and is not officially supported by Cloudscape). Therefore, SASS is no longer needed to provide developers with variable support for their CSS files. Therefore:

1. Can we remove the SASS dependency to provide developers with direct, native usage of modern CSS variables?
   1. This implicitly removes the auto-generated, randomized 6-digit hex hashes appended to the generated CSS

The randomization of the CSS variable names provides difficulty to developers who wish to use CSS variables natively. Here's an example of the generated CSS variables:

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

I could not find a changelog on the documentation website or anywhere else in the repo. A CHANGELOG.MD would be very helpful.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

For https://cloudscape.design/get-started/integration/using-cloudscape-components/

There should be instructions for nextJS installation to address this issue:

./node_modules/@cloudscape-design/components/alert/styles.scoped.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@cloudscape-design/components/alert/styles.css.js

Along with installing cloudscape library you need to do the following if using NextJS:

• npm install next-transpile-modules
• Update next.config.js file
  • Import next-transpile-modules: const withTranspileModules = require('next-transpile-modules');
  • Add this into the withPlugins declaration at the bottom: [withTranspileModules(['@cloudscape-design/components'])],

Alternatively you can address this: https://nextjs.org/docs/messages/css-npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

I'd like to be able to enforce that AutoSuggest components require one of the suggested items rather than customers being able to enter a plaintext field through the enteredTextLabel.

I find it much better to use than a select component for quickly iterating though form inputs but being able to enter plaintext inhibits the usage.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

I suspect that a careful reading of the documentation would reveal much, but since I can't spare the time to do so, I'm going to
I would like the console to output warnings for things that cannot be covered by the type definitions.

To quickly identify issues such as the following issue.
#168

I think it would be better to make filteringEmpty property mandatory for the 168 issue, since it is reproduced by the "All properties" filter in the Playground of the documentation.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

The visual refresh theme is great but there will be consumers of Cloudspace that require a design system without rounded corners or may need to adjust the size or rounded corners.

Consumers should be able to:

• Globally control rounded corners in the entire system with a single boolean value. It should be set to true by default. Setting the token to false will automatically set all tokens that affect border-radius to 0. Twitter Bootstrap has this feature and it is simple enacted by overriding this scss variable: https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L338
• There should be tokens to adjust rounded corner values. Something like base, small, medium, large, etc. For example, a consumer may want to reduce the roundness of the primary button. Right now the only way to do this is to create a custom class to hack the original qualities of buttons or any other rounded UI element.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Browser

Chrome

Package version

3.0.82

React version

18.0.1

Description

When trying to use AttributeEditor within FormField, I get the following error:

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

The add and remove buttons still work as expected but the text fields won't accept any inputs

Sample Code snippet:

function MyForm() {
    return(
       <Container header={<Header variant="h2">Sample</Header>}>
          <FormField
              label="Inputs"
              description="A field that uses AttributeEditor"
           >
              <AttributeEditor
                   // ...properties
               />
          </FormField>
       </Container>
    )
}

Tried passing an onChange function to AttributeEditor but since the AttributeEditorProps doesn't have an onChange definiton, it wouldn't accept it.

When trying the same using TagEditor it worked with no issues. I had full form control using TagEditor and no errors observed in console.

Is AttributeEditor just not a supported control for FormField? If it is not, will it get support similar to how TagEditor is supported

Source code

No response

Reproduction

https://codesandbox.io/s/frosty-sea-xfglxo

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

Describe the bug

When I procure (copy+paste or import from Figma Assets) a Button from Cloudscape Figma library, the colors fail to transfer. For instance a Blue (primary) button is blue in the library, but changes to dark gray/white when in my Figma document.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

Description

Currently when using the CloudScape Modal component it targets the <body> tag by default when injecting itself into the DOM when visible.

The CloudScape Modal component currently provides an attribute for altering where the Modal DOM nodes are injected through the modalRoot property.

The problem is that although you are able to specify an alternate modal root node, the document <body> tag is still targeted for padding and scroll locking purposes.

When using the Modal component I would expect that if I specify a different modalRoot that the target modal root node would also be the target for scroll locking and padding.

The source of the problem is here: https://github.com/cloudscape-design/components/blob/main/src/modal/body-scroll.ts

Possible Solutions:

1. Pass the modalRoot value into the enableScrolling(), disableScrolling(), etc. functions and default them to the body if a modalRoot isn't provided as a parameter.
2. Create a scrollLock boolean property on the Modal component that allows the user to disable those features (thus preventing document.body alterations).

Backstory:

This problem arose through a project that is implementing micro-frontends using Web Components and Shadow DOM to wrap multiple React applications. The Modal window nodes must be rendered inside of the web component in order to receive styles and to prevent them from leaking out into the global scope. By using the modalRoot property I was able to change where the modal would render and it fixed our issue. However, CloudScape is modifying the document body which is unacceptable for a micro-frontend use case as it is modifying an item within the global application scope. Everything the micro-frontend application does needs to be limited to the scope of the shadow root of the web component.

Screenshot:

This screenshot illustrates how the modal DOM nodes are being applied inside of my web component shadow DOM using the modalRoot prop of the Modal, however, when the modal is opened, styles and classes for scroll locking are applied to the document body.

Reproduced Issue Code:

https://codesandbox.io/s/modalrootdemo-hlz2j8

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests