nulogy / design-system Goto Github PK

View Code? Open in Web Editor NEW

64.0 14.0 13.0 60.16 MB

Nulogy Design System

Home Page: http://nulogy.design

License: MIT License

JavaScript 5.45% HTML 0.04% TypeScript 94.45% Handlebars 0.07%

design-system react javascript css styleguide tokens styled-components

design-system's Introduction

@nulogy/components

Built with React, components make it easy to create interfaces that conform to the principles of the Nulogy Design System.

📦 Installation

1. Add the package

Peer dependencies

@nulogy/components relies on React, ReactDOM and Styled Components. You will need to add these to your projects dependencies if they are not there already.

To add Styled Components: yarn add styled-components@^5.0.0

Please check that you are using versions that match the peerDependencies listed in the components/package.json.

2. Add fonts

Add IBM Plex Sans and IBM Plex Mono to your application, however you prefer to load assets. An example using Google Fonts is shown below.

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,600" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet" />

If your application supports Simplified Chinese, you'll also need to load Noto Sans SC.

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet" />

Note that loading fonts from Google API is just an example and not the most performant way to load fonts for your application. You'll most likely want to include the font's inside your existing asset pipeline.

2. Wrap your application in our theme provider

Wrap your application in the NDSProvider component to access Nulogy's theme values and add typographic defaults.

import React from "react";
import { NDSProvider } from "@nulogy/components";

class App extends React.Component {
  render() {
    return <NDSProvider>// your application</NDSProvider>;
  }
}

3. Import desired components

import { Button } from "@nulogy/components";

const SomeView = () => <Button>Click me</Button>;

✨ Usage

See nulogy.design for instructions on how best to use each component
See the Storybook for usage examples

🌎 Localization

A locale prop can be passed to <NDSProvider /> to change the language of aria-labels and strings inside our components. See the Localization Guide for the full list of supported languages and their codes.

⚠️ Testing components

See the Testing Guide for information on how to test NDS components inside of your application.

🎨 UI Kit

Designers can use NDS in Sketch by downloading the UI Kit. See the Designers' Getting Started Guide for more details.

📚 Documentation

Component documentation and usage guides are stored in the github.com/nulogy/nulogy.design repository.

👋 Work requests

If you encounter a bug, need a new component or new capability of an existing component, or need any other type of support please file a work request in GitHub Issues. To learn more about how to file a request and what to expect please read How to file NDS work request.

#design-system

🙌 Contributing

Please see Contributing.MD if you work at Nulogy and would like to contribute.

💬 Questions

#design-system

📦 Related Packages

The design-system is a collection of related packages. If you're looking for more packages, see below.

Package	Description
@nulogy/css	CSS components and utility classes for adding new styles to non-React applications
@nulogy/icons	A selection of Material Icon `svgs` used by Nulogy applications
@nulogy/tokens	Design language styles (e.g colours, type, spacing, shadows, etc.)

design-system's People

Contributors

Stargazers

Watchers

Forkers

markshawtoronto jonerikdsuero johntayl johnnulogy arturopie thedemodev agtlucas mattfelten thaiphan cyrke matthewlyle lanulogy jherdman

design-system's Issues

Test 3 - Feature Request

Is your feature request related to a problem? If so, please describe.

No response

Is your team blocked from moving forward by the lack of this functionality/behaviour?

No response

Do you have an alternative solution for the problem?

No response

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Screenshots

No response

Additional context

No response

[Feature Request]: Test 4 feature request

Is your feature request related to a problem? If so, please describe.

No response

Is your team blocked from moving forward by the lack of this functionality/behaviour?

No response

Do you have an alternative solution for the problem?

No response

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Screenshots

No response

Additional context

No response

Remove the "No options" in the AsyncSelect when the user haven't typed yet

Is your feature request related to a problem? If so, please describe.

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.

Is your team blocked from moving forward by the lack of this functionality/behaviour?

We are not blocked

Do you have an alternative solution for the problem?

Remove the "No options" in the initial state of the component, and only show it when there are actually no results.

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

When do you need this by?

Anytime

Helpful resources

No response

Additional context

No response

Fix the documentation site

Describe the bug

We are unable to build the current documentation website due to outdated dependencies and a mismatch between the Node versions.

Steps to reproduce

Open a PR in documentation site repo
Build fails

Expected behaviour

Open a PR in documentation site repo
Build succeeds

Is your team blocked from moving forward by the bug?

Yes, this is blocking

Who would you like to fix the bug?

Myself
DesignOps

When do you need this by?

No response

Helpful resources

No response

Additional context

No response

The ColumnType has dataKey masked optional and it's used as `key` for columns

Describe the bug

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 };

Steps to reproduce

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>
  );
}

Expected behaviour

No warnings are displayed in the browser console regarding empty key

Is your team blocked from moving forward by the bug?

Who would you like to fix the bug?

Myself
DesignOps

Helpful resources

No response

Additional context

No response

Add new DateRange component

Is your feature request related to a problem? If so, please describe.

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:

State can be managed directly - and is controlled via datetime vs dates and times separately
Styling does not require weird workarounds like this: eco example
[Nice to have] The component's localization can be managed via props

