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.
Related
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
);
I'm trying to implement drag and drop using this tutorial. In this tutorial i have to create a refs like this list = createRef<RecyclerListView<any, any>>() (line no 55), which is giving me syntex error: unexpected token. What i understand is that, they are using .tsx extension (don't know what for) but i'm using .js extension, which maybe the reason why this code not working in my end, and not finding any solution of that. Can anyone help me out on that? Thank you
.tsx extension is for Typescript files. Javascript is not a typed language. To put it simply, Typescript was built to make Javascript look like a typed language. Whatever you put in <> after createRef, specifies the type of the ref that is being created and you can only use types in Typescript files (.ts and .tsx). If you want to move to Typescript, you'll have to do some setup and change your file extensions to .tsx. Otherwise, if you'd like to stay on .js, just ignore the types in the tutorial and instead write list = createRef().
I have many imports for angular components, and it looks like I can write a function to simplify the import. I just don't know how, but this should be simple.
Sample imports:
import {DashboardComponent} from './app/components/dashboard/dashboard.component';
angular.module('app.components').component('dashboard', DashboardComponent);
import {HeaderComponent} from './app/components/header/header.component';
angular.module('app.components').component('header', HeaderComponent);
The function below demonstrates what I want to achieve, however I'm missing two concepts to make it work:
How do I put a variable (name) in the {}?
Can I use an Angular filter in a function like | ucfirst in a JS file?
componentImporter('header');
function componentImporter(name)
{
import {name | ucfirst + 'Component'} from './app/components/'+ name + '/' + name +'.component';
angular.module('app.components').component(name, name | ucfirst + 'Component');
}
Finally an error I run into is:
'import' and 'export' may only appear at the top level
So can this actually ever work?
So can this actually ever work?
Short Answer: No
Long Answer
The error you saw pretty much says it all... imports can't be nested inside conditionals, loops, or other expressions. Here's a great article on ES6 Modules that goes in depth on the subject. Another interesting note, also mentioned in that article, is that imports are hoisted, similar to functions.
How to put a name in the {} and 2) can I use an angular filter in the fuction like | ucfirst in a js file?
From the article:
...the structure of ES6 modules is static
Using a variable in the import would make it dynamic. The bracket syntax you're using can only be written to do a partial import (i.e. Importing named exports from the given module). This is really neat if you're using tree shaking, another article by Dr. Rauschmayer.
Personally I like keeping all my imports at the top of each file making it very easy to see what that particular module is dependent on.
Update
There is now the dynamic import() method. Some bundlers like webpack already support this method natively. This method is what should be used for dynamic importing of modules. Note that "Dynamic Imports" is an umbrella topic that contains a few subtopics including "Code Splitting", "Dynamic Module Expressions", as well as using logic to determine whether a module and its dependencies should be loaded.
I'm building a Drupal 7 type that has two distinct types of page, public ones and ones only shown to authenticated users, with entirely different templates. The choice of which template to use is done in the theme preprocess function.
Each of the two main templates has its own CSS, which needs to be placed in the header in the right place relative to the theme and base CSS. What is the best place to include these CSS files?
I can't add these sheets to the theme .info file, since those are applied to all templates. At the moment I am adding them in the theme preprocess function, but it seems like needless complexity, since the stylesheets are essentially static (all pages with the same template have the same 3 sheets). On the other hand hard-coding them in the template file (e.g. after the normal print $styles) seems like it is "not the drupal way" (tm), and also won't take advantage of CSS compression and caching.
So what is the right way?
you have no best place to insert your css file. You can just use drupal_add_css() anywhere you want. The css will be anyway write in the header.
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.