v11 Beta 2 #9723
Replies: 26 comments 20 replies
-
|
Unable to get the |
Beta Was this translation helpful? Give feedback.
-
|
It's hard to know what the "new token" to use is when trying to build something out (e.g. what is link-01 now supposed to be) |
Beta Was this translation helpful? Give feedback.
-
|
The fonts in dark mode seem too thin, this could be related to text rendering
|
Beta Was this translation helpful? Give feedback.
-
|
I miss the "auto span" columns from flexbox 😞 |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, it's a big change. We could always try to reimplement the auto span behavior. Grid could be modified to apply props to children columns that aren't given any |
Beta Was this translation helpful? Give feedback.
-
|
If it is not supported, please remove it from the documentation. I was a bit confused by the result ;) |
Beta Was this translation helpful? Give feedback.
-
|
We should make sure to include a solid snippet that people can bring in so they don't have to worry about how to import things from styles |
Beta Was this translation helpful? Give feedback.
-
|
@jnm2377 brought up a great point that we should make more "starter" or "sample apps" that show how to use different parts of Carbon @theiliad brought up dashboard as a great example for this |
Beta Was this translation helpful? Give feedback.
-
|
It looks like any component that uses list box under the hood |
Beta Was this translation helpful? Give feedback.
-
|
My unfamiliarity with sass module namespaces tripped me up. When all the styles are brought in at once, the namespace is automatically the ending name of the package. I didn't know this! // ❌ does not work
@use "@carbon/react";
main {
background: $background;
}
// ❌ does not work
@use "@carbon/react";
main {
background: theme.$background;
}
// ✅ works! (namespace automatically inferred from package name)
@use "@carbon/react";
main {
background: react.$background;
}
// ✅ also works!
@use "@carbon/react" as carbon;
main {
background: carbon.$background;
}
// ✅ also also works!
@use "@carbon/react" as *;
main {
background: $background;
} |
Beta Was this translation helpful? Give feedback.
-
|
I tried to use This should be fixed by #9728 🎉 |
Beta Was this translation helpful? Give feedback.
-
|
We should lift the usage of Carbon Styles for the components and surface them in the website docs. When I imported button, I was tripped up on why there were no styles. Until i went and found this |
Beta Was this translation helpful? Give feedback.
-
|
maybe a JS util that shows a message when styles aren't present... in the console? |
Beta Was this translation helpful? Give feedback.
-
|
It seems that the subgrid logic breaks when one uses column offsets. Tested with <Grid>
<Column sm={4} md={{ span: 6, offset: 1 }} lg={{ span: 8, offset: 1 }}>
Full
<Grid>
<Column sm={2} md={3} lg={4}>
Half
</Column>
<Column sm={2} md={3} lg={4}>
Half
</Column>
</Grid>
</Column>
</Grid>I'd expect the above code to always show two columns next to each other with equal widths.
|
Beta Was this translation helpful? Give feedback.
-
|
cc @tay1orjones |
Beta Was this translation helpful? Give feedback.
-
|
I wasn't really able to apply the inline-theming by using the
I'm not sure if my setup is wrong or I missed something... |
Beta Was this translation helpful? Give feedback.
-
|
When using the CSS-Grid the breakpoint definitions were a bit confusing to me, because I was used to the v10 ones. Currently you have to define all break points otherwise its hard to predict how they behave (based on the documentation). Only
|
Beta Was this translation helpful? Give feedback.
-
|
In order to setup a @use '@carbon/styles/scss/compat/themes' as compat;
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
$fallback: themes.$g100,
$theme: compat.$g100,
);
@use '@carbon/styles/scss/zone';
@use '@carbon/styles';
:root {
@include theme.theme(themes.$g100);
}
body {
background-color: theme.$background;
color: theme.$text-primary;
}This seems a bit complicated to me (maybe a helper function could solve that), because before it were 1-2 lines of scss. Related to this: when using Carbon I always have to write some code to have |
Beta Was this translation helpful? Give feedback.
-
|
@ConradSchmidt great points, I think after we update our component files to not use the compat entrypoint it will be simpler. It will also be helpful, I think, to make it clear what you can configure in each import. For example, it'd be great to just do: @use '@carbon/styles/scss/themes';
@use '@carbon/styles' with (
theme: themes.$g100,
);Or even more simply: @use '@carbon/styles' with (
theme: g100,
); |
Beta Was this translation helpful? Give feedback.
-
|
In this case, the colors are inherited from the scss applied to |
Beta Was this translation helpful? Give feedback.
-
|
I also have a general question, although it might be better posed to the charts team: are there any recommendations for using |
Beta Was this translation helpful? Give feedback.
-
|
Currently in the process of digesting the updates and deciding how we can move these into Carbon Charts as well. Could be something that we release in Q4, possibly... |
Beta Was this translation helpful? Give feedback.
-
|
The CSS-Grid and Sub-Grid is one of best features I see with Carbon V11 - it finally unifies Design and Dev on a "global" gird. This is one of the most asked question I got from development and it can be now implemented easily. Good job!
|
Beta Was this translation helpful? Give feedback.
-
|
I'm having an issue with the React components prefix. This is in a Next.js app. In development mode, everything works correctly and This is after running the typical
|
Beta Was this translation helpful? Give feedback.
-
|
Both right now, although it started after I tried deploying to production. |
Beta Was this translation helpful? Give feedback.
-
|
After much frustration I've resolved my issue. Installing My recommendations are:
Finally: I don't know enough about how NPM manages dependency resolution to diagnose this behavior further, but it seems odd to me that Hopefully some of this can help you out @mattrosno. |
Beta Was this translation helpful? Give feedback.
-
|
@jdharvey-ibm and I ended up creating a #!/bin/sh
sed -i.bak "s/prefix: 'bx',/prefix: 'cds',/" "./node_modules/carbon-components/es/globals/js/settings.js"
exit 0Of which we call in the Next's package.json scripts: "scripts": {
"build": "npm run build:fix-v11 && next build",
"build:fix-v11": "sh ./fix-v11-carbon-prefix.sh",
"start": "next start",
}, |
Beta Was this translation helpful? Give feedback.
-
|
For those working in Windows shops, here's a PowerShell script to accomplish the same task: foreach ($file in Get-ChildItem -Path 'node_modules' -Filter 'settings.js' -Recurse -File){
(Get-Content $file.FullName) -replace 'prefix: ''bx''','prefix: ''cds''' | Set-Content -Path $file.FullName
Write-Host "> Touched $($file.FullName)"
}(After updating @carbon/react, @carbon/react-charts, etc this morning, I was seeing |
Beta Was this translation helpful? Give feedback.
-
|
We've opened an issue for this one, #10118 |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I'm testing vite, react and @carbon/react v0.7.0 Fonts aren't loading for me: Startup time is super fast compared to v10, that's appreciated 😃 |
Beta Was this translation helpful? Give feedback.
-
We'll take a look at this with our timeline and see if it's reasonable!
How are you currently bundling your project? It seems like the |
Beta Was this translation helpful? Give feedback.
-
|
I was bundling it with a simple |
Beta Was this translation helpful? Give feedback.
-
|
Packages: Usage: <Grid as="main" className={styles.main} id="main-content">
<Column className={styles.inner} sm={4} md={8} lg={16}>
{children}
</Column>
</Grid>Environment: when running this Next.js app in development mode, the
But when doing a Next.js production build, that classname is now
Any idea why? |
Beta Was this translation helpful? Give feedback.
-
|
I fixed by importing the unstable component and wrapping my application in it.
function App({ Component, pageProps }) {
return (
<FeatureFlags flags={{ 'enable-css-grid': true }}>
<LayoutProvider>
<Layout>
<DefaultSeo {...defaultSeo} />
<Component {...pageProps} />
</Layout>
</LayoutProvider>
</FeatureFlags>
)
} |
Beta Was this translation helpful? Give feedback.
-
|
@mattrosno I think something is causing the |
Beta Was this translation helpful? Give feedback.
-
|
Sorry I haven't been too plugged into the v11 beta testing. One of the things that came up in regards to tagging/tracking in a recent Carbon Steering Committee meeting is introducing a practice of stable selectors, possibly in Carbon v11 or even introduce in v10 since it's largely additive. Here's some light documentation on it within We also have documentation on available stable selectors within the documentation of each component in Storybook: Usages for this are for multiple teams, including QA testers, our data scientists use it tremendously in their various campaigns and analytics tracking, and even Dev Tools uses it for easily tracking component usage on the page. It's much more reliable than searching for classes, and especially traversing the DOM for various purposes. It's a practice I've been using for well over a decade across multiple projects/applications, and is actually standard practice in the agency I was at before IBM (which is a large global agency). |
Beta Was this translation helpful? Give feedback.
-
|
Feedback from release partners: include the compatibility paths in our migration guide for things like design tokens |
Beta Was this translation helpful? Give feedback.
-
|
Using <InlineNotification className={styles.notification} kind="info" lowContrast>
Default filters have been pre-selected based on commonly used components. If you clear filters to explore, you may reset them easily.
</InlineNotification>In Next.js develop mode, it renders as expected. See left. In Next.js production mode, there's a new Where did this new "title" element come from? Is there another feature flag-related bug?
Additionally, if you look at the <Search
id="catalog-search"
labelText="Search component index by name, keyword, or domain"
placeholder="Component name, keyword, domain"
value={query}
onChange={handleOnChange}
size="lg"
/>In develop mode (left) it's using an
Lastly, is there a chance that the <Dropdown
id="catalog-sort"
light
className={styles.dropdown}
initialSelectedItem={sort}
items={sortOptions}
onChange={({ selectedItem }) => {
onSort(selectedItem)
}}
type="inline"
titleText="Sort by:"
label="A-Z"
size="lg"
/>If you look in the right of this image, the div is missing
|
Beta Was this translation helpful? Give feedback.
-
|
Hello, I try to migrate to carbon design system v11 from v10 but I'm using typescript. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Hi there! 👋 Unfortunately, TypeScript support is not available at the moment for Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
Checking in again, and also want to throw my support in for Typescript! Is typescript available? |
Beta Was this translation helpful? Give feedback.
-
|
@br4e Up-to-date information is in #10752 - We'll soon be kicking off a community effort to add typescript types for all components. |
Beta Was this translation helpful? Give feedback.
-
Have you tried out the v11 Beta 2 release and have any feedback? We'd love to hear it! From issues that you might have run into to questions you might have, feel free to post anything release-related here.
Thanks so much for your help! We really appreciate it 🙏
Beta Was this translation helpful? Give feedback.
All reactions