Is your team blocked from moving forward by the lack of this functionality/behaviour?

No, this is just a nice-to-have.

Do you have an alternative solution for the problem?

CN1 is currently using the datetime-local input, example here.

The calendar "picker" does not show up in any non-chromium browsers like Firefox.
It is not possible to set the localization of the component, it will always be set to the User's local time. It would be nice if we could control this and set it to UTC.

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

When do you need this by?

No timeframe

Helpful resources

No response

Additional context

CN1 ticket for this issue: https://nulogy-go.atlassian.net/browse/CN1-3783

Security problem in `plop` library

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" }

https://www.npmjs.com/advisories/1164

Upgrade styled-components to version 6

Please describe your request

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.

Is your team blocked from moving forward by the problem described above?

No response

Additional context

No response

Test feature request

Is your feature request related to a problem? If so, please describe.

Yes

Is your team blocked from moving forward by the lack of this functionality/behaviour?

Do you have an alternative solution for the problem?

No response

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Screenshots

Additional context

Nothing to add

Scroll to the top after pagination

Is your feature request related to a problem? If so, please describe.

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.`

Is your team blocked from moving forward by the lack of this functionality/behaviour?

We are not blocked.

Do you have an alternative solution for the problem?

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

When do you need this by?

Anytime

Helpful resources

No response

Additional context

No response

Test 01

Describe the bug

No response

Steps to reproduce

No response

Expected behaviour

No response

Is your team blocked from moving forward by the bug?

No response

Who would you like to fix the bug?

Myself
DesignOps

Helpful resources

No response

Additional context

No response

Add support for showTimeSelect attribute to NDS DatePicker

Is your feature request related to a problem? If so, please describe.

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.

Is your team blocked from moving forward by the lack of this functionality/behaviour?

SF2 is not blocked, because we're just using ReactDatePicker directly.

Do you have an alternative solution for the problem?

No response

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

When do you need this by?

No rush

Helpful resources

No response

Additional context

No response

Test 2

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.

TEST 4

Describe the bug

A clear and concise description of what the bug is.

Steps to Reproduce

Description of steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

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?

Myself
DesignOps (is subject to availability / check current estimate completion time)

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

Adding description and different widths to Sidebar component

Is your feature request related to a problem? If so, please describe.

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.

Is your team blocked from moving forward by the lack of this functionality/behaviour?

No. The team can default to an alternative solution that would provide inferior UX.

Do you have an alternative solution for the problem?

An alternative to this is using existing capabilities of the component that provide an acceptable (but inferior) experience.

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Helpful resources

For design specs please follow Figma UI kit.
More info available in Jira ticket.

Additional context

Regarding component width, Hiba is looking into additional widths, so the widths may need to be updated soon.

Test 5

Describe the bug

A clear and concise description of what the bug is.

Steps to Reproduce

Description of steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

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?

Myself
DesignOps (is subject to availability / check current estimate completion time)

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

Add a clear button to the Select and AsyncSelect components

Is your feature request related to a problem? If so, please describe.

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.

Is your team blocked from moving forward by the lack of this functionality/behaviour?

Yes, we need this feature for an upcoming work

Do you have an alternative solution for the problem?

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

When do you need this by?

Next week

Helpful resources

No response

Additional context

No response

Toggle control bounces up/down when its location on page shifts up/down

Describe the bug

Toggle control bounces up/down when its location on page shifts up/down

Steps to reproduce

In SF -> Material Ordering -> Settings sidepanel
Toggle the "Apply reject rate" setting on/off
Notice the animation that occurs within the toggle. This is caused by the text shifting up/down in position

Expected behaviour

The toggle should shouldn't bounce vertically.

Is your team blocked from moving forward by the bug?

Who would you like to fix the bug?

Myself
DesignOps

When do you need this by?

As soon as reasonably possible

Helpful resources

Toggle.bounce.mov

Additional context

No response

RadioGroup event does not contain the original value of its child Radio input

Describe the bug

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.

Steps to reproduce

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>

Expected behaviour

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>

Is your team blocked from moving forward by the bug?

No we're not blocked.

Who would you like to fix the bug?

Myself
DesignOps

Screenshots

No response

Additional context

No response

Test 3

Describe the bug

A clear and concise description of what the bug is.

Steps to Reproduce

Description of steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

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?

Myself
DesignOps (is subject to availability / check current estimate completion time)

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

The Navbar is missing an app switcher, dropdown menu for more items, and a more customizable user menu

Is your feature request related to a problem? If so, please describe.

The current NDS NavBar is missing a few features that we need in our apps:

An app switcher that allows users to switch between the different apps in the Nulogy Platform
A main menu that is responsive to accommodate more items on a smaller screen
A user menu that can include more rich user information and user actions

Is your team blocked from moving forward by the lack of this functionality/behaviour?

Yes, we are planning to roll out those changes by the end of Q4 2023.

Do you have an alternative solution for the problem?

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Helpful resources

N/A

Additional context

Figma

Enhancement test 2

Is your feature request related to a problem? If so, please describe.

No response

Is your team blocked from moving forward by the lack of this functionality/behaviour?

No response

Do you have an alternative solution for the problem?

No response

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Screenshots

No response

Additional context

No response

Bug test

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

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.

Test 001

Describe the bug

No response

Steps to reproduce

No response

Expected behaviour

No response

Is your team blocked from moving forward by the bug?

No response

Who would you like to fix the bug?

Myself
DesignOps

Screenshots

No response

Additional context

No response

Bug test 1

Describe the bug

A clear and concise description of what the bug is.

Steps to Reproduce

Description of steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

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?

Myself
DesignOps (is subject to availability / check current estimate completion time)

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

Support test 1

Please describe your request

No response

Is your team blocked from moving forward by the problem described above?

No response

Additional context

No response

Test 6

Describe the bug

A clear and concise description of what the bug is.

Steps to Reproduce

Description of steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

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?

Myself
DesignOps (is subject to availability / check current estimate completion time)

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

Test 003

Describe the bug

No response

Steps to reproduce

No response

Expected behaviour

No response

Is your team blocked from moving forward by the bug?

No response

Who would you like to fix the bug?

Myself
DesignOps

Screenshots

No response

Additional context

No response

Feature request test 2

Is your feature request related to a problem? If so, please describe.

No response

Is your team blocked from moving forward by the lack of this functionality/behaviour?

No response

Do you have an alternative solution for the problem?

No response

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Screenshots

No response

Additional context

No response

className registered twice for Heading3

Describe the bug

className registered twice for Headings

Steps to reproduce

Add className to Heading4

<Heading4 className="class-name">{content}</Heading4>

try to find the component in test via component.find(".class-name");

Expected behaviour

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>

Is your team blocked from moving forward by the bug?

No. Our workaround is:

<Heading4 mb="0">
  <span className="class-name">{content}</span>
</Heading4>

Who would you like to fix the bug?

Myself
DesignOps

When do you need this by?

N/A since we have a workaround

Helpful resources

No response

Additional context

No response

Test 7

Describe the bug

A clear and concise description of what the bug is.

Steps to Reproduce

Description of steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

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?

Myself
DesignOps (is subject to availability / check current estimate completion time)

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

Test 002

Is your feature request related to a problem? If so, please describe.

No response

Is your team blocked from moving forward by the lack of this functionality/behaviour?

No response

Do you have an alternative solution for the problem?

No response

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Screenshots

No response

Additional context

No response

[Test]

Is your feature request related to a problem? If so, please describe.

No response

Is your team blocked from moving forward by the lack of this functionality/behaviour?

No response

Do you have an alternative solution for the problem?

No response

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

Screenshots

No response

Additional context

I will start now

Removing underline from default breadcrumb links

Is your feature request related to a problem? If so, please describe.

The styling of breadcrumbs seems to be inconsistent across applications.

Is your team blocked from moving forward by the lack of this functionality/behaviour?

Do you have an alternative solution for the problem?

N/a

Have you consulted and have an alignment with the product designer?

Who would you like to execute this feature?

Myself
DesignOps

When do you need this by?

Anytime

Helpful resources

Related conversation

Additional context

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.

Types from styled-system are not accessible in our apps

Describe the bug

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.

Steps to reproduce

See James's repo here:
https://nu.slack.com/archives/CBAFQ4X7X/p1704385472947029

Expected behaviour

Autocomplete and type checking should work for styled-system props.

Is your team blocked from moving forward by the bug?

No response

Who would you like to fix the bug?

Myself
DesignOps

When do you need this by?

No response

Helpful resources

No response

Additional context

No response

Select component has multiple scrollbars

Describe the bug

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.

Steps to reproduce

Navigate to reactified events page on CPI https://qa-connect.nulogy.net/events
Click on Event Type to scroll through the list
Observe three scroll bars.

This is also the case with Source Tenant field (2 scroll bars on the right)

Expected behaviour

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.

Is your team blocked from moving forward by the bug?

We want to release this behaviour to production, but without these UI bugs ASAP. (next week)

Who would you like to fix the bug?

Myself
DesignOps

When do you need this by?

Dec 11

Helpful resources

No response

Additional context

ensure the feature toggle for events_react_index is enabled
see screenshot attached

The Dropdown menu does not allow conditional rendering of children

Describe the bug

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>

Steps to reproduce

This causes a runtime error

      <DropdownMenu>
        <DropdownButton onClick={handleItemA}>
          {t("Item A")}
        </DropdownButton>

        {allowDeletion && (
          <DropdownButton
            onClick={handleItemB}
          >
            {t("Conditional Item B")}
          </DropdownButton>
        )}
      </DropdownMenu>

Expected behaviour

No response

Is your team blocked from moving forward by the bug?

No we have a workaround described above

Who would you like to fix the bug?

Myself
DesignOps

When do you need this by?

N/A

Helpful resources

No response

Additional context

No response

[Bug]: Bug test 2

Describe the bug

No response

Steps to reproduce

No response

Expected behaviour

No response

Is your team blocked from moving forward by the bug?

No response

Who would you like to fix the bug?

Myself
DesignOps

Screenshots

No response

Additional context

No response