cloudscape-design / components Goto Github PK
View Code? Open in Web Editor NEWReact components for Cloudscape Design System
Home Page: https://cloudscape.design/
License: Apache License 2.0
React components for Cloudscape Design System
Home Page: https://cloudscape.design/
License: Apache License 2.0
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_
?
No response
^3.0.95
^17.0.2
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
No response
No response
No response
3.0.13
18.1.0
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?
No response
No response
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
No response
3.0.39
No response
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.
No response
No response
Originally posted by gethinwebster July 6, 2022
This is a test
Chrome
3.0.1
18.2
Documentation shows a component ContentLayout (https://cloudscape.design/components/content-layout/?tabId=playground), but this is not exported from the package.
No response
attempt to import ContentLayout component into react
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.
No response
v3.0.95
v17.0.2
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.
No response
https://codesandbox.io/s/intelligent-volhard-skggs2?file=/src/App.tsx
name: Figma - Bug Report
about: Report a bug in our Figma library
labels: bug,figma,design
body:
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.
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:
modalRoot
value into the enableScrolling(), disableScrolling(), etc. functions and default them to the body if a modalRoot isn't provided as a parameter.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
Chrome
v3.0.68
v18
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
https://github.com/cloudscape-design/components/blob/main/package.json#L35
d3-scale has a dependency on d3-color which is the culprit.
N/A
Chrome
3.0.10
v18.2.0
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.
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?
https://github.com/adnjoo/cloudscape-test/
No response
Chrome, Safari, Firefox
3.0.22
18.2.0
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.
No response
https://codesandbox.io/s/cloudscape-property-fileter-freetext-style-bug-hvmzg6?file=/src/App.js
No response
Current
No response
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'
No response
No response
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.
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.
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.
Hello !
A Table component with selectionType="single"
doesn't support unselect item like selectionType="multi"
.
Example:
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:
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
next.config.js
file
const withTranspileModules = require('next-transpile-modules');
withPlugins
declaration at the bottom: [withTranspileModules(['@cloudscape-design/components'])],
Alternatively you can address this: https://nextjs.org/docs/messages/css-npm
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.
It appears the ButtonDropdown component only goes one level deep and then the nesting stops, would be great to go deeper.
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" }
]
}
]
like this https://ant.design/docs/react/i18n
Chrome
3.0.1
18.2.0
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
). When the Table (or any component that overrides these settings) unmounts, it should reset all of the default settings in the Layout to baseline.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:
N/A
full-page
variant.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:
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:
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.
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?
Chrome
v3.0.34
v17.0.2
I cannot use onItemClick of menu-dropdown utility on TopNavigation.
※onClick of button utility is no problem, instead.
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',
}}
/>
);
}
No response
Chrome
3.0.18
18.2.0
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.
No response
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?
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
Adding a hyperlink to Amazon Web Services (AWS) for quality of life.
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 ?
The library does not seem to have a log out icon.
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
No response
Current
16
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;">
components/src/code-editor/styles.scss
Line 192 in 6d47c50
components/src/code-editor/styles.scss
Line 192 in 6d47c50
Chrome
v3.0.0
v18.0
This is a test
No response
No response
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.
No response
v3.0.11
v18.0.0
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()
<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>
No response
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.
Chrome
vr3
18
Looking to use Cloudscape CodeEditor and implement simple autocompletion and completion keywords and snippets. This is easily illustrated by using ace editor here
TL;DR
CodeEditor
doesn't seem to expose enableBasicAutocompletion
for keywords and snippets where as React Ace does.CodeEditor
simply wraps AceSimply put, please reinstate / enable the enableBasicAutocompletion
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,
});
See above
I could not find a changelog on the documentation website or anywhere else in the repo. A CHANGELOG.MD would be very helpful.
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
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.
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.
Chrome
v3.0.108
17.0.2
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?
See CodeSandbox below.
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.
Chrome
3.0.82
18.0.1
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
No response
https://codesandbox.io/s/frosty-sea-xfglxo
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.