I'm trying to use carbon design system V11 (https://www.npmjs.com/package/#carbon/react) with React (app started using create-react-app) and I am unable to figure out how to customize separate tokens for global theme overrides.
So far in App.scss I'm defining the global theme with
#use '#carbon/react/scss/themes';
#use '#carbon/react/scss/theme' with (
$theme: themes.$g100,
);
#use '#carbon/react';
This works, the theme is set to g100.
From here I'd like to change $interactive-01 or $button-primary token so that it applies to the whole theme.
It's completely unclear from documentation how to do that, although documentation here specifies that per token overrides are possible (https://v11.carbondesignsystem.com/guidelines/themes/overview/#customizing-a-theme)
I'm assuming I am having trouble because documentation is not React specific.
If someone ran into this and knows the answer, any help would be appreciated!
Thanks.
See this example here / docs
#use '#carbon/react/scss/components/button/tokens' as button-tokens with (
$button-primary: #f00
);
Related
I use i18n (react-i18next) in my react js application. Translation with language chooser etc works absolutly fine.
But now I want to change some texts programmatically on demand.
I tried this:
i18n.t('clinical:sde.export.studyTitle', {lng: "en"})
and
i18n.t('clinical:sde.export.studyTitle', {"en"})
It always returns the german string from current setting and not the "on demand" english text. Is there a solution to solve this?
Thanks in advance.
Your code should work, you need to check that the dynamic language is loaded (this what i18n.changeLanguage does).
I've made a simple test, and it works.
https://codesandbox.io/s/react-i18next-example-forked-ueng1?file=/src/app.js
I am trying to draw a graph from my ontology which is in RDF format.I am following "https://github.com/scienceai/jsonld-vis" repositry to develop.I am getting error when trying to replicate the above github code.I am adding my code for the aobve implemetation HERE
I came across many comments saying above github repositry works.But i am not to figure it out. Please help
d3.jsonldVis(mockData, '#graph', {
w: 800,
h: 600,
maxLabelWidth: 250,
tipClassName: 'tip-class'
});
If there are any other libraries i can use to implement the above in angularjs,javascript environment please mention.
I'm not sure if this is to be answered but anyway with minor changes the example can be reproduced:
Minor Changes:
The MAIN code to initiate jsonld-vis index.js wasn't being included
CSS included as a script??? Probably a mistake. Added a link tag to include it.
The library is based on d3 version 3 and you were trying to include the latest (i.e. v5.6)
You don't need to use the import statements here. Read more about import here or here
Fork: https://plnkr.co/edit/KkNHWQa0xxiotB4tN7Ru?p=preview
Suggestions? d3 Collapsible Tree is a great viz that you can refer to and customize as per your requirements.
I have an object that contains content for a page, I import it and try to use it like you'd use any object variable:
import {Variable} from 'data'
const message = defineMessages({
message: {
id: 'component.title',
defaultMessage: Variable.title
}
})
However, I get React Intl] Messages must be statically evaluate-able for extraction.. I googled a lot and found no solution to this. I'm using babel-plugin-react-intl to generate the locale files, and a contributor said that Babel can only parse simple statically messages
It's hard to believe there's no way to be able to import content from another file and have it translated. There must be a way, I couldn't come up with a solution and help would be appreciated.
I struggled with the same problem by myself. As far as I know, there's no way to translate a content of a variable in react-intl.
If you're interested in alternative solutions, I wrote jsLingui i18n library and recently just added support for noop translations, which is exactly what you're looking for.
I am creating a SCSS for a component, and looking at ExtJS SCSS I find in Base.scss that a lot of variables (if not all) are defined as:
$form-field-empty-color: dynamic(gray);
$form-field-border-color: dynamic($neutral-color);
$form-field-border-width: dynamic(1px);
$form-field-border-style: dynamic(solid);
...
What is that dynamic function? My fu skill in search seems not to be the at the needed level :C
Thanks!
Ext uses Fashion, which is an extension of SASS. See: https://docs.sencha.com/cmd/guides/fashion.html
It's somewhat similar to !default in SASS, but it defers computation until all variables are known.
If I try to define a textalign with justify value in reactjs native, I get the error message that only four values are supported: auto, left, right, center. Is it possible to work around this, and define textalign with justify? Below is the sample code:
var styleTest = StyleSheet.create({
title: {
fontSize : 20,
color : 'rgb(0,0,255)',
textAlign: "justify"
}
});
Just to clarify, I see this when trying out reactjs native for ios, not in reactjs.
The above error happens when calling StyleSheet.create method which calls StyleSheetValidation.validateStyle method. I guess in order to create a non-supported CSS property, I have to do a workaround and call CSS directly. I am curious how to go about including other stylesheet properties that are not supported, in a simple way. I couldn't find documentation on this. Pointers will be very much appreciated.
I have to do a workaround and call CSS directly
It's not actually CSS, it's a description of how it should look using the terms you know from CSS. The actual implementation does a bunch of math and then conveys it to UIKit in a way it understands, similar to how browsers implement CSS.
This has been done from scratch for react-native. It's not using an existing css engine.
I am curious how to go about including other stylesheet properties that are not supported, in a simple way
As you may have guessed by the words 'math' and 'UIKit', there's no simple way to do this, and absolutely no way to do it without modifying the objc code.
I suggest creating an issue or sending a pull request if it's missing something. Not all of CSS will be supported.
Disclaimer: Minimal iOS/react-native experience, I don't know what's required to add text justification. It may be simple.