nulogy / design-system Goto Github PK
View Code? Open in Web Editor NEWNulogy Design System
Home Page: http://nulogy.design
License: MIT License
Nulogy Design System
Home Page: http://nulogy.design
License: MIT License
No response
No response
No response
No response
No response
In the table component or the standalone Pagination component, when changing pages the component should offer to scroll the page back to the top after pagination. This can be done for better UX so the user doesn't have to manually scroll to the top.`
We are not blocked.
No
Anytime
No response
No response
Describe the bug
A clear and concise description of what the bug is.
Steps to Reproduce
Description of steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Is your team blocked from moving forward by the bug?
Is this problem blocking your team from delivering value to the customer? Is the customer impact high? [...]
Who would you like to fix the bug?
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
Describe the bug
A clear and concise description of what the bug is.
Steps to Reproduce
Description of steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Is your team blocked from moving forward by the bug?
Is this problem blocking your team from delivering value to the customer? Is the customer impact high? [...]
Who would you like to fix the bug?
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
No response
No response
No response
No response
I will start now
No response
No response
No response
No response
No response
No response
No response
No response
No response
No response
No response
We used the ReactDatePicker component in PackManager, rather than the DatePicker from NDS, because we needed to use the showTimeSelect
attribute.
See pull request:
https://github.com/nulogy/PackManager/pull/8577/files?w=1#diff-4250fb526ad484447e8865152b6a920b10c0553e168ab8a5f900074d25fc73dcR43
If the NDS DatePicker were updated to support showTimeSelect
, then we'd be happy to switch over to the NDS DatePicker.
SF2 is not blocked, because we're just using ReactDatePicker directly.
No response
No rush
No response
No response
The styling of breadcrumbs seems to be inconsistent across applications.
No
N/a
Anytime
Also, let's update the styling of non-links in breadcrumbs in storybook Link 1 and Link 2. Let's change the colour of non-link items to midGrey.
No response
No response
No response
No response
No response
When using the Select and AsyncSelect in single-select mode, the component does not have a way clearing the currently selected value from the select input. Backspace and escape both do not work.
It would be great if the component offered a way to clear the input with a button.
Yes, we need this feature for an upcoming work
No
Next week
No response
No response
NDS version - 8.15.2
In the /events search page on CPI [https://qa-connect.nulogy.net/events],
if you review the select boxes on the page, ex event type, you will see 3 scroll bars - 2 at the bottom, and 1 on the right.
This is also the case with Source Tenant field (2 scroll bars on the right)
We should see just one on the right, and 1 on the bottom if the select box is not wide enough. We do not see this behaviour on other pages where the Select component spans the full page.
We want to release this behaviour to production, but without these UI bugs ASAP. (next week)
Dec 11
No response
ensure the feature toggle for events_react_index is enabled
see screenshot attached
The BrandedNavBar logo displays outside the bounding box of the navigation bar
Logo should not overlap the bottom of the navigation bar
Not blocking for now, no current customer impact due to feature not being live. Will block releasing this feature in the future.
End of June 2024
Image showing extra padding in logo
DOM/CSS showing tag with .hAW0dB class with padding-top/bottom of 16px
No response
In order to accommodate different types of content(tables, 2/3-column layouts, ...) we would like to have control over the width of the sidebar. Also, we would like to add a description line under the title so that complex concepts can be explained in more detail.
No. The team can default to an alternative solution that would provide inferior UX.
An alternative to this is using existing capabilities of the component that provide an acceptable (but inferior) experience.
For design specs please follow Figma UI kit.
More info available in Jira ticket.
Regarding component width, Hiba is looking into additional widths, so the widths may need to be updated soon.
Describe the bug
A clear and concise description of what the bug is.
Steps to Reproduce
Description of steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Is your team blocked from moving forward by the bug?
Is this problem blocking your team from delivering value to the customer? Is the customer impact high? [...]
Who would you like to fix the bug?
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
No response
No response
No response
Toggle control bounces up/down when its location on page shifts up/down
The toggle should shouldn't bounce vertically.
No
As soon as reasonably possible
No response
I'm trying to upgrade styled-components in Production Scheduling from version 5 to version 6. When I do that, the BrandedNavBar fails. My hypothesis is that the failure is in the NDS code. Would you be able to upgrade styled-components in NDS to version 6? Once that's done, I'm assuming it will resolve my issue.
No response
No response
We are unable to build the current documentation website due to outdated dependencies and a mismatch between the Node versions.
Yes, this is blocking
No response
No response
No response
No response
No response
No response
No response
No response
No response
The existing DateRange component is clunky and requires complex code to manage state and styling, when using both the date and time pickers. Because of this, CN1 has defaulted to using the built-in input of type datetime-local
, which looks like this:
This input is mostly sufficient for our needs, but does depend on the usage of Chrome.
We would like to port MaterialUI's Date Time Range Picker to NDS, as a V2 of the existing DateRange component with the following acceptance criteria:
No, this is just a nice-to-have.
CN1 is currently using the datetime-local
input, example here.
No timeframe
No response
CN1 ticket for this issue: https://nulogy-go.atlassian.net/browse/CN1-3783
The handlebars
library has a security problem, and has released a patch. Looking at our (GO's) dependency tree, handlebars
is used by node-plop
, node-plop
is used by plop
, and plop
is used by NDS.
While we wait for dependencies to release patched versions, we've fixed this in GO for now with a 'resolution' in package.json:
"resolutions": { "**/**/handlebars": ">=4.3.0" }
No response
No response
No response
No response
No response
When using any of the styled-system props in any of our components e.g paddingTop
, TypeScript is unable to type check these props due to them missing from the @nulogy/components
bundle.
See James's repo here:
https://nu.slack.com/archives/CBAFQ4X7X/p1704385472947029
Autocomplete and type checking should work for styled-system props.
No response
No response
No response
No response
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Is your team blocked from moving forward by the bug?
Is this problem blocking your team from delivering value to the customer? Is the customer impact high? [...]
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
No response
No response
No response
No response
No response
No response
className registered twice for Headings
<Heading4 className="class-name">{content}</Heading4>
component.find(".class-name");
Finds the dom node once (but it actually finds it twice)
Actual behaviour:
<h4 class="Text-sc-15glbbx-0 Headings__Heading4-sc-7kwh7g-3 kMFrgD class-name class-name">content</h4>
No. Our workaround is:
<Heading4 mb="0">
<span className="class-name">{content}</span>
</Heading4>
N/A since we have a workaround
No response
No response
No response
No response
No response
No response
No response
When using the RadioGroup
component, the value returned from the onChange
event does not always have the type of the value that was passed in to the Radio
.
Notice how in the onChange event handler we have to parseInt
, since the value returned is a string, whereas the value of any of the Radio inputs inside the group is a number.
<RadioGroup
checkedValue={value}
labelText="My radio buttons"
onChange={(event) => { setValue(parseInt(event.target.value)) }}
>
<Radio value={2} labelText="2 digits" />
<Radio value={4} labelText="4 digits" />
<Radio value={6} labelText="6 digits" />
</RadioGroup>
RadioGroup
should return the same value and type of the value passed to the Radio input
<RadioGroup
checkedValue={value}
labelText="My radio buttons"
onChange={(event) => { setValue(parseInt(event.target.value)) }}
>
<Radio value={2} labelText="2 digits" />
<Radio value={4} labelText="4 digits" />
<Radio value={6} labelText="6 digits" />
</RadioGroup>
No we're not blocked.
No response
No response
Yes
No
No response
Nothing to add
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Is your team blocked from moving forward by the lack of this feature?
Is this problem blocking your team from delivering value to the customer? Is the customer impact high? [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
When no dataKey
is passed a couple of warnings show up in the browser console:
This requires fake dataKey
values to be passed in for columns that do not have a specific data key to read its values from. One example is the actions columns that some tables can have, but another example is a column that implements a custom cellFormatter
and displays a combination of values from multiple fields (e.g. a column that displays actual/expected quantities)
The workaround of using fake datakey
values prevents us from being able to assign Typescript constraints to the Table columns like the following:
type JobsTableColumn = Omit<ColumnType, "dataKey"> & { dataKey?: keyof Job };
function Table() {
const columns = [
{ label: "Date", dataKey: "date" },
{ label: "Actual/Expected Quantity", cellFormatter: QuantityCell },
];
const rowData = [
{
date: "2019-10-01",
expectedQuantity: "2,025 eaches",
actualQuantity: "1,800 eaches",
id: "r1",
},
{
date: "2019-10-02",
expectedQuantity: "2,475 eaches",
actualQuantity: "2,250 eaches",
id: "r2",
},
];
return (
<Table
columns={columns}
rows={rowData}
rowsPerPage={number("Rows per page", 1)}
onPageChange={action("page changed")}
className="Table"
/>
);
}
function QuantityCell({ row }) {
const { actualQuantity, expectedQuantity } = row;
const uom = actualQuantity.value ? actualQuantity.uom.shortLabel : "";
return (
<Text>
{expectedQuantity.value ?? "--"} / {actualQuantity.value ?? "--"} {uom}
</Text>
);
}
No warnings are displayed in the browser console regarding empty key
No
No response
No response
In our app, we need to do this when we have to conditionally render an item inside the DropdownMenu
<DropdownMenu>
<DropdownButton onClick={handleItemA}>
{t("Item A")}
</DropdownButton>
{allowDeletion ? (
<DropdownButton
onClick={handleItemB}
>
{t("Conditional Item B")}
</DropdownButton>
) : (
// We need to do this because of a bug in NDS
<></>
)}
</DropdownMenu>
This causes a runtime error
<DropdownMenu>
<DropdownButton onClick={handleItemA}>
{t("Item A")}
</DropdownButton>
{allowDeletion && (
<DropdownButton
onClick={handleItemB}
>
{t("Conditional Item B")}
</DropdownButton>
)}
</DropdownMenu>
No response
No we have a workaround described above
N/A
No response
No response
Describe the bug
A clear and concise description of what the bug is.
Steps to Reproduce
Description of steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Is your team blocked from moving forward by the bug?
Is this problem blocking your team from delivering value to the customer? Is the customer impact high? [...]
Who would you like to fix the bug?
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
Describe the bug
A clear and concise description of what the bug is.
Steps to Reproduce
Description of steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Is your team blocked from moving forward by the bug?
Is this problem blocking your team from delivering value to the customer? Is the customer impact high? [...]
Who would you like to fix the bug?
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
No response
No response
No response
No response
No response
No response
Describe the bug
A clear and concise description of what the bug is.
Steps to Reproduce
Description of steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Is your team blocked from moving forward by the bug?
Is this problem blocking your team from delivering value to the customer? Is the customer impact high? [...]
Who would you like to fix the bug?
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
The current NDS NavBar is missing a few features that we need in our apps:
Yes, we are planning to roll out those changes by the end of Q4 2023.
No
N/A
When the user clicks on the AsyncSelect
component, they see the options menu containing "No options", when the user types a value only then does the menu options populate. The initial state of the component can cause confusion since the Select has options but they've not been fetched yet.
We are not blocked
Remove the "No options" in the initial state of the component, and only show it when there are actually no results.
Anytime
No response
No response
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.